Close and delete plates
This commit is contained in:
parent
5c3fa24f20
commit
85f3fbd113
GPG Key ID:
7A3F8997BFE894E0
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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::<MainState>();
|
||||
let plate_menu_id: UseStateHandle<Option<Uuid>> = use_state(|| {None});
|
||||
|
||||
let open_plate_info_callback = {
|
||||
let plate_menu_id =plate_menu_id.clone();
|
||||
Callback::from(move |e: MouseEvent| {
|
||||
let target: Option<EventTarget> = e.target();
|
||||
let li = target.and_then(|t| t.dyn_into::<HtmlElement>().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!{ <li> {String::from(spi)} </li> }
|
||||
html!{ <li id={spi.get_uuid().as_u128().to_string()}
|
||||
ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> }
|
||||
}).collect::<Html>();
|
||||
let dest_plates = state.destination_plates.iter()
|
||||
.map(|spi| {
|
||||
html!{ <li> {String::from(spi)} </li> }
|
||||
html!{ <li id={spi.get_uuid().as_u128().to_string()}
|
||||
ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> }
|
||||
}).collect::<Html>();
|
||||
|
||||
|
||||
|
|
@ -44,6 +81,10 @@ pub fn Tree(props: &TreeProps) -> Html {
|
|||
<ul>
|
||||
</ul>
|
||||
</div>
|
||||
if let Some(id) = *plate_menu_id {
|
||||
<PlateInfoModal id={id} dialog_close_callback={plate_info_close_callback}
|
||||
delete_button_callback={plate_info_delete_callback}/>
|
||||
}
|
||||
// Temporary
|
||||
<div>
|
||||
<button type="button"
|
||||
|
|
@ -56,3 +97,57 @@ pub fn Tree(props: &TreeProps) -> Html {
|
|||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
#[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::<MainState>();
|
||||
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::<HtmlDialogElement>().unwrap().close();
|
||||
}
|
||||
};
|
||||
|
||||
{
|
||||
let dialog_ref = dialog_ref.clone();
|
||||
|
||||
use_effect_with_deps(|dialog_ref| {
|
||||
dialog_ref.cast::<HtmlDialogElement>().unwrap().show_modal().ok();
|
||||
},
|
||||
dialog_ref);
|
||||
}
|
||||
|
||||
html! {
|
||||
<dialog ref={dialog_ref} class="dialog" onclose={onclose}>
|
||||
<h2>{"Plate Info"}</h2>
|
||||
<h3>{"Name: "}<input type="text" value={plate_name} /></h3>
|
||||
<button onclick={delete_onclick}>{"Delete"}</button>
|
||||
</dialog>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue