boban
/
mailwolt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI: Update-Seite komplett neu gestaltet – responsiv, mobile-first 

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
main v1.1.356
boban 2026-04-26 22:46:53 +02:00
parent fd8d81fecb
commit 0375aed2ce
1 changed files with 159 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

313
resources/views/livewire/ui/system/update-page.blade.php
View File

@ -3,6 +3,11 @@
<div> <div>
{{-- Polling --}}
@if($state === 'running' || $running)
<div wire:poll.2s="pollStatus"></div>
@endif
{{-- ═══ Page Header ═══ --}} {{-- ═══ Page Header ═══ --}}
<div class="mbx-page-header"> <div class="mbx-page-header">
<div class="mbx-page-title"> <div class="mbx-page-title">
@ -21,7 +26,6 @@
<span wire:loading.remove wire:target="checkForUpdates">Auf Updates prüfen</span> <span wire:loading.remove wire:target="checkForUpdates">Auf Updates prüfen</span>
<span wire:loading wire:target="checkForUpdates">Prüfe …</span> <span wire:loading wire:target="checkForUpdates">Prüfe …</span>
</button> </button>
@if($hasUpdate) @if($hasUpdate)
<button wire:click="runUpdate" <button wire:click="runUpdate"
wire:loading.attr="disabled" wire:loading.attr="disabled"
@ -36,178 +40,179 @@
</div> </div>
</div> </div>
{{-- Polling when running --}} {{-- ═══ Version Hero ═══ --}}
@if($state === 'running' || $running) <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 mb-4">
<div wire:poll.2s="pollStatus"></div>
@endif
<div class="mbx-sections"> {{-- Installierte Version --}}
<div class="rounded-xl border border-[var(--mw-b2)] bg-[var(--mw-bg3)] p-4 flex items-center gap-4">
{{-- ═══ Section 1: Version Info ═══ --}} <div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center bg-[var(--mw-bg4)] border border-[var(--mw-b2)]">
<div class="mbx-section"> <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="12" height="12" rx="2.5" stroke="var(--mw-t3)" stroke-width="1.3"/><path d="M5 8h6M5 5.5h6M5 10.5h4" stroke="var(--mw-t3)" stroke-width="1.2" stroke-linecap="round"/></svg>
<div class="mbx-domain-head">
<div class="mbx-domain-info">
<span class="mbx-badge-mute">Versionsinformation</span>
</div>
<div style="display:flex;align-items:center;gap:8px">
@if($state === 'running')
<span style="font-size:11px;padding:3px 10px;border-radius:5px;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.3);color:#7dd3fc">
Update läuft …
</span>
@elseif($rc !== null && $rc !== 0)
<span class="mbx-badge-warn">Fehlgeschlagen (rc={{ $rc }})</span>
@elseif($hasUpdate)
<span class="mbx-badge-warn">Update verfügbar</span>
@else
<span class="mbx-badge-ok">Aktuell</span>
@endif
</div>
</div> </div>
<div style="padding:16px 18px"> <div class="min-w-0">
<div class="mw-modal-grid2"> <div class="text-[11px] text-[var(--mw-t4)] font-medium uppercase tracking-wide mb-0.5">Installiert</div>
<div> <div class="font-mono text-[15px] font-semibold text-[var(--mw-t1)] truncate">{{ $displayCurrent ?? '—' }}</div>
<div class="mw-modal-label">Installierte Version</div>
<div style="font-family:monospace;font-size:14px;color:var(--mw-t1);margin-top:4px">
{{ $displayCurrent ?? '—' }}
</div>
</div>
<div>
<div class="mw-modal-label">Verfügbare Version</div>
<div style="font-family:monospace;font-size:14px;color:{{ $hasUpdate ? '#fbbf24' : 'var(--mw-t1)' }};margin-top:4px">
{{ $displayLatest ?? '—' }}
</div>
</div>
</div>
@if(!$hasUpdate && $displayCurrent)
<div style="margin-top:14px;display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(34,197,94,.8)">
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.5 2.5 5.5-5.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
Du bist auf dem neuesten Stand.
</div>
@endif
</div> </div>
</div> </div>
{{-- ═══ Section 2: Status ═══ --}} {{-- Verfügbare Version --}}
<div class="mbx-section"> <div class="rounded-xl border @if($hasUpdate) border-amber-500/30 bg-amber-500/5 @else border-[var(--mw-b2)] bg-[var(--mw-bg3)] @endif p-4 flex items-center gap-4">
<div class="mbx-domain-head"> <div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-content-center flex items-center justify-center @if($hasUpdate) bg-amber-500/10 border border-amber-500/30 @else bg-[var(--mw-bg4)] border border-[var(--mw-b2)] @endif">
<div class="mbx-domain-info"> <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="{{ $hasUpdate ? '#fbbf24' : 'var(--mw-t3)' }}" stroke-width="1.3" stroke-linecap="round"/><path d="M2 2v3.5H5.5" stroke="{{ $hasUpdate ? '#fbbf24' : 'var(--mw-t3)' }}" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span class="mbx-badge-mute">Update-Status</span> </div>
<div class="min-w-0">
<div class="text-[11px] @if($hasUpdate) text-amber-400/70 @else text-[var(--mw-t4)] @endif font-medium uppercase tracking-wide mb-0.5">Verfügbar</div>
<div class="font-mono text-[15px] font-semibold @if($hasUpdate) text-amber-300 @else text-[var(--mw-t1)] @endif truncate">
{{ $displayLatest ?? ($hasUpdate ? '—' : $displayCurrent ?? '—') }}
</div> </div>
</div> </div>
<div style="padding:16px 18px;display:flex;flex-direction:column;gap:14px"> </div>
{{-- Status --}}
<div class="rounded-xl border sm:col-span-2 lg:col-span-1
@if($state === 'running') border-sky-500/30 bg-sky-500/5
@elseif($rc !== null && $rc !== 0) border-red-500/30 bg-red-500/5
@elseif($rc === 0) border-emerald-500/30 bg-emerald-500/5
@elseif($hasUpdate) border-amber-500/30 bg-amber-500/5
@else border-emerald-500/20 bg-emerald-500/5
@endif p-4 flex items-center gap-4">
<div class="shrink-0 w-10 h-10 rounded-xl flex items-center justify-center
@if($state === 'running') bg-sky-500/10 border border-sky-500/30
@elseif($rc !== null && $rc !== 0) bg-red-500/10 border border-red-500/30
@elseif($rc === 0) bg-emerald-500/10 border border-emerald-500/30
@elseif($hasUpdate) bg-amber-500/10 border border-amber-500/30
@else bg-emerald-500/10 border border-emerald-500/20
@endif">
@if($state === 'running') @if($state === 'running')
{{-- Running state --}} <svg class="animate-spin" width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="#7dd3fc" stroke-width="1.4" stroke-linecap="round"/><path d="M2 2v3.5H5.5" stroke="#7dd3fc" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div style="display:flex;align-items:center;gap:12px">
<div style="width:36px;height:36px;border-radius:50%;background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:spin 1.5s linear infinite">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 2a6 6 0 1 1-4.24 1.76" stroke="#7dd3fc" stroke-width="1.4" stroke-linecap="round"/><path d="M2 2v3.5H5.5" stroke="#7dd3fc" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<div>
<div style="font-size:13px;font-weight:600;color:var(--mw-t1)">Update wird installiert …</div>
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:2px">Bitte nicht unterbrechen. Die Seite aktualisiert sich automatisch.</div>
</div>
</div>
@elseif($rc !== null && $rc !== 0) @elseif($rc !== null && $rc !== 0)
{{-- Error state --}} <svg width="18" height="18" viewBox="0 0 14 14" fill="none"><path d="M7 1L13 12H1L7 1Z" stroke="#f87171" stroke-width="1.3" stroke-linejoin="round"/><path d="M7 5.5v3" stroke="#f87171" stroke-width="1.3" stroke-linecap="round"/><circle cx="7" cy="10" r=".7" fill="#f87171"/></svg>
<div style="display:flex;align-items:flex-start;gap:10px;padding:12px 14px;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.25);border-radius:8px">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0;margin-top:1px;color:#f87171"><path d="M7 1L13 12H1L7 1Z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M7 5.5v3" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><circle cx="7" cy="10" r=".7" fill="currentColor"/></svg>
<div>
<div style="font-size:12.5px;font-weight:600;color:#f87171">Update fehlgeschlagen (rc={{ $rc }})</div>
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:3px">Bitte das Log unten prüfen. Der Mailserver bleibt weiter in Betrieb.</div>
</div>
</div>
@elseif($rc === 0) @elseif($rc === 0)
{{-- Success state --}} <svg width="18" height="18" viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.5 2.5 5.5-5.5" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div style="display:flex;align-items:center;gap:10px;padding:12px 14px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);border-radius:8px"> @elseif($hasUpdate)
<svg width="14" height="14" viewBox="0 0 12 12" fill="none" style="color:#22c55e;flex-shrink:0"><path d="M2 6.5l2.5 2.5 5.5-5.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg> <svg width="18" height="18" viewBox="0 0 14 14" fill="none"><path d="M7 2v8M4 7l3 3 3-3" stroke="#fbbf24" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
<span style="font-size:12.5px;color:rgba(34,197,94,.9)">Update erfolgreich abgeschlossen.</span>
</div>
@else @else
{{-- Idle state --}} <svg width="18" height="18" viewBox="0 0 12 12" fill="none"><path d="M2 6.5l2.5 2.5 5.5-5.5" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<div style="font-size:12.5px;color:var(--mw-t4)">Kein Update aktiv. Klicke "Auf Updates prüfen" um die neueste Version zu ermitteln.</div>
@endif @endif
{{-- Progress Bar --}}
@if($state === 'running' || $progressPct > 0)
<div>
<div style="display:flex;justify-content:space-between;margin-bottom:5px">
<span style="font-size:11px;color:var(--mw-t4)">Fortschritt</span>
<span style="font-size:11px;color:var(--mw-t4);font-family:monospace">{{ $progressPct }}%</span>
</div>
<div style="height:6px;background:var(--mw-bg4);border-radius:4px;overflow:hidden;border:1px solid var(--mw-b2)">
<div style="height:100%;width:{{ $progressPct }}%;transition:width .6s ease;background:{{ $rc !== null && $rc !== 0 ? 'rgba(239,68,68,.7)' : ($progressPct >= 100 ? 'rgba(34,197,94,.8)' : 'rgba(14,165,233,.8)') }};border-radius:4px"></div>
</div>
</div>
@endif
</div> </div>
</div> <div class="min-w-0">
<div class="text-[11px] font-medium uppercase tracking-wide mb-0.5
{{-- ═══ Section 3: Log Viewer ═══ --}} @if($state === 'running') text-sky-400/70
<div class="mbx-section" @elseif($rc !== null && $rc !== 0) text-red-400/70
x-data="{ @elseif($rc === 0 || !$hasUpdate) text-emerald-400/70
autoScroll: true, @else text-amber-400/70
init() { @endif">Status</div>
this.$watch('$wire.logLines', () => { <div class="text-[13.5px] font-semibold truncate
if (this.autoScroll && this.$refs.logBox) { @if($state === 'running') text-sky-300
this.$nextTick(() => { @elseif($rc !== null && $rc !== 0) text-red-300
this.$refs.logBox.scrollTop = this.$refs.logBox.scrollHeight; @elseif($rc === 0) text-emerald-300
}); @elseif($hasUpdate) text-amber-300
} @else text-emerald-300
}); @endif">
} @if($state === 'running') Update läuft …
}"> @elseif($rc !== null && $rc !== 0) Fehlgeschlagen (rc={{ $rc }})
<div class="mbx-domain-head"> @elseif($rc === 0) Erfolgreich installiert
<div class="mbx-domain-info"> @elseif($hasUpdate) Update verfügbar
<span class="mbx-badge-mute">Update-Log</span> @else Aktuell
</div>
<div style="display:flex;align-items:center;gap:8px">
<label style="display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none">
<span x-on:click="autoScroll=!autoScroll"
style="position:relative;display:inline-block;width:28px;height:16px;flex-shrink:0">
<span :style="autoScroll ? 'background:var(--mw-v);border-color:var(--mw-v)' : 'background:var(--mw-bg4);border-color:var(--mw-b2)'"
style="position:absolute;inset:0;border-radius:8px;border:1px solid var(--mw-b2);transition:background .2s,border-color .2s"></span>
<span :style="autoScroll ? 'left:14px' : 'left:2px'"
style="position:absolute;top:2px;width:10px;height:10px;border-radius:50%;background:white;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)"></span>
</span>
<span style="font-size:11.5px;color:var(--mw-t4)">Auto-Scroll</span>
</label>
<button wire:click="clearLog"
wire:loading.attr="disabled"
wire:target="clearLog"
class="mbx-btn-mute"
style="font-size:11px;padding:3px 10px">
<svg width="11" height="11" viewBox="0 0 14 14" fill="none"><path d="M2 4h10M5 4V2.5h4V4M11.5 4l-.5 8H3L2.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Log leeren
</button>
</div>
</div>
<div style="padding:12px 14px">
<div x-ref="logBox"
style="background:var(--mw-bg3);border:1px solid var(--mw-b2);border-radius:7px;padding:12px 14px;max-height:400px;overflow-y:auto;font-family:monospace;font-size:11.5px;color:var(--mw-t3);line-height:1.55">
@if(count($logLines) === 0)
<span style="color:var(--mw-t5);font-style:italic">Keine Log-Einträge vorhanden.</span>
@else
@foreach($logLines as $line)@php
$color = 'inherit';
if (str_contains($line, '[!]') || str_contains($line, 'error') || str_contains($line, 'Error') || str_contains($line, 'fehlgeschlagen')) {
$color = '#f87171';
} elseif (str_contains($line, '[✓]') || str_contains($line, 'beendet') || str_contains($line, 'abgeschlossen')) {
$color = 'rgba(34,197,94,.85)';
} elseif (str_contains($line, '[i]')) {
$color = 'var(--mw-t3)';
} elseif (str_contains($line, '=====')) {
$color = 'rgba(14,165,233,.8)';
}
@endphp<span style="display:block;color:{{ $color }}">{{ $line }}</span>@endforeach
@endif @endif
</div> </div>
<div style="margin-top:6px;font-size:11px;color:var(--mw-t5)">
{{ count($logLines) }} Zeilen · /var/log/mailwolt-update.log
</div>
</div> </div>
</div> </div>
</div> </div>
{{-- ═══ Progress Bar (nur während Update) ═══ --}}
@if($state === 'running' || $progressPct > 0)
<div class="mbx-section mb-4">
<div class="p-4">
<div class="flex items-center justify-between mb-2">
<span class="text-[12px] font-medium text-[var(--mw-t3)]">
@if($state === 'running') Installation läuft … @else Abgeschlossen @endif
</span>
<span class="font-mono text-[11px] text-[var(--mw-t4)]">{{ $progressPct }}%</span>
</div>
<div class="h-1.5 rounded-full bg-[var(--mw-bg4)] border border-[var(--mw-b2)] overflow-hidden">
<div class="h-full rounded-full transition-all duration-500
@if($rc !== null && $rc !== 0) bg-red-500/70
@elseif($progressPct >= 100) bg-emerald-500/80
@else bg-sky-500/80
@endif"
style="width:{{ $progressPct }}%"></div>
</div>
@if($state === 'running')
<p class="text-[11px] text-[var(--mw-t4)] mt-2">Bitte nicht unterbrechen — die Seite aktualisiert sich automatisch.</p>
@endif
</div>
</div>
@endif
{{-- ═══ Log Viewer ═══ --}}
<div class="mbx-section"
x-data="{
autoScroll: true,
init() {
this.$watch('$wire.logLines', () => {
if (this.autoScroll && this.$refs.logBox) {
this.$nextTick(() => {
this.$refs.logBox.scrollTop = this.$refs.logBox.scrollHeight;
});
}
});
}
}">
<div class="mbx-domain-head">
<div class="mbx-domain-info">
<span class="mbx-badge-mute">Update-Log</span>
<span class="text-[11px] text-[var(--mw-t5)] hidden sm:inline">/var/log/mailwolt-update.log</span>
</div>
<div class="flex items-center gap-2">
{{-- Auto-Scroll Toggle --}}
<label class="flex items-center gap-2 cursor-pointer select-none">
<span x-on:click="autoScroll=!autoScroll" class="relative inline-block w-7 h-4 shrink-0">
<span :style="autoScroll ? 'background:var(--mw-v);border-color:var(--mw-v)' : 'background:var(--mw-bg4);border-color:var(--mw-b2)'"
class="absolute inset-0 rounded-full border transition-all duration-200"></span>
<span :style="autoScroll ? 'left:14px' : 'left:2px'"
class="absolute top-0.5 w-2.5 h-2.5 rounded-full bg-white shadow-sm transition-all duration-200"></span>
</span>
<span class="text-[11.5px] text-[var(--mw-t4)]">Auto-Scroll</span>
</label>
<button wire:click="clearLog"
wire:loading.attr="disabled"
wire:target="clearLog"
class="mbx-btn-mute"
style="font-size:11px;padding:3px 10px">
<svg width="11" height="11" viewBox="0 0 14 14" fill="none"><path d="M2 4h10M5 4V2.5h4V4M11.5 4l-.5 8H3L2.5 4" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/></svg>
Log leeren
</button>
</div>
</div>
<div class="p-3">
<div x-ref="logBox"
class="rounded-lg border border-[var(--mw-b2)] bg-[var(--mw-bg3)] p-3 font-mono text-[11.5px] leading-relaxed overflow-y-auto"
style="max-height:420px;min-height:80px">
@if(count($logLines) === 0)
<span class="text-[var(--mw-t5)] italic">Keine Log-Einträge vorhanden.</span>
@else
@foreach($logLines as $line)@php
$color = 'var(--mw-t3)';
if (str_contains($line, '[!]') || str_contains($line, 'error') || str_contains($line, 'Error') || str_contains($line, 'fehlgeschlagen')) {
$color = '#f87171';
} elseif (str_contains($line, '[✓]') || str_contains($line, 'beendet') || str_contains($line, 'abgeschlossen')) {
$color = 'rgba(34,197,94,.85)';
} elseif (str_contains($line, '[i]')) {
$color = 'var(--mw-t3)';
} elseif (str_contains($line, '=====')) {
$color = 'rgba(14,165,233,.7)';
}
@endphp<span class="block" style="color:{{ $color }}">{{ $line }}</span>@endforeach
@endif
</div>
<div class="mt-2 flex items-center justify-between">
<span class="text-[11px] text-[var(--mw-t5)]">{{ count($logLines) }} Zeilen</span>
<span class="text-[11px] text-[var(--mw-t5)] sm:hidden">/var/log/mailwolt-update.log</span>
</div>
</div>
</div>
</div> </div>