10-project-settings (#13)

Added the project properties page.

frontend/src/App.svelte

@@ -1,13 +1,13 @@
 <script>
   import { _ } from 'svelte-i18n'
-	import NavigationBar from './components/NavigationBar.svelte';
-  import Clock from './components/Clock.svelte'
-  import Preparation from './components/Preparation.svelte';
-  import Animation from './components/Animation.svelte';
-  import Settings from './components/Settings.svelte';
-  import Devices from './components/Devices.svelte';
-  import Show from './components/Show.svelte';
-  import GeneralConsole from './components/GeneralConsole.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';
 
   let selectedMenu = "settings"
   // When the navigation menu changed, update the selected menu

frontend/src/components/General/Clock.svelte

@@ -1,7 +1,7 @@
 
 <script>
     import { onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
 
     // Import the main colors from the store
     let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor

frontend/src/components/General/Input.svelte

@@ -0,0 +1,97 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables 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 = '';
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div style="width: {width}; height: {height};">
+    <p style="color: {firstColor};">{label}</p>
+    <!-- Handle the textarea input -->
+    {#if type === 'large'}
+        <textarea style="background-color: {firstColor}; color: {whiteColor};" placeholder={placeholder}/>
+    <!-- Handle the simple inputs -->
+    {:else}
+        <input style="background-color: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder}/>
+    {/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

@@ -2,7 +2,7 @@
     import RoundIconButton from './RoundIconButton.svelte';
     import Toggle from './Toggle.svelte';
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { _ } from 'svelte-i18n'
 
     // Import the main colors from the store

frontend/src/components/General/RoundIconButton.svelte

@@ -2,7 +2,7 @@
 
 <script>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 
@@ -101,6 +101,7 @@
         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,62 @@
+<script lang=ts>
+    import { createEventDispatcher, onDestroy } from 'svelte';
+    import * as SoftwareVariables 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 = '';
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    // 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');
+    }
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
+<button
+        on:mousedown={emitClick}
+        on:mouseenter={toggleTooltip}
+        on:mouseleave={toggleTooltip}
+        style='color: {whiteColor}; background-color: { active ? secondColor : thirdColor }; border:none; {style}'><i class='bx { icon}'></i> { text }</button>
+<style>
+    button{
+        cursor: pointer;
+        display: inline-block;
+        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/Tab.svelte

@@ -0,0 +1,74 @@
+<script lang=ts>
+    import RoundedButton from "./RoundedButton.svelte";
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+
+    export let tabs = [];
+    export let maxWidth = undefined;
+    export let maxHeight = undefined;
+
+    let activeTab = 0;
+
+    function setActiveTab(index) {
+        activeTab = index;
+    }
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+</script>
+
+<div class="tabContainer" style="color: {whiteColor};">
+    <div class="headerContainer"
+        style='background-color: {thirdColor};'>
+        {#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: {thirdColor}; 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

@@ -2,7 +2,7 @@
 
 <script lang=ts>
     import { createEventDispatcher, onDestroy } from 'svelte';
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import Tooltip from './Tooltip.svelte';
     import { _ } from 'svelte-i18n'
 

frontend/src/components/General/Tooltip.svelte

@@ -2,7 +2,7 @@
     export let message = "Default tooltip"
     export let show = false
 
-    import * as SoftwareVariables from '../stores.js';
+    import * as SoftwareVariables from '../../stores.js';
     import { onDestroy } from 'svelte';
 
     // Import the main colors from the store
@@ -39,6 +39,6 @@
 
     p{
         margin:5px;
-        font-size: 10px;
+        font-size: 13px;
     }
 </style>

frontend/src/components/Settings.svelte

@@ -1 +0,0 @@
-<h1>Project 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,54 @@
+<script lang=ts>
+    import { onDestroy } from 'svelte';
+    import * as SoftwareVariables from '../../stores.js';
+    import Input from "../General/Input.svelte";
+    import RoundedButton from '../General/RoundedButton.svelte';
+    import { _ } from 'svelte-i18n'
+
+    // Import the main colors from the store
+    let firstColor, secondColor, thirdColor, fourthColor, okColor, nokColor, whiteColor
+    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));
+    const unsubscribeWhiteColor = SoftwareVariables.whiteColor.subscribe((value) => (whiteColor = value))
+
+    onDestroy(() => {
+        unsubscribeFirstColor();
+        unsubscribeSecondColor();
+        unsubscribeThirdColor();
+        unsubscribeFourthColor();
+        unsubscribeOkColor();
+        unsubscribeNokColor();
+        unsubscribeWhiteColor();
+    });
+
+</script>
+
+<div class='flexSettings'>
+    <div>
+        <Input label={$_("projectShowNameLabel")} type='text' value='My show'/>
+        <Input label={$_("projectShowDateLabel")} type='date' value='2024-07-08'/>
+        <Input label={$_("projectUniversesLabel")} type='number' min='1' max='10' value='1'/>
+        <Input label={$_("projectSaveLabel")} type='text' value='my-show-08-07-2024'/>
+        <RoundedButton text={$_("projectRenameButton")} tooltip={$_("projectRenameTooltip")} active/>
+    </div>
+    <div>
+        <Input label={$_("projectAvatarLabel")} type='image' src='appicon.png' alt={$_("projectAvatarLabel")} width='11em'/>
+        <RoundedButton style='display:block;' tooltip={$_("projectAvatarTooltip")} text={$_("projectLoadAvatarButton")} icon='bxs-image' active/>
+    </div>
+    <div>
+        <Input label={$_("projectCommentsLabel")} type='large' width='100%' placeholder={$_("projectCommentsPlaceholder")}/>
+    </div>
+</div>
+
+
+<style>
+    .flexSettings{
+        display: flex;
+        flex-direction: column;
+    }
+
+</style>

frontend/src/components/Settings/Settings.svelte

@@ -0,0 +1,24 @@
+<script lang=ts>
+    import RoundedButton from "../General/RoundedButton.svelte";
+    import ProjectPropertiesContent from "./ProjectPropertiesContent.svelte";
+    import InputsOutputsContent from "./InputsOutputsContent.svelte";
+    import Tab from "../General/Tab.svelte";
+    import { _ } from 'svelte-i18n'
+
+    const tabs = [
+        { title: $_("projectPropertiesTab"), icon: 'bxs-info-circle', tooltip: $_("projectPropertiesTooltip"), component: ProjectPropertiesContent },
+        { title: $_("projectInputOutputTab"), icon: 'bxs-plug', tooltip: $_("projectInputOutputTooltip"), component: InputsOutputsContent },
+    ];
+
+</script>
+
+<!-- Project buttons -->
+<RoundedButton text={$_("newProjectString")} icon='bxs-plus-square' tooltip={$_("newProjectTooltip")}/>
+<RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
+
+<!-- Project tabcontrol -->
+<Tab { tabs } maxHeight='73vh'/>
+
+<style>
+
+</style>

frontend/src/lang/en.json

@@ -6,5 +6,26 @@
   "showMenuTooltip": "Show mapping",
   "consoleMenuTooltip": "General console",
   "stageRenderingToggleTooltip": "Show/hide the rendering view",
-  "showActivationToggleTooltip": "Activate/Deactivate the play mode"
+  "showActivationToggleTooltip": "Activate/Deactivate the play mode",
+  
+  "newProjectString": "New",
+  "openProjectString": "Open",
+  "newProjectTooltip": "Create a new project",
+  "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"
 }