45 lines
3.6 KiB
PHP
45 lines
3.6 KiB
PHP
<x-app-layout :active="'dashboard'" title="SoftSPM 2 - Mapa Obiektów">
|
|
<div class="space-y-stack-gap">
|
|
<div>
|
|
<h1 class="font-headline-lg text-headline-lg text-on-surface">Mapa Obiektów</h1>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">
|
|
Zalogowano jako <span class="font-data-label">{{ auth()->user()?->USR_USERNAME }}</span>
|
|
· Oddział: <span class="font-data-label">{{ session('department') ?? '-' }}</span>
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Mapa: studnie naniesione wg lokalnych współrzędnych geodezyjnych (siatka kopalniana). --}}
|
|
<div class="relative rounded-xl overflow-hidden min-h-[74vh] shadow-card border border-outline-variant/30 bg-surface-container">
|
|
{{-- Podkład - zdjęcie wg motywu (przyciemnione, dla efektu) --}}
|
|
<img src="{{ asset('images/dashboard_01.png') }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-50 dark:hidden">
|
|
<img src="{{ asset('images/dashboard_02.png') }}" alt="" class="absolute inset-0 w-full h-full object-cover opacity-60 hidden dark:block">
|
|
<div class="absolute inset-0 bg-on-surface/20 dark:bg-black/45"></div>
|
|
{{-- Subtelna siatka (czyta się jak plan/mapa) --}}
|
|
<div class="absolute inset-0 opacity-[0.18]"
|
|
style="background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px); background-size: 48px 48px;"></div>
|
|
|
|
{{-- Kropki studni --}}
|
|
@forelse ($points as $p)
|
|
<a href="{{ route('well-operation.show', $p->drs_id) }}"
|
|
aria-label="Studnia {{ $p->name }} - {{ $p->on ? 'pompa pracuje' : 'pompa nie pracuje' }}"
|
|
style="left: {{ $p->left }}%; top: {{ $p->top }}%"
|
|
class="group absolute z-20 -translate-x-1/2 -translate-y-1/2">
|
|
<span class="block w-3 h-3 rounded-full ring-2 ring-white/80 shadow-md transition-transform group-hover:scale-150 {{ $p->on ? 'bg-green-500' : 'bg-red-500' }}"></span>
|
|
<span class="pointer-events-none absolute left-1/2 bottom-full mb-1.5 -translate-x-1/2 px-2 py-0.5 rounded bg-on-surface text-inverse-on-surface font-data-label text-[11px] whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity z-40">{{ $p->name }}</span>
|
|
</a>
|
|
@empty
|
|
<div class="absolute inset-0 grid place-items-center z-20">
|
|
<p class="font-body-md text-body-md text-white/90 bg-on-surface/50 px-4 py-2 rounded-lg">Brak studni z poprawnymi współrzędnymi dla tego oddziału.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Legenda pod mapą --}}
|
|
<div class="flex flex-wrap items-center gap-x-6 gap-y-2 px-card-inner-padding py-3 bg-surface-container-lowest border border-outline-variant/40 rounded-lg shadow-card font-body-sm text-body-sm">
|
|
<span class="font-title-sm text-title-sm text-on-surface">Studnie w eksploatacji: <span class="font-data-label">{{ $points->count() }}</span></span>
|
|
<span class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-green-500 ring-2 ring-white/70"></span> Pompa pracuje <span class="font-data-label text-on-surface-variant">({{ $onCount }})</span></span>
|
|
<span class="flex items-center gap-2"><span class="w-3 h-3 rounded-full bg-red-500 ring-2 ring-white/70"></span> Pompa nie pracuje <span class="font-data-label text-on-surface-variant">({{ $offCount }})</span></span>
|
|
</div>
|
|
</div>
|
|
</x-app-layout>
|