ДЗ smart-house-web завершено
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
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;
|
||||
|
||||
async fn load_device(room: &str, dev: &str, write_signal: WriteSignal<String>) {
|
||||
let resp = reqwest::Client::new()
|
||||
.get(format!("http://localhost:8081/room/{room}/device/{dev}"))
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot fetch device");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::OK {
|
||||
debug_log!("Device fetching error");
|
||||
return;
|
||||
};
|
||||
let value = match resp.json::<Value>().await {
|
||||
Ok(value) => value,
|
||||
Err(e) => {
|
||||
debug_log!("error parsing device: {:?}", e);
|
||||
return;
|
||||
}
|
||||
};
|
||||
let Ok(json) = serde_json::to_string_pretty(&value) else {
|
||||
debug_log!("can not print json value");
|
||||
return;
|
||||
};
|
||||
write_signal.set(json);
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Device() -> impl IntoView {
|
||||
let params_map = use_params_map();
|
||||
let room = params_map.read().get("room").unwrap_or_default();
|
||||
let dev = params_map.read().get("dev").unwrap_or_default();
|
||||
|
||||
let (dev_read, dev_write) = signal(String::default());
|
||||
|
||||
Effect::new(move |_| {
|
||||
let room = params_map.read().get("room").unwrap_or_default();
|
||||
let dev = params_map.read().get("dev").unwrap_or_default();
|
||||
spawn_local(async move {
|
||||
load_device(&room, &dev, dev_write).await;
|
||||
});
|
||||
});
|
||||
|
||||
view! {
|
||||
<h1>{move || dev.clone()}</h1>
|
||||
<p>
|
||||
<a href=format!("/room/{}", room)>{"<= BACK"}</a>
|
||||
</p>
|
||||
<pre>
|
||||
{dev_read}
|
||||
</pre>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,168 @@
|
||||
use leptos::logging::*;
|
||||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use reqwest::StatusCode;
|
||||
use serde_json::Value;
|
||||
|
||||
async fn load_rooms(rooms_write_signal: WriteSignal<Vec<String>>) {
|
||||
let resp = reqwest::Client::new()
|
||||
.get("http://localhost:8081/rooms")
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot fetch rooms");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::OK {
|
||||
debug_log!("Rooms fetching error");
|
||||
return;
|
||||
};
|
||||
let value = match resp.json::<Value>().await {
|
||||
Ok(value) => value,
|
||||
Err(e) => {
|
||||
debug_log!("error parsing rooms: {:?}", e);
|
||||
return;
|
||||
}
|
||||
};
|
||||
let value = match value {
|
||||
Value::Object(value) => value,
|
||||
_ => {
|
||||
return;
|
||||
}
|
||||
};
|
||||
let mut rooms = Vec::with_capacity(value.len());
|
||||
for (name, _) in value.into_iter() {
|
||||
rooms.push(name);
|
||||
}
|
||||
rooms_write_signal.set(rooms);
|
||||
}
|
||||
|
||||
async fn add_room(name: &str) {
|
||||
let resp = reqwest::Client::new()
|
||||
.put(format!("http://localhost:8081/room/{}", name))
|
||||
.header("Content-Type", "application/json")
|
||||
.body("{\"devices\":{}}")
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot call room creation");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::CREATED {
|
||||
debug_log!("Room creation is not succeeded");
|
||||
};
|
||||
}
|
||||
|
||||
async fn remove_room(name: &str) {
|
||||
let resp = reqwest::Client::new()
|
||||
.delete(format!("http://localhost:8081/room/{}", name))
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot call room removing");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::ACCEPTED {
|
||||
debug_log!("Room removing is not succeeded");
|
||||
};
|
||||
}
|
||||
|
||||
async fn get_report(write_signal: WriteSignal<String>) {
|
||||
let resp = reqwest::Client::new()
|
||||
.get("http://localhost:8081/rooms")
|
||||
.send()
|
||||
.await;
|
||||
let Ok(resp) = resp else {
|
||||
debug_log!("Cannot fetch rooms");
|
||||
return;
|
||||
};
|
||||
if resp.status() != StatusCode::OK {
|
||||
debug_log!("Rooms fetching error");
|
||||
return;
|
||||
};
|
||||
let value = match resp.json::<Value>().await {
|
||||
Ok(value) => value,
|
||||
Err(e) => {
|
||||
debug_log!("error parsing rooms: {:?}", e);
|
||||
return;
|
||||
}
|
||||
};
|
||||
let Ok(json) = serde_json::to_string_pretty(&value) else {
|
||||
debug_log!("can not print json value");
|
||||
return;
|
||||
};
|
||||
write_signal.set(json);
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn House() -> impl IntoView {
|
||||
use leptos::html::Input;
|
||||
|
||||
let (rooms, set_rooms) = signal(Vec::<String>::new());
|
||||
let (report_read, report_write) = signal(String::default());
|
||||
let input_element: NodeRef<Input> = NodeRef::new();
|
||||
|
||||
let remove_room = move |name: String| {
|
||||
spawn_local(async move {
|
||||
remove_room(&name).await;
|
||||
load_rooms(set_rooms).await;
|
||||
});
|
||||
};
|
||||
|
||||
let add_room = move |_| {
|
||||
let name = input_element.get().expect("<input> to exist").value();
|
||||
spawn_local(async move {
|
||||
add_room(&name).await;
|
||||
load_rooms(set_rooms).await;
|
||||
});
|
||||
};
|
||||
|
||||
let refresh_report = move |_| {
|
||||
spawn_local(async move {
|
||||
get_report(report_write).await;
|
||||
});
|
||||
};
|
||||
|
||||
Effect::new(move |_| {
|
||||
spawn_local(async move {
|
||||
load_rooms(set_rooms).await;
|
||||
});
|
||||
});
|
||||
|
||||
view! {
|
||||
<h1>ROOMS</h1>
|
||||
<ul>
|
||||
<For
|
||||
each=move || rooms.get()
|
||||
key=|room| room.clone()
|
||||
children=move |room| {
|
||||
view! {
|
||||
<li>
|
||||
<a href={format!("room/{}", room.clone())}>{room.clone()}</a>
|
||||
<button
|
||||
on:click=move |_| {
|
||||
remove_room(room.clone());
|
||||
}
|
||||
>X</button>
|
||||
</li>
|
||||
}
|
||||
}
|
||||
/>
|
||||
</ul>
|
||||
<div>
|
||||
<input
|
||||
node_ref=input_element
|
||||
/>
|
||||
<button
|
||||
on:click=add_room
|
||||
>ADD</button>
|
||||
</div>
|
||||
<br />
|
||||
<div>
|
||||
<button
|
||||
on:click=refresh_report
|
||||
>GET REPORT</button>
|
||||
</div>
|
||||
<pre>{report_read}</pre>
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
use leptos::prelude::*;
|
||||
use leptos_router::components::{Route, Router, Routes};
|
||||
use leptos_router::path;
|
||||
|
||||
#[component]
|
||||
pub fn App() -> impl IntoView {
|
||||
view! {
|
||||
<Router>
|
||||
<main>
|
||||
<Routes fallback=|| "Not found">
|
||||
<Route path=path!("/") view=house::House />
|
||||
<Route path=path!("/room/:name") view=room::Room />
|
||||
<Route path=path!("/room/:room/device/:dev") view=device::Device />
|
||||
</Routes>
|
||||
</main>
|
||||
</Router>
|
||||
}
|
||||
}
|
||||
|
||||
fn main() {
|
||||
leptos::mount::mount_to_body(App)
|
||||
}
|
||||
|
||||
mod device;
|
||||
mod house;
|
||||
mod room;
|
||||
@@ -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