diff --git a/assets/css/global.css b/assets/css/global.css index 4e1b4dd..5081583 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -31,6 +31,9 @@ div.tree { height: 100%; border: 2px solid green; } +div.tree li { + user-select: none; +} div.transfer_menu { grid-column: left / left; diff --git a/src/components/states.rs b/src/components/states.rs index 35c8274..a929a42 100644 --- a/src/components/states.rs +++ b/src/components/states.rs @@ -1,5 +1,7 @@ use serde::{Serialize, Deserialize}; use yewdux::{prelude::*, storage}; +use uuid::Uuid; + use super::transfer_menu::RegionDisplay; use crate::data::plate_instances::PlateInstance; use crate::data::transfer::Transfer; @@ -66,4 +68,12 @@ impl MainState { assert!(plate.plate.plate_type == PlateType::Destination); self.destination_plates.push(plate); } + pub fn del_plate(&mut self, id: Uuid) { + if let Some(index) = self.source_plates.iter().position(|spi| {spi.get_uuid() == id}) { + self.source_plates.swap_remove(index); + } + if let Some(index) = self.destination_plates.iter().position(|dpi| {dpi.get_uuid() == id}) { + self.destination_plates.swap_remove(index); + } + } } diff --git a/src/components/tree.rs b/src/components/tree.rs index 433ea2c..375e148 100644 --- a/src/components/tree.rs +++ b/src/components/tree.rs @@ -1,5 +1,8 @@ #![allow(non_snake_case)] +use uuid::Uuid; +use wasm_bindgen::JsCast; +use web_sys::{EventTarget, HtmlElement, HtmlDialogElement}; use yew::prelude::*; use yewdux::prelude::*; @@ -15,13 +18,47 @@ pub struct TreeProps { #[function_component] pub fn Tree(props: &TreeProps) -> Html { let (state, dispatch) = use_store::(); + let plate_menu_id: UseStateHandle> = use_state(|| {None}); + + let open_plate_info_callback = { + let plate_menu_id =plate_menu_id.clone(); + Callback::from(move |e: MouseEvent| { + let target: Option = e.target(); + let li = target.and_then(|t| t.dyn_into::().ok()); + if let Some(li) = li { + if let Ok(id) = u128::from_str_radix(li.id().as_str(), 10) { + plate_menu_id.set(Some(Uuid::from_u128(id))); + } + } + }) + }; + let plate_info_close_callback = { + let plate_menu_id =plate_menu_id.clone(); + Callback::from(move |_| { + plate_menu_id.set(None); + }) + }; + let plate_info_delete_callback = { + let dispatch = dispatch.clone(); + let plate_menu_id =plate_menu_id.clone(); + Callback::from(move |_| { + if let Some(id) = *plate_menu_id { + dispatch.reduce_mut(|state| { + state.del_plate(id); + }); + } + }) + }; + let source_plates = state.source_plates.iter() .map(|spi| { - html!{
  • {String::from(spi)}
    • } + html!{
  • {String::from(spi)}
    • } }).collect::(); let dest_plates = state.destination_plates.iter() .map(|spi| { - html!{
  • {String::from(spi)}
    • } + html!{
  • {String::from(spi)}
    • } }).collect::(); @@ -44,6 +81,10 @@ pub fn Tree(props: &TreeProps) -> Html {
    + if let Some(id) = *plate_menu_id { + + } // Temporary
    } } + +#[derive(PartialEq, Properties)] +struct PlateInfoModalProps { + id: Uuid, + dialog_close_callback: Callback<()>, + delete_button_callback: Callback<()>, +} + +#[function_component] +fn PlateInfoModal(props: &PlateInfoModalProps) -> Html { + let (state, dispatch) = use_store::(); + let dialog_ref = use_node_ref(); + + let mut plate = state.source_plates.iter() + .find(|spi| {spi.get_uuid() == props.id}); + if plate == None { + plate = state.destination_plates.iter() + .find(|dpi| {dpi.get_uuid() == props.id}); + } + let plate_name = match plate { + Some(plate) => plate.name.clone(), + None => "Not Found".to_string() + }; + let onclose = { + let dialog_close_callback = props.dialog_close_callback.clone(); + move |_| {dialog_close_callback.emit(())} + }; + + let delete_onclick = { + let delete_button_callback = props.delete_button_callback.clone(); + let dialog_ref = dialog_ref.clone(); + move |_| { + delete_button_callback.emit(()); + dialog_ref.cast::().unwrap().close(); + } + }; + + { + let dialog_ref = dialog_ref.clone(); + + use_effect_with_deps(|dialog_ref| { + dialog_ref.cast::().unwrap().show_modal().ok(); + }, + dialog_ref); + } + + html! { + +

    {"Plate Info"}

    +

    {"Name: "}

    + +     + } +}