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:
parent
3792fdec82
commit
1b87e15a21
3 changed files with 25 additions and 14 deletions
13
frontend/src/api/vehicles.ts
Normal file
13
frontend/src/api/vehicles.ts
Normal 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}`)
|
||||
}
|
||||
|
|
@ -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 }}) —
|
||||
{{ vehicle.color }}
|
||||
{{ vehicle.color }}, {{ vehicle.fuel }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="loading" class="vehicle-info__loading" role="status">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue