183 lines
8.3 KiB
Vue
183 lines
8.3 KiB
Vue
<template>
|
|
<div
|
|
:id="'vehicle-card-' + vehicle.license_plate"
|
|
class="group relative min-w-[260px] w-[280px] snap-center flex-shrink-0 rounded-2xl border border-slate-200 bg-white shadow-sm transition-all duration-200 hover:shadow-lg hover:-translate-y-1 overflow-hidden cursor-pointer"
|
|
@click="$emit('click', vehicle)"
|
|
>
|
|
<!-- ── Image Area (Top 40%) ── -->
|
|
<div class="h-36 rounded-t-2xl bg-gradient-to-br from-slate-100 to-slate-200 flex items-center justify-center overflow-hidden relative">
|
|
<template v-if="vehicle.image_url || vehicle.image">
|
|
<img :src="vehicle.image_url || vehicle.image" :alt="vehicle.brand" class="h-full w-full object-cover" />
|
|
</template>
|
|
<template v-else>
|
|
<!-- Car SVG silhouette placeholder -->
|
|
<div class="flex flex-col items-center justify-center text-slate-300">
|
|
<svg
|
|
class="w-16 h-16"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.2"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M19 17h2a1 1 0 001-1v-3.172a1 1 0 00-.293-.707l-2.828-2.828A1 1 0 0018.172 9H17l-3-3H7a2 2 0 00-2 2v2M5 17H3a1 1 0 01-1-1v-3.172a1 1 0 01.293-.707l2.828-2.828A1 1 0 016.828 9H7l3-3h5"
|
|
/>
|
|
<circle cx="7" cy="17" r="2" />
|
|
<circle cx="17" cy="17" r="2" />
|
|
</svg>
|
|
<span class="text-xs text-slate-400 mt-1">{{ t('vehicle.noPhoto') }}</span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- ── Card Body (relative for watermark) ── -->
|
|
<div class="p-4 space-y-3 relative overflow-hidden">
|
|
<!-- Halvány vízjel (kisebb, nem lóg ki) -->
|
|
<div
|
|
class="absolute inset-0 pointer-events-none select-none flex items-center justify-center overflow-hidden"
|
|
>
|
|
<span
|
|
class="text-5xl font-black text-slate-900/5 w-full text-center truncate px-4 leading-none"
|
|
>
|
|
{{ vehicle.brand }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Nickname (if present) — fixed height to prevent layout shift -->
|
|
<div class="min-h-[24px] mb-2">
|
|
<p
|
|
v-if="vehicle.nickname"
|
|
class="text-sm italic text-slate-500"
|
|
>
|
|
„{{ vehicle.nickname }}”
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Dynamic EU License Plate Badge (brand inside plate box) -->
|
|
<VehiclePlateBadge
|
|
:license-plate="vehicle.license_plate"
|
|
:brand="vehicle.brand"
|
|
:country-code="vehicle.registration_country || vehicle.countryCode || vehicle.country_code"
|
|
size="md"
|
|
/>
|
|
|
|
<!-- Brand & Model -->
|
|
<h3 class="text-base font-bold text-slate-800 relative z-10">
|
|
{{ vehicle.brand }}
|
|
<span class="font-normal text-slate-500">{{ vehicle.model }}</span>
|
|
</h3>
|
|
|
|
<!-- Rich Data Rows (Icon + Text) -->
|
|
<div class="space-y-1.5 text-xs text-slate-500 relative z-10">
|
|
<!-- Year -->
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-3.5 w-3.5 shrink-0 text-slate-400" 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>
|
|
<span>{{ vehicle.year_of_manufacture || vehicle.year }}</span>
|
|
</div>
|
|
|
|
<!-- Mileage -->
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-3.5 w-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
|
|
</svg>
|
|
<span>{{ (vehicle.current_mileage ?? vehicle.mileage)?.toLocaleString() || '-' }} km</span>
|
|
</div>
|
|
|
|
<!-- Engine -->
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-3.5 w-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h-2m2 4h-2m-4-4h-2m2 4h-2m6-8h2a2 2 0 012 2v4a2 2 0 01-2 2h-2m-4 0H8a2 2 0 01-2-2V8a2 2 0 012-2h4m0 0V4m0 4v4" />
|
|
</svg>
|
|
<span>{{ vehicle.power_kw || vehicle.engine_capacity ? (vehicle.power_kw ? vehicle.power_kw + ' kW' : '') + (vehicle.engine_capacity ? ' / ' + vehicle.engine_capacity + ' cm³' : '') : vehicle.engine || vehicle.fuel_type || '—' }}</span>
|
|
</div>
|
|
|
|
<!-- Color -->
|
|
<div class="flex items-center gap-2">
|
|
<svg class="h-3.5 w-3.5 shrink-0 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
|
|
</svg>
|
|
<span>{{ vehicle.individual_equipment?.color || vehicle.color || t('common.na') }}</span>
|
|
</div>
|
|
|
|
<!-- Next Service (highlighted) -->
|
|
<div
|
|
class="flex items-center gap-2 pt-1"
|
|
:class="serviceDueClass"
|
|
>
|
|
<svg class="h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span class="font-semibold">{{ t('common.nextService') }}: {{ vehicle.nextService || t('common.noData') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Primary Vehicle Star (top-left overlay) -->
|
|
<button
|
|
class="absolute top-3 left-3 flex h-8 w-8 items-center justify-center rounded-full shadow-sm backdrop-blur-sm transition-all z-20"
|
|
:class="vehicle.is_primary
|
|
? 'bg-amber-400 text-white hover:bg-amber-500'
|
|
: 'bg-white/60 text-slate-300 opacity-0 group-hover:opacity-100 hover:text-amber-400 hover:bg-white/90'"
|
|
@click.stop="$emit('set-primary', vehicle)"
|
|
:title="vehicle.is_primary ? t('vehicle.primaryVehicle') : t('vehicle.setPrimary')"
|
|
>
|
|
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Primary Vehicle Badge Text (below star) -->
|
|
<div
|
|
v-if="vehicle.is_primary"
|
|
class="absolute top-11 left-3 z-20 rounded-full bg-amber-400/90 px-2 py-0.5 text-[10px] font-semibold text-white shadow-sm backdrop-blur-sm"
|
|
>
|
|
{{ t('vehicle.primaryVehicle') }}
|
|
</div>
|
|
|
|
<!-- Edit Button (top-right overlay) -->
|
|
<button
|
|
class="absolute top-3 right-3 flex h-8 w-8 items-center justify-center rounded-full bg-white/80 text-slate-400 opacity-0 shadow-sm backdrop-blur-sm transition-all hover:bg-sf-accent hover:text-white group-hover:opacity-100 z-20"
|
|
@click.stop="$emit('edit', vehicle)"
|
|
>
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import type { VehicleData } from '../../types/vehicle'
|
|
import VehiclePlateBadge from './VehiclePlateBadge.vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps<{
|
|
vehicle: VehicleData
|
|
}>()
|
|
|
|
defineEmits<{
|
|
click: [vehicle: VehicleData]
|
|
edit: [vehicle: VehicleData]
|
|
'set-primary': [vehicle: VehicleData]
|
|
}>()
|
|
|
|
const serviceDueClass = computed(() => {
|
|
if (!props.vehicle.nextService) return 'text-slate-500'
|
|
const match = props.vehicle.nextService.match(/([\d\s]+)/)
|
|
if (!match) return 'text-slate-500'
|
|
const kmStr = match[1].replace(/\s/g, '')
|
|
const km = parseInt(kmStr, 10)
|
|
if (isNaN(km)) return 'text-slate-500'
|
|
if (km > 10000) return 'text-green-600'
|
|
if (km > 3000) return 'text-orange-500'
|
|
return 'text-red-600'
|
|
})
|
|
</script>
|