gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

12-05-2026 admin, Panel Displays

Browse source
This commit is contained in:
Kevin Adametz 2026-05-12 18:28:38 +02:00
parent 0762e3beac
commit 6a65354f4c
43 changed files with 3273 additions and 410 deletions
Download patch file Download diff file Expand all files Collapse all files

468
resources/views/livewire/admin/cms/display-list.blade.php
View file

@ -1,7 +1,7 @@
<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:subheading>{{ __('Verwalten Sie Live-Bespielungen und Entwürfe je physischem Display') }}</flux:subheading>
</flux:header>
@if (session()->has('success'))
@ -14,7 +14,7 @@
<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>
<flux:subheading>{{ __('Live bleibt stabil, Entwürfe können vorbereitet und gezielt veröffentlicht werden') }}</flux:subheading>
</div>
<flux:button wire:click="openModal" icon="plus" variant="primary">
{{ __('Display hinzufügen') }}
@ -27,80 +27,201 @@
<p>{{ __('Noch keine Displays vorhanden. Fügen Sie Ihr erstes Display hinzu!') }}</p>
</div>
@else
<div class="space-y-3">
<div class="space-y-4">
@foreach($displays as $display)
@php
$liveDisplayUrl = url('/_cabinet/display/index.html').'?id='.$display->id;
$liveApiUrl = url('/api/display/'.$display->id.'/config');
@endphp
<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">
class="rounded-xl border p-4 transition {{ $display->is_test ? 'border-amber-300 bg-amber-50/70 dark:border-amber-500/50 dark:bg-amber-950/20' : 'border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-800' }}">
<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 class="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
<div class="min-w-0">
<div class="flex flex-wrap items-center gap-2">
<flux:badge :color="$display->is_active ? 'green' : 'zinc'" size="sm">
{{ $display->is_active ? __('Aktiv') : __('Inaktiv') }}
</flux:badge>
@if($display->is_test)
<flux:badge color="amber" size="sm">{{ __('Test-Display') }}</flux:badge>
@endif
<span class="font-semibold text-sm text-zinc-900 dark:text-zinc-100">{{ $display->name }}</span>
@if($display->location)
<span class="text-xs text-zinc-500 dark:text-zinc-400">{{ $display->location }}</span>
@endif
</div>
<div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
{{ __('Display-ID') }}: {{ $display->id }}
</div>
</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
<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>
{{-- 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>
<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>
<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>
<div class="mt-4 grid gap-4 lg:grid-cols-2">
<div class="rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900/60">
<div class="mb-3 flex items-center justify-between gap-3">
<div>
<div class="text-xs font-semibold uppercase tracking-wide text-green-600 dark:text-green-400">{{ __('Live') }}</div>
<div class="text-xs text-zinc-500 dark:text-zinc-400">
{{ optional($display->livePlaylist?->updated_at)->format('d.m.Y H:i') ?? __('Noch nicht veröffentlicht') }}
</div>
</div>
<flux:badge color="green" size="sm">{{ __('Veröffentlicht') }}</flux:badge>
</div>
<flux:button wire:click="openModal({{ $display->id }})"
size="sm"
variant="ghost"
icon="pencil">
</flux:button>
@if($display->livePlaylist?->modules->isNotEmpty())
<div class="flex flex-wrap items-center gap-1.5">
@foreach($display->livePlaylist->modules as $idx => $module)
@if($idx > 0)
<flux:icon.chevron-right class="w-3 h-3 text-zinc-400" />
@endif
<flux:badge color="{{ match($module->type->value) {
'video-display' => 'purple',
'b2in' => 'blue',
'offers' => 'amber',
} }}" size="sm">
{{ $module->name }}
</flux:badge>
@endforeach
</div>
@else
<div class="rounded border border-dashed border-amber-300 p-3 text-xs text-amber-700 dark:border-amber-500/60 dark:text-amber-300">
{{ __('Keine Live-Bespielung vorhanden') }}
</div>
@endif
<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 class="mt-4 flex flex-wrap items-center gap-3">
<flux:button wire:click="openModal({{ $display->id }}, 'published')"
size="xs"
variant="ghost"
icon="pencil">
{{ __('Live bearbeiten') }}
</flux:button>
<a href="{{ $liveDisplayUrl }}"
target="_blank"
class="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400">
<flux:icon.play class="w-3 h-3" />
{{ __('Vorschau') }}
</a>
</div>
<div class="mt-3">
<label class="mb-1 block text-xs font-medium text-zinc-500 dark:text-zinc-400">
{{ __('Live-URL zum Kopieren') }}
</label>
<div class="flex gap-2">
<input type="text"
readonly
value="{{ $liveDisplayUrl }}"
onclick="this.select()"
class="min-w-0 flex-1 rounded-md border border-zinc-200 bg-zinc-50 px-2 py-1.5 text-xs text-zinc-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
<button type="button"
onclick="navigator.clipboard?.writeText(@js($liveDisplayUrl))"
class="rounded-md border border-zinc-200 px-2 py-1.5 text-xs text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800">
{{ __('Kopieren') }}
</button>
</div>
</div>
<div class="mt-3 flex justify-end">
<a href="{{ $liveApiUrl }}"
target="_blank"
class="inline-flex items-center gap-1 text-xs text-zinc-400 hover:text-zinc-600 hover:underline dark:hover:text-zinc-300">
<flux:icon.code-bracket class="w-3 h-3" />
{{ __('API') }}
</a>
</div>
</div>
<div class="rounded-lg border border-dashed border-zinc-300 bg-white p-4 dark:border-zinc-600 dark:bg-zinc-900/60">
<div class="mb-3 flex items-center justify-between gap-3">
<div>
<div class="text-xs font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400">{{ __('Entwurf') }}</div>
<div class="text-xs text-zinc-500 dark:text-zinc-400">
{{ optional($display->draftPlaylist?->updated_at)->format('d.m.Y H:i') ?? __('Kein Entwurf') }}
</div>
</div>
<flux:badge :color="$display->draftPlaylist ? 'amber' : 'zinc'" size="sm">
{{ $display->draftPlaylist ? __('In Arbeit') : __('Leer') }}
</flux:badge>
</div>
@if($display->draftPlaylist)
@if($display->draftPlaylist->modules->isNotEmpty())
<div class="flex flex-wrap items-center gap-1.5">
@foreach($display->draftPlaylist->modules as $idx => $module)
@if($idx > 0)
<flux:icon.chevron-right class="w-3 h-3 text-zinc-400" />
@endif
<flux:badge color="{{ match($module->type->value) {
'video-display' => 'purple',
'b2in' => 'blue',
'offers' => 'amber',
} }}" size="sm">
{{ $module->name }}
</flux:badge>
@endforeach
</div>
@else
<div class="rounded border border-dashed border-zinc-300 p-3 text-xs text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
{{ __('Entwurf ist leer') }}
</div>
@endif
<div class="mt-4 flex flex-wrap items-center gap-3">
<flux:button wire:click="openModal({{ $display->id }}, 'draft')"
size="xs"
variant="ghost"
icon="pencil">
{{ __('Entwurf bearbeiten') }}
</flux:button>
<a href="/preview/{{ $display->preview_token }}"
target="_blank"
class="inline-flex items-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400">
<flux:icon.play class="w-3 h-3" />
{{ __('Test-URL') }}
</a>
<flux:button wire:click="publishDraft({{ $display->id }})"
wire:confirm="Diesen Entwurf veröffentlichen und den Live-Stand ersetzen?"
size="xs"
variant="primary">
{{ __('Veröffentlichen') }}
</flux:button>
<flux:button wire:click="discardDraft({{ $display->id }})"
wire:confirm="Diesen Entwurf wirklich verwerfen?"
size="xs"
variant="ghost">
{{ __('Verwerfen') }}
</flux:button>
</div>
@else
<div class="rounded border border-dashed border-zinc-300 p-3 text-xs text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
{{ __('Noch kein Entwurf. Beim Anlegen wird der Live-Stand kopiert.') }}
</div>
<div class="mt-4">
<flux:button wire:click="createDraft({{ $display->id }})" size="sm" variant="ghost" icon="document-plus">
{{ __('Entwurf anlegen') }}
</flux:button>
</div>
@endif
</div>
</div>
</div>
@endforeach
@ -111,92 +232,157 @@
{{-- 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>
@php
$isDraftEditor = $displayId && $editingPlaylistStatus === \App\Models\DisplayPlaylist::STATUS_DRAFT;
$draftPreviewUrl = $draftPreviewToken ? url('/preview/'.$draftPreviewToken).'?refresh='.$previewFrameRefreshCounter : null;
@endphp
<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
<div>
<div class="space-y-6">
<div>
<flux:heading size="lg">
@if(! $displayId)
{{ __('Display hinzufügen') }}
@elseif($isDraftEditor)
{{ __('Entwurf bearbeiten') }}
@else
{{ __('Live-Bespielung bearbeiten') }}
@endif
</flux:heading>
</div>
<flux:input wire:model="displayLocation" label="Standort (optional)" placeholder="z.B. Schaufenster links" />
<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
{{-- 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>
<flux:input wire:model="displayLocation" label="Standort (optional)" placeholder="z.B. Schaufenster links" />
@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>
{{-- Version Playlist --}}
<div>
<flux:heading size="sm" class="mb-2">
{{ $isDraftEditor ? __('Entwurfs-Bespielung') : __('Live-Bespielung') }}
</flux:heading>
<flux:subheading class="mb-3">{{ __('Module 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')"
type="button"
size="xs"
variant="ghost"
icon="chevron-up"
:disabled="$index === 0">
</flux:button>
<flux:button wire:click="moveVersion({{ $index }}, 'down')"
type="button"
size="xs"
variant="ghost"
icon="chevron-down"
:disabled="$index === count($selectedVersionIds) - 1">
</flux:button>
<flux:button wire:click="removeVersion({{ $index }})"
type="button"
size="xs"
variant="ghost"
icon="x-mark"
class="text-red-500">
</flux:button>
</div>
</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>
@endif
@endforeach
</flux:select>
</div>
<flux:button wire:click="addVersion"
icon="plus"
size="sm"
variant="ghost">
</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 Module hinzugefügt') }}
</div>
@endif
@php
$availableVersions = $versions->reject(fn ($version) => in_array($version->id, $selectedVersionIds, true));
@endphp
@if($availableVersions->isNotEmpty())
<div class="flex gap-2">
<div class="flex-1">
<flux:select wire:model="addVersionSelect" placeholder="Modul hinzufügen...">
@foreach($availableVersions as $version)
<option value="{{ $version->id }}">{{ $version->name }} ({{ $version->type->label() }})</option>
@endforeach
</flux:select>
</div>
<flux:button wire:click="addVersion"
type="button"
icon="plus"
size="sm"
variant="ghost">
</flux:button>
</div>
@else
<div class="rounded border border-dashed border-zinc-300 p-3 text-xs text-zinc-500 dark:border-zinc-600 dark:text-zinc-400">
{{ __('Alle verfügbaren Module sind bereits hinzugefügt.') }}
</div>
@endif
</div>
<flux:checkbox wire:model="displayIsActive" label="Display aktiv" />
<flux:checkbox wire:model="displayIsTest" label="Als Test-Display hervorheben" />
<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>
<flux:checkbox wire:model="displayIsActive" label="Display aktiv" />
@if($isDraftEditor)
<div class="space-y-3 border-t border-zinc-200 pt-6 dark:border-zinc-700">
<div>
<flux:heading size="sm">{{ __('Live-Vorschau') }}</flux:heading>
<flux:subheading>{{ __('Aktualisiert sich nach Modul-Änderungen automatisch') }}</flux:subheading>
</div>
<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 class="mx-auto aspect-[9/16] w-full max-w-[320px] overflow-hidden rounded-xl border border-zinc-200 bg-black shadow-sm dark:border-zinc-700">
@if($draftPreviewUrl)
<iframe
wire:key="draft-preview-{{ $previewFrameRefreshCounter }}"
src="{{ $draftPreviewUrl }}"
class="h-full w-full border-0"
title="{{ __('Entwurfs-Vorschau') }}"
></iframe>
@else
<div class="flex h-full items-center justify-center p-6 text-center text-xs text-zinc-400">
{{ __('Für diesen Entwurf ist noch keine Vorschau-URL verfügbar.') }}
</div>
@endif
</div>
@if($draftPreviewUrl)
<a href="{{ $draftPreviewUrl }}"
target="_blank"
class="mx-auto flex max-w-[320px] items-center justify-center gap-1 text-xs text-blue-600 hover:underline dark:text-blue-400">
<flux:icon.arrow-top-right-on-square class="w-3 h-3" />
{{ __('Vollbild öffnen') }}
</a>
@endif
</div>
@endif
</div>
</div>
</form>