feature: Separate add plate button per type

This commit is contained in:
Emilia Allison 2024-08-09 20:33:09 -04:00
parent 98d2d92b49
commit caf10f10c1
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
4 changed files with 68 additions and 37 deletions

View File

@ -1,35 +1,27 @@
#![allow(non_snake_case)] #![allow(non_snake_case)]
use js_sys::Array;
use wasm_bindgen::{prelude::*, JsCast, JsValue};
use web_sys::{
Blob, HtmlAnchorElement, HtmlDialogElement, HtmlElement, HtmlFormElement, HtmlInputElement, Url,
};
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*; use yewdux::prelude::*;
use crate::components::states::{CurrentTransfer, MainState}; use crate::components::{new_plate_dialog::{NewPlateDialogType}, states::{CurrentTransfer, MainState}};
use crate::state_to_csv;
type NoParamsCallback = Box<dyn Fn(())>; type NoParamsCallback = Box<dyn Fn(())>;
pub fn new_plate_dialog_callback( pub fn new_plate_dialog_callback(
new_plate_dialog_is_open: UseStateHandle<bool>, new_plate_dialog_is_open: UseStateHandle<Option<NewPlateDialogType>>,
) -> NoParamsCallback { ) -> NoParamsCallback {
let new_plate_dialog_is_open = new_plate_dialog_is_open.clone(); let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
Box::new(move |_| { Box::new(move |_| {
new_plate_dialog_is_open.set(false); new_plate_dialog_is_open.set(None);
}) })
} }
pub fn open_new_plate_dialog_callback( pub fn open_new_plate_dialog_callback(
new_plate_dialog_is_open: UseStateHandle<bool>, new_plate_dialog_is_open: UseStateHandle<Option<NewPlateDialogType>>
) -> NoParamsCallback { ) -> Box<dyn Fn(NewPlateDialogType)> {
let new_plate_dialog_is_open = new_plate_dialog_is_open.clone(); let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
Box::new(move |_| { Box::new(move |dt| {
new_plate_dialog_is_open.set(true); new_plate_dialog_is_open.set(Some(dt));
}) })
} }

View File

@ -2,7 +2,7 @@
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*; use yewdux::prelude::*;
use crate::components::new_plate_dialog::NewPlateDialog; use crate::components::new_plate_dialog::{NewPlateDialog, NewPlateDialogType};
use crate::components::plates::plate_container::PlateContainer; use crate::components::plates::plate_container::PlateContainer;
use crate::components::states::{CurrentTransfer, MainState}; use crate::components::states::{CurrentTransfer, MainState};
use crate::components::transfer_menu::TransferMenu; use crate::components::transfer_menu::TransferMenu;
@ -53,7 +53,7 @@ pub fn MainWindow() -> Html {
main_window_callbacks::change_csv_export_type_callback(main_dispatch) main_window_callbacks::change_csv_export_type_callback(main_dispatch)
}; };
let new_plate_dialog_is_open = use_state_eq(|| false); let new_plate_dialog_is_open: UseStateHandle<Option<NewPlateDialogType>> = use_state_eq(|| None);
let new_plate_dialog_callback = let new_plate_dialog_callback =
main_window_callbacks::new_plate_dialog_callback(new_plate_dialog_is_open.clone()); main_window_callbacks::new_plate_dialog_callback(new_plate_dialog_is_open.clone());
@ -124,8 +124,8 @@ pub fn MainWindow() -> Html {
<TransferMenu /> <TransferMenu />
<PlateContainer source_dims={source_plate_instance} <PlateContainer source_dims={source_plate_instance}
destination_dims={destination_plate_instance}/> destination_dims={destination_plate_instance}/>
if {*new_plate_dialog_is_open} { if {new_plate_dialog_is_open.is_some()} {
<NewPlateDialog close_callback={new_plate_dialog_callback}/> <NewPlateDialog close_callback={new_plate_dialog_callback} dialog_type={new_plate_dialog_is_open.unwrap()}/>
} }
</div> </div>
</> </>

View File

@ -10,6 +10,14 @@ use crate::components::callbacks::new_plate_dialog_callbacks;
#[derive(PartialEq, Properties)] #[derive(PartialEq, Properties)]
pub struct NewPlateDialogProps { pub struct NewPlateDialogProps {
pub close_callback: Callback<()>, pub close_callback: Callback<()>,
pub dialog_type: NewPlateDialogType,
}
#[derive(PartialEq, Clone, Copy, Debug)]
pub enum NewPlateDialogType {
SourceOnly,
DestinationOnly,
Both,
} }
#[function_component] #[function_component]
@ -43,9 +51,15 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
); );
} }
let header_interior_text = match props.dialog_type {
NewPlateDialogType::Both => "",
NewPlateDialogType::SourceOnly => " source",
NewPlateDialogType::DestinationOnly => " destination",
};
html! { html! {
<dialog ref={dialog_ref} class="dialog new_plate_dialog" onclose={onclose}> <dialog ref={dialog_ref} class="dialog new_plate_dialog" onclose={onclose}>
<h2>{"Create a plate:"}</h2> <h2>{format!("Create a{} plate:", header_interior_text)}</h2>
<form onsubmit={new_plate_callback}> <form onsubmit={new_plate_callback}>
<input type="text" name="new_plate_name" placeholder="Name"/> <input type="text" name="new_plate_name" placeholder="Name"/>
<select name="plate_format"> <select name="plate_format">
@ -58,13 +72,35 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
<option value="1536">{"1536"}</option> <option value="1536">{"1536"}</option>
<option value="3456">{"3456"}</option> <option value="3456">{"3456"}</option>
</select> </select>
<input type="radio" name="new_plate_type" id="npt_src" value="src" /> { plate_type_selector(props.dialog_type) }
<label for="npt_src">{"Source"}</label>
<input type="radio" name="new_plate_type" id="npt_dest" value="dest" />
<label for="npt_dest">{"Destination"}</label>
<input type="submit" name="new_plate_button" value="Create" /> <input type="submit" name="new_plate_button" value="Create" />
</form> </form>
<form class="modal_close" method="dialog"><button /></form> <form class="modal_close" method="dialog"><button /></form>
</dialog> </dialog>
} }
} }
fn plate_type_selector(t: NewPlateDialogType) -> Html {
match t {
NewPlateDialogType::Both => {
html! {
<>
<input type="radio" name="new_plate_type" id="npt_src" value="src" />
<label for="npt_src">{"Source"}</label>
<input type="radio" name="new_plate_type" id="npt_dest" value="dest" />
<label for="npt_dest">{"Destination"}</label>
</>
}
},
NewPlateDialogType::SourceOnly => {
html! {
<input type="hidden" name="new_plate_type" id="npt_src" value="src" />
}
},
NewPlateDialogType::DestinationOnly => {
html! {
<input type="hidden" name="new_plate_type" id="npt_dest" value="dest" />
}
}
}
}

