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

Fix: Update-Modal ohne Alpine.js – verhindert leeres Modal bei laufendem Update

main v1.1.406
boban 2026-04-27 03:17:47 +02:00
parent 74600185ba
commit 32cf27bcd2
1 changed files with 22 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
resources/views/livewire/ui/system/modal/update-modal.blade.php
View File

@ -1,7 +1,7 @@
<div wire:poll.2s="refresh">
<div wire:poll.2s="refresh" class="p-5">
{{-- Header --}}
<div class="flex items-center gap-3 p-5 border-b border-white/8">
<div class="flex items-center gap-3 mb-4">
<div class="relative shrink-0 flex items-center justify-center w-10 h-10 rounded-xl"
style="background:linear-gradient(135deg,#6366f1,#4338ca);box-shadow:0 0 16px rgba(99,102,241,.35)">
<svg viewBox="0 0 28 28" width="18" height="18" fill="none">
@ -14,78 +14,53 @@
@endif
</div>
<div class="flex-1 min-w-0">
<div class="text-[13px] font-semibold" style="color:var(--mw-t1)">
<div class="text-[13px] font-semibold text-white/90">
@if($state === 'done' && $rc === 0)
Update abgeschlossen
@elseif($state === 'done' && $rc !== 0)
@elseif($state === 'done')
Update fehlgeschlagen
@else
Update wird durchgeführt …
@endif
</div>
<div class="text-[11px] mt-0.5 truncate" style="color:var(--mw-t4)">
{{ $line ?: 'Bitte warten …' }}
<div class="text-[11px] mt-0.5 truncate text-white/50">
{{ $line ?: 'Warte auf Ausgabe …' }}
</div>
</div>
@if($state === 'done')
<span class="shrink-0 inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5
{{ $rc === 0
? 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30'
: 'text-rose-200 bg-rose-500/10 border-rose-400/30' }}">
<i class="ph {{ $rc === 0 ? 'ph-check-circle' : 'ph-warning-circle' }} text-[11px]"></i>
{{ $rc === 0 ? 'Erfolgreich' : 'Fehler (rc='.$rc.')' }}
</span>
@else
<span class="shrink-0 inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5 text-sky-200 bg-sky-500/10 border-sky-400/30">
<i class="ph ph-arrows-clockwise text-[11px] animate-spin"></i>
{{ $percent }}%
</span>
@endif
</div>
{{-- Progress Bar --}}
<div class="h-0.5 w-full" style="background:var(--mw-b1)">
<div class="h-full transition-all duration-500
{{ $state === 'done' && $rc !== 0 ? 'bg-rose-400/70' : 'bg-indigo-400/70' }}
{{ $state !== 'done' ? 'animate-[mwprogress_1.4s_ease-in-out_infinite]' : '' }}"
style="{{ $state === 'done' ? 'width:100%' : 'width:40%' }}"></div>
<div class="h-1 rounded-full overflow-hidden mb-4 bg-white/10">
@if($state === 'done')
<div class="h-full rounded-full w-full {{ $rc === 0 ? 'bg-emerald-400/70' : 'bg-rose-400/70' }}"></div>
@else
<div class="h-full rounded-full bg-indigo-400/70 animate-[mwprogress_1.4s_ease-in-out_infinite]" style="width:40%"></div>
@endif
</div>
<style>
@keyframes mwprogress {
0% { transform: translateX(-150%) }
100% { transform: translateX(350%) }
}
</style>
<style>@keyframes mwprogress { 0% { transform:translateX(-150%) } 100% { transform:translateX(350%) } }</style>
{{-- Log --}}
<div class="p-4">
<div class="rounded-lg text-[11px] font-mono leading-relaxed overflow-auto max-h-60 p-3"
style="background:var(--mw-bg3);border:1px solid var(--mw-b1);color:var(--mw-t4)"
x-data x-init="$el.scrollTop = $el.scrollHeight" x-effect="$el.scrollTop = $el.scrollHeight">
<div class="rounded-lg text-[11px] font-mono leading-relaxed overflow-auto max-h-56 p-3 mb-4"
style="background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.55)">
@forelse($tail as $l)
<div>{{ $l }}</div>
@empty
<div style="color:var(--mw-t5)">Warte auf Log-Ausgabe …</div>
<div style="color:rgba(255,255,255,.25)">Warte auf Log-Ausgabe …</div>
@endforelse
</div>
</div>
{{-- Footer --}}
<div class="flex justify-end px-4 pb-4">
<div class="flex justify-end">
@if($state === 'done')
<button wire:click="$dispatch('closeModal')"
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-medium border transition-colors
{{ $rc === 0
? 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30 hover:bg-emerald-500/20'
: 'text-rose-200 bg-rose-500/10 border-rose-400/30 hover:bg-rose-500/20' }}">
<i class="ph {{ $rc === 0 ? 'ph-check' : 'ph-x' }} text-[12px]"></i>
Schließen
</button>
@else
<button disabled
class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] border opacity-40 cursor-not-allowed"
style="color:var(--mw-t4);border-color:var(--mw-b2)">
<i class="ph ph-hourglass text-[12px]"></i>
<button disabled class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] border opacity-40 cursor-not-allowed text-white/40 border-white/10">
Bitte warten …
</button>
@endif