feat: restored the project

frontend/src/components/Atmo.svelte

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

frontend/src/components/Clock.svelte

@@ -0,0 +1,50 @@
+
+<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/DevicesLibrary.svelte

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

frontend/src/components/NavigationBar.svelte

@@ -0,0 +1,72 @@
+<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/RoundIconButton.svelte

@@ -0,0 +1,114 @@
+<!-- Create a round icon button -->
+
+<script>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../stores.js';
+    import Tooltip from './Tooltip.svelte';
+    import { _ } from 'svelte-i18n'
+
+    export let icon = "bxs-heart" // The icon wanted 
+    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 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
+
+    // Change the background when the selected prop changed
+    $: {
+        if (active === true) {
+            background = thirdColor
+        } else {
+            background = fourthColor
+        }
+    }
+
+    // Show the operational status if specified
+    // undefined => no status displayed
+    // operationalStatus = true => OK color displayed
+    // operationalStatus = false => NOK color displayed
+    $: statusColor = nokColor
+    $: {    
+        if (operationalStatus === true){
+            statusColor = okColor
+            tooltipMessage = tooltip + " " + okStatusLabel
+        } else {
+            statusColor = nokColor
+            tooltipMessage = tooltip + " " + nokStatusLabel
+        }
+    }
+       
+    // Emit a click event when the button is clicked
+    const dispatch = createEventDispatcher();
+    function emitClick() {
+        dispatch('click');
+    }
+
+    // Show a tooltip on mouse hover
+    let tooltipShowing = false
+    function toggleTooltip(){
+        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>
+    <button
+        style="width:{width}; height:{width}; border:none; 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>
+    </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}
+</div>
+
+<style>
+    button{
+        display: inline-block;
+        margin: 0;
+    }
+    button:hover{
+        box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;
+    }
+    .badge{
+        position: absolute;
+        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+        transform: translate(200%, -100%);
+    }
+
+    div{
+        display:inline-block;
+    }
+</style>

frontend/src/components/Settings.svelte

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

frontend/src/components/Stage.svelte

@@ -0,0 +1,17 @@
+<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

@@ -0,0 +1,44 @@
+<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>