project management feature (#15)

Reviewed-on: #15

.gitignore

@@ -1,4 +1,5 @@
-build
+build/bin
+projects
 node_modules
 frontend/.vscode
 frontend/dist

app.go

@@ -3,6 +3,21 @@ package main
 import (
 	"context"
 	"fmt"
+	"io"
+	"log"
+	"os"
+	"path/filepath"
+	"strings"
+
+	"github.com/wailsapp/wails/v2/pkg/runtime"
+
+	"gopkg.in/yaml.v2"
+)
+
+const (
+	projectsDirectory = "projects"        // The directory were are stored all the projects
+	avatarsDirectory  = "frontend/public" // The directory were are stored all the avatars
+	projectExtension  = ".dmxproj"        // The extension of a DMX Connect project
 )
 
 // App struct
@@ -21,7 +36,147 @@ func (a *App) startup(ctx context.Context) {
 	a.ctx = ctx
 }
 
-// Greet returns a greeting for the given name
-func (a *App) Greet(name string) string {
-	return fmt.Sprintf("Hello %s, It's show time!", name)
+// GetProjects gets all the projects in the projects directory
+func (a *App) GetProjects() ([]ProjectInfo, error) {
+	projects := []ProjectInfo{}
+
+	f, err := os.Open(projectsDirectory)
+	if err != nil {
+		log.Fatalf("Unable to open the projects directory: %v", err)
+		return nil, err
+	}
+
+	files, err := f.Readdir(0)
+	if err != nil {
+		log.Fatalf("Unable to read the projects directory: %v", err)
+		return nil, err
+	}
+
+	for _, fileInfo := range files {
+		// Open the file and get the show name
+		fileData, err := os.ReadFile(filepath.Join(projectsDirectory, fileInfo.Name()))
+		if err == nil {
+			projectObject := ProjectInfo{}
+			err = yaml.Unmarshal(fileData, &projectObject)
+			if err == nil {
+				// Add the SaveFile property
+				projectObject.ShowInfo.SaveFile = fileInfo.Name()
+				projects = append(projects, projectObject)
+			}
+		}
+	}
+	return projects, nil
+}
+
+// GetProjectInfo returns the information of the saved project
+func (a *App) GetProjectInfo(projectFile string) (ShowInfo, error) {
+	projectPath := filepath.Join(projectsDirectory, projectFile)
+	content, err := os.ReadFile(projectPath)
+	if err != nil {
+		log.Fatalf("Unable to read the project file: %v", err)
+		return ShowInfo{}, err
+	}
+
+	projectInfo := ProjectInfo{}
+
+	err = yaml.Unmarshal(content, &projectInfo)
+	if err != nil {
+		log.Fatalf("Unable to get the project information: %v", err)
+		return ShowInfo{}, err
+	}
+	projectInfo.ShowInfo.SaveFile = projectFile
+	return projectInfo.ShowInfo, nil
+}
+
+// ChooseAvatarPath opens a filedialog to choose the show avatar
+func (a *App) ChooseAvatarPath() (string, error) {
+	// Open the file dialog box
+	filePath, err := runtime.OpenFileDialog(a.ctx, runtime.OpenDialogOptions{
+		Title: "Choose your show avatar",
+		Filters: []runtime.FileFilter{
+			{
+				DisplayName: "Images",
+				Pattern:     "*.png;*.jpg;*.jpeg",
+			},
+		},
+	})
+	if err != nil {
+		return "", err
+	}
+	// Copy the avatar to the application avatars path
+	avatarPath := filepath.Join(avatarsDirectory, filepath.Base(filePath))
+	_, err = copy(filePath, avatarPath)
+	if err != nil {
+		return "", err
+	}
+	return filepath.Base(filePath), nil
+}
+
+// SaveProject saves the project
+func (a *App) SaveProject(showInfo ShowInfo) (string, error) {
+	log.Printf("Saving the project %s to %s", showInfo.Name, showInfo.SaveFile)
+	// If there is no save file, create a new one with the show name
+	if showInfo.SaveFile == "" {
+		showInfo.SaveFile = fmt.Sprintf("%s%s", formatString(showInfo.Name), projectExtension)
+	}
+	project := ProjectInfo{}
+	log.Printf("The number of universes: %d", showInfo.UniversesNumber)
+	project.ShowInfo = showInfo
+	data, err := yaml.Marshal(project)
+	if err != nil {
+		return "", err
+	}
+	err = os.WriteFile(filepath.Join(projectsDirectory, showInfo.SaveFile), data, os.ModePerm)
+	if err != nil {
+		return "", err
+	}
+	return showInfo.SaveFile, nil
+}
+
+// ShowInfo defines the information of the show
+type ShowInfo struct {
+	Name            string `yaml:"name"`
+	Date            string `yaml:"date"`
+	UniversesNumber int    `yaml:"universesNumber"`
+	Avatar          string `yaml:"avatar"`
+	Comments        string `yaml:"comments"`
+	SaveFile        string `yaml:"-"`
+}
+
+// ProjectInfo defines all the information for a lighting project
+type ProjectInfo struct {
+	ShowInfo ShowInfo `yaml:"show"` // Show information
+}
+
+func formatString(input string) string {
+	// Convertir en minuscules
+	lowerCaseString := strings.ToLower(input)
+	// Remplacer les espaces par des underscores
+	formattedString := strings.ReplaceAll(lowerCaseString, " ", "_")
+	return formattedString
+}
+
+func copy(src, dst string) (int64, error) {
+	sourceFileStat, err := os.Stat(src)
+	if err != nil {
+		return 0, err
+	}
+
+	if !sourceFileStat.Mode().IsRegular() {
+		return 0, fmt.Errorf("%s is not a regular file", src)
+	}
+
+	source, err := os.Open(src)
+	if err != nil {
+		return 0, err
+	}
+	defer source.Close()
+
+	destination, err := os.Create(dst)
+	if err != nil {
+		return 0, err
+	}
+	defer destination.Close()
+	nBytes, err := io.Copy(destination, source)
+	return nBytes, err
 }

build/windows/info.json

@@ -0,0 +1,15 @@
+{
+	"fixed": {
+		"file_version": "{{.Info.ProductVersion}}"
+	},
+	"info": {
+		"0000": {
+			"ProductVersion": "{{.Info.ProductVersion}}",
+			"CompanyName": "{{.Info.CompanyName}}",
+			"FileDescription": "{{.Info.ProductName}}",
+			"LegalCopyright": "{{.Info.Copyright}}",
+			"ProductName": "{{.Info.ProductName}}",
+			"Comments": "{{.Info.Comments}}"
+		}
+	}
+}

build/windows/wails.exe.manifest

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<assembly manifestVersion="1.0" xmlns="urn:schemas-microsoft-com:asm.v1" xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
+    <assemblyIdentity type="win32" name="com.wails.{{.Name}}" version="{{.Info.ProductVersion}}.0" processorArchitecture="*"/>
+    <dependency>
+        <dependentAssembly>
+            <assemblyIdentity type="win32" name="Microsoft.Windows.Common-Controls" version="6.0.0.0" processorArchitecture="*" publicKeyToken="6595b64144ccf1df" language="*"/>
+        </dependentAssembly>
+    </dependency>
+    <asmv3:application>
+        <asmv3:windowsSettings>
+            <dpiAware xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">true/pm</dpiAware> <!-- fallback for Windows 7 and 8 -->
+            <dpiAwareness xmlns="http://schemas.microsoft.com/SMI/2016/WindowsSettings">permonitorv2,permonitor</dpiAwareness> <!-- falls back to per-monitor if per-monitor v2 is not supported -->
+        </asmv3:windowsSettings>
+    </asmv3:application>
+</assembly>

frontend/index.html

@@ -5,7 +5,6 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
     <link rel='stylesheet' href='./src/style.css'>
-    <link rel="shortcut icon" type="image/x-icon" href="./src/assets/images/logo-universal.png" />
     <title>DMXConnect</title>
 </head>
 <body style="background-color:#1B262C;">

frontend/src/App.svelte

@@ -1,34 +1,77 @@
 <script>
-  import logo from './assets/images/logo-universal.png'
-  import {Greet} from '../wailsjs/go/main/App.js'
   import { _ } from 'svelte-i18n'
-	import NavigationBar from './components/NavigationBar.svelte';
-  import Clock from './components/Clock.svelte'
-  import Stage from './components/Stage.svelte';
-  import Atmo from './components/Atmo.svelte';
-  import Settings from './components/Settings.svelte';
-  import DevicesLibrary from './components/DevicesLibrary.svelte';
+	import NavigationBar from './components/General/NavigationBar.svelte';
+  import Clock from './components/General/Clock.svelte'
+  import Preparation from './components/Preparation/Preparation.svelte';
+  import Animation from './components/Animation/Animation.svelte';
+  import Settings from './components/Settings/Settings.svelte';
+  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 = "stage"
+  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>
-	{#if selectedMenu === "stage"}
-  <Stage />
-  {:else if selectedMenu === "atmo"}
-  <Atmo />
-  {:else if selectedMenu === "settings"}
+	{#if selectedMenu === "settings"}
   <Settings />
-  {:else if selectedMenu === "devicesLibrary"}
-  <DevicesLibrary />
+  {:else if selectedMenu === "devices"}
+  <Devices />
+  {:else if selectedMenu === "preparation"}
+  <Preparation />
+  {:else if selectedMenu === "animation"}
+  <Animation />
+  {:else if selectedMenu === "show"}
+  <Show />
+  {:else if selectedMenu === "console"}
+  <GeneralConsole />
   {/if}
 </main>
 

frontend/src/components/Animation/Animation.svelte

@@ -0,0 +1 @@
+<h1>Animation creator</h1>

frontend/src/components/Atmo.svelte

@@ -1 +0,0 @@
-<h1>Atmo</h1>

frontend/src/components/Clock.svelte

@@ -1,50 +0,0 @@
-
-<script>
-    import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
-
-    // Import the main colors from the store
-    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
-    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
-    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
-    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
-    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
-    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
-    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
-
-    let time = new Date()
-
-    $: hours = time.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
-    $: minutes = time.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
-    $: seconds = time.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
-
-    const interval = setInterval(() => {
-        time = new Date()
-    }, 1000);
-
-    onDestroy(() => {
-        clearInterval(interval);
-        unsubscribeFirstColor();
-        unsubscribeSecondColor();
-        unsubscribeThirdColor();
-        unsubscribeFourthColor();
-        unsubscribeOkColor();
-        unsubscribeNokColor();
-    });
-</script>
-
-<div style='color:{fourthColor}'>
-    <span class="bold">{hours}:{minutes}</span><span>{seconds}</span>
-</div>
-
-<style>
-    div{
-        float:right;
-    }
-    
-    .bold {
-        font-weight: bold;
-        font-size: 2em;
-    }
-</style>
-

frontend/src/components/Console/GeneralConsole.svelte

@@ -0,0 +1 @@
+<h1>General console</h1>

frontend/src/components/Devices/Devices.svelte

@@ -0,0 +1 @@
+<h1>Devices configuration</h1>

frontend/src/components/DevicesLibrary.svelte

@@ -1 +0,0 @@
-<h1>Devices Library</h1>

frontend/src/components/General/Clock.svelte

@@ -0,0 +1,32 @@
+
+<script>
+    import { onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+
+    let time = new Date()
+
+    $: hours = time.getHours().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    $: minutes = time.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    $: seconds = time.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+
+    const interval = setInterval(() => {
+        time = new Date()
+    }, 1000);
+
+</script>
+
+<div style='color:{$colors.fourth}'>
+    <span class="bold">{hours}:{minutes}</span><span>{seconds}</span>
+</div>
+
+<style>
+    div{
+        float:right;
+    }
+    
+    .bold {
+        font-weight: bold;
+        font-size: 2em;
+    }
+</style>
+

frontend/src/components/General/DropdownList.svelte

@@ -0,0 +1,95 @@
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+    import Tooltip from './Tooltip.svelte';
+
+    export let text = 'Default button';
+    export let icon = ''
+    export let tooltip = "Default tooltip"
+    export let choices = new Map()
+    export let active = false;
+    export let style = '';
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+    // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function handleclick(key){
+        // Deactivate the list visibility
+        hideList()
+        dispatch('selected', key)
+    }
+
+    // Show the option list
+    let listShowing = false
+    function toggleList(){
+        if (!listShowing) {
+            dispatch('click')
+        }
+        listShowing = !listShowing
+    }
+    function hideList(){
+        listShowing = false
+    }
+</script>
+
+<!-- <Tooltip message={tooltip} show={tooltipShowing}></Tooltip> -->
+<div class="container">
+    <button
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        on:click={toggleList}
+        style='color: {$colors.white}; background-color: { active ? $colors.second : $colors.third }; border:none; {style}'><i class='bx { icon}'></i> { text }
+    </button>
+    <Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
+    <div class="list" style="color: {$colors.white}; display: {listShowing ? "block" : "none"};"
+        on:mouseleave={hideList}>
+        {#each Array.from(choices) as [key, value]}
+            <div class="item" on:click={() => handleclick({key})}>{value}</div>
+        {/each}
+    </div>
+</div>
+
+<style>
+    .item{
+        border-radius: 0.3em;
+        padding: 0.3em;
+    }
+    .item:hover {
+        background-color: var(--second-color);
+        color: var(--white-color);
+    }
+    .container{
+        position: relative;
+        display: inline-block;
+    }
+    .list {
+        z-index: 200;
+        padding: 0.2em;
+        backdrop-filter: blur(20px);
+        margin-top: 0.2em;
+        position: absolute;
+        width: auto;
+        cursor: pointer;
+        border-radius: 0.5em;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        max-width: 30em;
+        max-height: 40vh;
+        overflow-y: scroll;
+        scrollbar-width: none;
+    }
+    button{
+        cursor: pointer;
+        border-radius: 0.5em;
+        margin: 0;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+</style>

frontend/src/components/General/Input.svelte

@@ -0,0 +1,84 @@
+<script lang=ts>
+    import { createEventDispatcher } from 'svelte';
+    import {colors} from '../../stores.js';
+
+    export let label = '';
+    export let type = 'text';
+    export let min = undefined;
+    export let max = undefined;
+    export let src = undefined;
+    export let alt = undefined;
+    export let width = undefined;
+    export let height = undefined;
+    export let value = '';
+    export let placeholder = undefined;
+
+    const dispatch = createEventDispatcher();
+
+    function handleInput(event){
+        value = event.target.value
+        dispatch('input', value)
+    }
+
+</script>
+
+<div style="width: {width}; height: {height};">
+    <p style="color: {$colors.first};">{label}</p>
+    <!-- Handle the textarea input -->
+    {#if type === 'large'}
+        <textarea style="background-color: {$colors.first}; color: {$colors.white};" placeholder={placeholder} value={value} on:input={handleInput}/>
+    <!-- Handle the simple inputs -->
+    {:else}
+        <input style="background-color: {$colors.first}; color: {$colors.white};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder} on:input={handleInput}/>
+    {/if}
+</div>
+
+<style>
+    div{
+        display:inline-block;
+    }
+    p{
+        margin:0;
+    }
+    input{
+        border:none;
+        border-radius: 0.5em;
+        text-align: center;
+        width: 100%;
+    }
+
+    input::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    input::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    input:focus {
+        outline: 1px solid #BBE1FA;
+    }
+
+    textarea{
+        border:none;
+        border-radius: 0.5em;
+        resize: none;
+        width: 100%;
+    }
+
+    textarea::selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+
+    /* Pour Firefox */
+    textarea::-moz-selection {
+        background: #0F4C75; /* Couleur de fond de la sélection */
+        color: #FFFFFF; /* Couleur du texte de la sélection */
+    }
+    textarea:focus {
+        outline: 1px solid #BBE1FA;
+    }
+</style>

frontend/src/components/General/NavigationBar.svelte

@@ -0,0 +1,62 @@
+<script>
+    import RoundIconButton from './RoundIconButton.svelte';
+    import Toggle from './Toggle.svelte';
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+    import { _ } from 'svelte-i18n'
+
+    //---Navigation System---//
+
+    let menuStates = {
+        settings: true,
+        devices: false,
+        preparation: false,
+        animation: false,
+        show: false,
+        console:false
+    };
+
+    // Handle the click on a navigation button
+    function handleNavigation(menu) {
+        emitNavigationEvent(menu);
+        deselectMenus();
+        menuStates[menu] = true;
+    }
+
+    // Deselect all menus from the navigation bar
+    function deselectMenus(){
+        for (const menu in menuStates) {
+            menuStates[menu] = false;
+        }
+    }
+
+    // Emit navigation events
+    const dispatch = createEventDispatcher();
+    function emitNavigationEvent(menu) {
+        dispatch('navigationChanged', {
+            menu: menu
+        });
+    }
+
+</script>
+
+<div style="background-color: {$colors.second};">
+    <RoundIconButton on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></RoundIconButton>
+    <RoundIconButton on:click="{() => handleNavigation("devices")}" icon="bx-video-plus" width="2.5em" tooltip={$_("devicesMenuTooltip")} active={menuStates.devices}></RoundIconButton>
+    <RoundIconButton on:click="{() => handleNavigation("preparation")}" icon="bx-layer" width="2.5em" tooltip="{$_("preparationMenuTooltip")}" active={menuStates.preparation}></RoundIconButton>
+    <RoundIconButton on:click="{() => handleNavigation("animation")}" icon="bx-film" width="2.5em" tooltip="{$_("animationMenuTooltip")}" active={menuStates.animation}></RoundIconButton>
+    <RoundIconButton on:click="{() => handleNavigation("show")}" icon="bxs-grid" width="2.5em" tooltip="{$_("showMenuTooltip")}" active={menuStates.show}></RoundIconButton>
+    <RoundIconButton on:click="{() => handleNavigation("console")}" icon="bx-slider" width="2.5em" tooltip="{$_("consoleMenuTooltip")}" active={menuStates.console}></RoundIconButton>
+    <Toggle icon="bx-shape-square" width="2.5em" height="1.3em" tooltip="{$_("stageRenderingToggleTooltip")}"></Toggle>
+    <Toggle icon="bx-play" width="2.5em" height="1.3em" tooltip="{$_("showActivationToggleTooltip")}"></Toggle>
+</div>
+<style>
+    div {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px;
+        border-radius: 40px;
+        gap: 0.3em;
+        flex-wrap: wrap;
+    }
+</style>

frontend/src/components/General/RoundIconButton.svelte

@@ -2,7 +2,7 @@
 
 <script>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import {colors} from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 
@@ -10,31 +10,24 @@
     export let width = "10em" // The button width
     export let active = false // If the button is active or not
     export let tooltip = "Default tooltip" // The description shown in the tooltip
-    export let operationalStatus // The optional button status
+    export let operationalStatus = undefined// The optional button status
     export let okStatusLabel = "" // The label shown when the button is OK
     export let nokStatusLabel = "" // The label shown when the button is NOK
 
     let tooltipMessage = tooltip
 
-    // Import the main colors from the store
-    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
-    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
-    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
-    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
-    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
-    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
-    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
-
     // Default values for background and foreground
-    $: background = firstColor
-    $: foreground = firstColor
+    $: background = $colors.first
+    $: foreground = $colors.first
 
     // Change the background when the selected prop changed
     $: {
         if (active === true) {
-            background = thirdColor
+            background = $colors.third
+            foreground = $colors.fourth
         } else {
-            background = fourthColor
+            background = $colors.fourth
+            foreground = $colors.second
         }
     }
 
@@ -42,13 +35,13 @@
     // undefined => no status displayed
     // operationalStatus = true => OK color displayed
     // operationalStatus = false => NOK color displayed
-    $: statusColor = nokColor
+    $: statusColor = $colors.nok
     $: {    
         if (operationalStatus === true){
-            statusColor = okColor
+            statusColor = $colors.ok
             tooltipMessage = tooltip + " " + okStatusLabel
         } else {
-            statusColor = nokColor
+            statusColor = $colors.nok
             tooltipMessage = tooltip + " " + nokStatusLabel
         }
     }
@@ -65,39 +58,35 @@
         tooltipShowing = !tooltipShowing
     }
 
-    // Unsubscribe for all variables used from the store
-    onDestroy(() => {
-        unsubscribeFirstColor();
-        unsubscribeSecondColor();
-        unsubscribeThirdColor();
-        unsubscribeFourthColor();
-        unsubscribeOkColor();
-        unsubscribeNokColor();
-    })
 </script>
 
-<div>
-    <Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
+<div class="container">
     <button
-        style="width:{width}; height:{width}; border:none; border-radius:{width}; background-color:{background}; color:{foreground};"
+        style="width:{width}; height:{width}; border-radius:{width}; background-color:{background}; color:{foreground};"
         on:mousedown={emitClick}
         on:mouseenter={toggleTooltip}
         on:mouseleave={toggleTooltip}>
-        <i class='bx {icon}' style="font-size:calc({width} - 80%);"></i>
+        <i class='bx {icon}' style="font-size:100%;"></i>
     </button>
-
     <!-- Showing the badge status if the button has an operational status -->
     {#if (operationalStatus !== undefined)}
         <div class="badge"
         style="width: calc({width} / 3); height: calc({width} / 3); border-radius: calc({width}); background-color:{statusColor}; display:block;">
         </div>
     {/if}
+    <Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
 </div>
 
 <style>
+    .container {
+        position: relative;
+        display: inline-block;
+    }
     button{
         display: inline-block;
         margin: 0;
+        border:none;
+        cursor: pointer;
     }
     button:hover{
         box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;

frontend/src/components/General/RoundedButton.svelte

@@ -0,0 +1,49 @@
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+    import Tooltip from './Tooltip.svelte';
+
+    export let text = 'Default button';
+    export let icon = ''
+    export let tooltip = "Default tooltip"
+    export let active = false;
+    export let style = '';
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+
+        // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick() {
+        dispatch('click');
+    }
+
+</script>
+
+<div class="container">
+    <button
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style='color: {$colors.white}; background-color: { active ? $colors.second : $colors.third }; {style}'><i class='bx { icon}'></i> { text }
+    </button>
+    <Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
+</div>
+<style>
+    .container{
+        position: relative;
+        display: inline-block;
+    }
+    button{
+        cursor: pointer;
+        border-radius: 0.5em;
+        margin: 0;
+        border:none;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+</style>

frontend/src/components/General/Tab.svelte

@@ -0,0 +1,54 @@
+<script lang=ts>
+    import RoundedButton from "./RoundedButton.svelte";
+    import { onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+
+    export let tabs = [];
+    export let maxWidth = undefined;
+    export let maxHeight = undefined;
+
+    let activeTab = 0;
+
+    function setActiveTab(index) {
+        activeTab = index;
+    }
+</script>
+
+<div class="tabContainer" style="color: {$colors.white};">
+    <div class="headerContainer"
+        style='background-color: {$colors.third};'>
+        {#each tabs as tab, index}
+            <RoundedButton text={tab.title} icon={tab.icon} tooltip={tab.tooltip} active={ (activeTab == index) ? true : false } on:click={() => setActiveTab(index)}/>
+        {/each}
+    </div>
+
+    <div class="bodyContainer"
+    style='background-color: {$colors.third}; max-width: {maxWidth}; max-height: {maxHeight};'>
+    {#if tabs[activeTab]}
+        <svelte:component this={tabs[activeTab].component} />
+    {/if}
+    </div>
+</div>
+
+<style>
+    .headerContainer{
+        cursor: pointer;
+        margin:0;
+        border-radius: 0.5em;
+    }
+    .tabContainer{
+        margin-top: 1em;
+        color: white;
+    }
+    .headerContainer{
+        padding: 0.1em;
+        margin-bottom: 1em;
+        border-radius: 0.5em;
+    }
+    .bodyContainer{
+        padding: 0.5em;
+        background-color: red;
+        border-radius: 0.5em;
+        overflow:auto;
+    }
+</style>

frontend/src/components/General/Toggle.svelte

@@ -0,0 +1,105 @@
+<!-- Create a toggle button -->
+
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import {colors} from '../../stores.js';
+    import Tooltip from './Tooltip.svelte';
+    import { _ } from 'svelte-i18n'
+
+    export let icon = "" // The icon wanted 
+    export let width = "10em" // The button width
+    export let height = "5em" // The button height
+    export let tooltip = "Default tooltip" // The description shown in the tooltip
+    export let checked = false
+
+    let tooltipMessage = tooltip
+
+    $: cssVarStyles = `--thumb-background:${$colors.second};--thumb-background-selected:${$colors.third};--thumb-color:${$colors.fourth}`;
+       
+    // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick(event) {
+        event.preventDefault();
+        event.target.blur();
+        dispatch('click', event);
+    }
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        tooltipShowing = !tooltipShowing
+    }
+</script>
+
+<div class="container" style="{cssVarStyles}">
+    <label class="customToggle"
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style="width:{width}; height:{height}; border-radius:{width}; background-color:{$colors.fourth};">
+        <input type="checkbox" {checked}>
+        <span class="checkmark" style="width: {height}; height: 100%; border-radius:{height};">
+            <i class='bx {icon}' style="font-size:{height};"/>
+        </span>
+    </label>
+    <Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
+</div>
+
+<style>
+    .container {
+        position: relative;
+        display: inline-block;
+    }
+    div{
+        display:inline-block;
+    }
+
+    .customToggle {
+            cursor: pointer;
+            overflow: hidden;
+            padding: 0.1em;
+    }
+
+    .customToggle:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+
+    .customToggle input[type="checkbox"] {
+        opacity: 0;
+        position: absolute; /* Position absolue pour garder l'élément dans le flux */
+        cursor: pointer;
+    }
+
+    .customToggle input[type="checkbox"]:checked + .checkmark {
+        background-color: var(--thumb-background-selected); /* Couleur lorsque la case est cochée */
+        float: right;
+        animation: checkmark-slide-in 0.2s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
+    }
+
+    @keyframes checkmark-slide-in {
+        0% {
+            transform: translateX(-50px) scale(1);
+            opacity: 1;
+        }
+        50% {
+            transform: translateX(0) scale(1);
+            opacity: 1;
+        }
+        70% {
+            transform: translateX(-5px) scale(1);
+            opacity: 1;
+        }
+        100% {
+            transform: translateX(0) scale(1);
+            opacity: 1;
+        }
+    }
+
+    .checkmark {
+        text-align:center;
+        float: left;
+        background-color: var(--thumb-background);
+        color: var(--thumb-color);
+        transition: opacity 0.3s, transform 0.3s;
+    }
+</style>

frontend/src/components/General/Tooltip.svelte

@@ -0,0 +1,39 @@
+<script>
+    export let message = "Default tooltip"
+    export let show = false
+    export let duration = 3000
+
+    import {colors} from '../../stores.js';
+    import { onDestroy } from 'svelte';
+
+    let mustBeDisplayed = "none"
+    $: {
+        if (show === true){
+            mustBeDisplayed = "block"
+            setTimeout(()=> {
+                mustBeDisplayed = "none"
+            }, duration)
+        } else {
+            mustBeDisplayed = "none"
+        }
+    }
+</script>
+
+<div style="background-color:{$colors.fourth}; display:{mustBeDisplayed}">
+    <p style="color:{$colors.first};">{message}</p>
+</div>
+
+<style>
+    div {
+        margin-top: 0.2em;
+        position: absolute;
+        border-radius: 15px;
+        white-space: nowrap;
+        z-index: 100;
+    }
+
+    p{
+        margin:5px;
+        font-size: 13px;
+    }
+</style>

frontend/src/components/NavigationBar.svelte

@@ -1,72 +0,0 @@
-<script>
-    import RoundIconButton from './RoundIconButton.svelte';
-    import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
-    import { _ } from 'svelte-i18n'
-
-    // Import the main colors from the store
-    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor
-    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
-    const unsubscribeSecondColor = SoftwareVariables.secondColor.subscribe((value) => (secondColor = value));
-    const unsubscribeThirdColor = SoftwareVariables.thirdColor.subscribe((value) => (thirdColor = value));
-    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
-    const unsubscribeOkColor = SoftwareVariables.okColor.subscribe((value) => (okColor = value));
-    const unsubscribeNokColor = SoftwareVariables.nokColor.subscribe((value) => (nokColor = value));
-
-    //---Navigation System---//
-
-    let menuStates = {
-        stage: true,
-        atmo: false,
-        devicesLibrary: false,
-        settings: false
-    };
-
-    // Handle the click on a navigation button
-    function handleNavigation(menu) {
-        emitNavigationEvent(menu);
-        deselectMenus();
-        menuStates[menu] = true;
-    }
-
-    // Deselect all menus from the navigation bar
-    function deselectMenus(){
-        for (const menu in menuStates) {
-            menuStates[menu] = false;
-        }
-    }
-
-    // Emit navigation events
-    const dispatch = createEventDispatcher();
-    function emitNavigationEvent(menu) {
-        dispatch('navigationChanged', {
-            menu: menu
-        });
-    }
-
-    // Unsubscribe for all variables used from the store
-    onDestroy(() => {
-        unsubscribeFirstColor();
-        unsubscribeSecondColor();
-        unsubscribeThirdColor();
-        unsubscribeFourthColor();
-        unsubscribeOkColor();
-        unsubscribeNokColor();
-    })
-</script>
-
-<div style="background-color: {secondColor};">
-    <RoundIconButton id="stageMenu" on:click="{() => handleNavigation("stage")}" icon="bx-shape-square" width="2.5em" tooltip="{$_("stageMenuTooltip")}" active={menuStates.stage}></RoundIconButton>
-    <RoundIconButton id="atmoMenu" on:click="{() => handleNavigation("atmo")}" icon="bxl-deezer" width="2.5em" tooltip="{$_("atmoMenuTooltip")}" active={menuStates.atmo}></RoundIconButton>
-    <RoundIconButton id="devicesLibraryMenu" on:click="{() => handleNavigation("devicesLibrary")}" icon="bx-hdd" width="2.5em" tooltip={$_("devicesLibraryMenuTooltip")} active={menuStates.devicesLibrary}></RoundIconButton>
-    <RoundIconButton id="settingsMenu" on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></RoundIconButton>
-    <RoundIconButton icon="bx-broadcast" width="2.5em" tooltip="{$_("dmxBoxStatusTooltip")}" operationalStatus=false okStatusLabel="{$_("dmxBoxOkStatusTooltip")}" nokStatusLabel="{$_("dmxBoxNokStatusTooltip")}"></RoundIconButton>
-</div>
-
-<style>
-    div {
-        display: inline-block;
-        padding: 4px;
-        border-radius: 40px;
-    }
-</style>

frontend/src/components/Preparation/Preparation.svelte

@@ -0,0 +1 @@
+<h1>Show preparation</h1>

frontend/src/components/Settings.svelte

@@ -1 +0,0 @@
-<h1>Settings</h1>

frontend/src/components/Settings/InputsOutputsContent.svelte

@@ -0,0 +1,9 @@
+<script lang=ts>
+
+</script>
+
+<p>This is the Inputs & outputs page</p>
+
+<style>
+
+</style>

frontend/src/components/Settings/ProjectPropertiesContent.svelte

@@ -0,0 +1,48 @@
+<script lang=ts>
+    import { ChooseAvatarPath } from '../../../wailsjs/go/main/App.js';
+    import { currentProject } from '../../stores.js';
+    import Input from "../General/Input.svelte";
+    import RoundedButton from '../General/RoundedButton.svelte';
+    import { _ } from 'svelte-i18n'
+
+    // Choose the avatar path
+    function chooseAvatar(){
+        ChooseAvatarPath().then((avatarPath) => {
+            console.log(`Avatar path is ${avatarPath}`)
+            $currentProject.Avatar = avatarPath
+        }).catch((error) => {
+            console.error(`An error occured: ${error}`)
+        })
+    }
+
+    function updateUniverses(event) {
+        currentProject.update(obj => {
+        return {
+            ...obj,
+            UniversesNumber: parseInt(event.detail, 10)  // Conversion en entier
+        };
+        });
+    }
+</script>
+
+<div class='flexSettings'>
+    <div>
+        <Input bind:value={$currentProject.Name} label={$_("projectShowNameLabel")} type='text'/>
+        <Input bind:value={$currentProject.Date} label={$_("projectShowDateLabel")} type='datetime-local'/>
+        <Input bind:value={$currentProject.UniversesNumber} on:input={updateUniverses} label={$_("projectUniversesLabel")} type='number' min=1 max=10/>
+    </div>
+    <div>
+        <Input bind:src={$currentProject.Avatar} label={$_("projectAvatarLabel")} type='image' alt={$_("projectAvatarLabel")} width='11em'/>
+        <RoundedButton on:click={chooseAvatar} style='display:block;' tooltip={$_("projectAvatarTooltip")} text={$_("projectLoadAvatarButton")} icon='bxs-image' active/>
+    </div>
+    <div>
+        <Input bind:value={$currentProject.Comments} label={$_("projectCommentsLabel")} type='large' width='100%'/>
+    </div>
+</div>
+
+<style>
+    .flexSettings{
+        display: flex;
+        flex-direction: column;
+    }
+</style>

frontend/src/components/Settings/Settings.svelte

@@ -0,0 +1,72 @@
+<script lang=ts>
+    import { projectsList, currentProject, needProjectSave } from '../../stores.js';
+    import RoundedButton from "../General/RoundedButton.svelte";
+    import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
+    import DropdownList from "../General/DropdownList.svelte";
+    import InputsOutputsContent from "./InputsOutputsContent.svelte";
+    import Tab from "../General/Tab.svelte";
+    import { GetProjects, GetProjectInfo } from "../../../wailsjs/go/main/App";
+    import { _ } from 'svelte-i18n'
+    import {colors} from '../../stores.js';
+
+    const tabs = [
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: InputsOutputsContent },
+    ];
+   
+
+    // Refresh the projects list
+    let choices = new Map()
+    function loadProjectsList(){
+        GetProjects().then((projects) => {
+        choices = new Map(projects.map(item => [item.ShowInfo.SaveFile, item.ShowInfo.Name]));
+        $projectsList = projects
+        console.log(projectsList)
+        }).catch((error) => {
+            console.error(`Unable to get the projects list: ${error}`)
+        })
+    }
+
+    function openSelectedProject(event){
+        let selectedOption = event.detail.key
+        // Open the selected project
+        GetProjectInfo(selectedOption).then((projectInfo) => {
+            console.log("Project opened")
+            $currentProject = projectInfo
+            needProjectSave.set(false)
+        }).catch((error) => {
+            console.error(`Unable to open the project: ${error}`)
+        })
+    }
+
+    function initializeNewProject(){
+        currentProject.set({
+            Name: "My new show",
+            Date: formatDate(new Date()),
+            Avatar: "appicon.png",
+            UniversesNumber: 1,
+            Comments: "Write your comments here",
+            SaveFile: "",
+        });
+    }
+
+    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}`;
+    }
+</script>
+
+<!-- Project buttons -->
+<RoundedButton on:click={initializeNewProject} text={$_("newProjectString")} icon='bxs-plus-square' tooltip={$_("newProjectTooltip")}/>
+<DropdownList icon='bxs-folder-open' text={$_("openProjectString")} choices={choices} tooltip={$_("openProjectTooltip")} on:click={loadProjectsList} on:selected={openSelectedProject}/>
+
+<!-- Project tabcontrol -->
+<Tab { tabs } maxHeight='73vh'/>
+
+<style>
+</style>

frontend/src/components/Show/Show.svelte

@@ -0,0 +1 @@
+<h1>Show mapping</h1>

frontend/src/components/Stage.svelte

@@ -1,17 +0,0 @@
-<div id="background"></div>
-<h1>Stage</h1>
-
-
-<style>
-     #background {
-        background-image: url('../assets/images/stage_background.png');
-        background-size: cover;
-        background-position: center;
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        z-index: -1;
-    }
-</style>

frontend/src/components/Tooltip.svelte

@@ -1,44 +0,0 @@
-<script>
-    export let message = "Default tooltip"
-    export let show = false
-
-    import * as SoftwareVariables from '../stores.js';
-    import { onDestroy } from 'svelte';
-
-    // Import the main colors from the store
-    let firstColor, fourthColor
-    const unsubscribeFirstColor = SoftwareVariables.firstColor.subscribe((value) => (firstColor = value));
-    const unsubscribeFourthColor = SoftwareVariables.fourthColor.subscribe((value) => (fourthColor = value));
-
-    let mustBeDisplayed = "none"
-    $: {
-        if (show === true){
-            mustBeDisplayed = "inline-block"
-        } else {
-            mustBeDisplayed = "none"
-        }
-    }
-
-    // Unsubscribe for all variables used from the store
-    onDestroy(() => {
-        unsubscribeFirstColor();
-        unsubscribeFourthColor();
-    })
-</script>
-
-<div style="background-color:{fourthColor}; display:{mustBeDisplayed}">
-    <p style="color:{firstColor};">{message}</p>
-</div>
-
-<style>
-    div {
-        position: absolute;
-        border-radius: 15px;
-        transform: translate(0, 200%);
-    }
-
-    p{
-        margin:5px;
-        font-size: 10px;
-    }
-</style>

frontend/src/lang/en.json

@@ -1,9 +1,32 @@
 {
-  "stageMenuTooltip": "Stage configuration",
-  "atmoMenuTooltip": "Atmosphere effects",
-  "devicesLibraryMenuTooltip": "Devices library",
-  "settingsMenuTooltip": "Software settings",
-  "dmxBoxStatusTooltip": "DMXBox status:",
-  "dmxBoxOkStatusTooltip": "connected",
-  "dmxBoxNokStatusTooltip": "disconnected"
+  "settingsMenuTooltip": "Project settings",
+  "devicesMenuTooltip": "Devices configuration",
+  "preparationMenuTooltip": "Show preparation",
+  "animationMenuTooltip": "Animation creator",
+  "showMenuTooltip": "Show mapping",
+  "consoleMenuTooltip": "General console",
+  "stageRenderingToggleTooltip": "Show/hide the rendering view",
+  "showActivationToggleTooltip": "Activate/Deactivate the play mode",
+  "saveButtonTooltip": "Save the project",
+  
+  "newProjectString": "New",
+  "newProjectTooltip": "Create a new project",
+  "openProjectString": "Open",
+  "openProjectTooltip": "Open an existing project",
+  "projectPropertiesTab": "Project properties",
+  "projectPropertiesTooltip": "The project properties",
+  "projectInputOutputTab": "Inputs & outputs",
+  "projectInputOutputTooltip": "The input/output hardware definition",
+  
+  "projectShowNameLabel": "Show name",
+  "projectShowDateLabel": "Show date",
+  "projectSaveLabel": "Save name",
+  "projectRenameButton": "Rename",
+  "projectRenameTooltip": "Rename the project file",
+  "projectUniversesLabel": "Number of DMX universes",
+  "projectAvatarLabel": "Show avatar",
+  "projectAvatarTooltip": "Load a new show avatar",
+  "projectCommentsLabel": "Comments",
+  "projectCommentsPlaceholder": "Leave your comments here",
+  "projectLoadAvatarButton": "Load a new avatar"
 }

frontend/src/main.js

@@ -1,5 +1,9 @@
 import App from './App.svelte';
 
+import { WindowSetTitle } from "../wailsjs/runtime/runtime"
+
+import {currentProject, needProjectSave} from './stores.js';
+
 // Load dictionaries
 import { addMessages, init } from 'svelte-i18n';
 
@@ -13,11 +17,35 @@ addMessages('en', en);
 init({
 	fallbackLocale: 'en',
 	initialLocale: 'en',
-  });
+});
 
 // Create the main app
 const app = new App({
 	target: document.body,
 });
 
+// Set the initial title
+WindowSetTitle("DMXConnect")
+
+// When the current project data is modified, pass it to unsaved and change the title
+let title;
+currentProject.subscribe(value => {
+	needProjectSave.set(true)
+	title = value.Name
+});
+
+// If the project need to be saved, show the information in the title
+needProjectSave.subscribe(value => {
+	if (value) {
+		console.log(`<!> The current project need to be save`);
+		WindowSetTitle("DMXConnect - " + title + " (unsaved)")
+	} else {
+		WindowSetTitle("DMXConnect - " + title)
+	}
+})
+
+document.addEventListener("DOMContentLoaded", function() {
+
+});
+
 export default app;

frontend/src/stores.js

@@ -1,12 +1,23 @@
 import { writable } from 'svelte/store';
 
-// Colors defined in the software
-export const firstColor = writable("#1B262C");
-export const secondColor = writable("#0F4C75");
-export const thirdColor = writable("#3282B8");
-export const fourthColor = writable("#BBE1FA");
-export const okColor = writable("#2BA646");
-export const nokColor = writable("#A6322B");
+// Projects management
+export let projectsList = writable([])
+
+// Show settings
+export let currentProject = writable({});
+export let needProjectSave = writable(false)
+
+// Application colors
+export const colors = writable({
+    first: "#1B262C",
+    second: "#0F4C75",
+    third: "#3282B8",
+    fourth: "#BBE1FA",
+    ok: "#2BA646",
+    nok: "#A6322B",
+    white: "#FFFFFF",
+    orange: "#BC9714"
+})
 
 // Font sizes defined in the software
 export const firstSize = writable("10px")

frontend/src/style.css

@@ -1,3 +1,17 @@
+:root{
+  -webkit-user-select: none; /* Safari */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  --first-color: #1B262C;
+  --second-color: #0F4C75;
+  --third-color: #3282B8;
+  --fourth-color: #BBE1FA;
+  --ok-color: #2BA646;
+  --nok-color: #A6322B;
+  --white-color: #FFFFFF;
+  --orange-color: #BC9714;
+}
+
 html, body {
 	position: relative;
 	width: 100%;

go.mod

@@ -1,33 +1,42 @@
 module changeme
 
-go 1.18
+go 1.21
 
-require github.com/wailsapp/wails/v2 v2.5.1
+toolchain go1.21.3
+
+require (
+	github.com/wailsapp/wails/v2 v2.9.1
+	gopkg.in/yaml.v2 v2.4.0
+)
 
 require (
 	github.com/bep/debounce v1.2.1 // indirect
 	github.com/go-ole/go-ole v1.2.6 // indirect
-	github.com/google/uuid v1.1.2 // indirect
+	github.com/godbus/dbus/v5 v5.1.0 // indirect
+	github.com/google/uuid v1.3.0 // indirect
 	github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e // indirect
-	github.com/labstack/echo/v4 v4.9.0 // indirect
-	github.com/labstack/gommon v0.3.1 // indirect
-	github.com/leaanthony/go-ansi-parser v1.0.1 // indirect
+	github.com/labstack/echo/v4 v4.10.2 // indirect
+	github.com/labstack/gommon v0.4.0 // indirect
+	github.com/leaanthony/go-ansi-parser v1.6.0 // indirect
 	github.com/leaanthony/gosod v1.0.3 // indirect
-	github.com/leaanthony/slicer v1.5.0 // indirect
-	github.com/mattn/go-colorable v0.1.11 // indirect
-	github.com/mattn/go-isatty v0.0.14 // indirect
-	github.com/pkg/browser v0.0.0-20210706143420-7d21f8c997e2 // indirect
+	github.com/leaanthony/slicer v1.6.0 // indirect
+	github.com/leaanthony/u v1.1.0 // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.19 // indirect
+	github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect
 	github.com/pkg/errors v0.9.1 // indirect
-	github.com/samber/lo v1.27.1 // indirect
-	github.com/tkrajina/go-reflector v0.5.5 // indirect
+	github.com/rivo/uniseg v0.4.4 // indirect
+	github.com/samber/lo v1.38.1 // indirect
+	github.com/tkrajina/go-reflector v0.5.6 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
-	github.com/valyala/fasttemplate v1.2.1 // indirect
+	github.com/valyala/fasttemplate v1.2.2 // indirect
+	github.com/wailsapp/go-webview2 v1.0.10 // indirect
 	github.com/wailsapp/mimetype v1.4.1 // indirect
-	golang.org/x/crypto v0.1.0 // indirect
-	golang.org/x/exp v0.0.0-20220303212507-bbda1eaf7a17 // indirect
-	golang.org/x/net v0.7.0 // indirect
-	golang.org/x/sys v0.5.0 // indirect
-	golang.org/x/text v0.7.0 // indirect
+	golang.org/x/crypto v0.23.0 // indirect
+	golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 // indirect
+	golang.org/x/net v0.25.0 // indirect
+	golang.org/x/sys v0.20.0 // indirect
+	golang.org/x/text v0.15.0 // indirect
 )
 
 // replace github.com/wailsapp/wails/v2 v2.5.1 => /home/dev/go/pkg/mod

go.sum

@@ -5,57 +5,71 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/go-ole/go-ole v1.2.6 h1:/Fpf6oFPoeFik9ty7siob0G6Ke8QvQEuVcuChpwXzpY=
 github.com/go-ole/go-ole v1.2.6/go.mod h1:pprOEPIfldk/42T2oK7lQ4v4JSDwmV0As9GaiUsvbm0=
-github.com/google/uuid v1.1.2 h1:EVhdT+1Kseyi1/pUmXKaFxYsDNy9RQYkMWRH68J/W7Y=
-github.com/google/uuid v1.1.2/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/godbus/dbus/v5 v5.1.0 h1:4KLkAxT3aOY8Li4FRJe/KvhoNFFxo0m6fNuFUO8QJUk=
+github.com/godbus/dbus/v5 v5.1.0/go.mod h1:xhWf0FNVPg57R7Z0UbKHbJfkEywrmjJnf7w5xrFpKfA=
+github.com/google/uuid v1.3.0 h1:t6JiXgmwXMjEs8VusXIJk2BXHsn+wx8BZdTaoZ5fu7I=
+github.com/google/uuid v1.3.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e h1:Q3+PugElBCf4PFpxhErSzU3/PY5sFL5Z6rfv4AbGAck=
 github.com/jchv/go-winloader v0.0.0-20210711035445-715c2860da7e/go.mod h1:alcuEEnZsY1WQsagKhZDsoPCRoOijYqhZvPwLG0kzVs=
-github.com/labstack/echo/v4 v4.9.0 h1:wPOF1CE6gvt/kmbMR4dGzWvHMPT+sAEUJOwOTtvITVY=
-github.com/labstack/echo/v4 v4.9.0/go.mod h1:xkCDAdFCIf8jsFQ5NnbK7oqaF/yU1A1X20Ltm0OvSks=
-github.com/labstack/gommon v0.3.1 h1:OomWaJXm7xR6L1HmEtGyQf26TEn7V6X88mktX9kee9o=
-github.com/labstack/gommon v0.3.1/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
+github.com/labstack/echo/v4 v4.10.2 h1:n1jAhnq/elIFTHr1EYpiYtyKgx4RW9ccVgkqByZaN2M=
+github.com/labstack/echo/v4 v4.10.2/go.mod h1:OEyqf2//K1DFdE57vw2DRgWY0M7s65IVQO2FzvI4J5k=
+github.com/labstack/gommon v0.4.0 h1:y7cvthEAEbU0yHOf4axH8ZG2NH8knB9iNSoTO8dyIk8=
+github.com/labstack/gommon v0.4.0/go.mod h1:uW6kP17uPlLJsD3ijUYn3/M5bAxtlZhMI6m3MFxTMTM=
 github.com/leaanthony/debme v1.2.1 h1:9Tgwf+kjcrbMQ4WnPcEIUcQuIZYqdWftzZkBr+i/oOc=
 github.com/leaanthony/debme v1.2.1/go.mod h1:3V+sCm5tYAgQymvSOfYQ5Xx2JCr+OXiD9Jkw3otUjiA=
-github.com/leaanthony/go-ansi-parser v1.0.1 h1:97v6c5kYppVsbScf4r/VZdXyQ21KQIfeQOk2DgKxGG4=
-github.com/leaanthony/go-ansi-parser v1.0.1/go.mod h1:7arTzgVI47srICYhvgUV4CGd063sGEeoSlych5yeSPM=
+github.com/leaanthony/go-ansi-parser v1.6.0 h1:T8TuMhFB6TUMIUm0oRrSbgJudTFw9csT3ZK09w0t4Pg=
+github.com/leaanthony/go-ansi-parser v1.6.0/go.mod h1:+vva/2y4alzVmmIEpk9QDhA7vLC5zKDTRwfZGOp3IWU=
 github.com/leaanthony/gosod v1.0.3 h1:Fnt+/B6NjQOVuCWOKYRREZnjGyvg+mEhd1nkkA04aTQ=
 github.com/leaanthony/gosod v1.0.3/go.mod h1:BJ2J+oHsQIyIQpnLPjnqFGTMnOZXDbvWtRCSG7jGxs4=
-github.com/leaanthony/slicer v1.5.0 h1:aHYTN8xbCCLxJmkNKiLB6tgcMARl4eWmH9/F+S/0HtY=
 github.com/leaanthony/slicer v1.5.0/go.mod h1:FwrApmf8gOrpzEWM2J/9Lh79tyq8KTX5AzRtwV7m4AY=
+github.com/leaanthony/slicer v1.6.0 h1:1RFP5uiPJvT93TAHi+ipd3NACobkW53yUiBqZheE/Js=
+github.com/leaanthony/slicer v1.6.0/go.mod h1:o/Iz29g7LN0GqH3aMjWAe90381nyZlDNquK+mtH2Fj8=
+github.com/leaanthony/u v1.1.0 h1:2n0d2BwPVXSUq5yhe8lJPHdxevE2qK5G99PMStMZMaI=
+github.com/leaanthony/u v1.1.0/go.mod h1:9+o6hejoRljvZ3BzdYlVL0JYCwtnAsVuN9pVTQcaRfI=
 github.com/matryer/is v1.4.0 h1:sosSmIWwkYITGrxZ25ULNDeKiMNzFSr4V/eqBQP0PeE=
 github.com/matryer/is v1.4.0/go.mod h1:8I/i5uYgLzgsgEloJE1U6xx5HkBQpAZvepWuujKwMRU=
-github.com/mattn/go-colorable v0.1.11 h1:nQ+aFkoE2TMGc0b68U2OKSexC+eq46+XwZzWXHRmPYs=
 github.com/mattn/go-colorable v0.1.11/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
-github.com/mattn/go-isatty v0.0.14 h1:yVuAays6BHfxijgZPzw+3Zlu5yQgKGP2/hcQbHb7S9Y=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
-github.com/pkg/browser v0.0.0-20210706143420-7d21f8c997e2 h1:acNfDZXmm28D2Yg/c3ALnZStzNaZMSagpbr96vY6Zjc=
-github.com/pkg/browser v0.0.0-20210706143420-7d21f8c997e2/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
+github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 h1:KoWmjvw+nsYOo29YJK9vDA65RGE3NrOnUtO7a+RF9HU=
+github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8/go.mod h1:HKlIX3XHQyzLZPlr7++PzdhaXEj94dEiJgZDTsxEqUI=
 github.com/pkg/errors v0.9.1 h1:FEBLx1zS214owpjy7qsBeixbURkuhQAwrK5UwLGTwt4=
 github.com/pkg/errors v0.9.1/go.mod h1:bwawxfHBFNV+L2hUp1rHADufV3IMtnDRdf1r5NINEl0=
 github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
-github.com/samber/lo v1.27.1 h1:sTXwkRiIFIQG+G0HeAvOEnGjqWeWtI9cg5/n51KrxPg=
-github.com/samber/lo v1.27.1/go.mod h1:it33p9UtPMS7z72fP4gw/EIfQB2eI8ke7GR2wc6+Rhg=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis=
+github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM=
+github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA=
 github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
 github.com/stretchr/testify v1.7.0/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
-github.com/stretchr/testify v1.8.0 h1:pSgiaMZlXftHpm5L7V1+rVB+AZJydKsMxsQBIJw4PKk=
-github.com/thoas/go-funk v0.9.1 h1:O549iLZqPpTUQ10ykd26sZhzD+rmR5pWhuElrhbC20M=
-github.com/tkrajina/go-reflector v0.5.5 h1:gwoQFNye30Kk7NrExj8zm3zFtrGPqOkzFMLuQZg1DtQ=
-github.com/tkrajina/go-reflector v0.5.5/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
+github.com/stretchr/testify v1.8.4 h1:CcVxjf3Q8PM0mHUKJCdn+eZZtm5yQwehR5yeSVQQcUk=
+github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
+github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQSepKdE=
+github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4=
 github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
 github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
-github.com/valyala/fasttemplate v1.2.1 h1:TVEnxayobAdVkhQfrfes2IzOB6o+z4roRkPF52WA1u4=
 github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/valyala/fasttemplate v1.2.2 h1:lxLXG0uE3Qnshl9QyaK6XJxMXlQZELvChBOCmQD0Loo=
+github.com/valyala/fasttemplate v1.2.2/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ=
+github.com/wailsapp/go-webview2 v1.0.10 h1:PP5Hug6pnQEAhfRzLCoOh2jJaPdrqeRgJKZhyYyDV/w=
+github.com/wailsapp/go-webview2 v1.0.10/go.mod h1:Uk2BePfCRzttBBjFrBmqKGJd41P6QIHeV9kTgIeOZNo=
 github.com/wailsapp/mimetype v1.4.1 h1:pQN9ycO7uo4vsUUuPeHEYoUkLVkaRntMnHJxVwYhwHs=
 github.com/wailsapp/mimetype v1.4.1/go.mod h1:9aV5k31bBOv5z6u+QP8TltzvNGJPmNJD4XlAL3U+j3o=
-github.com/wailsapp/wails/v2 v2.5.1 h1:mfG+2kWqQXYOwdgI43HEILjOZDXbk5woPYI3jP2b+js=
-github.com/wailsapp/wails/v2 v2.5.1/go.mod h1:jbOZbcr/zm79PxXxAjP8UoVlDd9wLW3uDs+isIthDfs=
-golang.org/x/crypto v0.1.0 h1:MDRAIl0xIo9Io2xV565hzXHw3zVseKrJKodhohM5CjU=
-golang.org/x/crypto v0.1.0/go.mod h1:RecgLatLF4+eUMCP1PoPZQb+cVrJcOPbHkTkbkB9sbw=
-golang.org/x/exp v0.0.0-20220303212507-bbda1eaf7a17 h1:3MTrJm4PyNL9NBqvYDSj3DHl46qQakyfqfWo4jgfaEM=
-golang.org/x/exp v0.0.0-20220303212507-bbda1eaf7a17/go.mod h1:lgLbSvA5ygNOMpwM/9anMpWVlVJ7Z+cHWq/eFuinpGE=
+github.com/wailsapp/wails/v2 v2.9.1 h1:irsXnoQrCpeKzKTYZ2SUVlRRyeMR6I0vCO9Q1cvlEdc=
+github.com/wailsapp/wails/v2 v2.9.1/go.mod h1:7maJV2h+Egl11Ak8QZN/jlGLj2wg05bsQS+ywJPT0gI=
+golang.org/x/crypto v0.23.0 h1:dIJU/v2J8Mdglj/8rJ6UUOM3Zc9zLZxVZwwxMooUSAI=
+golang.org/x/crypto v0.23.0/go.mod h1:CKFgDieR+mRhux2Lsu27y0fO304Db0wZe70UKqHu0v8=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1 h1:k/i9J1pBpvlfR+9QsetwPyERsqu1GIbi967PQMq3Ivc=
+golang.org/x/exp v0.0.0-20230522175609-2e198f4a06a1/go.mod h1:V1LtkGg67GoY2N1AnLN78QLrzxkLyJw7RJb1gzOOz9w=
 golang.org/x/net v0.0.0-20210505024714-0287a6fb4125/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
-golang.org/x/net v0.7.0 h1:rJrUqqhjsgNp7KqAIc25s9pZnjU7TUcSY7HcVZjdn1g=
-golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/net v0.25.0 h1:d/OCCoBEUq33pjydKrGQhw7IlUPI2Oylr+8qLx49kac=
+golang.org/x/net v0.25.0/go.mod h1:JkAGAh7GEvH74S6FOH42FLoXpXbE/aqXSrIQjXgsiwM=
 golang.org/x/sys v0.0.0-20190916202348-b4ddaad3f8a3/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200810151505-1b9f1253b3ed/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
@@ -64,14 +78,20 @@ golang.org/x/sys v0.0.0-20210616045830-e2b7044e8c71/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20211103235746-7861aae1554b/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
-golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.20.0 h1:Od9JTbYCk261bKm4M/mw7AklTlFYIa0bIp9BgSm1S8Y=
+golang.org/x/sys v0.20.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/text v0.3.6/go.mod h1:5Zoc/QRtKVWzQhOtBMvqHzDpF6irO9z98xDceosuGiQ=
-golang.org/x/text v0.7.0 h1:4BRB4x83lYWy72KwLD/qYDuTu7q9PjSagHvijDw7cLo=
-golang.org/x/text v0.7.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/text v0.15.0 h1:h1V/4gjBv8v9cjcR6+AR5+/cIYK5N/WAgiv4xlsEtAk=
+golang.org/x/text v0.15.0/go.mod h1:18ZOQIKpY8NJVqYksKHtTdi31H5itFRjB5/qKTNYzSU=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=
+gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405 h1:yhCVgyC4o1eVCa2tZl7eS0r+SDo693bJlVdllGtEeKM=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
+gopkg.in/yaml.v2 v2.4.0 h1:D8xgwECY7CYvx+Y2n4sBz93Jn9JRvxdiyyo8CTfuKaY=
+gopkg.in/yaml.v2 v2.4.0/go.mod h1:RDklbk79AGWmwhnvt/jBztapEOGDOx6ZbXqjP6csGnQ=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
+gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

main.go

@@ -17,14 +17,14 @@ func main() {
 
 	// Create application with options
 	err := wails.Run(&options.App{
-		Title:  "dmxconnect",
-		Width:  1024,
-		Height: 768,
+		Title:            "dmxconnect",
+		Width:            1024,
+		Height:           768,
+		WindowStartState: options.Maximised,
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
-		OnStartup:        app.startup,
+		OnStartup: app.startup,
 		Bind: []interface{}{
 			app,
 		},
@@ -33,4 +33,4 @@ func main() {
 	if err != nil {
 		println("Error:", err.Error())
 	}
-}
+}

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "dmxconnect",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}