11-hardware-definition (#17)

- Detection of FTDI and MIDI peripherals
- Creation od OS2L peripherals
- Optimization

Reviewed-on: #17

frontend/src/App.svelte

@@ -9,10 +9,55 @@
   import Show from './components/Show/Show.svelte';
   import GeneralConsole from './components/Console/GeneralConsole.svelte';
   import RoundIconButton from './components/General/RoundIconButton.svelte';
-  import { generateToast, currentProject, needProjectSave } from './stores';
+  import { generateToast, showInformation, needProjectSave, peripherals } from './stores';
   import { SaveProject } from '../wailsjs/go/main/App.js';
-    import { construct_svelte_component } from 'svelte/internal';
-    import ToastNotification from './components/General/ToastNotification.svelte';
+  import { construct_svelte_component } from 'svelte/internal';
+  import { EventsOn } from '../wailsjs/runtime'
+  import { CreateProject } from "../wailsjs/go/main/App";
+  import { WindowSetTitle } from "../wailsjs/runtime/runtime"
+  import { get } from "svelte/store"
+  import ToastNotification from './components/General/ToastNotification.svelte';
+
+  // Handle the event when a new peripheral is detected
+  EventsOn('PERIPHERAL_ARRIVAL', function(peripheralInfo){
+        // When a new peripheral is detected, add it to the map and:
+        // - Pass the isDetected key to true
+        // - Set the isSaved key to the last value
+        let peripheralsList = get(peripherals)
+        let lastSavedProperty = peripheralsList[peripheralInfo.SerialNumber]?.isSaved
+        peripheralInfo.isDetected = true
+        peripheralInfo.isSaved = (lastSavedProperty === true) ? true : false
+        peripherals.update((peripherals) => {
+          peripherals[peripheralInfo.SerialNumber] = peripheralInfo
+          return {...peripherals}
+        })
+        console.log("Hardware has been added to the system");
+        generateToast('info', 'bxs-hdd', $_("peripheralArrivalToast") + ' <b>' + peripheralInfo.Name + '</b>')
+  })
+
+  // Handle the event when a peripheral is removed from the system
+  EventsOn('PERIPHERAL_REMOVAL', function(peripheralInfo){
+      console.log("Hardware has been removed from the system");
+      // When a peripheral is disconnected, pass its isDetected key to false
+      // If the isSaved key is set to false, we can completely remove the peripheral from the list
+      let peripheralsList = get(peripherals)
+      let lastSavedProperty = peripheralsList[peripheralInfo.SerialNumber]?.isSaved
+      let needToDelete = (lastSavedProperty !== true) ? true : false
+      peripherals.update((storedPeripherals) => {
+        if (needToDelete){
+          delete storedPeripherals[peripheralInfo.SerialNumber];
+          return { ...storedPeripherals };
+        }
+        storedPeripherals[peripheralInfo.SerialNumber].isDetected = false
+        return {...storedPeripherals}
+      })
+      generateToast('warning', 'bxs-hdd', $_("peripheralRemovalToast") + ' <b>' + peripheralInfo.Name + '</b>')
+  })
+
+  // Set the window title
+  $: {
+    WindowSetTitle("DMXConnect - " + $showInformation.Name + ($needProjectSave ? " (unsaved)" : ""))
+  }
 
   let selectedMenu = "settings"
   // When the navigation menu changed, update the selected menu
@@ -22,35 +67,31 @@
 
   // Save the project
   function saveProject(){
-    SaveProject($currentProject).then((saveFile) => {
-      console.log($currentProject)
-      $currentProject.SaveFile = saveFile
+    SaveProject().then((filePath) => {
       needProjectSave.set(false)
-      console.log("Project has been saved")
-      generateToast('info', 'bxs-save', 'The project has been saved')
+      console.log("Project has been saved to " + filePath)
+      generateToast('info', 'bxs-save', $_("projectSavedToast"))
     }).catch((error) => {
       console.error(`Unable to save the project: ${error}`)
-      generateToast('danger', 'bx-error', 'Unable to save the project: ' + error)
+      generateToast('danger', 'bx-error', $_("projectSaveErrorToast") + ' ' + error)
     })
   }
 
-  function formatDate(date) {
-    const pad = (number) => number.toString().padStart(2, '0');
-    const year = date.getFullYear();
-    const month = pad(date.getMonth() + 1); // Les mois commencent à 0
-    const day = pad(date.getDate());
-    const hours = pad(date.getHours());
-    const minutes = pad(date.getMinutes());
-    return `${year}-${month}-${day}T${hours}:${minutes}`;
-  }
+  // Instanciate a new project
+  CreateProject().then((showInfo) => {
+    showInformation.set(showInfo)
+    $needProjectSave = true
+  })
 
-  currentProject.set({
-    Name: "My new show",
-    Date: formatDate(new Date()),
-    Avatar: "appicon.png",
-    UniversesNumber: 1,
-    Comments: "Write your comments here",
-    SaveFile: "",
+  // Handle window shortcuts
+  document.addEventListener('keydown', function(event) {
+      // Check the CTRL+S keys
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+          // Avoid the natural behaviour
+          event.preventDefault();
+          // Save the current project
+          saveProject()
+      }
   });
 
 </script>
@@ -58,7 +99,7 @@
 <header>
     <NavigationBar on:navigationChanged="{onNavigationChanged}"/>
     {#if $needProjectSave}
-      <RoundIconButton on:click={saveProject} icon="bx-save" width="2.5em" tooltip={$_("saveButtonTooltip")}></RoundIconButton>
+      <RoundIconButton on:mouseup={saveProject} icon="bx-save" width="2.5em" tooltip={$_("saveButtonTooltip")}></RoundIconButton>
     {/if}
     <Clock/>
 </header>