Adding radio buttons
This commit is contained in:
Max
parent
593c5470cb
commit
e30a4e94cd
17 changed files with 296 additions and 58 deletions
10
src/assets/img/icons/back-glass-damage.svg
Normal file
10
src/assets/img/icons/back-glass-damage.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.1" id="back-glass-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 33.1" xml:space="preserve">
|
||||
<style>
|
||||
.st0,.st2{fill:#fff;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2{fill:none}
|
||||
</style>
|
||||
<path class="st0" d="M5.3.4h17.5l3.8 1.1h27.5L62.2.4c7.6 0 10.1 6.2 10.1 13.8v4.7c0 7.7-2.5 13.8-10.1 13.8l-8.1-1.1H26.6l-3.8 1.1H5.3c-.8 0-1.5-.2-2.1-.7-.6-.5-1.1-1.1-1.3-1.9C1.2 27.7.4 23.5.4 17.4s.8-12 1.5-14.5c.2-.7.7-1.4 1.3-1.9C3.7.6 4.5.4 5.3.4z"/>
|
||||
<path class="st0" d="m55.9 3.4-5.7 2.5c-.8.3-1.3 1.6-1.1 2.8.6 5.3.6 10.6 0 15.8-.1 1.2.4 2.4 1.1 2.8l5.7 2.5c1 .4 1.9-.1 2.3-1.3 2.2-7.2 2.2-16.7 0-23.8-.3-1.2-1.3-1.8-2.3-1.3z"/>
|
||||
<path d="m6.8 5.4 4.4 2c.2.1.3.2.4.3.1.2.1.3.1.5-.4 2.8-.6 5.6-.6 8.4 0 2.8.2 5.6.6 8.4 0 .2 0 .3-.1.5-.1.1-.2.3-.3.3l-4.4 2.3c-.1.1-.2.1-.3.1-.1 0-.2 0-.3-.1-.1 0-.2-.1-.3-.2-.1-.1-.1-.2-.2-.3-.5-1.3-1.3-4.5-1.3-11.1S5.3 7 5.8 5.8c0-.1.1-.2.2-.3 0-.1.1-.1.2-.2.1 0 .2-.1.3-.1.1.1.2.1.3.2z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="st0" d="M10.8 3.2h7.5c.1 0 .1.1.1.1v.2c0 .1 0 .1-.1.2l-1.4 2c-.1.1-.2.2-.3.2 0 .1-.1.1-.2.1h-1.3c-.4 0-.8-.1-1.1-.2l-3.5-2.4c0-.1.1-.1.1-.2h.2zM50 3.9c.1 0 .1-.1.1-.2v-.2c0-.1-.1-.1-.1-.2-.1 0-.1-.1-.2-.1H36c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.4.5-1.1 1.5-1.5 2.1v.2c0 .1.1.2.1.2h11.5c.2 0 .3 0 .4-.1l4.1-2zM31.7 6c.1 0 .2 0 .3-.1.1-.1.2-.1.3-.2.4-.5 1.1-1.5 1.5-2.1v-.2l-.1-.1h-13c-.1 0-.2 0-.3.1-.1.1-.2.1-.3.2-.3.4-1.1 1.5-1.5 2.1v.2l.1.1h13zM10.8 29.9H19.1c.1 0 .1-.1.1-.1v-.2c0-.1 0-.1-.1-.2l-1.4-2c-.1-.1-.2-.2-.3-.2-.1-.1-.2-.1-.3-.1h-2c-.4 0-.8.1-1.1.2l-3.5 2.4c0 .1.1.1.1.2h.2zM50 29.2c.1 0 .1.1.1.2v.2c0 .1-.1.1-.1.2-.1.1-.1.1-.2.1H36c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h11.5c.2 0 .3 0 .4.1l4.1 1.9zM31.7 27.1c.1 0 .2 0 .3.1.1.1.2.1.3.2.4.5 1.1 1.5 1.5 2.1v.2l-.1.1H21.5c-.1 0-.2 0-.3-.1-.1-.1-.2-.1-.3-.2-.4-.5-1.1-1.5-1.5-2.1v-.2l.1-.1h12.2z"/>
|
||||
<path class="st2" d="M3.1 28.6h1c.1 0 .2.1.3.1.1.1.2.2.2.3l1.1 3.4M69.6 7.9c-1.9-1.1-3.5-2.7-4.6-4.7-.2-.4.6-2.2.6-2.2V.9M3.1 4.3h1c.1 0 .2-.1.3-.1.2-.2.3-.3.3-.4L5.8.4M69.6 25.1c-1.9 1.1-3.5 2.7-4.6 4.7-.2.4.6 2.2.6 2.2v.1"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
10
src/assets/img/icons/side-window-damage.svg
Normal file
10
src/assets/img/icons/side-window-damage.svg
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<svg version="1.1" id="side-window-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.8 24.8" xml:space="preserve">
|
||||
<style>
|
||||
.st1,.st2,.st3{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}.st2,.st3{fill:#fff}.st3{fill:#d92d27}
|
||||
</style>
|
||||
<path d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8" fill="#fff"/>
|
||||
<path class="st1" d="m66.2 19.8 5.4-.7s-1-1.6.5-2.3c0 0 3.9-8.5-17.1-8.8C55 8 41.2.9 38.5.7c0 0-9.5-.9-18.5-.1-.4 0-.8.1-1.2.3-1 .5-3.3 1.6-5.1 2.7-3.1 2-6.7 3-10.3 3l-.1 1.2s-3 .3-2.9 7c0 .4.1.9.3 1.3.2.4.5.7.8 1 1.1.9 3.1 2 6.4 2.8"/>
|
||||
<path class="st2" d="M13.7 24.5c3.2 0 5.8-2.6 5.8-5.8 0-3.2-2.6-5.8-5.8-5.8s-5.8 2.6-5.8 5.8c0 3.2 2.6 5.8 5.8 5.8zM54.7 18.6c0 1.2.3 2.3 1 3.2.6 1 1.5 1.7 2.6 2.1 1.1.4 2.2.6 3.4.3 1.1-.2 2.2-.8 3-1.6.8-.8 1.4-1.9 1.6-3 .2-1.1.1-2.3-.3-3.4s-1.2-2-2.1-2.6c-1-.6-2.1-1-3.2-1-.8 0-1.5.2-2.2.4-.7.3-1.3.7-1.9 1.3-.5.5-1 1.2-1.3 1.9-.5.9-.6 1.7-.6 2.4z"/>
|
||||
<path class="st1" d="M64.2 11.5s.3-.2 1.2-.3h.3c1.2.4 2.4 1 3.4 2-1.1-.1-2.2-.4-3.3-.8M31.7 10.3c-.4-.2-.4-.4-.4-.5 0-.5.6-.6 1.3-.6h.6c.4 0 .7.1 1.1.2.2 0 .7.2.7.6 0 .5-.6.5-1.3.5M18.1 9.2c-.6-.2-.5-.5-.5-.6 0-.5.6-.6 1.3-.6h.6c1.8.1 1.8.6 1.8.8 0 .5-.6.6-1.3.6M15.5 22c-.7.4-1.6.6-2.4.4-.8-.1-1.6-.5-2.2-1.1-.6-.6-1-1.4-1.1-2.2-.1-.8.1-1.7.5-2.4s1.1-1.3 1.9-1.6c.8-.3 1.7-.4 2.5-.1.8.2 1.5.7 2.1 1.4.5.7.8 1.5.8 2.3M58.6 15.2c.7-.4 1.6-.6 2.4-.4.8.1 1.6.5 2.2 1.1.6.6 1 1.4 1.1 2.2.1.8-.1 1.7-.5 2.4s-1.1 1.3-1.9 1.6c-.8.3-1.7.4-2.5.1-.8-.2-1.5-.7-2.1-1.4-.5-.7-.8-1.5-.8-2.3M54.7 19.8H19.5M3.3 7.8s11-.5 0 3.1"/>
|
||||
<path class="st3" d="m42.8 8-11.1-.7.1-5.2c4.3.1 8 1.2 10.9 2.3l.1 3.6zM50.6 8.4 44.3 8V5c2.2.9 3.9 1.6 5 2.3.5.5.9.9 1.3 1.1zM30.2 2.1l-.1 5.1-7.7-.4.1-4c2.6-.5 5.1-.7 7.7-.7zM16.6 6.5C17.3 5 19 3.9 21 3.3l-.1 3.5-4.3-.3z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
12
src/assets/img/icons/windshield-damage.svg
Normal file
12
src/assets/img/icons/windshield-damage.svg
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<svg version="1.1" id="windshield-damage" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 72.1 47.1" xml:space="preserve">
|
||||
<style>
|
||||
.st0{fill:#fff}.st1{fill:none;stroke:#000;stroke-width:.75;stroke-linecap:round;stroke-linejoin:round}
|
||||
</style>
|
||||
<path class="st0" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
|
||||
<path class="st1" d="M5.9 41.3c0 1.4.6 2.8 1.6 3.7 1 1 2.4 1.5 3.8 1.5s2.8-.6 3.8-1.5c1-1 1.6-2.3 1.6-3.7"/>
|
||||
<path class="st0" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
|
||||
<path class="st1" d="M55.1 41.3c0 1.4.6 2.8 1.6 3.8s2.4 1.6 3.8 1.6 2.8-.6 3.8-1.6 1.6-2.4 1.6-3.8"/>
|
||||
<path d="M36.1.4c12.4 0 18.2 1.4 18.2 1.4 5.5.9 8.7 11.1 8.7 11.1h1.1c0-3.7 2-3.7 3.6-3.1 1.1.5 2.1 1.2 2.9 2.1 2 2.4.7 2.6.7 2.6h-7.8l5.9 4.6v18.5c0 3.7-3.1 3.6-3.1 3.6H5.8s-3.1.2-3.1-3.6V19.2l5.9-4.6H.8s-1.3-.2.7-2.6c.8-.9 1.7-1.6 2.9-2.1C5.9 9.3 8 9.2 8 13h1.1s3.2-10.2 8.7-11.1c0-.1 5.9-1.5 18.3-1.5z" fill="#fff" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M36.1 12.8c12.2 0 22.5.8 22.5.8 0-4-3.7-9.3-3.7-9.3S48.9 3 36.1 3 17.2 4.3 17.2 4.3s-3.7 5.3-3.7 9.3c0 0 10.4-.8 22.6-.8z" fill="#d92d27" stroke="#000" stroke-width=".75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="st1" d="M25.7 24.6c6.8-.7 13.6-.7 20.4 0M51.1 24s3.7-3.5 13.2-3.5c0 0 1.8 4.1-3.9 5.2M20.6 24s-3.7-3.5-13.2-3.5c0 0-1.8 4 3.9 5.2M5.9 34.7s33 5.6 60 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -24,6 +24,8 @@ $grays: (
|
|||
$blue-200: #E7F1F6;
|
||||
$blue-300: #B9D7E6;
|
||||
$blue-400: #125B7E;
|
||||
$blue-600: #1574A1;
|
||||
$blue-700: #06577C;
|
||||
$blue: #167CAC;//Default Blue (Blue 500)
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
|
|
@ -92,3 +94,12 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberati
|
|||
// stylelint-enable value-keyword-case
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$font-family-code: $font-family-monospace;
|
||||
|
||||
//Gutters
|
||||
$grid-gutter-width: .75rem;
|
||||
|
||||
//Border Radius
|
||||
$border-radius: .25rem;
|
||||
$border-radius-sm: .2rem;
|
||||
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course.
|
||||
$border-radius-pill: 50rem;
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
body {
|
||||
background-color: $light;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
background-color: $white;
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
&.no-scroll_mobile {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
color: $blue-600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $blue-600;
|
||||
&:hover {
|
||||
color: $blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,3 +22,20 @@
|
|||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
|
@ -9,54 +9,39 @@
|
|||
:src="carImg"
|
||||
/>
|
||||
</div>
|
||||
<div class="current_car_info mb-4">
|
||||
<div class="current_car_info">
|
||||
<transition appear name="fade">
|
||||
<div class="current_car_info-text" v-on:click="backFunction ? backFunction() : null">
|
||||
<p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
|
||||
<span class="text-center text-secondary fs-5 d-block">{{ this.currentCarInfo }}</span>
|
||||
<span v-if="style" class="text-center text-secondary fs-6 mt-2">{{ style }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<transition appear :name="slideTransition">
|
||||
<div class="needed_car_info d-flex overflow-hidden">
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</p>
|
||||
<div class="needed_car_info d-flex overflow-hidden mt-4 mb-3">
|
||||
<span class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<transition appear :name="slideTransition">
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_models">
|
||||
<div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
|
||||
<Button
|
||||
:buttonText="attritbute"
|
||||
v-on:click="selectAttribute(attritbute)"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '@/sharedcomponents/Button';
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'BaseTemplate',
|
||||
computed: {
|
||||
...mapState(['slideTransition', 'carImg', 'blurImg'])
|
||||
...mapState(['slideTransition', 'carImg', 'blurImg', 'style'])
|
||||
},
|
||||
props: {
|
||||
currentCarInfo: String,
|
||||
neededCarInfo: String,
|
||||
attritbutes: Array,
|
||||
backFunction: Function,
|
||||
selectAttribute: Function
|
||||
},
|
||||
components: {
|
||||
Button
|
||||
backFunction: Function
|
||||
}
|
||||
}
|
||||
</script>
|
||||
104
src/layouts/CarFunnel/Damage/SelectDamage.vue
Normal file
104
src/layouts/CarFunnel/Damage/SelectDamage.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<div>
|
||||
<baseTemplate
|
||||
:currentCarInfo="year + ' ' + make + ' ' + model"
|
||||
neededCarInfo="What is your damage?"
|
||||
>
|
||||
<div class="damage-section text-center">
|
||||
<div class="choose-damage row">
|
||||
<div class="col">
|
||||
<imageButton
|
||||
btnImg="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
damageTitle="Windshield"
|
||||
ariaLabel="Windshield"
|
||||
v-on:click="chooseDamage('windshield')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<imageButton
|
||||
btnImg="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
damageTitle="Side door"
|
||||
ariaLabel="Side door"
|
||||
v-on:click="chooseDamage('side-window')"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<imageButton
|
||||
btnImg="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
damageTitle="Back glass"
|
||||
ariaLabel="Back glass"
|
||||
v-on:click="chooseDamage('side-glass')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div v-if="damage" class="how-bad mt-3">
|
||||
<span class="text-center fs-6 fw-bold">How bad is it?</span>
|
||||
<div class="choose-how-bad row mt-2">
|
||||
<div class="col">
|
||||
<imageButton
|
||||
btnImg="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
damageTitle="Windshield"
|
||||
ariaLabel="Windshield"
|
||||
/>
|
||||
</div>
|
||||
<div class="col">
|
||||
<imageButton
|
||||
btnImg="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
damageTitle="Side door"
|
||||
ariaLabel="Side door"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div class="next-action row">
|
||||
<div class="col">
|
||||
<div v-on:click="goBack" class="change">
|
||||
<span>Change Vehicle</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from '../BaseTemplate';
|
||||
import imageButton from '@/sharedcomponents/Buttons/ImageButton'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
computed: {
|
||||
...mapState(['year', 'make', 'model'])
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
damage: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseDamage(damage){
|
||||
this.damage = damage
|
||||
console.log(this.damage)
|
||||
},
|
||||
goBack(){
|
||||
this.$store.state.slideTransition = 'slide_reverse';
|
||||
this.$store.commit('removeStyle')
|
||||
this.$router.push(`/select-style?year=${this.$store.state.year}&make=${this.$store.state.make}`);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseTemplate,
|
||||
imageButton
|
||||
}
|
||||
}
|
||||
</script>
|
||||
28
src/layouts/CarFunnel/SelectCar/CarAttributes.vue
Normal file
28
src/layouts/CarFunnel/SelectCar/CarAttributes.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<form class="list-view d-flex">
|
||||
<div class="car_list">
|
||||
<div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
|
||||
<Button
|
||||
:buttonText="attritbute"
|
||||
v-on:click="selectAttribute(attritbute)"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Button from '@/sharedcomponents/Buttons/Button';
|
||||
|
||||
export default {
|
||||
name: 'CarAttributes',
|
||||
props: {
|
||||
attritbutes: Array,
|
||||
selectAttribute: Function
|
||||
},
|
||||
components: {
|
||||
Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,15 +3,19 @@
|
|||
<baseTemplate
|
||||
:currentCarInfo="year"
|
||||
neededCarInfo="What make is your vehicle?"
|
||||
:attritbutes="makes"
|
||||
:backFunction="goBack"
|
||||
:selectAttribute="selectMake"
|
||||
/>
|
||||
>
|
||||
<CarAttributes
|
||||
:attritbutes="makes"
|
||||
:selectAttribute="selectMake"
|
||||
/>
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from './BaseTemplate';
|
||||
import baseTemplate from '../BaseTemplate';
|
||||
import CarAttributes from './CarAttributes'
|
||||
import { mapState } from 'vuex';
|
||||
|
||||
export default {
|
||||
|
|
@ -29,7 +33,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
baseTemplate
|
||||
baseTemplate,
|
||||
CarAttributes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,15 +3,19 @@
|
|||
<baseTemplate
|
||||
:currentCarInfo="year + ' ' + make"
|
||||
:neededCarInfo="'What is the model of your ' + make + '?'"
|
||||
:attritbutes="models"
|
||||
:backFunction="goBack"
|
||||
:selectAttribute="selectModel"
|
||||
/>
|
||||
>
|
||||
<CarAttributes
|
||||
:attritbutes="models"
|
||||
:selectAttribute="selectModel"
|
||||
/>
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from './BaseTemplate';
|
||||
import baseTemplate from '../BaseTemplate';
|
||||
import CarAttributes from './CarAttributes'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
|
@ -29,7 +33,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
baseTemplate
|
||||
baseTemplate,
|
||||
CarAttributes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,14 +3,19 @@
|
|||
<baseTemplate
|
||||
:currentCarInfo="year + ' ' + make + ' ' + model"
|
||||
:neededCarInfo="'What style is your ' + model + '?'"
|
||||
:attritbutes="styles"
|
||||
:backFunction="goBack"
|
||||
/>
|
||||
>
|
||||
<CarAttributes
|
||||
:attritbutes="styles"
|
||||
:selectAttribute="selectStyle"
|
||||
/>
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from './BaseTemplate';
|
||||
import baseTemplate from '../BaseTemplate';
|
||||
import CarAttributes from './CarAttributes'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
|
|
@ -19,13 +24,17 @@ export default {
|
|||
...mapState(['year', 'make', 'model', 'styles'])
|
||||
},
|
||||
methods: {
|
||||
selectStyle(style){
|
||||
this.$store.dispatch('selectStyle', style);
|
||||
},
|
||||
goBack(){
|
||||
this.$store.state.slideTransition = 'slide_reverse';
|
||||
this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
baseTemplate
|
||||
baseTemplate,
|
||||
CarAttributes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -3,14 +3,18 @@
|
|||
<baseTemplate
|
||||
currentCarInfo="Select a year to get started"
|
||||
neededCarInfo="What year is your vehicle?"
|
||||
:attritbutes="years"
|
||||
:selectAttribute="selectYear"
|
||||
/>
|
||||
>
|
||||
<CarAttributes
|
||||
:attritbutes="years"
|
||||
:selectAttribute="selectYear"
|
||||
/>
|
||||
</baseTemplate>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import baseTemplate from './BaseTemplate';
|
||||
import baseTemplate from '../BaseTemplate';
|
||||
import CarAttributes from './CarAttributes'
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
|
|
@ -31,7 +35,8 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
baseTemplate
|
||||
baseTemplate,
|
||||
CarAttributes
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import Home from "@/layouts/ContentSite/Home.vue";
|
||||
import SelectYear from "@/layouts/SelectCar/SelectYear.vue";
|
||||
import SelectMake from "@/layouts/SelectCar/SelectMake.vue";
|
||||
import SelectModel from "@/layouts/SelectCar/SelectModel.vue";
|
||||
import SelectStyle from "@/layouts/SelectCar/SelectStyle.vue";
|
||||
import SelectYear from "@/layouts/CarFunnel/SelectCar/SelectYear.vue";
|
||||
import SelectMake from "@/layouts/CarFunnel/SelectCar/SelectMake.vue";
|
||||
import SelectModel from "@/layouts/CarFunnel/SelectCar/SelectModel.vue";
|
||||
import SelectStyle from "@/layouts/CarFunnel/SelectCar/SelectStyle.vue";
|
||||
import SelectDamage from "@/layouts/CarFunnel/Damage/SelectDamage.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
|
|
@ -31,6 +32,11 @@ const routes = [
|
|||
name: "SelectStyle",
|
||||
component: SelectStyle,
|
||||
},
|
||||
{
|
||||
path: "/damage",
|
||||
name: "SelectDamage",
|
||||
component: SelectDamage,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
13
src/sharedcomponents/Buttons/ImageButton.vue
Normal file
13
src/sharedcomponents/Buttons/ImageButton.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<button class="btn-damage d-flex flex-column align-items-center rounded-3 h-100" v-bind:aria-label="ariaLabel">
|
||||
<img class="px-1 pt-3 pb-1 mt-auto" v-bind:src="require(`@/assets/img/icons/${btnImg}`)" v-bind:alt="altText"/>
|
||||
<p class="mt-auto">{{damageTitle}}</p>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'imageButton',
|
||||
props: ['btnImg', 'altText', 'damageTitle', 'ariaLabel']
|
||||
}
|
||||
</script>
|
||||
|
|
@ -8,13 +8,14 @@ export default createStore({
|
|||
storage: window.sessionStorage,
|
||||
})],
|
||||
state: {
|
||||
makes: [],
|
||||
makes: [],
|
||||
models: [],
|
||||
styles: [],
|
||||
year: '',
|
||||
make: '',
|
||||
model: '',
|
||||
slideTransition: 'fade',
|
||||
style: '',
|
||||
slideTransition: 'none',
|
||||
carImg: "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg",
|
||||
blurImg: true
|
||||
},
|
||||
|
|
@ -27,12 +28,23 @@ export default createStore({
|
|||
updateMake(state, data){
|
||||
state.make = data.make;
|
||||
state.models = data.models.data.Result;
|
||||
state.slideTransition = 'slide'
|
||||
state.slideTransition = 'slide';
|
||||
},
|
||||
updateModel(state, data){
|
||||
state.model = data.model;
|
||||
state.styles = data.styles.data.Result;
|
||||
state.slideTransition = 'slide'
|
||||
state.slideTransition = 'slide';
|
||||
},
|
||||
updateStyle(state, data){
|
||||
state.style = data.style;
|
||||
state.carImg = "https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg";
|
||||
state.blurImg = false;
|
||||
state.slideTransition = 'slide';
|
||||
},
|
||||
removeStyle(state) {
|
||||
state.style = '';
|
||||
state.blurImg = true;
|
||||
state.carImg = 'https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg'
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
@ -50,6 +62,10 @@ export default createStore({
|
|||
const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
|
||||
commit('updateModel', {model, styles});
|
||||
router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
|
||||
},
|
||||
selectStyle({commit, state}, style){
|
||||
commit('updateStyle', {style});
|
||||
router.push(`/damage?year=${state.year}&make=${state.make}&model=${state.model}&style=${style}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue