forked from DMXStage/dmxconnect
72 lines
3.2 KiB
Svelte
72 lines
3.2 KiB
Svelte
<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> |