GL Expressions, zwijany panel WorkDesk i styl Toner (Stadia Maps)
Filip Borkowski, Backend/Frontend/Fullstack Engineer
Tryb GL Expressions
Panel Mapa otrzymał nowy przycisk Expressions w toolbarze. Po jego włączeniu standardowe markery HTML są zastępowane natywnymi warstwami MapLibre GL — co oznacza znacznie lepszą wydajność przy dużej liczbie pojazdów oraz dostęp do pełnej mocy wyrażeń GL.
Kolorowanie pojazdów prędkością
Każdy pojazd jest kolorowany dynamicznie na podstawie aktualnej prędkości GPS za pomocą wyrażenia case:
- Szary — pojazd nieaktywny (silnik wyłączony)
- Zielony — silnik włączony, pojazd stoi
- Żółty — prędkość powyżej 20 km/h
- Pomarańczowy — powyżej 50 km/h
- Czerwony — powyżej 80 km/h
Kolory aktualizują się automatycznie przy każdym odświeżeniu danych GPS (co 60 sekund).
Pulsujące okręgi
Pojazdy z włączonym silnikiem otacza animowany pierścień pulsujący w rytmie sinusoidy. Animacja działa przez requestAnimationFrame i setPaintProperty — bez przeładowania warstwy, płynnie w 60 FPS.
Heatmapa aktywności
Przycisk Heatmapa nakłada warstwę cieplną widoczną przy małym zbliżeniu (do zoom 10). Intensywność ciepła jest ważona prędkością pojazdu — pojazdy jadące szybciej generują „cieplejsze" obszary. Heatmapa przydaje się do analizy natężenia ruchu floty na poziomie krajowym.
Etykiety GL
W trybie Expressions etykiety z numerem rejestracyjnym i nazwiskiem kierowcy są renderowane jako natywna warstwa symbol MapLibre, widoczna od zoomu 8+. Silnik renderujący automatycznie unika nakładania się etykiet.
Filtry dynamiczne
Toolbar udostępnia pięć przycisków filtrowania:
- Wszystkie — brak filtra
- Jadące — pojazdy z prędkością > 0
- Stojące — silnik włączony, prędkość = 0
- Silnik — wszystkie pojazdy z włączonym silnikiem
- >60 km/h — tylko pojazdy przekraczające 60 km/h
Filtry działają przez setFilter() na warstwach GL bez ponownego pobierania danych.
WorkDesk — zwijany lewy panel
Panel z listami Kierowców, Pojazdów i Naczep można teraz zwinąć do wąskiego paska (32px) przyciskiem ‹. W trybie zwiniętym widoczne są pionowe etykiety sekcji — kliknięcie dowolnej z nich lub przycisku › rozwija panel z powrotem. Funkcja pozwala maksymalnie powiększyć widok mapy i canvasu ReactFlow.
WorkDesk — dropdown stylu mapy
Siedem stylów mapy (Domyślna, Jasna, Drogi, Ciemna, Satelita, Toner, Toner Lite) zostało zgrupowanych w jeden przycisk „Styl mapy ▾" z menu rozwijanym. Aktualnie aktywny styl jest wyświetlany bezpośrednio na przycisku, co eliminuje przeładowany pasek przycisków.
Styl Toner przez Stadia Maps
Style Toner i Toner Lite są teraz serwowane przez Stadia Maps (stamen_toner / stamen_toner_lite), które przejęły hosting map Stamen po archiwizacji oryginalnych repozytoriów. Klucz API dodany do zmiennych środowiskowych projektu.
Czas pracy — synchronizacja przyrostowa z GBOX
Dane historyczne (minione dni) są teraz pobierane wyłącznie z Supabase — bez zbędnych wywołań GBOX API. Dane z bieżącego dnia synchronizują się przyrostowo: aplikacja odczytuje najpierw to, co jest już w bazie, a następnie pobiera z GBOX tylko nowe wpisy od ostatniego zapisanego timestampu. Zmniejsza to liczbę żądań do GBOX i eliminuje błąd 400 Bad Request spowodowany przekroczeniem limitu X-Limit: 10 000.
Pracownicy — naprawa kolorowych pasków w tabeli
Wewnętrzny Card tabeli pracowników otrzymał klasy py-0 gap-0, które nadpisują domyślne odstępy shadcn (py-6 gap-6). Różowy pasek widoczny u góry i dołu tabeli zniknął.
Park maszyn — nagłówek "Lista pojazdów"
Usunięto szare tło (bg-neutral-100 dark:bg-neutral-800) z nagłówka sekcji Lista pojazdów — nagłówek wygląda teraz spójnie z resztą interfejsu.
WorkDesk — tryb mapy z panelem Zleceń
Po kliknięciu Pokaż mapę lewy panel (Kierowcy/Pojazdy/Naczepy) automatycznie się zwija, a panel Zleceń rozszerza się zajmując całą prawą kolumnę — ReactFlow jest w tym trybie ukryty. Kliknięcie dowolnego zlecenia na liście otwiera kartę szczegółów ze wszystkimi danymi: kontrahent, adresy, numery kontenerów, porty, nabrzeża, booking, tracking ID i daty stuffingu. Zamknięcie następuje ponownym kliknięciem lub przyciskiem ✕.