add real db

README.md

@@ -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

migrations/20221207194615_init.up.sql

@@ -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,
+  donnee varchar(12) NOT NULL,
-  date_data datetime NOT NULL,
+  date_donnee datetime NOT NULL,
   PRIMARY KEY (id)
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;

src/app.rs

@@ -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>

src/models/link.rs

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

src/models/mod.rs

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

src/models/value.rs

@@ -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,

src/routes/link.rs

@@ -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>
+    }
+}

src/routes/mod.rs

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

src/routes/value.rs

@@ -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 value = value_action.value();
-    let reset_value = create_rw_signal("");
+    let has_error = move || value.with(|val| matches!(val, Some(Err(_))));
-    //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">
+        <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>
+                    <label class="block mt-5 mb-1">Capteur</label>
-                    <select name="device" class="dark:bg-slate-800 px-2 py-1">
+                    <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>
+                    <label class="block mt-3 mb-1">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" />
+                    <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>

style/output.css

@@ -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 {
+.w-60 {
-  width: 12rem;
+  width: 15rem;
 }
 
-.max-w-3xl {
+.w-72 {
-  max-width: 48rem;
+  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));
   }
 }