View File

@ -7,12 +7,13 @@ use web_sys::{HtmlDialogElement, HtmlInputElement};
use yew::prelude::*; use yew::prelude::*;
use yewdux::prelude::*; use yewdux::prelude::*;
use crate::components::callbacks::tree_callbacks; use crate::components::callbacks::{main_window_callbacks, tree_callbacks};
use crate::components::new_plate_dialog::NewPlateDialogType;
use crate::components::states::{CurrentTransfer, MainState}; use crate::components::states::{CurrentTransfer, MainState};
#[derive(PartialEq, Properties)] #[derive(PartialEq, Properties)]
pub struct TreeProps { pub struct TreeProps {
pub open_new_plate_callback: Callback<()>, pub open_new_plate_callback: Callback<NewPlateDialogType>,
} }
#[function_component] #[function_component]
@ -98,13 +99,23 @@ pub fn Tree(props: &TreeProps) -> Html {
html! { html! {
<div class="tree"> <div class="tree">
<div id="source-plates"> <div id="source-plates">
<h3>{"Source Plates:"}</h3> <h3>{"Source Plates:"}
<button onclick={
let open_new_plate_callback = props.open_new_plate_callback.clone();
move |_| {open_new_plate_callback.emit(NewPlateDialogType::SourceOnly)}
}>{"+"}</button>
</h3>
<ul> <ul>
{source_plates} {source_plates}
</ul> </ul>
</div> </div>
<div id="destination-plates"> <div id="destination-plates">
<h3>{"Destination Plates:"}</h3> <h3>{"Destination Plates:"}
<button onclick={
let open_new_plate_callback = props.open_new_plate_callback.clone();
move |_| {open_new_plate_callback.emit(NewPlateDialogType::DestinationOnly)}
}>{"+"}</button>
</h3>
<ul> <ul>
{dest_plates} {dest_plates}
</ul> </ul>
@ -120,14 +131,6 @@ pub fn Tree(props: &TreeProps) -> Html {
delete_button_callback={plate_info_delete_callback}/> delete_button_callback={plate_info_delete_callback}/>
} }
<div id="controls">
<button type="button"
onclick={
let open_new_plate_callback = props.open_new_plate_callback.clone();
move |_| {open_new_plate_callback.emit(())}
}>
{"New Plate"}</button>
</div>
</div> </div>
} }
} }