From 0114ed03bf97f86488f6e807b795586418e1160c Mon Sep 17 00:00:00 2001
From: Valentin Boulanger <valentin.boulanger@protonmail.com>
Date: Sat, 25 Jan 2025 12:16:29 +0100
Subject: [PATCH] peripheral selection optimized

---
 .../src/components/Settings/DeviceCard.svelte | 23 ++++++++++---
 .../Settings/InputsOutputsContent.svelte      | 33 ++++++++++++++-----
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/Settings/DeviceCard.svelte b/frontend/src/components/Settings/DeviceCard.svelte
index cd705f1..85158e0 100644
--- a/frontend/src/components/Settings/DeviceCard.svelte
+++ b/frontend/src/components/Settings/DeviceCard.svelte
@@ -37,7 +37,7 @@
 </script>
 
 <div class="card" on:dblclick={dblclick}>
-    <div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white}; border: {selected ? "solid " + $colors.first : "none"};">
+    <div class="profile {selected ? "selected" : "unselected"}" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
         <div>
             <p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
             <h6 class="subtitle">{type} {location != '' ? "- " : ""}<i>{location}</i></h6>
@@ -60,16 +60,29 @@
 
 
 <style>
-    .profile:hover{
-        background-color: var(--third-color);
+    .unselected:hover{
+        background: linear-gradient(to bottom right, var(--second-color), var(--third-color));
     }
     .card{
         position: relative;   
     }
-    .profile {
-        background-color: var(--second-color);
+    .selected {
+        background-color: var(--first-color);
         margin: 0.2em;
         padding-left: 0.3em;
+        padding-bottom: 0.3em;
+        border-radius: 0.2em;
+        display: flex;
+        justify-content: space-between;
+        text-align: left;
+        cursor: pointer;
+    }
+    .unselected{
+        background-color: var(--third-color);
+        background: fixed;
+        margin: 0.2em;
+        padding-left: 0.3em;
+        padding-bottom: 0.3em;
         border-radius: 0.2em;
         display: flex;
         justify-content: space-between;
diff --git a/frontend/src/components/Settings/InputsOutputsContent.svelte b/frontend/src/components/Settings/InputsOutputsContent.svelte
index d56dbab..6c5d8a4 100644
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -117,14 +117,29 @@
     let selectedPeripheralSN = null
     let selectedPeripheralSettings = {}
     function selectPeripheral(peripheral){
-        // Load the settings array
-        GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
-            selectedPeripheralSettings = peripheralSettings
-        }).catch((error) => {
-            generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
-        })
-        // Select the current peripheral
-        selectedPeripheralSN = peripheral.SerialNumber
+        // Load the settings array if the peripheral is detected
+        if (peripheral.isDetected){
+            GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
+                selectedPeripheralSettings = peripheralSettings
+            }).catch((error) => {
+                generateToast('error', 'bx-error', $_("getPeripheralSettingsErrorToast"))
+            })
+            // Select the current peripheral
+            selectedPeripheralSN = peripheral.SerialNumber
+        }
+    }
+
+    $: {
+        Object.entries($peripherals).filter(([serialNumber, peripheral]) => {
+            if (!peripheral.isDetected && peripheral.isSaved && selectedPeripheralSN == serialNumber) {
+                selectedPeripheralSN = null
+                selectedPeripheralSettings = {}
+            }
+        });
+    }
+    function unselectPeripheral(){
+        selectedPeripheralSN = null
+        selectedPeripheralSettings = {}
     }
     // Get the number of saved peripherals
     $: savedPeripheralNumber = Object.values($peripherals).filter(peripheral => peripheral.isSaved).length;
@@ -156,7 +171,7 @@
                 {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                     {#if peripheral.isSaved}
                         <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
-                        disconnected={!peripheral.isDetected} title={peripheral.Name == "" ? "Please wait..." : peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
+                        disconnected={!peripheral.isDetected} title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={peripheral.SerialNumber ? "S/N: " + peripheral.SerialNumber : ""} selected={serialNumber == selectedPeripheralSN} removable signalizable/>
                     {/if}
                 {/each}
             {:else}