feature: Separate add plate button per type
This commit is contained in:
parent
98d2d92b49
commit
caf10f10c1
|
@ -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));
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -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" />
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -171,7 +174,7 @@ fn PlateInfoModal(props: &PlateInfoModalProps) -> Html {
|
||||||
];
|
];
|
||||||
let plate_format_options = plate_formats.iter().map(|v| {
|
let plate_format_options = plate_formats.iter().map(|v| {
|
||||||
let selected = Some(v) == plate_format.as_ref();
|
let selected = Some(v) == plate_format.as_ref();
|
||||||
html!{
|
html! {
|
||||||
<option value={v.to_string()} selected={selected}>{ v.to_string() }</option>
|
<option value={v.to_string()} selected={selected}>{ v.to_string() }</option>
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue