add shutters page first work

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