knxdisplay/web-interface/src/App.vue
2026-01-26 18:04:07 +01:00

33 lines
1.2 KiB
Vue

<template>
<div class="min-h-screen flex flex-col">
<TopBar @open-settings="showSettings = true" />
<div class="flex-1 min-h-0 grid grid-cols-[300px_1fr_320px] max-[1100px]:grid-cols-1 max-[1100px]:grid-rows-[auto_auto_auto]">
<SidebarLeft />
<CanvasArea @open-screen-settings="showScreenSettings = true" />
<SidebarRight />
</div>
<SettingsModal v-if="showSettings" @close="showSettings = false" />
<ScreenSettingsModal v-if="showScreenSettings" @close="showScreenSettings = false" />
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import TopBar from './components/TopBar.vue';
import SidebarLeft from './components/SidebarLeft.vue';
import SidebarRight from './components/SidebarRight.vue';
import CanvasArea from './components/CanvasArea.vue';
import SettingsModal from './components/SettingsModal.vue';
import ScreenSettingsModal from './components/ScreenSettingsModal.vue';
import { useEditorStore } from './stores/editor';
const store = useEditorStore();
const showSettings = ref(false);
const showScreenSettings = ref(false);
onMounted(() => {
store.loadConfig();
store.loadKnxAddresses();
});
</script>