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

New plate dialog

This commit is contained in:
Emilia Allison 2023-05-22 18:31:02 -04:00
parent ed816d3bbe
commit 282369346c
Signed by: emilia
GPG Key ID: 7A3F8997BFE894E0
4 changed files with 108 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/main_window.rs
View File

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

1
src/components/mod.rs
View File

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

76
src/components/new_plate_dialog.rs Normal file
View File

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

66
src/components/tree.rs
View File

@ -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}>
<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>
<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>
}
}
impl From<&PlateInstance> for String {
fn from(value: &PlateInstance) -> Self {
// Could have other formatting here
format!("{}, {}", value.name, value.plate.plate_format)
}
}