Joakim Mörling
4c6094446b
Add AppHeader and AppFooter to give the site a consistent chrome around the core page content. Add ComposePage stub reachable via "Skicka ett brev till ägaren" CTA on HomePage after vehicle lookup succeeds. Add stub pages for about, contact, and privacy. - Create AppHeader.vue with logo link (BilHälsning) and Hem nav link - Create AppFooter.vue with 4 links: Om oss, Kontakt, Integritetspolicy, Villkor - Create ComposePage.vue stub that reads plate from route query params - Create AboutPage.vue and ContactPage.vue stub pages - Add 4 new routes: /compose, /om, /kontakt, /integritetspolicy - Update App.vue to render AppHeader + <main> + AppFooter around RouterView - Add home__cta RouterLink button to HomePage, visible only when vehicle lookup succeeds, linking to /compose?plate=<plate> - Remove BilHälsning h1 from HomePage (moved to header) - Add 17 new tests: AppHeader (2), AppFooter (1), ComposePage (3), AboutPage (1), ContactPage (1), HomePage rewrite (6), App update (2) - Update App.spec.ts to verify header/footer components render
89 lines
1.9 KiB
Vue
89 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
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' },
|
|
}
|
|
|
|
const plate = ref('')
|
|
const vehicle = ref<VehicleData | null>(null)
|
|
const notFound = ref(false)
|
|
const lookingUp = ref(false)
|
|
|
|
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
|
|
} else {
|
|
vehicle.value = null
|
|
notFound.value = true
|
|
}
|
|
lookingUp.value = false
|
|
}, 400)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home">
|
|
<p class="home__subtitle">Skicka ett brev till en fordonsägare</p>
|
|
|
|
<PlateInput v-model="plate" @lookup="handleLookup" />
|
|
|
|
<VehicleInfo
|
|
:vehicle="vehicle"
|
|
:loading="lookingUp"
|
|
:not-found="notFound"
|
|
:plate="plate"
|
|
/>
|
|
|
|
<RouterLink
|
|
v-if="vehicle"
|
|
:to="{ name: 'compose', query: { plate } }"
|
|
class="home__cta"
|
|
>
|
|
Skicka ett brev till ägaren
|
|
</RouterLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.home {
|
|
max-width: 28rem;
|
|
margin: 3rem auto 0;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
.home__subtitle {
|
|
color: #718096;
|
|
margin: 0 0 1.5rem 0;
|
|
}
|
|
|
|
.home__cta {
|
|
display: block;
|
|
margin-top: 1.5rem;
|
|
padding: 0.875rem 1.5rem;
|
|
background: #38a169;
|
|
color: #fff;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
border-radius: 0.5rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.home__cta:hover {
|
|
background: #2f855a;
|
|
}
|
|
</style>
|