rust-otus/smart-house-web/frontend/src/room.rs

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