Files
dmxconnect/frontend/src/App.svelte
2024-11-01 20:10:28 +00:00

91 lines
2.7 KiB
Svelte

<script>
import { _ } from 'svelte-i18n'
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 = "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 === "settings"}
<Settings />
{: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>
<style>
main {
text-align: left;
padding: 1em;
max-width: 240px;
margin: 0 auto;
}
@media (min-width: 640px) {
main {
max-width: none;
}
}
</style>