knxdisplay/web-interface/src/components/SidebarLeft.vue

<template>
  <aside class="sidebar left">
    <section class="panel">
      <div class="panel-header">
        <h3>Elemente</h3>
        <span class="panel-hint">Klick zum Hinzufuegen</span>
      </div>
      <div class="element-grid">
        <button class="element-btn" @click="store.addWidget('label')">
          <span class="element-title">Label</span>
          <span class="element-sub">Text</span>
        </button>
        <button class="element-btn" @click="store.addWidget('button')">
          <span class="element-title">Button</span>
          <span class="element-sub">Aktion</span>
        </button>
        <button class="element-btn" @click="store.addWidget('led')">
          <span class="element-title">LED</span>
          <span class="element-sub">Status</span>
        </button>
        <button class="element-btn" @click="store.addWidget('icon')">
          <span class="element-title">Icon</span>
          <span class="element-sub">Symbol</span>
        </button>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Bildschirme</h3>
        <button class="icon-btn" @click="store.addScreen">+</button>
      </div>
      <div class="screen-list">
        <div 
            v-for="screen in store.config.screens" 
            :key="screen.id"
            class="screen-item"
            :class="{ active: screen.id === store.activeScreenId }"
            @click="store.activeScreenId = screen.id; store.selectedWidgetId = null;"
        >
            <span class="screen-tag">{{ screen.mode === 1 ? 'Modal' : 'Fullscreen' }}</span>
            <span class="screen-name">{{ screen.name }}</span>
        </div>
      </div>
      <div class="screen-settings" v-if="store.activeScreen">
        <div class="control-row">
          <label>Name</label>
          <input type="text" v-model="store.activeScreen.name">
        </div>
        <div class="control-row">
          <label>Modus</label>
          <select v-model.number="store.activeScreen.mode">
            <option :value="0">Fullscreen</option>
            <option :value="1">Modal</option>
          </select>
        </div>
        <button class="btn ghost danger small" @click="store.deleteScreen">Screen loeschen</button>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Baum</h3>
        <span class="panel-hint">{{ store.activeScreen?.widgets.length || 0 }}</span>
      </div>
      <div class="tree">
        <div class="tree-root">{{ store.activeScreen?.name }}</div>
        <div class="tree-list">
             <div v-if="!store.activeScreen?.widgets.length" class="tree-empty">Keine Widgets</div>
             <div 
                v-else
                v-for="w in store.activeScreen.widgets"
                :key="w.id"
                class="tree-item"
                :class="{ active: store.selectedWidgetId === w.id, hidden: !w.visible }"
                @click="store.selectedWidgetId = w.id"
             >
                <span class="tree-tag">{{ TYPE_LABELS[typeKeyFor(w.type)] }}</span>
                <span class="tree-name">{{ w.text || TYPE_LABELS[typeKeyFor(w.type)] }}</span>
                <span class="tree-id">#{{ w.id }}</span>
             </div>
        </div>
      </div>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Canvas</h3>
      </div>
      <div class="control-row">
        <label>Hintergrund</label>
        <input type="color" v-model="store.activeScreen.bgColor" v-if="store.activeScreen">
      </div>
      <div class="control-row">
        <label>Zoom</label>
        <input type="range" min="0.3" max="1" step="0.05" v-model.number="store.canvasScale">
      </div>
      <div class="control-meta">
        <span>{{ Math.round(store.canvasScale * 100) }}%</span>
        <span>1280x800</span>
      </div>
      <label class="toggle">
        <input type="checkbox" v-model="store.showGrid">
        <span>Grid anzeigen</span>
      </label>
    </section>

    <section class="panel">
      <div class="panel-header">
        <h3>Navigation</h3>
      </div>
      <div class="control-row">
        <label>Startscreen</label>
        <select v-model.number="store.config.startScreen">
            <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
        </select>
      </div>
      <label class="toggle">
        <input type="checkbox" v-model="store.config.standby.enabled">
        <span>Standby aktiv</span>
      </label>
      <div class="control-row" style="margin-top:8px;">
        <label>Standby</label>
        <select v-model.number="store.config.standby.screen">
            <option :value="-1">-- Kein --</option>
            <option v-for="s in store.config.screens" :key="s.id" :value="s.id">{{ s.name }}</option>
        </select>
      </div>
      <div class="control-row">
        <label>Minuten</label>
        <input type="number" min="0" v-model.number="store.config.standby.minutes">
      </div>
    </section>
  </aside>
</template>

<script setup>
import { useEditorStore } from '../stores/editor';
import { typeKeyFor } from '../utils';
import { TYPE_LABELS } from '../constants';

const store = useEditorStore();
</script>