DMXStage/dmxconnect
2
0
Fork 1
generated from thinkode/modelRepository
Code Issues 6 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

project management feature (#15)

Browse Source 
Reviewed-on: #15
This commit was merged in pull request #15.
This commit is contained in:
Valentin Boulanger
2024-11-01 20:10:28 +00:00
parent 364dabee69
commit a231263825
23 changed files with 511 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/App.svelte
View File

@@ -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>

22
frontend/src/components/General/Clock.svelte
View File

@@ -1,16 +1,7 @@
<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));
import {colors} from '../../stores.js';
let time = new Date()
@@ -22,18 +13,9 @@
time = new Date()
}, 1000);
onDestroy(() => {
clearInterval(interval);
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
});
</script>
<div style='color:{fourthColor}'>
<div style='color:{$colors.fourth}'>
<span class="bold">{hours}:{minutes}</span><span>{seconds}</span>
</div>

95
frontend/src/components/General/DropdownList.svelte Normal file
View File

@@ -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>

35
frontend/src/components/General/Input.svelte
View File

@@ -1,6 +1,6 @@
<script lang=ts>
import { onDestroy } from 'svelte';
import * as SoftwareVariables from '../../stores.js';
import { createEventDispatcher } from 'svelte';
import {colors} from '../../stores.js';
export let label = '';
export let type = 'text';
@@ -11,38 +11,25 @@
export let width = undefined;
export let height = undefined;
export let value = '';
export let placeholder = '';
export let placeholder = undefined;
// 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))
const dispatch = createEventDispatcher();
onDestroy(() => {
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
unsubscribeWhiteColor();
});
function handleInput(event){
value = event.target.value
dispatch('input', value)
}
</script>
<div style="width: {width}; height: {height};">
<p style="color: {firstColor};">{label}</p>
<p style="color: {$colors.first};">{label}</p>
<!-- Handle the textarea input -->
{#if type === 'large'}
<textarea style="background-color: {firstColor}; color: {whiteColor};" placeholder={placeholder}/>
<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: {firstColor}; color: {whiteColor};" type={type} min={min} max={max} src={src} alt={alt} value={value} placeholder={placeholder}/>
<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>

38
frontend/src/components/General/NavigationBar.svelte
View File

@@ -2,18 +2,9 @@
import RoundIconButton from './RoundIconButton.svelte';
import Toggle from './Toggle.svelte';
import { createEventDispatcher, onDestroy } from 'svelte';
import * as SoftwareVariables from '../../stores.js';
import {colors} 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 = {
@@ -47,26 +38,17 @@
});
}
// Unsubscribe for all variables used from the store
onDestroy(() => {
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
})
</script>
<div style="background-color: {secondColor};">
<RoundIconButton id="settingsMenu" on:click="{() => handleNavigation("settings")}" icon="bx-cog" width="2.5em" tooltip={$_("settingsMenuTooltip")} active={menuStates.settings}></RoundIconButton>
<RoundIconButton id="devicesMenu" on:click="{() => handleNavigation("devices")}" icon="bx-video-plus" width="2.5em" tooltip={$_("devicesMenuTooltip")} active={menuStates.devices}></RoundIconButton>
<RoundIconButton id="preparationMenu" on:click="{() => handleNavigation("preparation")}" icon="bx-layer" width="2.5em" tooltip="{$_("preparationMenuTooltip")}" active={menuStates.preparation}></RoundIconButton>
<RoundIconButton id="animationMenu" on:click="{() => handleNavigation("animation")}" icon="bx-film" width="2.5em" tooltip="{$_("animationMenuTooltip")}" active={menuStates.animation}></RoundIconButton>
<RoundIconButton id="showMenu" on:click="{() => handleNavigation("show")}" icon="bxs-grid" width="2.5em" tooltip="{$_("showMenuTooltip")}" active={menuStates.show}></RoundIconButton>
<RoundIconButton id="consoleMenu" on:click="{() => handleNavigation("console")}" icon="bx-slider" width="2.5em" tooltip="{$_("consoleMenuTooltip")}" active={menuStates.console}></RoundIconButton>
<Toggle id="stageRenderingToggle" icon="bx-shape-square" width="2.5em" height="1.3em" tooltip="{$_("stageRenderingToggleTooltip")}"></Toggle>
<Toggle id="showActivation" icon="bx-play" width="2.5em" height="1.3em" tooltip="{$_("showActivationToggleTooltip")}"></Toggle>
<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 {

49
frontend/src/components/General/RoundIconButton.svelte
View File

@@ -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,33 +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
foreground = fourthColor
background = $colors.third
foreground = $colors.fourth
} else {
background = fourthColor
foreground = secondColor
background = $colors.fourth
foreground = $colors.second
}
}
@@ -44,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
}
}
@@ -67,19 +58,9 @@
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-radius:{width}; background-color:{background}; color:{foreground};"
on:mousedown={emitClick}
@@ -87,16 +68,20 @@
on:mouseleave={toggleTooltip}>
<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;

37
frontend/src/components/General/RoundedButton.svelte
View File

@@ -1,6 +1,6 @@
<script lang=ts>
import { createEventDispatcher, onDestroy } from 'svelte';
import * as SoftwareVariables from '../../stores.js';
import {colors} from '../../stores.js';
import Tooltip from './Tooltip.svelte';
export let text = 'Default button';
@@ -9,16 +9,6 @@
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(){
@@ -31,30 +21,27 @@
dispatch('click');
}
onDestroy(() => {
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
unsubscribeWhiteColor();
});
</script>
<Tooltip message={tooltip} show={tooltipShowing}></Tooltip>
<button
<div class="container">
<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='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;
display: inline-block;
border-radius: 0.5em;
margin: 0;
border:none;
}
button:hover{
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.25) inset;

28
frontend/src/components/General/Tab.svelte
View File

@@ -1,7 +1,7 @@
<script lang=ts>
import RoundedButton from "./RoundedButton.svelte";
import { onDestroy } from 'svelte';
import * as SoftwareVariables from '../../stores.js';
import {colors} from '../../stores.js';
export let tabs = [];
export let maxWidth = undefined;
@@ -12,38 +12,18 @@
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="tabContainer" style="color: {$colors.white};">
<div class="headerContainer"
style='background-color: {thirdColor};'>
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: {thirdColor}; max-width: {maxWidth}; max-height: {maxHeight};'>
style='background-color: {$colors.third}; max-width: {maxWidth}; max-height: {maxHeight};'>
{#if tabs[activeTab]}
<svelte:component this={tabs[activeTab].component} />
{/if}

36
frontend/src/components/General/Toggle.svelte
View File

@@ -2,7 +2,7 @@
<script lang=ts>
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,20 +10,11 @@
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
export let checked = false
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));
$: cssVarStyles = `--thumb-background:${secondColor};--thumb-background-selected:${thirdColor};--thumb-color:${fourthColor}`;
$: 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();
@@ -38,34 +29,27 @@
function toggleTooltip(){
tooltipShowing = !tooltipShowing
}
// Unsubscribe for all variables used from the store
onDestroy(() => {
unsubscribeFirstColor();
unsubscribeSecondColor();
unsubscribeThirdColor();
unsubscribeFourthColor();
unsubscribeOkColor();
unsubscribeNokColor();
})
</script>
<div style="{cssVarStyles}">
<Tooltip message={tooltipMessage} show={tooltipShowing}></Tooltip>
<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:{fourthColor};">
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;
}

27
frontend/src/components/General/Tooltip.svelte
View File

@@ -1,40 +1,35 @@
<script>
export let message = "Default tooltip"
export let show = false
export let duration = 3000
import * as SoftwareVariables from '../../stores.js';
import {colors} 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"
mustBeDisplayed = "block"
setTimeout(()=> {
mustBeDisplayed = "none"
}, duration)
} 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="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;
transform: translate(0, 200%);
white-space: nowrap;
z-index: 100;
}
p{

56
frontend/src/components/Settings/ProjectPropertiesContent.svelte
View File

@@ -1,54 +1,48 @@
<script lang=ts>
import { onDestroy } from 'svelte';
import * as SoftwareVariables from '../../stores.js';
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'
// 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();
});
// 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 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/>
<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 label={$_("projectAvatarLabel")} type='image' src='appicon.png' alt={$_("projectAvatarLabel")} width='11em'/>
<RoundedButton style='display:block;' tooltip={$_("projectAvatarTooltip")} text={$_("projectLoadAvatarButton")} icon='bxs-image' active/>
<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 label={$_("projectCommentsLabel")} type='large' width='100%' placeholder={$_("projectCommentsPlaceholder")}/>
<Input bind:value={$currentProject.Comments} label={$_("projectCommentsLabel")} type='large' width='100%'/>
</div>
</div>
<style>
.flexSettings{
display: flex;
flex-direction: column;
}
</style>

54
frontend/src/components/Settings/Settings.svelte
View File

@@ -1,24 +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 text={$_("newProjectString")} icon='bxs-plus-square' tooltip={$_("newProjectTooltip")}/>
<RoundedButton text={$_("openProjectString")} icon='bx-folder-open' tooltip={$_("openProjectTooltip")}/>
<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>

3
frontend/src/lang/en.json
View File

@@ -7,10 +7,11 @@
"consoleMenuTooltip": "General console",
"stageRenderingToggleTooltip": "Show/hide the rendering view",
"showActivationToggleTooltip": "Activate/Deactivate the play mode",
"saveButtonTooltip": "Save the project",
"newProjectString": "New",
"openProjectString": "Open",
"newProjectTooltip": "Create a new project",
"openProjectString": "Open",
"openProjectTooltip": "Open an existing project",
"projectPropertiesTab": "Project properties",
"projectPropertiesTooltip": "The project properties",

30
frontend/src/main.js
View File

@@ -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;

27
frontend/src/stores.js
View File

@@ -1,14 +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");
export const whiteColor = writable("#FFFFFF");
export const orangeColor = writable("#BC9714")
// 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")

8
frontend/src/style.css
View File

@@ -2,6 +2,14 @@
-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 {