70 lines
3.2 KiB
PHP
70 lines
3.2 KiB
PHP
<div wire:poll.2s="refresh" class="p-5">
|
|
|
|
{{-- Header --}}
|
|
<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">
|
|
<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 class="flex-1 min-w-0">
|
|
<div class="text-[13px] font-semibold text-white/90">
|
|
@if($state === 'done' && $rc === 0)
|
|
Update abgeschlossen
|
|
@elseif($state === 'done')
|
|
Update fehlgeschlagen
|
|
@else
|
|
Update wird durchgeführt …
|
|
@endif
|
|
</div>
|
|
<div class="text-[11px] mt-0.5 truncate text-white/50">
|
|
{{ $line ?: 'Warte auf Ausgabe …' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Progress Bar --}}
|
|
<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>
|
|
|
|
{{-- Log --}}
|
|
<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:rgba(255,255,255,.25)">Warte auf Log-Ausgabe …</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Footer --}}
|
|
<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' }}">
|
|
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 text-white/40 border-white/10">
|
|
Bitte warten …
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|