add shutters page first work

src/app.rs

@@ -13,7 +13,7 @@ pub fn App() -> impl IntoView {
 
         <Title text="Bienvenue à la maison"/>
 
-        <div class="dark:bg-prim dark:text-second h-screen flex flex-col">
+        <div class="h-screen flex flex-col">
             <Router>
                 <Navigation />
                 <main class="flex-1">
@@ -22,6 +22,7 @@ pub fn App() -> impl IntoView {
                         <Route path="/liens" view=move || view! { <Links/> }/>
                         <Route path="/formulaire" view=move || view! { <FormValues/> }/>
                         <Route path="/donnees" view=move || view! { <Data/> }/>
+                        <Route path="/volets" view=move || view! { <Shutters/> }/>
                         //<Route path="/*any" view=move || view! { <NotFound/> }/>
                     </Routes>
                 </main>
@@ -49,6 +50,9 @@ pub fn Navigation() -> impl IntoView {
             <a href="/donnees"
                 class="hover:text-third hover:border-b border-third inline-block transition-colors"
                 class:active-link=move || location.pathname.get() == "/donnees">Données</a>
+            <a href="/volets"
+                class="hover:text-third hover:border-b border-third inline-block transition-colors"
+                class:active-link=move || location.pathname.get() == "/volets">Volets</a>
         </nav>
     }
 }

src/routes/mod.rs

@@ -1,7 +1,9 @@
 mod data;
 mod link;
 mod value;
+mod shutters;
 
 pub use data::*;
 pub use link::*;
 pub use value::*;
+pub use shutters::*;

src/routes/shutters.rs

@@ -0,0 +1,111 @@
+use leptos::*;
+use leptos_meta::*;
+use reqwest::Client;
+use serde::Serialize;
+
+#[derive(Serialize)]
+struct Params {
+    command: String,
+    shadeId: i32,
+}
+
+#[component]
+pub fn Shutters() -> impl IntoView {
+    view! {
+        <Title text="Volets"/>
+
+        <div class="flex flex-wrap justify-center gap-2">
+            <Shutter name="Cuisine".to_string() shade_id=6 />
+            <Shutter name="Porte fenêtre".to_string() shade_id=2 />
+            <Shutter name="Salon fenêtre".to_string() shade_id=4 />
+            <Shutter name="Salon vidéo".to_string() shade_id=5 />
+            <Shutter name="Bureau".to_string() shade_id=1 />
+        </div>
+    }
+}
+
+#[component]
+pub fn Shutter(name: String, shade_id: i32) -> impl IntoView {
+    let (response, set_response) = create_signal(None::<String>);
+
+    let move_up = create_action(move |_| async move {
+        let client = Client::new();
+        let params = Params {
+            command: "up".to_string(),
+            shadeId: shade_id,
+        };
+        let url = "http://192.168.3.34/shadeCommand";
+
+        match client.put(url).json(&params).send().await {
+            Ok(resp) => {
+                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
+                set_response.set(Some(text));
+            }
+            Err(e) => {
+                set_response.set(Some(format!("Erreur: {:?}", e)));
+            }
+        }
+    });
+
+    let move_my = create_action(move |_| async move {
+        let client = Client::new();
+        let params = Params {
+            command: "my".to_string(),
+            shadeId: shade_id,
+        };
+        let url = "http://192.168.3.34/shadeCommand";
+
+        match client.put(url).json(&params).send().await {
+            Ok(resp) => {
+                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
+                set_response.set(Some(text));
+            }
+            Err(e) => {
+                set_response.set(Some(format!("Erreur: {:?}", e)));
+            }
+        }
+    });
+
+    let move_down = create_action(move |_| async move {
+        let client = Client::new();
+        let params = Params {
+            command: "down".to_string(),
+            shadeId: shade_id,
+        };
+        let url = "http://192.168.3.34/shadeCommand";
+
+        match client.put(url).json(&params).send().await {
+            Ok(resp) => {
+                let text = resp.text().await.unwrap_or("Réponse vide".to_string());
+                set_response.set(Some(text));
+            }
+            Err(e) => {
+                set_response.set(Some(format!("Erreur: {:?}", e)));
+            }
+        }
+    });
+
+    view! {
+        <div class="bg-prim-light rounded-lg w-48 px-3">
+            <div class="text-2xl text-center">{name}</div>
+            <div class="flex justify-between bg-second-dark rounded *:flex-1 *:transition">
+                <button on:click=move |_| move_up.dispatch(()) class="hover:text-third focus:text-third-light">
+                    <Arrow class="-rotate-90 w-8 inline".to_string() />
+                </button>
+                <button on:click=move |_| move_my.dispatch(()) class="hover:text-third focus:text-third-light">"My"</button>
+                <button on:click=move |_| move_down.dispatch(())  class="hover:text-third focus:text-third-light">
+                    <Arrow class="rotate-90 w-8 inline".to_string() />
+                </button>
+            </div>
+        </div>
+    }
+}
+
+#[component]
+pub fn Arrow(class: String) -> impl IntoView {
+    view! {
+        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"  class=format!("{}", class)>
+            <path fill="currentColor" d="M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z"/>
+        </svg>
+    }
+}