ДЗ smart-house-web завершено
This commit is contained in:
@@ -0,0 +1,207 @@
|
||||
use std::collections::HashMap;
|
||||
|
||||
use leptos::html::Input;
|
||||
use leptos::logging::*;
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_router::hooks::use_params_map;
|
||||
use reqwest::StatusCode;
|
||||
use serde_json::Value;
|
||||
use serde_json::json;
|
||||
use smart_house::*;
|
||||
|
||||
async fn load_devices(room: &str, rooms_write_signal: WriteSignal<Vec<(String, String)>>) {
|
||||
let resp = reqwest::Client::new()
|
||||
.get(format!("http://localhost:8081/room/{room}/devices"))
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot fetch devices");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::OK {
|
||||
debug_log!("Devices fetching error");
|
||||
return;
|
||||
};
|
||||
let value = match resp.json::<HashMap<String, Device>>().await {
|
||||
Ok(value) => value,
|
||||
Err(e) => {
|
||||
debug_log!("error parsing devices: {:?}", e);
|
||||
return;
|
||||
}
|
||||
};
|
||||
let mut devices = Vec::with_capacity(value.len());
|
||||
for (name, dev) in value.into_iter() {
|
||||
devices.push((name, dev.report()));
|
||||
}
|
||||
rooms_write_signal.set(devices);
|
||||
}
|
||||
|
||||
async fn add_device(room: &str, name: &str, device: Value) {
|
||||
let resp = reqwest::Client::new()
|
||||
.put(format!("http://localhost:8081/room/{room}/device/{name}"))
|
||||
.json(&device)
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot call device creation");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::CREATED {
|
||||
debug_log!("Device creation is not succeeded");
|
||||
};
|
||||
}
|
||||
|
||||
async fn remove_device(room: &str, name: &str) {
|
||||
let resp = reqwest::Client::new()
|
||||
.delete(format!("http://localhost:8081/room/{room}/device/{name}"))
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot call device removing");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::ACCEPTED {
|
||||
debug_log!("Device removing is not succeeded");
|
||||
};
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Room() -> impl IntoView {
|
||||
let params_map = use_params_map();
|
||||
let (devs_read, devs_write) = signal(Vec::<(String, String)>::new());
|
||||
|
||||
let ps_name_input = NodeRef::<Input>::new();
|
||||
let ps_power_input = NodeRef::<Input>::new();
|
||||
let ps_on_input = NodeRef::<Input>::new();
|
||||
let trm_name_input = NodeRef::<Input>::new();
|
||||
let trm_temp_input = NodeRef::<Input>::new();
|
||||
|
||||
Effect::new(move |_| {
|
||||
let room_name = params_map.read().get("name").unwrap_or_default();
|
||||
spawn_local(async move {
|
||||
load_devices(&room_name, devs_write).await;
|
||||
});
|
||||
});
|
||||
|
||||
let add_ps = move |_| {
|
||||
let ps_name = ps_name_input
|
||||
.get()
|
||||
.map(|e| e.value())
|
||||
.unwrap_or("".to_string());
|
||||
let ps_power = ps_power_input
|
||||
.get()
|
||||
.map(|e| e.value_as_number())
|
||||
.unwrap_or(0.0);
|
||||
let ps_on = ps_on_input.get().map(|e| e.checked()).unwrap_or(false);
|
||||
|
||||
let dev = json!({
|
||||
"type": "PowerSocket",
|
||||
"power_rate": ps_power,
|
||||
"on": ps_on
|
||||
});
|
||||
let room_name = params_map.read().get("name").unwrap_or_default();
|
||||
spawn_local(async move {
|
||||
add_device(&room_name, &ps_name, dev).await;
|
||||
load_devices(&room_name, devs_write).await;
|
||||
});
|
||||
};
|
||||
let add_trm = move |_| {
|
||||
let trm_name = trm_name_input
|
||||
.get()
|
||||
.map(|e| e.value())
|
||||
.unwrap_or("".to_string());
|
||||
let trm_temp = trm_temp_input
|
||||
.get()
|
||||
.map(|e| e.value_as_number())
|
||||
.unwrap_or(0.0);
|
||||
let dev = json!({
|
||||
"type": "Thermometer",
|
||||
"temperature": trm_temp
|
||||
});
|
||||
let room_name = params_map.read().get("name").unwrap_or_default();
|
||||
spawn_local(async move {
|
||||
add_device(&room_name, &trm_name, dev).await;
|
||||
load_devices(&room_name, devs_write).await;
|
||||
});
|
||||
};
|
||||
|
||||
let rm_dev = move |name: String| {
|
||||
let room_name = params_map.read().get("name").unwrap_or_default();
|
||||
spawn_local(async move {
|
||||
remove_device(&room_name, &name).await;
|
||||
load_devices(&room_name, devs_write).await;
|
||||
});
|
||||
};
|
||||
|
||||
let room_name = params_map.read().get("name").unwrap_or_default();
|
||||
|
||||
view! {
|
||||
<h1>{move || params_map.read().get("name").unwrap_or_default()}</h1>
|
||||
<p>
|
||||
<a href="/">{"<= BACK"}</a>
|
||||
</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>device name</th>
|
||||
<th>device state</th>
|
||||
<th>remove</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<For
|
||||
each=move || devs_read.get()
|
||||
key=|dev| dev.clone()
|
||||
children=move |dev| { view! {
|
||||
<tr>
|
||||
<td>
|
||||
<a href={format!("/room/{}/device/{}", room_name, dev.0.clone())}>{dev.0.clone()}</a>
|
||||
</td>
|
||||
<td>{dev.1}</td>
|
||||
<td>
|
||||
<button
|
||||
on:click=move |_| {
|
||||
rm_dev(dev.0.clone());
|
||||
}
|
||||
>-</button>
|
||||
</td>
|
||||
</tr>
|
||||
} }
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
<div>
|
||||
<label>{"Power Socket: "}</label>
|
||||
<input
|
||||
node_ref=ps_name_input
|
||||
type="text"
|
||||
/>
|
||||
<input
|
||||
node_ref=ps_power_input
|
||||
type="number"
|
||||
/>
|
||||
<input
|
||||
node_ref=ps_on_input
|
||||
type="checkbox"
|
||||
/>
|
||||
<button
|
||||
on:click=add_ps
|
||||
>+</button>
|
||||
</div>
|
||||
<div>
|
||||
<label>{"Thermometer: "}</label>
|
||||
<input
|
||||
node_ref=trm_name_input
|
||||
type="text"
|
||||
/>
|
||||
<input
|
||||
node_ref=trm_temp_input
|
||||
type="number"
|
||||
/>
|
||||
<button
|
||||
on:click=add_trm
|
||||
>+</button>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user