New plate dialog

src/components/main_window.rs

@@ -3,14 +3,32 @@ use yew::prelude::*;
 use super::plates::plate_container::PlateContainer;
 use super::tree::Tree;
 use super::transfer_menu::TransferMenu;
+use super::new_plate_dialog::NewPlateDialog;
 
 #[function_component]
 pub fn MainWindow() -> Html {
+    let new_plate_dialog_is_open = use_state_eq(|| false);
+    let new_plate_dialog_callback = {
+        let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
+        Callback::from(move |_| {
+            new_plate_dialog_is_open.set(false);
+        })
+    };
+    let open_new_plate_dialog_callback = {
+        let new_plate_dialog_is_open = new_plate_dialog_is_open.clone();
+        Callback::from(move |_| {
+            new_plate_dialog_is_open.set(true);
+        })
+    };
+
     html!{
         <div class="main_container">
-            <Tree />
+            <Tree open_new_plate_callback={open_new_plate_dialog_callback}/>
             <TransferMenu />
             <PlateContainer source_dims={(24,16)} destination_dims={(24,16)}/>
+            if {*new_plate_dialog_is_open} {
+            <NewPlateDialog close_callback={new_plate_dialog_callback}/>
+            }
         </div>
     }
 }

src/components/mod.rs

@@ -3,3 +3,4 @@ pub mod main_window;
 pub mod tree;
 pub mod transfer_menu;
 pub mod plates;
+pub mod new_plate_dialog;

src/components/new_plate_dialog.rs

@@ -0,0 +1,76 @@
+use yew::prelude::*;
+use yewdux::prelude::*;
+
+use wasm_bindgen::JsCast;
+use web_sys::{EventTarget, HtmlFormElement, FormData};
+
+use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
+use crate::data::plate::*;
+use crate::components::states::MainState;
+
+#[derive(PartialEq, Properties)]
+pub struct NewPlateDialogProps {
+    pub close_callback: Callback<()>,
+}
+
+#[function_component]
+pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
+    let (state, dispatch) = use_store::<MainState>();
+
+    let new_plate_callback = {
+        let dispatch = dispatch.clone();
+        let close_callback = props.close_callback.clone();
+        Callback::from(move |e: SubmitEvent| {
+            e.prevent_default();
+            close_callback.emit(());
+            let target: Option<EventTarget> = e.target();
+            let form = target.and_then(|t| t.dyn_into::<HtmlFormElement>().ok());
+            if let Some(form) = form {
+                if let Ok(form_data) = FormData::new_with_form(&form) {
+                    let name = form_data.get("new_plate_name").as_string().unwrap();
+                    let format = match form_data.get("plate_format").as_string().unwrap().as_str() {
+                        "384" => PlateFormat::W384,
+                        "96" => PlateFormat::W96,
+                        _ => PlateFormat::W6,
+                    };
+                    let plate_type = match form_data.get("new_plate_type").as_string().unwrap().as_str() {
+                        "src" => PlateType::Source,
+                        "dest" => PlateType::Destination,
+                        _ => PlateType::Source,
+                    };
+                    dispatch.reduce_mut(|s| {
+                        if plate_type == PlateType::Source {
+                            s.add_source_plate(PlateInstance::new(PlateType::Source, format, name))
+                        } else {
+                            s.add_dest_plate(PlateInstance::new(PlateType::Destination, format, name))
+                        }
+                    });
+                }
+            }
+        })
+    };
+
+    html! {
+        <dialog open=true>
+            <form onsubmit={new_plate_callback}>
+            <input type="text" name="new_plate_name" placeholder="Name"/>
+            <select name="plate_format">
+                <option value="96">{"96"}</option>
+                <option value="384">{"384"}</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>
+            <input type="submit" name="new_plate_button" value="Create" />
+            </form>
+        </dialog>
+    }
+}
+
+impl From<&PlateInstance> for String {
+    fn from(value: &PlateInstance) -> Self {
+        // Could have other formatting here
+        format!("{}, {}", value.name, value.plate.plate_format)
+    }
+}

src/components/tree.rs

@@ -1,8 +1,5 @@
 #![allow(non_snake_case)]
-use std::fmt::format;
 
-use wasm_bindgen::JsCast;
-use web_sys::{EventTarget, HtmlFormElement, FormData};
 use yew::prelude::*;
 use yewdux::prelude::*;
 
@@ -10,8 +7,13 @@ use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
 use crate::data::plate::*;
 use crate::components::states::MainState;
 
+#[derive(PartialEq, Properties)]
+pub struct TreeProps {
+    pub open_new_plate_callback: Callback<()>,
+}
+
 #[function_component]
-pub fn Tree() -> Html {
+pub fn Tree(props: &TreeProps) -> Html {
     let (state, dispatch) = use_store::<MainState>();
     let source_plates = state.source_plates.iter()
         .map(|spi| {
@@ -22,36 +24,6 @@ pub fn Tree() -> Html {
             html!{ <li> {String::from(spi)} </li> }
         }).collect::<Html>();
 
-    let new_plate_callback = {
-        let dispatch = dispatch.clone();
-        Callback::from(move |e: SubmitEvent| {
-            e.prevent_default();
-            let target: Option<EventTarget> = e.target();
-            let form = target.and_then(|t| t.dyn_into::<HtmlFormElement>().ok());
-            if let Some(form) = form {
-                if let Ok(form_data) = FormData::new_with_form(&form) {
-                    let name = form_data.get("new_plate_name").as_string().unwrap();
-                    let format = match form_data.get("plate_format").as_string().unwrap().as_str() {
-                        "384" => PlateFormat::W384,
-                        "96" => PlateFormat::W96,
-                        _ => PlateFormat::W6,
-                    };
-                    let plate_type = match form_data.get("new_plate_type").as_string().unwrap().as_str() {
-                        "src" => PlateType::Source,
-                        "dest" => PlateType::Destination,
-                        _ => PlateType::Source,
-                    };
-                    dispatch.reduce_mut(|s| {
-                        if plate_type == PlateType::Source {
-                            s.add_source_plate(PlateInstance::new(PlateType::Source, format, name))
-                        } else {
-                            s.add_dest_plate(PlateInstance::new(PlateType::Destination, format, name))
-                        }
-                    });
-                }
-            }
-        })
-    };
 
     html! {
         <div class="tree">
@@ -73,28 +45,14 @@ pub fn Tree() -> Html {
             </ul>
             </div>
             // Temporary
-            <hr/>
             <div>
-            <form onsubmit={new_plate_callback}>
+            <button type="button"
-            <input type="text" name="new_plate_name" placeholder="Name"/>
+            onclick={
-            <select name="plate_format">
+                let open_new_plate_callback = props.open_new_plate_callback.clone();
-                <option value="96">{"96"}</option>
+                move |_| {open_new_plate_callback.emit(())}
-                <option value="384">{"384"}</option>
+            }>
-            </select>
+            {"New Plate"}</button>
-            <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>
-            <input type="submit" name="new_plate_button" value="Create" />
-            </form>
             </div>
         </div>
     }
 }
-
-impl From<&PlateInstance> for String {
-    fn from(value: &PlateInstance) -> Self {
-        // Could have other formatting here
-        format!("{}, {}", value.name, value.plate.plate_format)
-    }
-}