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
|
model: string
|
||||||
year: number
|
year: number
|
||||||
color: string
|
color: string
|
||||||
|
fuel: string
|
||||||
}
|
}
|
||||||
|
|
||||||
defineProps<{
|
defineProps<{
|
||||||
|
|
@ -23,7 +24,7 @@ defineProps<{
|
||||||
>
|
>
|
||||||
<p class="vehicle-info__text">
|
<p class="vehicle-info__text">
|
||||||
{{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) —
|
{{ vehicle.make }} {{ vehicle.model }} ({{ vehicle.year }}) —
|
||||||
{{ vehicle.color }}
|
{{ vehicle.color }}, {{ vehicle.fuel }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div v-else-if="loading" class="vehicle-info__loading" role="status">
|
<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 PlateInput from '@/components/PlateInput.vue'
|
||||||
import VehicleInfo from '@/components/VehicleInfo.vue'
|
import VehicleInfo from '@/components/VehicleInfo.vue'
|
||||||
import type { VehicleInfo as VehicleData } from '@/components/VehicleInfo.vue'
|
import type { VehicleInfo as VehicleData } from '@/components/VehicleInfo.vue'
|
||||||
|
import { lookupVehicle } from '@/api/vehicles'
|
||||||
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' },
|
|
||||||
}
|
|
||||||
|
|
||||||
const plate = ref('')
|
const plate = ref('')
|
||||||
const vehicle = ref<VehicleData | null>(null)
|
const vehicle = ref<VehicleData | null>(null)
|
||||||
const notFound = ref(false)
|
const notFound = ref(false)
|
||||||
const lookingUp = ref(false)
|
const lookingUp = ref(false)
|
||||||
|
|
||||||
function handleLookup(lookedUpPlate: string) {
|
async function handleLookup(lookedUpPlate: string) {
|
||||||
lookingUp.value = true
|
lookingUp.value = true
|
||||||
notFound.value = false
|
notFound.value = false
|
||||||
vehicle.value = null
|
vehicle.value = null
|
||||||
|
|
||||||
setTimeout(() => {
|
try {
|
||||||
const found = FAKE_VEHICLES[lookedUpPlate]
|
const result = await lookupVehicle(lookedUpPlate)
|
||||||
if (found) {
|
vehicle.value = result
|
||||||
vehicle.value = found
|
} catch (err: unknown) {
|
||||||
notFound.value = false
|
if (err instanceof Error && err.message.includes('Inget fordon')) {
|
||||||
|
notFound.value = true
|
||||||
} else {
|
} else {
|
||||||
vehicle.value = null
|
vehicle.value = null
|
||||||
notFound.value = true
|
notFound.value = true
|
||||||
}
|
}
|
||||||
|
} finally {
|
||||||
lookingUp.value = false
|
lookingUp.value = false
|
||||||
}, 400)
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue