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

add real db

Browse Source
This commit is contained in:
Romulus21
2024-10-04 13:58:26 +02:00
parent 72b65063be
commit c931845899
10 changed files with 147 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@@ -3,6 +3,11 @@ 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
# dev
source .env
cargo sqlx migrate run
cargo leptos watch
npx tailwindcss -i ./input.css -o ./style/output.css --watch
## features

8
migrations/20221207194615_init.up.sql
View File

@@ -1,9 +1,9 @@
CREATE TABLE IF NOT EXISTS data (
CREATE TABLE IF NOT EXISTS donnees (
id int(11) NOT NULL AUTO_INCREMENT,
service varchar(12) NOT NULL,
device varchar(12) NOT NULL,
capteur varchar(12) NOT NULL,
type varchar(12) NOT NULL,
data varchar(12) NOT NULL,
date_data datetime NOT NULL,
donnee varchar(12) NOT NULL,
date_donnee datetime NOT NULL,
PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

4
src/app.rs
View File

@@ -13,15 +13,17 @@ pub fn App() -> impl IntoView {
<Title text="Welcome to Leptos"/>
<div class="dark:bg-slate-950 dark:text-white h-screen flex flex-col">
<div class="dark:bg-black dark:text-lime-500 dark:hover:text-lime-400 h-screen flex flex-col">
<Router>
<nav class="flex gap-5 px-2 py-1 ">
<a href="/">Home</a>
<A href="/liens">Liens</A>
<a href="/formulaire">Formulaire</a>
</nav>
<main class="flex-1">
<Routes>
<Route path="/" view=move || view! { <Home/> }/>
<Route path="/liens" view=move || view! { <Links/> }/>
<Route path="/formulaire" view=move || view! { <FormValues/> }/>
//<Route path="/*any" view=move || view! { <NotFound/> }/>
</Routes>

8
src/models/link.rs Normal file
View File

@@ -0,0 +1,8 @@
use serde::{Deserialize, Serialize};
#[derive(Clone, Debug, PartialEq, Eq, Serialize, Deserialize)]
pub struct Link {
id: u16,
link: String,
name: String,
}

1
src/models/mod.rs
View File

@@ -1,3 +1,4 @@
mod link;
mod value;
pub use value::Value;
pub use value::OPTIONS;

3
src/models/value.rs
View File

@@ -1,4 +1,3 @@
use chrono::prelude::*;
use serde::{Deserialize, Serialize};
#[derive(Debug)]
@@ -62,7 +61,7 @@ impl Value {
};
sqlx::query!(
"INSERT INTO data(service, device, type, data, date_data) VALUES (?, ?, ?, ?, NOW())",
"INSERT INTO donnees(service, capteur, type, donnee, date_donnee) VALUES (?, ?, ?, ?, NOW())",
option.service,
option.device,
option.r_type,

22
src/routes/link.rs Normal file
View File

@@ -0,0 +1,22 @@
use leptos::*;
//use leptos_meta::*;
use leptos_router::*;
#[component]
pub fn Links() -> impl IntoView {
view! {
<ul class="flex gap-5 mt-5 justify-center">
<Link link="aa".to_string() name="Mon Lien".to_string() />
<Link link="aa".to_string() name="mon lien 2".to_string() />
</ul>
}
}
#[component]
fn Link(link: String, name: String) -> impl IntoView {
view! {
<li>
<a class="border border-lime-500 bg-lime-500 hover:bg-lime-400 text-black px-3 py-2 inline-block" href=link>{name}</a>
</li>
}
}

6
src/routes/mod.rs
View File

@@ -1,3 +1,5 @@
pub use value::*;
mod link;
mod value;
pub use link::*;
pub use value::*;

26
src/routes/value.rs
View File

@@ -1,5 +1,5 @@
use leptos::*;
use leptos_meta::*;
//use leptos_meta::*;
use leptos_router::*;
use crate::models::OPTIONS;
@@ -19,31 +19,29 @@ pub async fn add_value(device: String, value: String) -> Result<(), ServerFnErro
#[component]
pub fn FormValues() -> impl IntoView {
let value_action = create_server_action::<ValueAction>();
let result = value_action.version();
let reset_value = create_rw_signal("");
//let add_value = ServerAction::<AddValue>::new();
//let value = add_value.value();
//let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
let value = value_action.value();
let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
view! {
<div class="my-0 mx-auto max-w-3xl text-center">
<div class="my-0 mx-auto w-72 text-center">
<h2 class="p-6 text-4xl">"Formulaire"</h2>
<ActionForm action=value_action attr:class="border">
<ActionForm action=value_action attr:class="border border-lime-500">
<div>
<label class="block">Capteur</label>
<select name="device" class="dark:bg-slate-800 px-2 py-1">
<label class="block mt-5 mb-1">Capteur</label>
<select name="device" class="w-60 dark:bg-slate-800 px-2 py-2">
{OPTIONS.into_iter()
.map(|option| view! { <option value={option.value}>{option.name}</option>})
.map(|option| view! { <option value={option.value} class="px-2 py-1">{option.name}</option>})
.collect::<Vec<_>>()}
</select>
</div>
<div>
<label class="block">Valeur</label>
<input type="text" name="value" prop:value=move || reset_value.get() class="text-center dark:bg-slate-800 dark:text-white px-2 py-1" />
<label class="block mt-3 mb-1">Valeur</label>
<input type="text" name="value" type="number"
class="text-center dark:bg-slate-800 focus:border-lime-500 dark:text-white px-2 py-2 w-60" />
</div>
<div>
<button type="submit" class="bg-slate-600 px-2 py-1 w-48 mt-3">Valider</button>
<button type="submit" class="bg-lime-500 hover:bg-lime-400 text-black px-2 py-1 w-60 my-5">Valider</button>
</div>
</ActionForm>
</div>

94
style/output.css
View File

@@ -558,14 +558,31 @@ video {
margin-bottom: 0px;
}
.my-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-5 {
margin-top: 1.25rem;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
@@ -574,12 +591,12 @@ video {
height: 100vh;
}
.w-48 {
width: 12rem;
.w-60 {
width: 15rem;
}
.max-w-3xl {
max-width: 48rem;
.w-72 {
width: 18rem;
}
.flex-1 {
@@ -590,19 +607,37 @@ video {
flex-direction: column;
}
.justify-center {
justify-content: center;
}
.gap-5 {
gap: 1.25rem;
}
.rounded {
border-radius: 0.25rem;
}
.border {
border-width: 1px;
}
.border-lime-500 {
--tw-border-opacity: 1;
border-color: rgb(132 204 22 / var(--tw-border-opacity));
}
.bg-slate-600 {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}
.bg-lime-500 {
--tw-bg-opacity: 1;
background-color: rgb(132 204 22 / var(--tw-bg-opacity));
}
.p-6 {
padding: 1.5rem;
}
@@ -617,6 +652,16 @@ video {
padding-bottom: 0.25rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.text-center {
text-align: center;
}
@@ -626,11 +671,31 @@ video {
line-height: 2.5rem;
}
.\*\:text-black > * {
.text-black {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
}
.ring-lime-500 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(132 204 22 / var(--tw-ring-opacity));
}
.hover\:bg-lime-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(101 163 13 / var(--tw-bg-opacity));
}
.hover\:bg-lime-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(163 230 53 / var(--tw-bg-opacity));
}
.focus\:border-lime-500:focus {
--tw-border-opacity: 1;
border-color: rgb(132 204 22 / var(--tw-border-opacity));
}
@media (prefers-color-scheme: dark) {
.dark\:bg-slate-800 {
--tw-bg-opacity: 1;
@@ -642,13 +707,28 @@ video {
background-color: rgb(2 6 23 / var(--tw-bg-opacity));
}
.dark\:bg-black {
--tw-bg-opacity: 1;
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-black {
.dark\:text-lime-600 {
--tw-text-opacity: 1;
color: rgb(0 0 0 / var(--tw-text-opacity));
color: rgb(101 163 13 / var(--tw-text-opacity));
}
.dark\:text-lime-500 {
--tw-text-opacity: 1;
color: rgb(132 204 22 / var(--tw-text-opacity));
}
.dark\:hover\:text-lime-400:hover {
--tw-text-opacity: 1;
color: rgb(163 230 53 / var(--tw-text-opacity));
}
}