Allow selection of plates in tree

assets/css/global.css

@@ -34,6 +34,9 @@ div.tree {
 div.tree li {
 	user-select: none;
 }
+div.tree li.selected {
+	background: rgba(0,0,150,0.2);
+}
 
 div.transfer_menu {
 	grid-column: left / left;

src/components/plates/destination_plate.rs

@@ -70,6 +70,8 @@ pub fn DestinationPlate(props: &DestinationPlateProps) -> Html {
                 if let Some(br) = *m_end_handle {
                     if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
                         dispatch.set(NewTransferState {
+                            source_id: current.source_id,
+                            destination_id: current.destination_id,
                             source_region: current.source_region.clone(),
                             destination_region: rd,
                             interleave_x: current.interleave_x,

src/components/plates/plate_container.rs

@@ -1,6 +1,9 @@
 #![allow(non_snake_case)]
 use yew::prelude::*;
- use super::source_plate::SourcePlate;
+use yewdux::prelude::*;
+use super::super::states::MainState;
+
+use super::source_plate::SourcePlate;
 use super::destination_plate::DestinationPlate;
 
 #[derive(Properties, PartialEq)]
@@ -11,6 +14,8 @@ pub struct PlateContainerProps {
 
 #[function_component]
 pub fn PlateContainer(props: &PlateContainerProps) -> Html {
+    let (state, dispatch) = use_store::<MainState>();
+
     html! {
         <div class="plate_container">
             <SourcePlate width={props.source_dims.0} height={props.source_dims.1} />

src/components/plates/source_plate.rs

@@ -70,6 +70,8 @@ pub fn SourcePlate(props: &SourcePlateProps) -> Html {
             if let Some(br) = *m_end_handle {
                 if let Ok(rd) = RegionDisplay::try_from((ul.0, ul.1, br.0, br.1)) {
                     dispatch.set(NewTransferState {
+                        source_id: current.source_id,
+                        destination_id: current.destination_id,
                         source_region: rd,
                         destination_region: current.destination_region.clone(),
                         interleave_x: current.interleave_x,

src/components/states.rs

@@ -10,6 +10,8 @@ use crate::data::plate::*;
 #[derive(Debug, Default, Clone, PartialEq, Serialize, Deserialize, Store)]
 #[store(storage = "session")]
 pub struct NewTransferState {
+    pub source_id: Uuid,
+    pub destination_id: Uuid,
     pub source_region: RegionDisplay,
     pub destination_region: RegionDisplay,
     pub interleave_x: u8,

src/components/transfer_menu.rs

@@ -25,6 +25,8 @@ pub fn TransferMenu() -> Html {
             if let Some(input) = input {
                 if let Ok(rd) = RegionDisplay::try_from(input.value()) {
                     dispatch.set( NewTransferState {
+                        source_id: state.source_id,
+                        destination_id: state.destination_id,
                         source_region: rd,
                         destination_region: state.destination_region.clone(),
                         interleave_x: state.interleave_x,
@@ -48,6 +50,8 @@ pub fn TransferMenu() -> Html {
             if let Some(input) = input {
                 if let Ok(rd) = RegionDisplay::try_from(input.value()) {
                     dispatch.set( NewTransferState {
+                        source_id: state.source_id,
+                        destination_id: state.destination_id,
                         source_region: state.source_region.clone(),
                         destination_region: rd,
                         interleave_x: state.interleave_x,

src/components/tree.rs

@@ -8,7 +8,7 @@ use yewdux::prelude::*;
 
 use crate::data::{plate_instances::PlateInstance, transfer::Transfer};
 use crate::data::plate::*;
-use crate::components::states::MainState;
+use crate::components::states::{MainState, NewTransferState};
 
 #[derive(PartialEq, Properties)]
 pub struct TreeProps {
@@ -17,11 +17,12 @@ pub struct TreeProps {
 
 #[function_component]
 pub fn Tree(props: &TreeProps) -> Html {
-    let (state, dispatch) = use_store::<MainState>();
+    let (main_state, main_dispatch) = use_store::<MainState>();
-    let plate_menu_id: UseStateHandle<Option<Uuid>> = use_state(|| {None});
+    let (selection_state, selection_dispatch) = use_store::<NewTransferState>();
+    let plate_modal_id: UseStateHandle<Option<Uuid>> = use_state(|| {None});
 
     let open_plate_info_callback = {
-        let plate_menu_id =plate_menu_id.clone();
+        let plate_menu_id =plate_modal_id.clone();
         Callback::from(move |e: MouseEvent| {
             let target: Option<EventTarget> = e.target();
             let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
@@ -33,14 +34,14 @@ pub fn Tree(props: &TreeProps) -> Html {
         })
     };
     let plate_info_close_callback = {
-        let plate_menu_id =plate_menu_id.clone();
+        let plate_menu_id =plate_modal_id.clone();
         Callback::from(move |_| {
             plate_menu_id.set(None);
         })
     };
     let plate_info_delete_callback = {
-        let dispatch = dispatch.clone();
+        let dispatch = main_dispatch.clone();
-        let plate_menu_id =plate_menu_id.clone();
+        let plate_menu_id = plate_modal_id.clone();
         Callback::from(move |_| {
             if let Some(id) = *plate_menu_id {
                 dispatch.reduce_mut(|state| {
@@ -49,16 +50,52 @@ pub fn Tree(props: &TreeProps) -> Html {
             }
         })
     };
+    let source_plate_select_callback = {
+        let dispatch = selection_dispatch.clone();
+        Callback::from(move |e: MouseEvent| {
+            let target: Option<EventTarget> = e.target();
+            let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
+            if let Some(li) = li {
+                if let Ok(id) = u128::from_str_radix(li.id().as_str(), 10) {
+                    dispatch.reduce_mut(|state| state.source_id = Uuid::from_u128(id))
+                }
+            }
+        })
+    };
+    let destination_plate_select_callback = {
+        let dispatch = selection_dispatch.clone();
+        Callback::from(move |e: MouseEvent| {
+            let target: Option<EventTarget> = e.target();
+            let li = target.and_then(|t| t.dyn_into::<HtmlElement>().ok());
+            if let Some(li) = li {
+                if let Ok(id) = u128::from_str_radix(li.id().as_str(), 10) {
+                    dispatch.reduce_mut(|state| state.destination_id = Uuid::from_u128(id))
+                }
+            }
+        })
+    };
 
-    let source_plates = state.source_plates.iter()
+    let source_plates = main_state.source_plates.iter()
         .map(|spi| {
             html!{ <li id={spi.get_uuid().as_u128().to_string()}
-                    ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> }
+                    ondblclick={open_plate_info_callback.clone()}
+                    onclick={source_plate_select_callback.clone()}
+                    class={classes!(
+                        Some(if spi.get_uuid() == selection_state.source_id {Some("selected")}
+                             else {None})
+                    )}>
+                        {String::from(spi)}
+                        </li> }
         }).collect::<Html>();
-    let dest_plates = state.destination_plates.iter()
+    let dest_plates = main_state.destination_plates.iter()
-        .map(|spi| {
+        .map(|dpi| {
-            html!{ <li id={spi.get_uuid().as_u128().to_string()}
+            html!{ <li id={dpi.get_uuid().as_u128().to_string()}
-                    ondblclick={open_plate_info_callback.clone()}> {String::from(spi)} </li> }
+                    ondblclick={open_plate_info_callback.clone()}
+                    onclick={destination_plate_select_callback.clone()}
+                    class={classes!(
+                        Some(if dpi.get_uuid() == selection_state.destination_id {Some("selected")}
+                             else {None})
+                    )}> {String::from(dpi)} </li> }
         }).collect::<Html>();
 
 
@@ -81,7 +118,7 @@ pub fn Tree(props: &TreeProps) -> Html {
             <ul>
             </ul>
             </div>
-            if let Some(id) = *plate_menu_id {
+            if let Some(id) = *plate_modal_id {
                 <PlateInfoModal id={id} dialog_close_callback={plate_info_close_callback}
                 delete_button_callback={plate_info_delete_callback}/>
             }

src/data/transfer.rs

@@ -8,7 +8,7 @@ use super::plate_instances::*;
 pub struct Transfer {
     pub source_id: Uuid,
     pub dest_id: Uuid,
-    pub transfer: TransferRegion,
+    pub transfer_region: TransferRegion,
 }
 
 impl Transfer {
@@ -16,7 +16,7 @@ impl Transfer {
         Self {
             source_id: source.get_uuid(),
             dest_id: dest.get_uuid(),
-            transfer: tr
+            transfer_region: tr
         }
     }
 }