peripheral setting save

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -5,7 +5,7 @@
     import { t, _ } from 'svelte-i18n'
     import { generateToast, needProjectSave, peripherals } from "../../stores";
     import { get } from "svelte/store"
-    import { GetPeripheralSettings, AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
+    import { UpdatePeripheralSetting, GetPeripheralSettings, AddOS2LPeripheral, RemovePeripheral, ConnectFTDI, ActivateFTDI, DeactivateFTDI, DisconnectFTDI, SetDeviceFTDI, AddPeripheral } from "../../../wailsjs/go/main/App";
     import RoundedButton from "../General/RoundedButton.svelte";
 
     function ftdiConnect(){
@@ -129,6 +129,7 @@
         }
     }
 
+    // Unselect the peripheral if it is disconnect
     $: {
         Object.entries($peripherals).filter(([serialNumber, peripheral]) => {
             if (!peripheral.isDetected && peripheral.isSaved && selectedPeripheralSN == serialNumber) {
@@ -137,12 +138,20 @@
             }
         });
     }
-    function unselectPeripheral(){
-        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 + "'")
+        let peripheralProtocolName = get(peripherals)[selectedPeripheralSN].ProtocolName
+        UpdatePeripheralSetting(peripheralProtocolName, selectedPeripheralSN, settingName, settingValue).then(()=> {
+            $needProjectSave = true
+        }).catch((error) => {
+            generateToast('error', 'bx-error', $_("peripheralSettingSaveErrorToast"))
+        })
+    }
 </script>
 
 <div class="hardware">
@@ -183,11 +192,11 @@
             {#if Object.keys(selectedPeripheralSettings).length > 0}    
                 {#each Object.entries(selectedPeripheralSettings) as [settingName, settingValue]}
                     <div class="peripheralSetting">
-                        <Input label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
+                        <Input on:blur={(event) => validate(settingName, event.detail.target.value)} label={$t(settingName)} type="{typeof(settingValue)}" width='100%' value="{settingValue}"/>
                     </div>
                 {/each}
             {:else}              
-                <p><i>Select a peripheral to edit its settings</i></p>
+                <i>{$_("projectHardwareNoSettingLabel")}</i>
             {/if}   
 
             <!-- <button on:click={ftdiConnect}>Connect FTDI 0</button>

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -18,6 +18,7 @@
         })
     }
 
+    // Validate the project information
     function validate(field, value){
         $showInformation[field] = value
         console.log($showInformation)

frontend/src/lang/en.json

@@ -42,6 +42,7 @@
   "projectHardwareOthersLabel": "Others",
   "projectHardwareEmptyLabel": "No hardware saved for this project",
   "projectHardwareSettingsLabel": "Peripheral settings",
+  "projectHardwareNoSettingLabel": "No setting can be displayed",
 
   "peripheralArrivalToast": "Peripheral inserted:",
   "peripheralRemovalToast": "Peripheral removed:",
@@ -56,8 +57,9 @@
   "projectOpenedToast": "The project was opened:",
   "projectOpenErrorToast": "Unable to open the project",
   "projectCreatedToast": "The project was created",
+  "peripheralSettingSaveErrorToast": "Unable to save the peripheral setting",
 
-  "os2lIpSetting": "IP Address",
-  "os2lPortSetting": "Port"
+  "os2lIpSetting": "OS2L server IP",
+  "os2lPortSetting": "OS2L server port"
 
 }