21-peripherals-settings (#22)

Added the concept of peripheral settings. Reviewed-on: #22
2025-01-25 17:43:45 +00:00
parent 0e3f57f5fb
commit c7fe171cb4
10 changed files with 258 additions and 52 deletions
--- a/frontend/src/components/Settings/DeviceCard.svelte
+++ b/frontend/src/components/Settings/DeviceCard.svelte
@@ -15,6 +15,7 @@
    export let signalizable = false;
    export let signalized = false;
    export let disconnected = false;
+    export let selected = false;

    // Emit a delete event when the device is being removed
    const dispatch = createEventDispatcher();
@@ -36,7 +37,7 @@
 </script>

 <div class="card" on:dblclick={dblclick}>
-    <div class="profile" on:mousedown={click} style="color: {disconnected ? $colors.first : $colors.white};">
+    <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>
@@ -59,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;
--- a/frontend/src/components/Settings/InputsOutputsContent.svelte
+++ b/frontend/src/components/Settings/InputsOutputsContent.svelte
@@ -1,10 +1,11 @@
 <script lang=ts>
    import DeviceCard from "./DeviceCard.svelte";
    import Tab from "../General/Tab.svelte";
-    import { _ } from 'svelte-i18n'
+    import Input from "../General/Input.svelte";
+    import { t, _ } from 'svelte-i18n'
    import { generateToast, needProjectSave, peripherals } from "../../stores";
    import { get } from "svelte/store"
-    import { AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
+    import { UpdatePeripheralSettings, GetPeripheralSettings, AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
    import RoundedButton from "../General/RoundedButton.svelte";

    function ftdiConnect(){
@@ -84,6 +85,11 @@
                return { ...storedPeripherals };
            })
            $needProjectSave = true
+            // If the peripheral is currently selected, unselect it
+            if (selectedPeripheralSN == peripheral.SerialNumber) {
+                selectedPeripheralSN = null
+                selectedPeripheralSettings = {}
+            }
        }).catch((error) => {
            console.log("Unable to remove the peripheral from the project: " + error)
            generateToast('danger', 'bx-error', $_("removePeripheralErrorToast"))
@@ -107,15 +113,62 @@
        })
    }

+    // Select the peripheral to edit its settings
+    let selectedPeripheralSN = null
+    let selectedPeripheralSettings = {}
+    function selectPeripheral(peripheral){
+        // Load the settings array if the peripheral is detected
+        if (peripheral.isDetected){
+            GetPeripheralSettings(peripheral.ProtocolName, peripheral.SerialNumber).then((peripheralSettings) => {
+                selectedPeripheralSettings = peripheralSettings
+            }).catch((error) => {
+                console.log("Unable to get the peripheral settings: " + error)
+                generateToast('danger', 'bx-error', $_("getPeripheralSettingsErrorToast"))
+            })
+            // Select the current peripheral
+            selectedPeripheralSN = peripheral.SerialNumber
+        }
+    }
+
+    // Unselect the peripheral if it is disconnect
+    $: {
+        Object.entries($peripherals).filter(([serialNumber, peripheral]) => {
+            if (!peripheral.isDetected && peripheral.isSaved && selectedPeripheralSN == serialNumber) {
+                selectedPeripheralSN = null
+                selectedPeripheralSettings = {}
+            }
+        });
+    }
+    
    // Get the number of saved peripherals
    $: savedPeripheralNumber = Object.values($peripherals).filter(peripheral => peripheral.isSaved).length;
+
+    // Validate the peripheral settings
+    function validate(settingName, settingValue){
+        console.log("Peripheral setting '" + settingName + "' set to '" + settingValue + "'")
+        // Get the old setting type and convert the new setting to this type
+        const convert = {
+            number: Number,
+            string: String,
+            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
+        }).catch((error) => {
+            console.log("Unable to save the peripheral setting: " + error)
+            generateToast('danger', 'bx-error', $_("peripheralSettingSaveErrorToast"))
+        })
+    }
 </script>

 <div class="hardware">
    <div style="padding: 0.5em;">
-        <p style="margin-bottom: 1em;">Available peripherals</p>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareAvailableLabel")}</p>
        <div class="availableHardware">
