feat: replace fake vehicle data with real API lookup on homepage

- Add typed API module api/vehicles.ts with lookupVehicle(plate) function
- Replace FAKE_VEHICLES record with async API call in HomePage.vue
- Remove setTimeout-based fake lookup, use lookupVehicle() instead
- Handle errors: show not-found for unknown plates, catch network failures
- Add fuel field to VehicleInfo interface and display (e.g. 'Gul, Bensin')
- VehicleInfo now shows make, model, year, color, and fuel from API
This commit is contained in:
Joakim Mörling 2026-05-19 15:16:23 +02:00
parent 3792fdec82
commit 1b87e15a21
3 changed files with 25 additions and 14 deletions

View file

@ -0,0 +1,13 @@
import { request } from './client'
export interface VehicleData {
make: string
model: string
year: number
color: string
fuel: string
}
export function lookupVehicle(plate: string): Promise<VehicleData> {
return request<VehicleData>(`/vehicles/${plate}`)
}

View file

@ -4,6 +4,7 @@ export interface VehicleInfo {
model: string
year: number
color: string
fuel: string
}
defineProps<{
@ -23,7 +24,7 @@ defineProps<{
>
<p class="vehicle-info__text">
{{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) &mdash;
{{ vehicle.color }}
{{ vehicle.color }}, {{ vehicle.fuel }}
</p>
</div>
<div v-else-if="loading" class="vehicle-info__loading" role="status">

View file

@ -4,34 +4,31 @@ import { RouterLink } from 'vue-router'
import PlateInput from '@/components/PlateInput.vue'
import VehicleInfo from '@/components/VehicleInfo.vue'
import type { VehicleInfo as VehicleData } from '@/components/VehicleInfo.vue'
const FAKE_VEHICLES: Record<string, VehicleData> = {
ABC123: { make: 'Volvo', model: 'V70', year: 2009, color: 'Silver' },
ABC12D: { make: 'Volkswagen', model: 'Golf', year: 2020, color: 'Blå' },
XYZ789: { make: 'Saab', model: '9-3', year: 2005, color: 'Röd' },
}
import { lookupVehicle } from '@/api/vehicles'
const plate = ref('')
const vehicle = ref<VehicleData | null>(null)
const notFound = ref(false)
const lookingUp = ref(false)
function handleLookup(lookedUpPlate: string) {
async function handleLookup(lookedUpPlate: string) {
lookingUp.value = true
notFound.value = false
vehicle.value = null
setTimeout(() => {
const found = FAKE_VEHICLES[lookedUpPlate]
if (found) {
vehicle.value = found
notFound.value = false
try {
const result = await lookupVehicle(lookedUpPlate)
vehicle.value = result
} catch (err: unknown) {
if (err instanceof Error && err.message.includes('Inget fordon')) {
notFound.value = true
} else {
vehicle.value = null
notFound.value = true
}
} finally {
lookingUp.value = false
}, 400)
}
}
</script>