186 lines
10 KiB
PHP
186 lines
10 KiB
PHP
{{--@php--}}
|
||
{{-- $hasUpdate = $latest && $current && version_compare($latest, $current, '>');--}}
|
||
{{--@endphp--}}
|
||
|
||
{{--<div class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit">--}}
|
||
{{-- <div class="flex items-start gap-2">--}}
|
||
{{-- --}}{{-- Shield-Bot --}}
|
||
{{-- <div class="relative shrink-0">--}}
|
||
{{-- <div class="shrink-0 relative">--}}
|
||
|
||
{{-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">--}}
|
||
{{-- <defs>--}}
|
||
{{-- <linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">--}}
|
||
{{-- <stop offset="0" stop-color="#4ade80"></stop>--}}
|
||
{{-- <stop offset="1" stop-color="#15803d"></stop>--}}
|
||
{{-- </linearGradient>--}}
|
||
{{-- <radialGradient id="shine" cx="30%" cy="20%" r="70%">--}}
|
||
{{-- <stop offset="0%" stop-color="rgba(255,255,255,0.4)"></stop>--}}
|
||
{{-- <stop offset="100%" stop-color="rgba(255,255,255,0)"></stop>--}}
|
||
{{-- </radialGradient>--}}
|
||
{{-- <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">--}}
|
||
{{-- <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"></feDropShadow>--}}
|
||
{{-- </filter>--}}
|
||
{{-- </defs>--}}
|
||
{{-- <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z" fill="url(#shieldGradient)" filter="url(#glow)"></path>--}}
|
||
{{-- <path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z" fill="url(#shine)"></path>--}}
|
||
{{-- <i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $state === 'running' ? 'animate-spin' : '' }}"></i>--}}
|
||
{{-- </svg>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
|
||
{{-- <div class="min-w-0 flex-1">--}}
|
||
{{-- <div class="flex items-center justify-between gap-3">--}}
|
||
{{-- <div class="min-w-0">--}}
|
||
{{-- <div class="text-white/90 font-semibold">MailWolt Update</div>--}}
|
||
{{-- --}}{{-- kleine Statuszeile mit Versionen, wenn vorhanden --}}
|
||
{{-- <div class="text-xs text-white/70">--}}
|
||
{{-- @if($current)--}}
|
||
{{-- aktuell: <span class="text-white/90">{{ $current }}</span>--}}
|
||
{{-- @else--}}
|
||
{{-- aktuell: <span class="text-white/60">–</span>--}}
|
||
{{-- @endif--}}
|
||
{{-- @if($latest)--}}
|
||
{{-- <span class="mx-1 text-white/30">•</span>--}}
|
||
{{-- verfügbar: <span class="text-emerald-200">{{ $latest }}</span>--}}
|
||
{{-- @endif--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div>--}}
|
||
{{-- --}}{{-- Badge rechts --}}
|
||
{{-- <span class="shrink-0 inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[11px] border px-3 py-1--}}
|
||
{{-- {{ $hasUpdate--}}
|
||
{{-- ? 'text-yellow-200 bg-yellow-500/10 border-yellow-400/30'--}}
|
||
{{-- : 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30' }}">--}}
|
||
{{-- <i class="ph {{ $hasUpdate ? 'ph-arrow-fat-line-up' : 'ph-check-circle' }} text-[12px]"></i>--}}
|
||
{{-- {{ $hasUpdate ? 'Update verfügbar' : 'Aktuell' }}--}}
|
||
{{-- </span>--}}
|
||
{{-- <button wire:click="refreshState"--}}
|
||
{{-- @disabled($state==='running')--}}
|
||
{{-- class="inline-flex items-center gap-2 rounded p-1.5--}}
|
||
{{-- text-white/75 bg-white/5 border border-white/10 hover:border-white/20--}}
|
||
{{-- disabled:opacity-60">--}}
|
||
{{-- <i class="ph ph-arrow-clockwise text-[11px]"></i>--}}
|
||
{{-- </button>--}}
|
||
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="mt-4 flex items-center gap-2">--}}
|
||
{{-- @if($hasUpdate)--}}
|
||
{{-- <button wire:click="runUpdate"--}}
|
||
{{-- @disabled($state==='running')--}}
|
||
{{-- class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5--}}
|
||
{{-- text-emerald-200 bg-emerald-500/10 border border-emerald-400/30--}}
|
||
{{-- hover:bg-emerald-500/15 hover:border-emerald-300/50--}}
|
||
{{-- disabled:opacity-60">--}}
|
||
{{-- <i class="ph ph-arrow-fat-lines-up text-[14px]"></i> Jetzt aktualisieren--}}
|
||
{{-- </button>--}}
|
||
{{-- @endif--}}
|
||
{{-- </div>--}}
|
||
|
||
{{-- --}}{{-- Progress-Bar, wenn running --}}
|
||
{{-- @if($state === 'running')--}}
|
||
{{-- <div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden">--}}
|
||
{{-- <div class="h-full bg-emerald-400/70 animate-[progress_1.4s_infinite]" style="width:40%"></div>--}}
|
||
{{-- </div>--}}
|
||
{{-- <style>@keyframes progress {--}}
|
||
{{-- 0% {--}}
|
||
{{-- transform: translateX(-100%)--}}
|
||
{{-- }--}}
|
||
{{-- 100% {--}}
|
||
{{-- transform: translateX(260%)--}}
|
||
{{-- }--}}
|
||
{{-- }</style>--}}
|
||
{{-- @endif--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{--</div>--}}
|
||
<div
|
||
class="glass-card rounded-2xl p-4 border border-white/10 bg-white/5 max-h-fit"
|
||
@if($state === 'running') wire:poll.1200ms="tick" @endif
|
||
>
|
||
<div class="flex items-start gap-2">
|
||
{{-- Shield + Update-Icon --}}
|
||
<div class="relative shrink-0">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||
<defs>
|
||
<linearGradient id="shieldGradient" x1="0" y1="0" x2="0" y2="1">
|
||
<stop offset="0" stop-color="#4ade80"/>
|
||
<stop offset="1" stop-color="#15803d"/>
|
||
</linearGradient>
|
||
<radialGradient id="shine" cx="30%" cy="20%" r="70%">
|
||
<stop offset="0%" stop-color="rgba(255,255,255,0.35)"/>
|
||
<stop offset="100%" stop-color="rgba(255,255,255,0)"/>
|
||
</radialGradient>
|
||
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
|
||
<feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.6"/>
|
||
</filter>
|
||
</defs>
|
||
|
||
<!-- Schild -->
|
||
<path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
|
||
fill="url(#shieldGradient)" filter="url(#glow)"/>
|
||
<path d="M32 6l20 8v12c0 13.5-8.7 22.7-20 27-11.3-4.3-20-13.5-20-27V14l20-8z"
|
||
fill="url(#shine)"/>
|
||
<i class="ph-bold ph-arrows-clockwise absolute top-1/2 left-1/2 -translate-1/2 text-2xl {{ $this->hasUpdate && $state === 'running' ? 'animate-spin' : '' }}"></i>
|
||
</svg>
|
||
</div>
|
||
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex items-start justify-between gap-3">
|
||
<div class="min-w-0">
|
||
<div class="text-white/90 font-semibold">{{ config('app.name') }} Update</div>
|
||
|
||
<div class="text-xs text-white/70">
|
||
@if($current)
|
||
aktuell: <span class="text-white/90">{{ $current }}</span>
|
||
@else
|
||
aktuell: <span class="text-white/60">–</span>
|
||
@endif
|
||
|
||
@if($latest)
|
||
<span class="mx-1 text-white/30">•</span>
|
||
verfügbar: <span class="text-emerald-200">{{ $latest }}</span>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Badge rechts --}}
|
||
<span class="shrink-0 inline-flex items-center gap-1.5 rounded-full text-[11px] border px-3 py-1
|
||
{{ $this->hasUpdate
|
||
? 'text-yellow-200 bg-yellow-500/10 border-yellow-400/30'
|
||
: 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30' }}">
|
||
<i class="ph {{ $this->hasUpdate ? 'ph-arrow-fat-line-up' : 'ph-check-circle' }} text-[12px]"></i>
|
||
{{ $this->hasUpdate ? 'Update verfügbar' : 'Aktuell' }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="mt-4 flex items-center gap-2">
|
||
@if($this->hasUpdate)
|
||
<button wire:click="runUpdate"
|
||
@disabled($state==='running')
|
||
class="inline-flex items-center gap-2 rounded-lg px-3 py-1.5
|
||
text-emerald-200 bg-emerald-500/10 border border-emerald-400/30
|
||
hover:bg-emerald-500/15 hover:border-emerald-300/50
|
||
disabled:opacity-60">
|
||
<i class="ph ph-arrow-fat-lines-up text-[14px]"></i> Jetzt aktualisieren
|
||
</button>
|
||
@endif
|
||
</div>
|
||
|
||
{{-- Fortschritt nur während running --}}
|
||
@if($state === 'running')
|
||
<div class="mt-3 h-1.5 rounded bg-white/10 overflow-hidden">
|
||
<div class="h-full bg-emerald-400/70 animate-[mwprogress_1.4s_infinite]" style="width:40%"></div>
|
||
</div>
|
||
<style>
|
||
@keyframes mwprogress {
|
||
0% { transform: translateX(-100%) }
|
||
100% { transform: translateX(260%) }
|
||
}
|
||
</style>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|