-            <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> Detected</p>
+            <p style="color: var(--first-color);"><i class='bx bxs-plug'></i> {$_("projectHardwareDetectedLabel")}</p>
                {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                    {#if peripheral.isDetected}
                        <DeviceCard on:add={() => addPeripheral(peripheral)} on:dblclick={() => {
@@ -125,40 +178,59 @@
                            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> Others</p>
+            <p style="color: var(--first-color);"><i class='bx bxs-network-chart' ></i> {$_("projectHardwareOthersLabel")}</p>
            <RoundedButton on:click={createOS2L} text="Add an OS2L peripheral" icon="bx-plus-circle" tooltip="Configure an OS2L connection"/>
        </div>
    </div>

    <div style="padding: 0.5em; flex:2; width:100%;">
-        <p style="margin-bottom: 1em;">Project peripherals</p>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareSavedLabel")}</p>
        <div class="configuredHardware">
            {#if savedPeripheralNumber > 0}    
                {#each Object.entries($peripherals) as [serialNumber, peripheral]}
                    {#if peripheral.isSaved}
-                        <DeviceCard on:delete={() => removePeripheral(peripheral)} on:dblclick={() => removePeripheral(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 : ""} removable signalizable/>
+                        <DeviceCard 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/>
                    {/if}
                {/each}
            {:else}              
-                <i>No hardware saved for this project.</i>
+                <i>{$_("projectHardwareEmptyLabel")}</i>
            {/if}    
        </div>
-        <p style="margin-bottom: 1em;">Peripheral settings</p>
-        <div>
-            <p><i>Select a peripheral to edit its settings</i></p>
-            <button on:click={ftdiConnect}>Connect FTDI 0</button>
+        <p style="margin-bottom: 1em;">{$_("projectHardwareSettingsLabel")} (<b>{selectedPeripheralSN == null ? $_("projectHardwareNoSelection") : selectedPeripheralSN}</b>)</p>
+        <div class='flexSettings'>
+            {#if Object.keys(selectedPeripheralSettings).length > 0}    
+                {#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
+                    <div class="peripheralSetting">
+                        <Input on:blur={(event) => validate(settingName, event.detail.target.value)} label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
+                    </div>
+                {/each}
+            {:else}              
+                <i>{$_("projectHardwareNoSettingLabel")}</i>
+            {/if}   
+
+            <!-- <button on:click={ftdiConnect}>Connect FTDI 0</button>
            <button on:click={ftdiActivate}>Activate FTDI 0</button>
            <div class="slidecontainer">
                <input type="range" min="0" max="255" class="slider" bind:value={sliderValue} on:input={() => ftdiSetDevice(sliderValue)}>
            </div>
            <button on:click={ftdiDeactivate}>Deactivate FTDI 0</button>
-            <button on:click={ftdiDisconnect}>Disconnect FTDI 0</button>
+            <button on:click={ftdiDisconnect}>Disconnect FTDI 0</button> -->
        </div>
    </div>
 </div>

 <style>
+    .peripheralSetting{
+        margin: 0.5em;
+    }
+    .flexSettings{
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        overflow-y: auto;
+    }
+
    p {
        margin: 0;
    }
--- a/frontend/src/components/Settings/ProjectPropertiesContent.svelte
+++ b/frontend/src/components/Settings/ProjectPropertiesContent.svelte
@@ -18,6 +18,7 @@
        })
    }

+    // Validate the project information
    function validate(field, value){
        $showInformation[field] = value
        console.log($showInformation)
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -15,7 +15,7 @@
  "openProjectTooltip": "Open an existing project",
  "projectPropertiesTab": "Project properties",
  "projectPropertiesTooltip": "The project properties",
-  "projectInputOutputTab": "Inputs & outputs",
+  "projectInputOutputTab": "Hardware",
  "projectInputOutputTooltip": "The input/output hardware definition",
  
  "projectShowNameLabel": "Show name",
@@ -35,6 +35,14 @@
  "projectHardwareOutputsLabel": "OUTPUTS",
  "projectHardwareDeleteTooltip": "Delete this peripheral",
  "projectHardwareAddTooltip": "Add this peripheral to project",
+  "projectHardwareNoSelection": "Empty",
+  "projectHardwareAvailableLabel": "Available peripherals",
+  "projectHardwareSavedLabel": "Project peripherals",
+  "projectHardwareDetectedLabel": "Detected",
+  "projectHardwareOthersLabel": "Others",
+  "projectHardwareEmptyLabel": "No hardware saved for this project",
+  "projectHardwareSettingsLabel": "Peripheral settings",
+  "projectHardwareNoSettingLabel": "No setting can be displayed",

  "peripheralArrivalToast": "Peripheral inserted:",
  "peripheralRemovalToast": "Peripheral removed:",
@@ -44,8 +52,14 @@
  "removePeripheralErrorToast": "Unable to remove this peripheral from project",
  "os2lPeripheralCreatedToast": "Your OS2L peripheral has been created",
  "os2lPeripheralCreateErrorToast": "Unable to create the OS2L peripheral",
+  "getPeripheralSettingsErrorToast": "Unable to get the peripheral settings",
  "projectsLoadErrorToast": "Unable to get the projects list",
  "projectOpenedToast": "The project was opened:",
  "projectOpenErrorToast": "Unable to open the project",
-  "projectCreatedToast": "The project was created"
+  "projectCreatedToast": "The project was created",
+  "peripheralSettingSaveErrorToast": "Unable to save the peripheral settings",
+
+  "os2lIp": "OS2L server IP",
+  "os2lPort": "OS2L server port"
+
 }