Implemented the 'Delete Device' button of LEA's peer configurator.

eclipse-opendut · Dec 19, 2023 · 240c4e8 · 240c4e8
1 parent 8d7b533
commit 240c4e8
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 27 deletions.
diff --git a/opendut-lea/assets/style/doorhanger.scss b/opendut-lea/assets/style/doorhanger.scss
@@ -2,14 +2,14 @@
   @extend .dropdown;
 }
 
-.doorhanger-trigger {
-}
+.doorhanger-trigger {}
 
-.doorhanger.is-active > .doorhanger-trigger::after {
+.doorhanger.is-active .doorhanger-dog-ear {
   background-color: $white;
   position: absolute;
-  top: 2.75rem;
+  top:0;
   left: 0;
+  bottom:0;
   right: 0;
   margin: auto;
   height: 1.0rem;

diff --git a/opendut-lea/src/components/doorhanger.rs b/opendut-lea/src/components/doorhanger.rs
@@ -1,4 +1,6 @@
 use leptos::*;
+use leptos::html::Div;
+use leptos_use::{use_element_size, UseElementSizeReturn};
 
 pub type Trigger = Box<dyn FnOnce() -> View>;
 
@@ -8,6 +10,14 @@ pub enum DoorhangerAlignment {
     Right,
 }
 
+#[allow(dead_code)]
+pub enum DoorhangerTriggerSize {
+    Small,
+    Normal,
+    Medium,
+    Large,
+}
+
 #[component]
 pub fn Doorhanger(
     #[prop(into)] visible: MaybeSignal<bool>,
@@ -23,10 +33,18 @@ pub fn Doorhanger(
         })
     };
 
+    let trigger_div = create_node_ref::<Div>();
+    let UseElementSizeReturn { height, .. } = use_element_size(trigger_div);
+    let dog_ear_style = move || {
+        let top = (height.get() as i32) + 4;
+        format!("top: {top}px")
+    };
+
     view! {
         <div class={ doorhanger_classes } class=("is-active", move || visible.get())>
-            <div class="doorhanger-trigger">
-                { trigger() }
+            <div _ref=trigger_div class="doorhanger-trigger">
+                <div>{ trigger() }</div>
+                <div class="doorhanger-dog-ear" style=dog_ear_style></div>
             </div>
             <div class="doorhanger-container">
                 <div class="doorhanger-content p-2">

diff --git a/opendut-lea/src/peers/configurator/tabs/devices/device_panel.rs b/opendut-lea/src/peers/configurator/tabs/devices/device_panel.rs
@@ -1,19 +1,23 @@
 use leptos::{component, create_read_slice, create_slice, event_target_value, IntoView, MaybeSignal, RwSignal, SignalGet, SignalGetUntracked, view};
-use opendut_types::topology::InterfaceName;
+use opendut_types::topology::{DeviceId, InterfaceName};
 
-use crate::components::{ButtonColor, ButtonSize, ButtonState, FontAwesomeIcon, IconButton, ReadOnlyInput, Toggled, UserInput, UserInputValue};
+use crate::components::{ButtonColor, ButtonSize, ButtonState, ConfirmationButton, FontAwesomeIcon, IconButton, ReadOnlyInput, Toggled, UserInput, UserInputValue};
 use crate::peers::configurator::types::{EMPTY_DEVICE_NAME_ERROR_MESSAGE, UserDeviceConfiguration};
 
 #[component]
-pub fn DevicePanel(
+pub fn DevicePanel<OnDeleteFn>(
     device_configuration: RwSignal<UserDeviceConfiguration>,
-) -> impl IntoView {
+    on_delete: OnDeleteFn
+) -> impl IntoView
+where
+    OnDeleteFn: Fn(DeviceId) + 'static
+{
     let device_id_string = MaybeSignal::derive(move || device_configuration.get().id.to_string());
     let is_collapsed = move || device_configuration.get().is_collapsed;
 
     view! {
         <div class="panel is-light">
-            <PanelHeading device_configuration />
+            <DevicePanelHeading device_configuration on_delete />
             <div
                 class="panel-block"
                 class=("is-hidden", is_collapsed)
@@ -31,10 +35,13 @@ pub fn DevicePanel(
 }
 
 #[component]
-fn PanelHeading(
+fn DevicePanelHeading<OnDeleteFn>(
     device_configuration: RwSignal<UserDeviceConfiguration>,
-) -> impl IntoView {
-
+    on_delete: OnDeleteFn
+) -> impl IntoView
+where
+    OnDeleteFn: Fn(DeviceId) + 'static
+{
     let (is_collapsed, set_is_collapsed) = create_slice(device_configuration,
         move |device_configuration| {
             device_configuration.is_collapsed
@@ -58,8 +65,8 @@ fn PanelHeading(
 
     view! {
         <div
-            class="panel-heading is-clickable px-2 py-3"
-            on:click=move |_| set_is_collapsed.set(!is_collapsed.get_untracked())
+            class="panel-heading px-2 py-3"
+            // on:click=move |_| set_is_collapsed.set(!is_collapsed.get_untracked()) // Leads to problems with the door-hanger, because it tries to collapse a deleted device.
         >
             <div class="is-flex is-justify-content-space-between is-align-items-center">
                 <div>
@@ -76,13 +83,13 @@ fn PanelHeading(
                     <span class="is-size-5 has-text-weight-bold">{ device_name }</span>
                 </div>
                 <div>
-                    <IconButton
+                    <ConfirmationButton
                         icon=FontAwesomeIcon::TrashCan
                         color=ButtonColor::Light
                         size=ButtonSize::Small
-                        state=ButtonState::Disabled
-                        label="Delete Device"
-                        on_action=move || {}
+                        state=ButtonState::Enabled
+                        label="Delete Device?"
+                        on_conform=move || on_delete(device_configuration.get_untracked().id)
                     />
                 </div>
             </div>

diff --git a/opendut-lea/src/peers/configurator/tabs/devices/mod.rs b/opendut-lea/src/peers/configurator/tabs/devices/mod.rs
@@ -1,6 +1,6 @@
-use leptos::{component, create_memo, create_read_slice, create_rw_signal, IntoView, RwSignal, SignalUpdate, SignalWith, view};
+use leptos::{component, create_memo, create_rw_signal, create_slice, IntoView, RwSignal, SignalGetUntracked, SignalUpdate, SignalWith, SignalWithUntracked, view};
 
-use opendut_types::topology::DeviceId;
+use opendut_types::topology::{Device, DeviceId};
 
 use crate::components::UserInputValue;
 use crate::peers::configurator::tabs::devices::device_panel::DevicePanel;
@@ -19,20 +19,33 @@ pub fn DevicesTab(peer_configuration: RwSignal<UserPeerConfiguration>) -> impl I
 
 #[component]
 fn DevicesTable(peer_configuration: RwSignal<UserPeerConfiguration>) -> impl IntoView {
-    let devices = create_read_slice(
-        peer_configuration,
-        |configuration| {
-            Clone::clone(&configuration.devices)
+
+    let (devices, devices_setter) = create_slice(peer_configuration,
+        |peer_configuration| {
+            Clone::clone(&peer_configuration.devices)
         },
+        |peer_configuration, value| {
+            peer_configuration.devices = value
+        }
     );
 
+    let on_device_delete = move |device_id: DeviceId| {
+        let remaining_devices = devices.with_untracked(|devices| {
+            devices.iter()
+                .filter(|device| device.with_untracked(|device| device_id != device.id))
+                .cloned()
+                .collect::<Vec<_>>()
+        });
+        devices_setter.set(remaining_devices)
+    };
+
     let panels = create_memo(move |_| {
         devices.with(|devices| {
             devices.iter()
                 .cloned()
                 .map(|device_configuration| {
                     view! {
-                        <DevicePanel device_configuration />
+                        <DevicePanel device_configuration on_delete=on_device_delete />
                     }
                 })
                 .collect::<Vec<_>>()