emilia
/
plate-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plate-tool-web/src/components/callbacks/main_window_callbacks/plate_edits_callbacks.rs
View File

@ -1,35 +1,27 @@
#![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 yewdux::prelude::*;
use crate::components::states::{CurrentTransfer, MainState};
use crate::state_to_csv;
use crate::components::{new_plate_dialog::{NewPlateDialogType}, states::{CurrentTransfer, MainState}};
type NoParamsCallback = Box<dyn Fn(())>;
pub fn new_plate_dialog_callback(
new_plate_dialog_is_open: UseStateHandle<bool>,
new_plate_dialog_is_open: UseStateHandle<Option<NewPlateDialogType>>,
) -> NoParamsCallback {
let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
Box::new(move |_| {
new_plate_dialog_is_open.set(false);
new_plate_dialog_is_open.set(None);
})
}
pub fn open_new_plate_dialog_callback(
new_plate_dialog_is_open: UseStateHandle<bool>,
) -> NoParamsCallback {
new_plate_dialog_is_open: UseStateHandle<Option<NewPlateDialogType>>
) -> Box<dyn Fn(NewPlateDialogType)> {
let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
Box::new(move |_| {
new_plate_dialog_is_open.set(true);
Box::new(move |dt| {
new_plate_dialog_is_open.set(Some(dt));
})
}

8
plate-tool-web/src/components/main_window.rs
View File

@ -2,7 +2,7 @@
use yew::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::states::{CurrentTransfer, MainState};
use crate::components::transfer_menu::TransferMenu;
@ -53,7 +53,7 @@ pub fn MainWindow() -> Html {
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 =
main_window_callbacks::new_plate_dialog_callback(new_plate_dialog_is_open.clone());
@ -124,8 +124,8 @@ pub fn MainWindow() -> Html {
<TransferMenu />
<PlateContainer source_dims={source_plate_instance}
destination_dims={destination_plate_instance}/>
if {*new_plate_dialog_is_open} {
<NewPlateDialog close_callback={new_plate_dialog_callback}/>
if {new_plate_dialog_is_open.is_some()} {
<NewPlateDialog close_callback={new_plate_dialog_callback} dialog_type={new_plate_dialog_is_open.unwrap()}/>
}
</div>
</>

46
plate-tool-web/src/components/new_plate_dialog.rs
View File

@ -10,6 +10,14 @@ use crate::components::callbacks::new_plate_dialog_callbacks;
#[derive(PartialEq, Properties)]
pub struct NewPlateDialogProps {
pub close_callback: Callback<()>,
pub dialog_type: NewPlateDialogType,
}
#[derive(PartialEq, Clone, Copy, Debug)]
pub enum NewPlateDialogType {
SourceOnly,
DestinationOnly,
Both,
}
#[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! {
<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}>
<input type="text" name="new_plate_name" placeholder="Name"/>
<select name="plate_format">
@ -58,13 +72,35 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
<option value="1536">{"1536"}</option>
<option value="3456">{"3456"}</option>
</select>
<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>
{ plate_type_selector(props.dialog_type) }
<input type="submit" name="new_plate_button" value="Create" />
</form>
<form class="modal_close" method="dialog"><button /></form>
</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" />
}
}
}
}

29
plate-tool-web/src/components/tree.rs
View File

@ -7,12 +7,13 @@ use web_sys::{HtmlDialogElement, HtmlInputElement};
use yew::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};
#[derive(PartialEq, Properties)]
pub struct TreeProps {
pub open_new_plate_callback: Callback<()>,
pub open_new_plate_callback: Callback<NewPlateDialogType>,
}
#[function_component]
@ -98,13 +99,23 @@ pub fn Tree(props: &TreeProps) -> Html {
html! {
<div class="tree">
<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>
{source_plates}
</ul>
</div>
<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>
{dest_plates}
</ul>
@ -120,14 +131,6 @@ pub fn Tree(props: &TreeProps) -> Html {
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>
}
}
@ -171,7 +174,7 @@ fn PlateInfoModal(props: &PlateInfoModalProps) -> Html {
];
let plate_format_options = plate_formats.iter().map(|v| {
let selected = Some(v) == plate_format.as_ref();
html!{
html! {
<option value={v.to_string()} selected={selected}>{ v.to_string() }</option>
}
});