project management feature (#15)

Reviewed-on: #15

frontend/src/App.svelte

@@ -8,16 +8,55 @@
   import Devices from './components/Devices/Devices.svelte';
   import Show from './components/Show/Show.svelte';
   import GeneralConsole from './components/Console/GeneralConsole.svelte';
+  import RoundIconButton from './components/General/RoundIconButton.svelte';
+  import { currentProject, needProjectSave } from './stores';
+  import { SaveProject } from '../wailsjs/go/main/App.js';
+    import { construct_svelte_component } from 'svelte/internal';
 
   let selectedMenu = "settings"
   // When the navigation menu changed, update the selected menu
 	function onNavigationChanged(event){
     selectedMenu = event.detail.menu;
 	}
+
+  // Save the project
+  function saveProject(){
+    SaveProject($currentProject).then((saveFile) => {
+      console.log($currentProject)
+      $currentProject.SaveFile = saveFile
+      needProjectSave.set(false)
+      console.log("Project has been saved")
+    }).catch((error) => {
+      console.error(`Unable to save the project: ${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}`;
+  }
+
+  currentProject.set({
+    Name: "My new show",
+    Date: formatDate(new Date()),
+    Avatar: "appicon.png",
+    UniversesNumber: 1,
+    Comments: "Write your comments here",
+    SaveFile: "",
+  });
+
 </script>
 
 <header>
     <NavigationBar on:navigationChanged="{onNavigationChanged}"/>
+    {#if $needProjectSave}
+      <RoundIconButton on:click={saveProject} icon="bx-save" width="2.5em" tooltip={$_("saveButtonTooltip")}></RoundIconButton>
+    {/if}
     <Clock/>
 </header>
 <main>