resolved disconnected hardware when it is detected

frontend/src/App.svelte

@@ -54,9 +54,24 @@
       generateToast('warning', 'bxs-hdd', $_("peripheralRemovalToast") + ' <b>' + peripheralInfo.Name + '</b>')
   })
 
+  // Handle the event when a peripheral status is updated
+  EventsOn('PERIPHERAL_STATUS', function(peripheral, status){
+      console.log("Hardware status has been updated to " + status);
+      // When a peripheral status is updated, update it in the store
+      peripherals.update((storedPeripherals) => {
+          return {
+          ...storedPeripherals,
+          [peripheral.SerialNumber]: {
+              ...storedPeripherals[peripheral.SerialNumber],
+              isSaved: true,
+              Status: status,
+          },
+      }})
+  })
+
   // Set the window title
   $: {
-    WindowSetTitle("DMXConnect - " + $showInformation.Name + ($needProjectSave ? " (unsaved)" : ""))
+    WindowSetTitle("DMXConnect - " + $showInformation.Name + ($needProjectSave ? " (" + $_("unsavedProjectFlag") + ")" : ""))
   }
 
   let selectedMenu = "settings"

frontend/src/components/Settings/DeviceCard.svelte

@@ -14,9 +14,8 @@
     export let addable = false;
     export let signalizable = false;
     export let signalized = false;
-    export let disconnected = false;
     export let selected = false;
-    export let waiting = false;
+    export let status = "disconnected";
 
     // Emit a delete event when the device is being removed
     const dispatch = createEventDispatcher();
@@ -38,11 +37,11 @@
 </script>
 
 <div class="card" on:dblclick={dblclick}>
-    <div class="{selected ? "selected" : "unselected"} {waiting ? "waiting" : ""}" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
+    <div class="{selected ? "selected" : "unselected"} {status == "connecting" ? "waiting" : ""}" on:mousedown={click} style="color: {(status == "disconnected") ? $colors.first : $colors.white};">
         <div style="z-index: 1;">
-            <p>{#if disconnected}<i class='bx bx-no-signal' style="font-size:100%; color: var(--nok-color);"></i> {/if}{title}</p>
+            <p>{#if status == "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>
-            {#if disconnected}
+            {#if status == "disconnected"}
                 <h6><b>Disconnected</b></h6>
             {:else}
                 <h6>{line1}</h6>
@@ -51,9 +50,9 @@
         </div>
         
         <div class="actions">
-            <InfoButton on:click={add} color="{disconnected ? $colors.first : $colors.white}" style="margin: 0.2em; display: { addable ? 'flex' : 'none' }" icon='bxs-message-square-add' interactive message={$_("projectHardwareAddTooltip")}/>
-            <InfoButton on:click={remove} color="{disconnected ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
-            <InfoButton style="margin: 0.2em;" background={ signalized ? $colors.orange : $colors.first } icon='bx-pulse' hide={!signalizable}/>
+            <InfoButton on:click={add} color="{(status == "disconnected") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { addable ? 'flex' : 'none' }" icon='bxs-message-square-add' interactive message={$_("projectHardwareAddTooltip")}/>
+            <InfoButton on:click={remove} color="{(status == "disconnected") ? $colors.first : $colors.white}" style="margin: 0.2em; display: { removable ? 'flex' : 'none' }" icon='bx-trash' interactive message={$_("projectHardwareDeleteTooltip")}/>
+            <InfoButton style="margin: 0.2em; display: { (status == "activated" || status == "deactivated")  ? 'flex' : 'none' }" background={ (status == "activated") ? $colors.ok : (status == "deactivated") ? $colors.nok : null} icon='bx-pulse' hide={!signalizable}/>
         </div>
     </div>
 </div>

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -12,15 +12,17 @@
     function addPeripheral(peripheral){
         // Add the peripheral to the project (backend)
         AddPeripheral(peripheral).then((serialNumber) => {
-            peripheral.SerialNumber = serialNumber
-            peripherals.update((value) => {
-                // If the peripheral doesn't exists yet, create it
-                if (!(peripheral.SerialNumber in value)) {
-                    value[peripheral.SerialNumber] = peripheral
-                }
-                value[peripheral.SerialNumber].isSaved = true;
-                return {...value}
-            })
+            peripherals.update((storedPeripherals) => {
+                return {
+                ...storedPeripherals,
+                [serialNumber]: {
+                    ...storedPeripherals[serialNumber],
+                    Name: peripheral.Name,
+                    ProtocolName: peripheral.ProtocolName,
+                    SerialNumber: serialNumber,
+                    isSaved: true,
+                },
+            }})
             $needProjectSave = true
         }).catch((error) => {
             console.log("Unable to add the peripheral to the project: " + error)
@@ -62,15 +64,15 @@
     let selectedPeripheralSettings = {}
     function selectPeripheral(peripheral){
         // Load the settings array if the peripheral is detected
-        if (peripheral.isDetected){
+        if (peripheral.isSaved){
             GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
                 selectedPeripheralSettings = peripheralSettings
+                // Select the current peripheral
+                selectedPeripheralSN = peripheral.SerialNumber
             }).catch((error) => {
                 console.log("Unable to get the peripheral settings: " + error)
                 generateToast('danger', 'bx-error', $_("getPeripheralSettingsErrorToast"))
             })
-            // Select the current peripheral
-            selectedPeripheralSN = peripheral.SerialNumber
         }
     }
 
@@ -97,7 +99,6 @@
             boolean: Boolean,
         }[typeof(selectedPeripheralSettings[settingName])] || (x => x)
         selectedPeripheralSettings[settingName] = convert(settingValue)
-        console.log(typeof(selectedPeripheralSettings[settingName]))
         let peripheralProtocolName = get(peripherals)[selectedPeripheralSN].ProtocolName
         UpdatePeripheralSettings(peripheralProtocolName, selectedPeripheralSN, selectedPeripheralSettings).then(()=> {
             $needProjectSave = true
@@ -119,7 +120,7 @@
                             if(!peripheral.isSaved) 
                                 addPeripheral(peripheral) 
                             }}
-                            title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
+                            status="connected" title={peripheral.Name} type={peripheral.ProtocolName} location={peripheral.Location ? peripheral.Location : ""} line1={"S/N: " + peripheral.SerialNumber} addable={!peripheral.isSaved}/>
                     {/if}
                 {/each}
             <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
@@ -133,8 +134,8 @@
             {#if savedPeripheralNumber > 0}    
                 {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                     {#if peripheral.isSaved}
-                        <DeviceCard waiting on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
-                        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/>
+                        <DeviceCard status="{peripheral.Status}" on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(peripheral)} on:click={() => selectPeripheral(peripheral)}
+                        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}              

frontend/src/lang/en.json

@@ -13,6 +13,7 @@
   "newProjectTooltip": "Create a new project",
   "openProjectString": "Open",
   "openProjectTooltip": "Open an existing project",
+  "unsavedProjectFlag": "unsaved",
   "projectPropertiesTab": "Project properties",
   "projectPropertiesTooltip": "The project properties",
   "projectInputOutputTab": "Hardware",