2023-05-21 16:45:12 +00:00
|
|
|
#![allow(non_snake_case)]
|
2023-05-22 22:11:49 +00:00
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
use yew::prelude::*;
|
2023-05-22 22:11:49 +00:00
|
|
|
use yewdux::prelude::*;
|
|
|
|
|
|
|
|
|
|
use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
|
|
|
|
|
use crate::data::plate::*;
|
|
|
|
|
use crate::components::states::MainState;
|
2023-05-21 16:45:12 +00:00
|
|
|
|
2023-05-22 22:31:02 +00:00
|
|
|
#[derive(PartialEq, Properties)]
|
|
|
|
|
pub struct TreeProps {
|
|
|
|
|
pub open_new_plate_callback: Callback<()>,
|
|
|
|
|
}
|
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
#[function_component]
|
2023-05-22 22:31:02 +00:00
|
|
|
pub fn Tree(props: &TreeProps) -> Html {
|
2023-05-22 22:11:49 +00:00
|
|
|
let (state, dispatch) = use_store::<MainState>();
|
|
|
|
|
let source_plates = state.source_plates.iter()
|
|
|
|
|
.map(|spi| {
|
|
|
|
|
html!{ <li> {String::from(spi)} </li> }
|
|
|
|
|
}).collect::<Html>();
|
|
|
|
|
let dest_plates = state.destination_plates.iter()
|
|
|
|
|
.map(|spi| {
|
|
|
|
|
html!{ <li> {String::from(spi)} </li> }
|
|
|
|
|
}).collect::<Html>();
|
|
|
|
|
|
|
|
|
|
|
2023-05-22 15:26:08 +00:00
|
|
|
html! {
|
|
|
|
|
<div class="tree">
|
2023-05-22 22:11:49 +00:00
|
|
|
<div id="source-plates">
|
|
|
|
|
<h3>{"Source Plates:"}</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
{source_plates}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="destination-plates">
|
|
|
|
|
<h3>{"Destination Plates:"}</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
{dest_plates}
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="transfers">
|
|
|
|
|
<h3>{"Transfers:"}</h3>
|
|
|
|
|
<ul>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
// Temporary
|
|
|
|
|
<div>
|
2023-05-22 22:31:02 +00:00
|
|
|
<button type="button"
|
|
|
|
|
onclick={
|
|
|
|
|
let open_new_plate_callback = props.open_new_plate_callback.clone();
|
|
|
|
|
move |_| {open_new_plate_callback.emit(())}
|
|
|
|
|
}>
|
|
|
|
|
{"New Plate"}</button>
|
2023-05-22 22:11:49 +00:00
|
|
|
</div>
|
2023-05-22 15:26:08 +00:00
|
|
|
</div>
|
|
|
|
|
}
|
2023-05-21 16:45:12 +00:00
|
|
|
}
|
