150 lines
8.7 KiB
PHP
150 lines
8.7 KiB
PHP
<div class="glass-card relative p-4 max-h-fit border border-white/10 bg-white/5 rounded-2xl" wire:poll.30s="refresh">
|
||
{{-- Kopf --}}
|
||
<div class="flex items-center justify-between -mb-3">
|
||
<div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
|
||
<i class="ph ph-hard-drives text-white/70 text-[13px]"></i>
|
||
<span class="text-[11px] tracking-wide uppercase text-white/70">Storage</span>
|
||
</div>
|
||
<button wire:click="refresh"
|
||
class="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-white/70 hover:text-white hover:border-white/20 transition">
|
||
Update <i class="ph ph-arrows-clockwise text-[12px]"></i>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Inhalt --}}
|
||
<div class="grid grid-cols-1 items-center gap-4">
|
||
{{-- Donut --}}
|
||
<div class="flex items-center justify-center mt-2">
|
||
<div class="relative" style="width: {{ $diskInnerSize + 80 }}px; height: {{ $diskInnerSize + 80 }}px;">
|
||
<div class="absolute inset-[36px] rounded-full bg-white/[0.04] backdrop-blur-sm ring-1 ring-white/10"></div>
|
||
|
||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||
<div class="text-2xl md:text-3xl font-semibold leading-none tracking-tight">
|
||
{{ $diskCenterText['percent'] }}
|
||
{{-- <small class="text-sm text-white/60 font-light ">/ {{ is_numeric($diskTotalGb) ? $diskTotalGb.' GB' : '–' }}</small>--}}
|
||
</div>
|
||
<div class="text-[10px] md:text-[11px] text-white/60 mt-1 uppercase tracking-wide">
|
||
{{ $diskCenterText['label'] }}
|
||
</div>
|
||
|
||
{{-- @if($measuredAt)--}}
|
||
<div class="#absolute bottom-14 mt-2 text-[10px] text-white/45 text-center inline-flex items-center gap-0.5 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">
|
||
<dd class="font-medium tabular-nums text-[10px] md:text-[11px]">Gesamt</dd>
|
||
<dd class="font-medium tabular-nums text-[10px] md:text-[11px]">{{ is_numeric($diskTotalGb) ? $diskTotalGb.' GB' : '–' }}</dd>
|
||
</div>
|
||
{{-- @endif--}}
|
||
</div>
|
||
|
||
@foreach($diskSegments as $seg)
|
||
<span class="absolute top-1/2 left-1/2 block"
|
||
style="transform: rotate({{ $seg['angle'] }}deg) translateX({{ $diskSegOuterRadius + 14 }}px);
|
||
width: 12px; height: 3px; margin:-3px 0 0 -6px;">
|
||
<span class="block w-full h-full rounded-full {{ $seg['class'] }}"></span>
|
||
</span>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Zahlen + Stacked Bar --}}
|
||
<div class="md:pl-2 space-y-4">
|
||
{{-- Stacked-Bar (horizontale Leiste) --}}
|
||
@if(!empty($barSegments))
|
||
<div class="space-y-2">
|
||
{{-- Legende --}}
|
||
<div class="flex flex-wrap gap-3 text-[12px] text-white/70">
|
||
@foreach($barSegments as $b)
|
||
<div class="inline-flex items-center gap-2">
|
||
<span class="inline-block w-2.5 h-2.5 rounded-full {{ $b['color'] }}"></span>
|
||
<span>{{ $b['label'] }} {{ $b['human'] }} ({{ $b['percent'] }}%)</span>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Zahlen unten rechts --}}
|
||
{{-- <dl class="space-y-2">--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Gesamt</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskTotalGb) ? $diskTotalGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Genutzt</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskUsedGb) ? $diskUsedGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Frei</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskFreeGb) ? $diskFreeGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- </dl>--}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{--<div class="glass-card relative p-4 max-h-fit border border-white/10 bg-white/5 rounded-2xl">--}}
|
||
{{-- --}}{{-- Kopf --}}
|
||
{{-- <div class="flex items-center justify-between -mb-3">--}}
|
||
{{-- <div class="inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-2.5 py-1">--}}
|
||
{{-- <i class="ph ph-hard-drives text-white/70 text-[13px]"></i>--}}
|
||
{{-- <span class="text-[11px] tracking-wide uppercase text-white/70">Storage</span>--}}
|
||
{{-- </div>--}}
|
||
{{-- <button wire:click="refresh"--}}
|
||
{{-- class="inline-flex items-center gap-1 rounded-full border border-white/10 bg-white/5 px-2 py-0.5 text-[10px] text-white/70 hover:text-white hover:border-white/20 transition">--}}
|
||
{{-- Update <i class="ph ph-arrows-clockwise text-[12px]"></i>--}}
|
||
{{-- </button>--}}
|
||
{{-- </div>--}}
|
||
|
||
{{-- --}}{{-- Inhalt --}}
|
||
{{-- <div class="grid grid-cols-1 items-center">--}}
|
||
{{-- --}}{{-- Donut --}}
|
||
{{-- <div class="flex items-center justify-center">--}}
|
||
{{-- <div class="relative" style="width: {{ $diskInnerSize + 80 }}px; height: {{ $diskInnerSize + 80 }}px;">--}}
|
||
{{-- --}}{{-- Innerer grauer Kreis --}}
|
||
{{-- <div class="absolute inset-[36px] rounded-full bg-white/[0.04] backdrop-blur-sm ring-1 ring-white/10"></div>--}}
|
||
|
||
{{-- --}}{{-- Prozentanzeige im Zentrum --}}
|
||
{{-- <div class="absolute inset-0 flex flex-col items-center justify-center">--}}
|
||
{{-- <div class="text-2xl md:text-3xl font-semibold leading-none tracking-tight">--}}
|
||
{{-- {{ $diskCenterText['percent'] }}--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="text-[10px] md:text-[11px] text-white/60 mt-1 uppercase tracking-wide">--}}
|
||
{{-- {{ $diskCenterText['label'] }}--}}
|
||
{{-- </div>--}}
|
||
{{-- @if($measuredAt)--}}
|
||
{{-- <div class="absolute bottom-12 mt-2 text-[10px] text-white/45 text-center">--}}
|
||
{{-- zuletzt aktualisiert: <br> {{ \Carbon\Carbon::parse($measuredAt)->diffForHumans() }}--}}
|
||
{{-- </div>--}}
|
||
{{-- @endif--}}
|
||
{{-- </div>--}}
|
||
|
||
{{-- --}}{{-- Segment-Ring --}}
|
||
{{-- @foreach($diskSegments as $seg)--}}
|
||
{{-- <span class="absolute top-1/2 left-1/2 block"--}}
|
||
{{-- style="--}}
|
||
{{-- transform: rotate({{ $seg['angle'] }}deg) translateX({{ $diskSegOuterRadius + 14 }}px);--}}
|
||
{{-- width: 12px; height: 6px; margin:-3px 0 0 -6px;">--}}
|
||
{{-- <span class="block w-full h-full rounded-full {{ $seg['class'] }}"></span>--}}
|
||
{{-- </span>--}}
|
||
{{-- @endforeach--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
|
||
{{-- --}}{{-- Zahlen --}}
|
||
{{-- <div class="md:pl-2">--}}
|
||
{{-- <dl class="space-y-2">--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Gesamt</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskTotalGb) ? $diskTotalGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Genutzt</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskUsedGb) ? $diskUsedGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- <div class="flex items-center justify-between">--}}
|
||
{{-- <dt class="text-white/60 text-sm">Frei</dt>--}}
|
||
{{-- <dd class="font-medium tabular-nums text-base">{{ is_numeric($diskFreeGb) ? $diskFreeGb.' GB' : '–' }}</dd>--}}
|
||
{{-- </div>--}}
|
||
{{-- </dl>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{--</div>--}}
|