137 lines
6 KiB
Vue
137 lines
6 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import AgendaSettings from './Settings/AgendaSettings.vue'
|
|
import { Head } from '@inertiajs/vue3'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
settings: { type: Object, default: () => ({}) },
|
|
assignments: { type: Array, default: () => [] },
|
|
macros: { type: Array, default: () => [] },
|
|
labels: { type: Array, default: () => [] },
|
|
collections: { type: Array, default: () => [] },
|
|
last_macros_import: { type: Object, default: () => ({}) },
|
|
last_labels_import: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const submenus = [
|
|
{ key: 'assignments', label: 'Makro-Zuweisungen' },
|
|
{ key: 'macros', label: 'Makro-Import' },
|
|
{ key: 'labels', label: 'Label-Import' },
|
|
{ key: 'agenda', label: 'Agenda' },
|
|
]
|
|
|
|
const activeSubmenu = ref('assignments')
|
|
|
|
onMounted(() => {
|
|
const hash = window.location.hash.replace('#', '')
|
|
if (submenus.some((s) => s.key === hash)) {
|
|
activeSubmenu.value = hash
|
|
}
|
|
})
|
|
|
|
function switchSubmenu(key) {
|
|
activeSubmenu.value = key
|
|
window.location.hash = key
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Einstellungen" />
|
|
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800">
|
|
Einstellungen
|
|
</h2>
|
|
</template>
|
|
|
|
<div class="py-8">
|
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
|
<div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm">
|
|
<div class="flex min-h-[400px]">
|
|
<!-- Sidebar (desktop) -->
|
|
<div class="hidden w-48 shrink-0 border-r border-gray-100 sm:block">
|
|
<nav class="flex flex-col gap-1 p-2">
|
|
<button
|
|
v-for="item in submenus"
|
|
:key="item.key"
|
|
:data-testid="'settings-submenu-' + item.key"
|
|
@click="switchSubmenu(item.key)"
|
|
:class="[
|
|
'w-full rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors',
|
|
activeSubmenu === item.key
|
|
? 'border-l-2 border-amber-500 bg-amber-50 text-amber-700'
|
|
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
|
|
]"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile tab bar -->
|
|
<div class="w-full border-b border-gray-100 sm:hidden">
|
|
<nav class="flex overflow-x-auto">
|
|
<button
|
|
v-for="item in submenus"
|
|
:key="item.key"
|
|
:data-testid="'settings-submenu-' + item.key"
|
|
@click="switchSubmenu(item.key)"
|
|
:class="[
|
|
'shrink-0 whitespace-nowrap border-b-2 px-4 py-3 text-sm font-medium transition-colors',
|
|
activeSubmenu === item.key
|
|
? 'border-amber-500 text-amber-700'
|
|
: 'border-transparent text-gray-600 hover:text-gray-900',
|
|
]"
|
|
>
|
|
{{ item.label }}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Content panel -->
|
|
<div class="flex-1 p-6" data-testid="settings-active-panel">
|
|
<!-- Makro-Zuweisungen — filled in by T3.5 -->
|
|
<div v-if="activeSubmenu === 'assignments'">
|
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
|
Globale Makro-Zuweisungen
|
|
</h3>
|
|
<p class="text-sm text-gray-500">
|
|
Hier werden die globalen Makro-Zuweisungen konfiguriert.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Makro-Import — filled in by T3.4 -->
|
|
<div v-if="activeSubmenu === 'macros'">
|
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
|
Makro-Import
|
|
</h3>
|
|
<p class="text-sm text-gray-500">
|
|
Importiere eine ProPresenter Makro-Datei.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Label-Import — filled in by T3.3 -->
|
|
<div v-if="activeSubmenu === 'labels'">
|
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
|
Label-Import
|
|
</h3>
|
|
<p class="text-sm text-gray-500">
|
|
Importiere eine ProPresenter Labels-Datei.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Agenda -->
|
|
<AgendaSettings
|
|
v-if="activeSubmenu === 'agenda'"
|
|
:settings="settings"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|