feat(i18n): Többnyelvűség alapjainak beállítása és UI takarítás
This commit is contained in:
Roo
266
frontend/src/views/DashboardView.vue
Normal file
266
frontend/src/views/DashboardView.vue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<div class="relative min-h-screen text-white">
|
||||
<!-- Garage Background Image (no dark overlay — bright, light garage) -->
|
||||
<div class="fixed inset-0 z-0">
|
||||
<div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── Spatial UI Layer: Hotspots (always visible, even in Zen mode) ── -->
|
||||
<div class="fixed inset-0 z-[5] pointer-events-none">
|
||||
<div class="relative w-full h-full">
|
||||
<!-- Hotspot 1: Szervizkönyv/Naptár (bal fal) -->
|
||||
<div class="absolute top-[30%] left-[20%] pointer-events-auto group">
|
||||
<!-- Pulzáló hotspot kör -->
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<!-- Glassmorphism Bento Box (hover opens) -->
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#00E5A0]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Szerviznaptár</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Közelgő események</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Olajcsere</span>
|
||||
<span class="text-[#00E5A0]">2 hét</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Műszaki vizsga</span>
|
||||
<span class="text-[#00E5A0]">3 hónap</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Gumi szezonális</span>
|
||||
<span class="text-yellow-400">1 hónap</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot 2: Szerszámok/Beállítások (jobb fal) -->
|
||||
<div class="absolute top-[30%] right-[20%] pointer-events-auto group">
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#418890]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Felszerelés</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Alkatrészek és Skinek</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Alkatrész katalógus</span>
|
||||
<span class="text-[#418890]">42 tétel</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Skin csomagok</span>
|
||||
<span class="text-[#418890]">6 elérhető</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Beállítások</span>
|
||||
<span class="text-white/30">→</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hotspot 3: Diagnosztika (monitor) -->
|
||||
<div class="absolute top-[60%] right-[30%] pointer-events-auto group">
|
||||
<div class="relative flex items-center justify-center cursor-pointer">
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring"></div>
|
||||
<div class="absolute w-10 h-10 rounded-full bg-[#FF3366]/20 animate-hotspot-ring-delayed"></div>
|
||||
<div class="relative w-6 h-6 rounded-full bg-[#FF3366] shadow-[0_0_20px_#FF3366] animate-hotspot-pulse"></div>
|
||||
</div>
|
||||
<div class="absolute mt-4 w-64 opacity-0 pointer-events-none scale-95 transition-all duration-300 group-hover:opacity-100 group-hover:scale-100 group-hover:pointer-events-auto bg-[#04151F]/80 backdrop-blur-xl border border-white/20 rounded-xl p-4 shadow-2xl z-40">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<svg class="w-6 h-6 text-[#70BC84]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<h3 class="text-lg font-bold text-white">Élő Diagnosztika</h3>
|
||||
</div>
|
||||
<p class="text-sm text-white/60">Rendszerállapot</p>
|
||||
<div class="mt-3 space-y-2">
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Motor állapot</span>
|
||||
<span class="text-[#70BC84]">● Optimális</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40 border-b border-white/5 pb-1">
|
||||
<span>Akkumulátor</span>
|
||||
<span class="text-[#70BC84]">● 87%</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-xs text-white/40">
|
||||
<span>Hibakódok</span>
|
||||
<span class="text-white/30">0 találat</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Zen Mode FAB (always visible, above everything) ── -->
|
||||
<button
|
||||
@click="isUiVisible = !isUiVisible"
|
||||
class="fixed bottom-8 right-8 z-50 btn-premium rounded-full p-4 shadow-2xl shadow-black/40"
|
||||
:title="isUiVisible ? 'UI elrejtése (Zen mód)' : 'UI megjelenítése'"
|
||||
>
|
||||
<!-- Eye icon when visible, eye-off when hidden -->
|
||||
<svg
|
||||
v-if="isUiVisible"
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- ── Content (above the overlay) with fade transition ── -->
|
||||
<Transition name="fade">
|
||||
<div v-if="isUiVisible" class="relative z-10">
|
||||
<!-- ── Top Navbar ──────────────────────────────────────────────── -->
|
||||
<DashboardHeader
|
||||
:first-name="authStore.user?.first_name || 'Vendég'"
|
||||
subtitle="Irányítópultod és járműveid áttekintése"
|
||||
/>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<!-- ── Loading State ──────────────────────────────────────────── -->
|
||||
<div
|
||||
v-if="vehicleStore.isLoading"
|
||||
class="flex items-center justify-center py-20"
|
||||
>
|
||||
<div
|
||||
class="h-10 w-10 animate-spin rounded-full border-4 border-white/10 border-t-[#70BC84]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ── Garage Grid ────────────────────────────────────────────── -->
|
||||
<div
|
||||
v-if="!vehicleStore.isLoading"
|
||||
class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"
|
||||
>
|
||||
<div
|
||||
v-for="vehicle in vehicleStore.vehicles"
|
||||
:key="vehicle.id"
|
||||
class="group relative overflow-hidden rounded-2xl border border-white/[0.08] bg-white/[0.05] p-6 backdrop-blur-xl shadow-xl shadow-black/20 transition-all duration-300 hover:border-[#70BC84]/30 hover:bg-white/[0.08] hover:shadow-2xl hover:shadow-black/30"
|
||||
>
|
||||
<!-- ── License Plate (EU-style) ──────────────────────────── -->
|
||||
<div
|
||||
v-if="vehicle.license_plate"
|
||||
class="mb-4 inline-flex items-center overflow-hidden rounded-md border border-gray-600 shadow-sm"
|
||||
>
|
||||
<!-- Blue EU band -->
|
||||
<div class="flex h-9 w-9 items-center justify-center bg-[#003399] text-[10px] font-bold leading-tight text-white">
|
||||
<span class="block text-center leading-tight">SF</span>
|
||||
</div>
|
||||
<!-- White plate area -->
|
||||
<div class="flex h-9 items-center bg-white px-3">
|
||||
<span class="font-mono text-sm font-bold tracking-widest text-gray-900">
|
||||
{{ vehicle.license_plate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Brand + Model ─────────────────────────────────────── -->
|
||||
<h3 class="text-xl font-bold text-white">
|
||||
{{ vehicle.brand || 'Ismeretlen' }}
|
||||
<span v-if="vehicle.model" class="font-normal text-white/70">{{ vehicle.model }}</span>
|
||||
</h3>
|
||||
|
||||
<!-- Year of manufacture -->
|
||||
<p v-if="vehicle.year_of_manufacture" class="mt-0.5 text-sm text-white/40">
|
||||
{{ vehicle.year_of_manufacture }}
|
||||
</p>
|
||||
|
||||
<!-- ── Divider ────────────────────────────────────────────── -->
|
||||
<div class="my-4 border-t border-white/[0.06]" />
|
||||
|
||||
<!-- ── Condition Score Bar ────────────────────────────────── -->
|
||||
<div class="mb-3">
|
||||
<div class="mb-1 flex items-center justify-between text-xs">
|
||||
<span class="text-white/50">Állapot</span>
|
||||
<span class="font-semibold text-[#70BC84]">{{ vehicle.condition_score }}%</span>
|
||||
</div>
|
||||
<div class="h-2 overflow-hidden rounded-full bg-white/10">
|
||||
<div
|
||||
class="h-full rounded-full bg-gradient-to-r from-[#70BC84] to-[#008CA4] transition-all duration-500"
|
||||
:style="{ width: Math.min(vehicle.condition_score, 100) + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Mileage ────────────────────────────────────────────── -->
|
||||
<div class="flex items-center gap-2 text-sm text-white/60">
|
||||
<svg class="h-4 w-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 10V3L4 14h7v7l9-11h-7z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ vehicle.current_mileage?.toLocaleString() || 0 }} km</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Status Badge ───────────────────────────────────────── -->
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span
|
||||
class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="vehicle.status === 'active'
|
||||
? 'bg-[#70BC84]/15 text-[#70BC84]'
|
||||
: 'bg-white/5 text-white/40'"
|
||||
>
|
||||
<span
|
||||
class="mr-1.5 inline-block h-1.5 w-1.5 rounded-full"
|
||||
:class="vehicle.status === 'active' ? 'bg-[#70BC84]' : 'bg-white/20'"
|
||||
/>
|
||||
{{ vehicle.status === 'active' ? 'Aktív' : vehicle.status }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end relative z-10 content wrapper -->
|
||||
</Transition>
|
||||
</div><!-- end min-h-screen -->
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useVehicleStore } from '../stores/vehicle'
|
||||
import DashboardHeader from '../components/DashboardHeader.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const vehicleStore = useVehicleStore()
|
||||
|
||||
// ── Zen Mode: UI láthatóság állapota ─────────────────────────────────
|
||||
const isUiVisible = ref(true)
|
||||
|
||||
onMounted(() => {
|
||||
vehicleStore.fetchVehicles()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user