204 lines
11 KiB
PHP
204 lines
11 KiB
PHP
<div>
|
|
<flux:header class="mb-6">
|
|
<flux:heading size="xl">{{ __('Displays') }}</flux:heading>
|
|
<flux:subheading>{{ __('Verwalten Sie Ihre physischen Displays und weisen Sie ihnen Versionen zu') }}</flux:subheading>
|
|
</flux:header>
|
|
|
|
@if (session()->has('success'))
|
|
<x-success-alert>
|
|
{{ session('success') }}
|
|
</x-success-alert>
|
|
@endif
|
|
|
|
<flux:card>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<flux:heading size="lg">{{ __('Physische Displays') }}</flux:heading>
|
|
<flux:subheading>{{ __('Jedem Display können mehrere Versionen als Playlist zugewiesen werden') }}</flux:subheading>
|
|
</div>
|
|
<flux:button wire:click="openModal" icon="plus" variant="primary">
|
|
{{ __('Display hinzufügen') }}
|
|
</flux:button>
|
|
</div>
|
|
|
|
@if($displays->isEmpty())
|
|
<div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
|
|
<flux:icon.tv class="w-16 h-16 mx-auto mb-4 opacity-50" />
|
|
<p>{{ __('Noch keine Displays vorhanden. Fügen Sie Ihr erstes Display hinzu!') }}</p>
|
|
</div>
|
|
@else
|
|
<div class="space-y-3">
|
|
@foreach($displays as $display)
|
|
<div wire:key="display-{{ $display->id }}"
|
|
class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg border border-zinc-200 dark:border-zinc-700 hover:border-zinc-300 dark:hover:border-zinc-600 transition">
|
|
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<flux:badge :color="$display->is_active ? 'green' : 'zinc'" size="sm">
|
|
{{ $display->is_active ? __('Aktiv') : __('Inaktiv') }}
|
|
</flux:badge>
|
|
<span class="font-semibold text-sm">{{ $display->name }}</span>
|
|
@if($display->location)
|
|
<span class="text-xs text-zinc-500 dark:text-zinc-400">{{ $display->location }}</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($display->versions->isNotEmpty())
|
|
<div class="flex flex-wrap items-center gap-1.5 mt-2">
|
|
@foreach($display->versions as $idx => $version)
|
|
@if($idx > 0)
|
|
<flux:icon.chevron-right class="w-3 h-3 text-zinc-400" />
|
|
@endif
|
|
<flux:badge color="{{ match($version->type->value) {
|
|
'video-display' => 'purple',
|
|
'b2in' => 'blue',
|
|
'offers' => 'amber',
|
|
} }}" size="sm">
|
|
{{ $version->name }}
|
|
</flux:badge>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="text-xs text-amber-600 dark:text-amber-400 mt-1">
|
|
{{ __('Keine Versionen zugewiesen') }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Direct display links --}}
|
|
<div class="mt-2 flex items-center gap-4">
|
|
<a href="/_cabinet/display/index.html?id={{ $display->id }}"
|
|
target="_blank"
|
|
class="text-xs text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center gap-1">
|
|
<flux:icon.play class="w-3 h-3" />
|
|
Display öffnen
|
|
</a>
|
|
<a href="/api/display/{{ $display->id }}/config"
|
|
target="_blank"
|
|
class="text-xs text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 hover:underline inline-flex items-center gap-1">
|
|
<flux:icon.code-bracket class="w-3 h-3" />
|
|
API
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<flux:button wire:click="toggleActive({{ $display->id }})"
|
|
size="sm"
|
|
variant="ghost"
|
|
:icon="$display->is_active ? 'eye-slash' : 'eye'">
|
|
</flux:button>
|
|
|
|
<flux:button wire:click="openModal({{ $display->id }})"
|
|
size="sm"
|
|
variant="ghost"
|
|
icon="pencil">
|
|
</flux:button>
|
|
|
|
<flux:button wire:click="deleteDisplay({{ $display->id }})"
|
|
wire:confirm="Möchten Sie dieses Display wirklich löschen?"
|
|
size="sm"
|
|
variant="ghost"
|
|
icon="trash"
|
|
class="text-red-600 hover:text-red-700">
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</flux:card>
|
|
|
|
{{-- Display Modal --}}
|
|
<flux:modal :open="$showModal" wire:model="showModal">
|
|
<form wire:submit.prevent="save">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">{{ $displayId ? __('Display bearbeiten') : __('Display hinzufügen') }}</flux:heading>
|
|
</div>
|
|
|
|
<flux:input wire:model="displayName" label="Name" placeholder="z.B. Display 1 - Eingang" />
|
|
@error('displayName') <span class="text-red-600 text-sm">{{ $message }}</span> @enderror
|
|
|
|
<flux:input wire:model="displayLocation" label="Standort (optional)" placeholder="z.B. Schaufenster links" />
|
|
|
|
{{-- Version Playlist --}}
|
|
<div>
|
|
<flux:heading size="sm" class="mb-2">{{ __('Versions-Playlist') }}</flux:heading>
|
|
<flux:subheading class="mb-3">{{ __('Versionen werden in dieser Reihenfolge als Schleife abgespielt') }}</flux:subheading>
|
|
|
|
@if(count($selectedVersionIds) > 0)
|
|
<div class="space-y-2 mb-3">
|
|
@foreach($selectedVersionIds as $index => $versionId)
|
|
@php $ver = $versions->firstWhere('id', $versionId); @endphp
|
|
@if($ver)
|
|
<div wire:key="playlist-{{ $index }}-{{ $versionId }}"
|
|
class="flex items-center gap-2 p-2 bg-zinc-100 dark:bg-zinc-700 rounded border border-zinc-200 dark:border-zinc-600">
|
|
<span class="text-xs text-zinc-400 font-mono w-5 text-center">{{ $index + 1 }}</span>
|
|
<flux:badge color="{{ match($ver->type->value) {
|
|
'video-display' => 'purple',
|
|
'b2in' => 'blue',
|
|
'offers' => 'amber',
|
|
} }}" size="sm">
|
|
{{ $ver->type->label() }}
|
|
</flux:badge>
|
|
<span class="text-sm flex-1">{{ $ver->name }}</span>
|
|
<div class="flex items-center gap-1">
|
|
<flux:button wire:click="moveVersion({{ $index }}, 'up')"
|
|
size="xs"
|
|
variant="ghost"
|
|
icon="chevron-up"
|
|
:disabled="$index === 0">
|
|
</flux:button>
|
|
<flux:button wire:click="moveVersion({{ $index }}, 'down')"
|
|
size="xs"
|
|
variant="ghost"
|
|
icon="chevron-down"
|
|
:disabled="$index === count($selectedVersionIds) - 1">
|
|
</flux:button>
|
|
<flux:button wire:click="removeVersion({{ $index }})"
|
|
size="xs"
|
|
variant="ghost"
|
|
icon="x-mark"
|
|
class="text-red-500">
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="text-center py-4 text-zinc-400 text-sm border border-dashed border-zinc-300 dark:border-zinc-600 rounded mb-3">
|
|
{{ __('Noch keine Versionen hinzugefügt') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="flex gap-2">
|
|
<div class="flex-1">
|
|
<flux:select wire:model="addVersionSelect" placeholder="Version hinzufügen...">
|
|
@foreach($versions as $version)
|
|
<option value="{{ $version->id }}">{{ $version->name }} ({{ $version->type->label() }})</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
<flux:button wire:click="addVersion"
|
|
icon="plus"
|
|
size="sm"
|
|
variant="ghost">
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:checkbox wire:model="displayIsActive" label="Display aktiv" />
|
|
|
|
<div class="flex justify-end gap-3 pt-4">
|
|
<flux:button type="button" wire:click="closeModal" variant="ghost">
|
|
{{ __('Abbrechen') }}
|
|
</flux:button>
|
|
<flux:button type="submit" variant="primary">
|
|
{{ $displayId ? __('Aktualisieren') : __('Hinzufügen') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</flux:modal>
|
|
</div>
|