feature: Separate add plate button per type

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

@@ -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::components::{new_plate_dialog::{NewPlateDialogType}, states::{CurrentTransfer, MainState}};
-
-use crate::state_to_csv;
 
 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>,
+    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();
-    Box::new(move |_| {
+    Box::new(move |dt| {
-        new_plate_dialog_is_open.set(true);
+        new_plate_dialog_is_open.set(Some(dt));
     })
 }
 

plate-tool-web/src/components/main_window.rs

@@ -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} {
+            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>
         </>

plate-tool-web/src/components/new_plate_dialog.rs

@@ -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" />
+            { 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" />
             </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" />
+            }
+        }
+    }
+}

plate-tool-web/src/components/tree.rs

@@ -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>
         }
     });