Romain/rust_leptos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add router

Browse Source
This commit is contained in:
Romulus21
2024-09-02 23:20:37 +02:00
parent abcbc16d24
commit 9bc48ff63d
10 changed files with 190 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1,2 +1,3 @@
Todos.db
target/
style/output.css

2
Cargo.lock generated
View File

@@ -2452,6 +2452,8 @@ dependencies = [
"gloo",
"leptos",
"leptos_actix",
"leptos_meta",
"leptos_router",
"log",
"serde",
"server_fn 0.6.14",

6
Cargo.toml
View File

@@ -16,6 +16,8 @@ console_error_panic_hook = "0.1.7"
serde = { version = "1.0", features = ["derive"] }
futures = "0.3.30"
leptos = { git = "https://github.com/leptos-rs/leptos" }
leptos_router = { git = "https://github.com/leptos-rs/leptos" }
leptos_meta = { git = "https://github.com/leptos-rs/leptos" }
leptos_actix = { git = "https://github.com/leptos-rs/leptos", optional = true }
log = "0.4.22"
simple_logger = "5.0"
@@ -36,6 +38,8 @@ ssr = [
"dep:sqlx",
"leptos/ssr",
"leptos_actix",
"leptos_meta/ssr",
"leptos_router/ssr",
"dep:tokio",
]
@@ -52,7 +56,7 @@ site-root = "target/site"
# Defaults to pkg
site-pkg-dir = "pkg"
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
style-file = "./style.css"
style-file = "style/output.css"
# [Optional] Files in the asset-dir will be copied to the site-root directory
assets-dir = "public"
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.

14
README.md
View File

@@ -3,4 +3,16 @@ source : https://github.com/Oishh/leptos-axum-tailwind-start
wasm-pack build --target=web --debug --no-default-features --features=hydrate
cargo run --no-default-features --features=ssr
npx tailwindcss -i ./input.css -o ./style/output.css --watch
npx tailwindcss -i ./input.css -o ./pkg/output.css --watch
## features
[x] ssr
[ ] MySQL
[x] tailwindcss
[x] router
[ ] deploy
## pages
[ ] liens
[ ] formulaire
[ ] recap capteurs

7
index.html
View File

@@ -1,7 +0,0 @@
<!doctype html>
<html>
<head></head>
<body class="dark:bg-slate-950 text-gray-50">
<div></div>
</body>
</html>

2
rust-toolchain.toml
View File

@@ -1,2 +0,0 @@
[toolchain]
channel = "stable" # test change

154
src/app.rs
View File

@@ -1,157 +1,47 @@
use cfg_if::cfg_if;
use leptos::*;
use crate::values::FormValues;
use crate::todo::TodoApp;
use leptos::prelude::*;
use leptos_meta::*;
use leptos_router::*;
use serde::{Deserialize, Serialize};
pub struct Option {
value: &'static str,
name: &'static str,
topic: &'static str,
}
pub const OPTIONS: &[Option] = &[
Option {
value: "citerne",
name: "Citerne",
topic: "home/citerne/height",
},
Option {
value: "eau",
name: "Eau",
topic: "home/eau/volume",
},
Option {
value: "elec-hight",
name: "Electricité heure pleine",
topic: "home/elec-hight/pleine",
},
Option {
value: "elec-low",
name: "Electricité heure creuse",
topic: "home/elec-low/creuse",
},
];
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
pub struct Value {
id: u16,
service: String,
capteur: String,
type_donnee: String,
donnee: String,
}
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
struct HeftyData {
capteur: String,
value: String,
}
#[cfg(feature = "ssr")]
pub mod ssr {
// use http::{header::SET_COOKIE, HeaderMap, HeaderValue, StatusCode};
use leptos::server_fn::ServerFnError;
use sqlx::{Connection, SqliteConnection};
pub async fn db() -> Result<SqliteConnection, ServerFnError> {
Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
}
}
use leptos_router::{
components::{FlatRoutes, Route, Router},
ParamSegment, SsrMode, StaticSegment,
};
#[component]
pub fn App() -> impl IntoView {
// Provides context that manages stylesheets, titles, meta tags, etc.
provide_meta_context();
let fallback = || view! { "Page not found." }.into_view();
view! {
<Stylesheet id="leptos" href="/pkg/tailwind.css"/>
<Link rel="shortcut icon" type_="image/ico" href="/favicon.ico"/>
<Router>
<nav class="px-2 py-1 flex gap-3">
<nav class="flex gap-5 px-2 py-1 ">
<a href="/">Home</a>
<a href="/formulaire">Formulaire</a>
<a href="/todos">Todos</a>
</nav>
<main class="dark:bg-slate-900 text-gray-50 h-screen">
<Routes>
<Route path="" view= move || view! { <Home/> }/>
<Route path="/formulaire" view= move || view! { <Form/> }/>
</Routes>
<main>
<FlatRoutes fallback>
<Route path=StaticSegment("/") view=Home ssr=SsrMode::Async/>
<Route path=StaticSegment("/formulaire") view=FormValues ssr=SsrMode::Async />
<Route path=StaticSegment("/todos") view=TodoApp ssr=SsrMode::Async />
<Route path=StaticSegment("/*any") view=NotFound ssr=SsrMode::Async/>
</FlatRoutes>
</main>
</Router>
}
}
#[component]
fn Home() -> impl IntoView {
let (count, set_count) = create_signal(0);
pub fn Home() -> impl IntoView {
view! {
<div class="my-0 mx-auto max-w-3xl text-center">
<h2 class="p-6 text-4xl">"Welcome to Leptos with Tailwind"</h2>
<p class="px-10 pb-10 text-left">"Tailwind will scan your Rust files for Tailwind class names and compile them into a CSS file."</p>
<button
class="bg-amber-600 hover:bg-sky-700 px-5 py-3 text-white rounded-lg"
on:click=move |_| set_count.update(|count| *count += 1)
>
"Something's here | "
{move || if count() == 0 {
"Click me!".to_string()
} else {
count().to_string()
}}
" | Some more text"
</button>
</div>
<h1>Home</h1>
}
}
#[component]
fn Form() -> impl IntoView {
let add_value = create_server_action::<AddValue>();
let value = add_value.value();
let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
pub fn NotFound() -> impl IntoView {
view! {
<div class="my-0 mx-auto max-w-3xl text-center">
<h2 class="p-6 text-4xl">"Form"</h2>
<ActionForm action=add_value>
<div>
<label class="block">Capteur</label>
<select name="hefty_arg[capteur]">
{OPTIONS.into_iter()
.map(|option| view! { <option value={option.value}>{option.name}</option>})
.collect::<Vec<_>>()}
</select>
</div>
<div>
<label class="block">Valeur</label>
<input type="text" name="hefty_arg[value]" />
</div>
<div>
<button type="submit">Valider</button>
</div>
</ActionForm>
</div>
}
}
#[server(AddValue, "/api/add-value")]
pub async fn add_value(hefty_arg: HeftyData) -> Result<(), ServerFnError> {
use self::ssr::*;
let mut conn = db().await?;
dbg!(&hefty_arg);
match sqlx::query("INSERT INTO donnees (service, donnee) VALUES ($1, $2)")
.bind(hefty_arg.capteur)
.bind(hefty_arg.value)
.execute(&mut conn)
.await
{
Ok(_) => Ok(()),
Err(e) => Err(ServerFnError::ServerError(e.to_string())),
<h1>Not Found</h1>
}
}

9
src/lib.rs
View File

@@ -1,11 +1,18 @@
pub mod app;
pub mod todo;
pub mod values;
#[cfg(feature = "hydrate")]
#[wasm_bindgen::prelude::wasm_bindgen]
pub fn hydrate() {
use app::App;
use todo::TodoApp;
use crate::app::*;
use crate::todo::*;
use crate::values::*;
console_error_panic_hook::set_once();
_ = console_log::init_with_level(log::Level::Debug);
leptos::mount::hydrate_body(TodoApp);
leptos::mount::hydrate_body(App);
}

36
src/main.rs
View File

@@ -1,23 +1,31 @@
mod todo;
mod values;
#[cfg(feature = "ssr")]
mod ssr {
pub use crate::todo::*;
pub use actix_files::Files;
pub use actix_web::*;
pub use leptos::prelude::*;
pub use leptos_actix::{generate_route_list, LeptosRoutes};
pub use rust_leptos::app::*;
#[get("/style.css")]
pub async fn css() -> impl Responder {
actix_files::NamedFile::open_async("./style.css").await
actix_files::NamedFile::open_async("./style/output.css").await
}
#[get("/favicon.ico")]
pub async fn favicon() -> impl Responder {
actix_files::NamedFile::open_async("./target/site/favicon.ico").await
}
}
#[cfg(feature = "ssr")]
#[actix_web::main]
async fn main() -> std::io::Result<()> {
use self::{ssr::*, todo::ssr::*};
use self::{ssr::*, values::ssr::*};
use leptos_meta::*;
let mut conn = db().await.expect("couldn't connect to DB");
sqlx::migrate!()
@@ -31,37 +39,35 @@ async fn main() -> std::io::Result<()> {
HttpServer::new(move || {
// Generate the list of routes in your Leptos App
let routes = generate_route_list(TodoApp);
let routes = generate_route_list(App);
let leptos_options = &conf.leptos_options;
let site_root = &leptos_options.site_root;
App::new()
.service(css)
.leptos_routes(routes, {
let leptos_options = leptos_options.clone();
move || {
use leptos::prelude::*;
view! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<AutoReload options=leptos_options.clone()/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<Stylesheet href="/pkg/rust_leptos.css"/>
<AutoReload options=leptos_options.clone() />
<HydrationScripts options=leptos_options.clone()/>
<MetaTags/>
</head>
<body>
<TodoApp/>
<body class="dark:bg-slate-900 dark:text-gray-50">
<App/>
</body>
</html>
}
}
})
}})
.service(Files::new("/", site_root))
//.wrap(middleware::Compress::default())
.wrap(middleware::Compress::default())
})
.bind(&addr)?
.run()

118
src/values.rs Normal file
View File

@@ -0,0 +1,118 @@
use leptos::prelude::*;
use leptos_meta::*;
use leptos_router::*;
use serde::{Deserialize, Serialize};
pub struct Option {
value: &'static str,
name: &'static str,
topic: &'static str,
}
pub const OPTIONS: &[Option] = &[
Option {
value: "citerne",
name: "Citerne",
topic: "home/citerne/height",
},
Option {
value: "eau",
name: "Eau",
topic: "home/eau/volume",
},
Option {
value: "elec-hight",
name: "Electricité heure pleine",
topic: "home/elec-hight/pleine",
},
Option {
value: "elec-low",
name: "Electricité heure creuse",
topic: "home/elec-low/creuse",
},
];
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
pub struct Value {
id: u16,
service: String,
capteur: String,
type_donnee: String,
donnee: String,
}
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
#[cfg_attr(feature = "ssr", derive(sqlx::FromRow))]
struct HeftyData {
capteur: String,
value: String,
}
#[cfg(feature = "ssr")]
pub mod ssr {
// use http::{header::SET_COOKIE, HeaderMap, HeaderValue, StatusCode};
use leptos::server_fn::ServerFnError;
use sqlx::{Connection, SqliteConnection};
pub async fn db() -> Result<SqliteConnection, ServerFnError> {
Ok(SqliteConnection::connect("sqlite:Todos.db").await?)
}
}
#[component]
fn Form() -> impl IntoView {
view! {
<div class="my-0 mx-auto max-w-3xl text-center">
<h2 class="p-6 text-4xl">"Formulaire"</h2>
</div>
}
}
#[component]
pub fn FormValues() -> impl IntoView {
let add_value = ServerAction::<AddValue>::new();
let value = add_value.value();
let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
view! {
<div class="my-0 mx-auto max-w-3xl text-center">
<h2 class="p-6 text-4xl">"Formulaire"</h2>
<ActionForm action=add_value attr:class="border">
<div>
<label class="block">Capteur</label>
<select name="hefty_arg[capteur]">
{OPTIONS.into_iter()
.map(|option| view! { <option value={option.value}>{option.name}</option>})
.collect::<Vec<_>>()}
</select>
</div>
<div>
<label class="block">Valeur</label>
<input type="text" name="hefty_arg[value]" />
</div>
<div>
<button type="submit">Valider</button>
</div>
</ActionForm>
</div>
}
}
#[server(AddValue, "/api/add-value")]
pub async fn add_value(hefty_arg: HeftyData) -> Result<(), ServerFnError> {
use self::ssr::*;
let mut conn = db().await?;
dbg!(&hefty_arg);
match sqlx::query("INSERT INTO donnees (service, donnee) VALUES ($1, $2)")
.bind(hefty_arg.capteur)
.bind(hefty_arg.value)
.execute(&mut conn)
.await
{
Ok(_) => Ok(()),
Err(e) => Err(ServerFnError::ServerError(e.to_string())),
}
}