108 lines
7.0 KiB
Vue
108 lines
7.0 KiB
Vue
<template>
|
|
<div class="fixed inset-0 bg-black/60 flex items-center justify-center p-4 z-50" @click.self="emit('close')">
|
|
<div class="w-[min(720px,96vw)] max-h-[85vh] bg-gradient-to-b from-white to-[#f6f9fc] border border-border rounded-2xl shadow-[0_20px_40px_rgba(15,23,42,0.18)] flex flex-col">
|
|
<div class="flex items-center justify-between gap-3 px-[18px] py-4 border-b border-border">
|
|
<h3 class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Einstellungen</h3>
|
|
<button class="w-7 h-7 rounded-lg border border-border bg-panel-2 text-text grid place-items-center cursor-pointer hover:bg-[#e4ebf2] hover:border-[#b8c4d2]" @click="emit('close')">x</button>
|
|
</div>
|
|
<div class="px-[18px] py-4 overflow-y-auto flex flex-col gap-3.5">
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Allgemein</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Startscreen</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" 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="flex items-center gap-2 text-[12px] text-muted">
|
|
<input class="accent-[var(--accent)]" type="checkbox" v-model="store.config.standby.enabled">
|
|
<span>Standby aktiv</span>
|
|
</label>
|
|
<div class="flex items-center justify-between gap-2.5 mt-2">
|
|
<label class="text-[12px] text-muted">Standby</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" 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="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Minuten</label>
|
|
<input class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" type="number" min="0" v-model.number="store.config.standby.minutes">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">Screen-Animation</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Typ</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.screenAnim.type">
|
|
<option :value="0">Keine</option>
|
|
<option :value="1">Einblenden</option>
|
|
<option :value="2">Schieben Links</option>
|
|
<option :value="3">Schieben Rechts</option>
|
|
<option :value="4">Schieben Hoch</option>
|
|
<option :value="5">Schieben Runter</option>
|
|
<option :value="6">Ueberlagern Links</option>
|
|
<option :value="7">Ueberlagern Rechts</option>
|
|
<option :value="8">Ueberlagern Hoch</option>
|
|
<option :value="9">Ueberlagern Runter</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Dauer (ms)</label>
|
|
<input class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" type="number" min="0" max="2000" v-model.number="store.config.screenAnim.duration">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2.5">
|
|
<div class="text-[12px] uppercase tracking-[0.08em] text-[#3a5f88]">KNX Zeit</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Uhrzeit</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.knx.time">
|
|
<option :value="0">-- Keine --</option>
|
|
<option v-for="addr in store.knxAddresses" :key="`time-${addr.addr}-${addr.index}`" :value="addr.addr">
|
|
GA {{ addr.addrStr }} (GO{{ addr.index }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Datum</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.knx.date">
|
|
<option :value="0">-- Keine --</option>
|
|
<option v-for="addr in store.knxAddresses" :key="`date-${addr.addr}-${addr.index}`" :value="addr.addr">
|
|
GA {{ addr.addrStr }} (GO{{ addr.index }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Datum+Zeit</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.knx.dateTime">
|
|
<option :value="0">-- Keine --</option>
|
|
<option v-for="addr in store.knxAddresses" :key="`dt-${addr.addr}-${addr.index}`" :value="addr.addr">
|
|
GA {{ addr.addrStr }} (GO{{ addr.index }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-2.5">
|
|
<label class="text-[12px] text-muted">Nachtmodus</label>
|
|
<select class="flex-1 bg-panel-2 border border-border rounded-lg px-2 py-1.5 text-text text-[12px] focus:outline-none focus:border-accent" v-model.number="store.config.knx.night">
|
|
<option :value="0">-- Keine --</option>
|
|
<option v-for="addr in store.knxAddresses" :key="`night-${addr.addr}-${addr.index}`" :value="addr.addr">
|
|
GA {{ addr.addrStr }} (GO{{ addr.index }})
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="px-[18px] py-3 border-t border-border flex justify-end gap-2.5">
|
|
<button class="border border-border bg-panel-2 text-text px-3.5 py-2 rounded-[10px] text-[13px] font-semibold transition hover:-translate-y-0.5 hover:bg-[#e4ebf2] active:translate-y-0.5" @click="emit('close')">Schliessen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useEditorStore } from '../stores/editor';
|
|
|
|
const emit = defineEmits(['close']);
|
|
const store = useEditorStore();
|
|
</script>
|