Redesign: Update-Modal mit CluBird-Icon, Progress-Bar und besserem Log-Bereich
parent
919c2013f9
commit
74600185ba
|
|
@ -1,53 +1,94 @@
|
|||
<div wire:poll.2s="refresh" class="p-4">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="shrink-0 w-10 h-10 rounded-full bg-emerald-500/15 border border-emerald-400/30
|
||||
flex items-center justify-center">
|
||||
<i class="ph ph-arrows-clockwise text-xl {{ $state==='done' ? '' : 'animate-spin' }}"></i>
|
||||
<div wire:poll.2s="refresh">
|
||||
|
||||
{{-- Header --}}
|
||||
<div class="flex items-center gap-3 p-5 border-b border-white/8">
|
||||
<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">
|
||||
<path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="19" cy="8" r="2" fill="white"/>
|
||||
</svg>
|
||||
@if($state !== 'done')
|
||||
<div class="absolute inset-0 rounded-xl border-2 border-indigo-400/50 animate-ping" style="animation-duration:1.8s"></div>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-white/90 font-semibold">
|
||||
{{ $state==='done'
|
||||
? ($rc===0 ? 'Update abgeschlossen' : 'Update fehlgeschlagen')
|
||||
: 'Update läuft …' }}
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-[13px] font-semibold" style="color:var(--mw-t1)">
|
||||
@if($state === 'done' && $rc === 0)
|
||||
Update abgeschlossen
|
||||
@elseif($state === 'done' && $rc !== 0)
|
||||
Update fehlgeschlagen
|
||||
@else
|
||||
Update wird durchgeführt …
|
||||
@endif
|
||||
</div>
|
||||
<div class="text-xs text-white/60">
|
||||
{{ $line ?? '–' }}
|
||||
<div class="text-[11px] mt-0.5 truncate" style="color:var(--mw-t4)">
|
||||
{{ $line ?: 'Bitte warten …' }}
|
||||
</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>
|
||||
<style>
|
||||
@keyframes mwprogress {
|
||||
0% { transform: translateX(-150%) }
|
||||
100% { transform: translateX(350%) }
|
||||
}
|
||||
</style>
|
||||
|
||||
{{-- Progress --}}
|
||||
<div class="mb-3">
|
||||
<div class="h-2 bg-white/10 rounded overflow-hidden">
|
||||
<div class="h-full bg-emerald-400 transition-all"
|
||||
style="width: {{ $percent }}%"></div>
|
||||
{{-- 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">
|
||||
@forelse($tail as $l)
|
||||
<div>{{ $l }}</div>
|
||||
@empty
|
||||
<div style="color:var(--mw-t5)">Warte auf Log-Ausgabe …</div>
|
||||
@endforelse
|
||||
</div>
|
||||
<div class="text-[11px] text-white/50 mt-1">{{ $percent }}%</div>
|
||||
</div>
|
||||
|
||||
{{-- Log Tail --}}
|
||||
<div class="rounded-lg bg-black/40 border border-white/10 p-2 max-h-64 overflow-auto text-[12px] font-mono text-white/80">
|
||||
@foreach($tail as $l)
|
||||
{{ $l }}
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
@if($state==='done' && $rc===0)
|
||||
<button wire:click="$dispatch('closeModal')" class="px-3 py-1 rounded-md
|
||||
bg-emerald-500/10 border border-emerald-400/30 text-emerald-200">
|
||||
Schließen
|
||||
</button>
|
||||
@elseif($state==='done' && $rc!==0)
|
||||
<button wire:click="$dispatch('closeModal')" class="px-3 py-1 rounded-md
|
||||
bg-rose-500/10 border border-rose-400/30 text-rose-200">
|
||||
{{-- Footer --}}
|
||||
<div class="flex justify-end px-4 pb-4">
|
||||
@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 class="px-3 py-1 rounded-md bg-white/10 border border-white/15 text-white/50 cursor-not-allowed" disabled>
|
||||
<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>
|
||||
Bitte warten …
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue