From 5c3fa24f20b42df41777be00cf1b53aa7b177cd5 Mon Sep 17 00:00:00 2001
From: Emilia <contact@emiliaallison.com>
Date: Mon, 22 May 2023 20:48:47 -0400
Subject: [PATCH] Backdrop for new plate modal

---
 assets/css/global.css              | 13 +++++++++
 src/components/new_plate_dialog.rs | 42 ++++++++++++++++++++----------
 2 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/assets/css/global.css b/assets/css/global.css
index f7264ba..4e1b4dd 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -6,6 +6,12 @@
 	font: inherit;
 	vertical-align: baseline;
 }
+h1, h2, h3 {
+	padding: 0;
+	margin: 0;
+	margin-bottom: 0.4em;
+	margin-top: 0.4em;
+}
 
 div.main_container {
 	height: 95vh;
@@ -42,3 +48,10 @@ div.plate_container {
 	grid-column: right / right;
 	grid-row: upper / 3;
 }
+
+.dialog {
+	padding: 1em;
+}
+.dialog::backdrop {
+	background: rgba(0,125,255,0.3);
+}
diff --git a/src/components/new_plate_dialog.rs b/src/components/new_plate_dialog.rs
index ceb44d8..8b2a129 100644
--- a/src/components/new_plate_dialog.rs
+++ b/src/components/new_plate_dialog.rs
@@ -2,7 +2,7 @@ use yew::prelude::*;
 use yewdux::prelude::*;
 
 use wasm_bindgen::JsCast;
-use web_sys::{EventTarget, HtmlFormElement, FormData};
+use web_sys::{EventTarget, HtmlFormElement, FormData, HtmlDialogElement};
 
 use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
 use crate::data::plate::*;
@@ -33,25 +33,39 @@ pub fn NewPlateDialog(props: &NewPlateDialogProps) -> Html {
                         "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))
-                        }
-                    });
+                    if let Some(pt_string) = form_data.get("new_plate_type").as_string() {
+                        let plate_type = match pt_string.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))
+                            }
+                        });
+                    }
                 }
             }
         })
     };
 
+    // This whole section is optional, only if you want the backdrop
+    let dialog_ref = use_node_ref();
+    {
+        let dialog_ref = dialog_ref.clone();
+
+        use_effect_with_deps(|dialog_ref| {
+            dialog_ref.cast::<HtmlDialogElement>().unwrap().show_modal().ok();
+        },
+        dialog_ref);
+    }
+
     html! {
-        <dialog open=true>
+        <dialog ref={dialog_ref} class="dialog new_plate_dialog">
+            <h2>{"Create a plate:"}</h2>
             <form onsubmit={new_plate_callback}>
             <input type="text" name="new_plate_name" placeholder="Name"/>
             <select name="plate_format">