Setting up routing and vuex
This commit is contained in:
Max
parent
b7abbeeaa5
commit
e67c64bb42
22 changed files with 1135 additions and 7110 deletions
7522
package-lock.json
generated
7522
package-lock.json
generated
File diff suppressed because it is too large
Load diff
13
package.json
13
package.json
|
|
@ -5,20 +5,19 @@
|
|||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --ci --watchAll=false"
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.4",
|
||||
"bootstrap": "^5.1.1",
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^3.0.0",
|
||||
"vue-router": "^4.0.11"
|
||||
"vue-router": "^4.0.11",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-unit-jest": "^4.5.13",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@vue/compiler-sfc": "^3.0.0",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
|
|
@ -26,16 +25,10 @@
|
|||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"jest-junit": "^12.3.0",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
},
|
||||
"jest-junit": {
|
||||
"suiteNameTemplate": "{filepath}",
|
||||
"outputDirectory": ".",
|
||||
"outputName": "junit.xml"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="Funnel1"></div>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
12
src/App.vue
12
src/App.vue
|
|
@ -1,22 +1,16 @@
|
|||
<template>
|
||||
<div class="container-lg">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<SelectCar/>
|
||||
</div>
|
||||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SelectCar from './components/SelectCar';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
SelectCar
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex justify-content-center">
|
||||
<vehicleImage/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="text-center text-secondary fs-5 mb-4">Select a year to get started</p>
|
||||
<p class="text-center fs-6 fw-bold">What year is your vehichle?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<buttonFunnel/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<div class="col">
|
||||
<buttonPrimary/>
|
||||
<buttonSecondary/>
|
||||
<textInput/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from './components/buttons/buttonPrimary';
|
||||
import buttonSecondary from './components/buttons/buttonSecondary';
|
||||
import buttonFunnel from './components/buttons/buttonFunnel';
|
||||
import textInput from './components/forms/textInput';
|
||||
import vehicleImage from './components/vehicleImage';
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
buttonPrimary,
|
||||
buttonSecondary,
|
||||
buttonFunnel,
|
||||
textInput,
|
||||
vehicleImage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -6,16 +6,9 @@
|
|||
height: 100%;
|
||||
|
||||
form {
|
||||
height: calc(100% - 80px);
|
||||
height: calc(100% - 230px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
|
||||
.form-control {
|
||||
border: 2px solid $light;
|
||||
background: $white;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.car_list, .current_car_info-text, .needed_car_info-text {
|
||||
|
|
@ -36,43 +29,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.select-car {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: $white;
|
||||
}
|
||||
#car-select-col {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 993px) {
|
||||
.select-car-button, .close_select-car {
|
||||
display: none !important;
|
||||
}
|
||||
#car-select-col {
|
||||
transform: translateY(0) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
.slide-fade-leave-active {
|
||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
||||
}
|
||||
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
.slide-fade-enter-from, .slide-fade-leave-to {
|
||||
transform: translateX(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<div class="my-4">
|
||||
<div class="row">
|
||||
<h4>Colors</h4>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-primary text-white">Primary #DA291C</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-secondary text-white">Secondary #525656</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-success text-white">Success #098649</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-danger text-white">Danger #AF2117</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-warning text-dark">Warning #F88F1C</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-info text-dark">Info #0DCAF0</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-light text-dark">Light #F4F4F4</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="p-3 mb-3 bg-dark text-white">Dark #525656</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Colors'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<template>
|
||||
<div class="container my-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<nav class="navbar navbar-expand-lg navbar-light p-0">
|
||||
<div class="container-fluid d-flex align-items-end px-0">
|
||||
<a href="#">
|
||||
<img class="logo" src="@/assets/img/logo.svg" alt="Safelite" aria-current="page">
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav d-flex align-items-lg-end ms-3">
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle px-0 px-lg-4 py-2 py-lg-0 link-secondary lh-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
Services
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||||
<li><a class="dropdown-item" href="#">Service 1</a></li>
|
||||
<li><a class="dropdown-item" href="#">Service 2</a></li>
|
||||
<li><a class="dropdown-item" href="#">Service 3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item lh-1">
|
||||
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">Locations</a>
|
||||
</li>
|
||||
<li class="nav-item lh-1">
|
||||
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">We're Hiring</a>
|
||||
</li>
|
||||
<li class="nav-item lh-1">
|
||||
<a class="nav-link px-0 px-lg-4 py-2 py-lg-0 link-secondary" href="#">My Appointment</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HeaderNav'
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<template>
|
||||
|
||||
<h2>{{ msg }}</h2>
|
||||
|
||||
<h4 class="mt-3">Grid</h4>
|
||||
|
||||
<div class="row mt-3">
|
||||
<div class="col">
|
||||
One
|
||||
</div>
|
||||
<div class="col">
|
||||
Two
|
||||
</div>
|
||||
<div class="col">
|
||||
Three
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h4 class="mt-3">Buttons</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-light">Light</button>
|
||||
<button type="button" class="btn btn-dark">Dark</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
<template>
|
||||
<div class="select-car sticky-lg-top py-4">
|
||||
<div class="select-car-form overflow-hidden p-3 rounded">
|
||||
<div class="car_info text-center">
|
||||
<div class="current_car_info">
|
||||
<transition name="slide-fade">
|
||||
<div class="current_car_info-text" v-if="translate === 0">
|
||||
<h3>Select a year to get started</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
|
||||
<h3>{{ this.year }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
|
||||
<h3>{{ this.year }} {{ this.brand }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
|
||||
<h3>{{ this.year }} {{ this.brand }} {{ this.model }}</h3>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="needed_car_info d-flex overflow-hidden">
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.brand }}?</h5>
|
||||
<h5 class="needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</h5>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="year in years" :key="year" class="mb-3">
|
||||
<input type="text" v-on:click="selectYear(year)" class="form-control" id="year" :value="year" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="brand in brands" :key="brand" class="mb-3">
|
||||
<input type="text" v-on:click="selectBrand(brand)" class="form-control" id="brand" :value="brand" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="model in models" :key="model" class="mb-3">
|
||||
<input type="text" v-on:click="selectModel(model)" class="form-control" id="model" :value="model" readonly >
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="style in styles" :key="style" class="mb-3">
|
||||
<input type="text" class="form-control" id="style" :value="style" readonly >
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
data() {
|
||||
return {
|
||||
years: [],
|
||||
brands: [],
|
||||
models: [],
|
||||
styles: [],
|
||||
translate: 0,
|
||||
carViewTranslate: 'translateX(0%)',
|
||||
year: '',
|
||||
brand: '',
|
||||
model: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
|
||||
this.years = response.data.Result;
|
||||
console.log(this.years);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
translateView(forward=true) {
|
||||
this.translate = forward ? this.translate - 100 : this.translate + 100;
|
||||
this.carViewTranslate = `translateX(${this.translate}%)`;
|
||||
},
|
||||
selectYear(year) {
|
||||
this.year = year;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`).then((response) => {
|
||||
this.brands = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
},
|
||||
selectBrand(brand) {
|
||||
this.brand = brand;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${brand}`).then((response) => {
|
||||
this.models = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
},
|
||||
selectModel(model) {
|
||||
this.model = model;
|
||||
axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.brand}/model=${model}`).then((response) => {
|
||||
this.styles = response.data.Result;
|
||||
});
|
||||
this.translateView();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<button type="button" class="btn btn-funnel border rounded w-100 text-start">2021</button>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
</template>
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<template>
|
||||
<img class="vehicle-image blur img-fluid" src="https://placekitten.com/600/300" />
|
||||
</template>
|
||||
6
src/layouts/ContentSite/Home.vue
Normal file
6
src/layouts/ContentSite/Home.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<h1>Home</h1>
|
||||
<router-link to="/select-car">SelectCar</router-link>
|
||||
</div>
|
||||
</template>
|
||||
140
src/layouts/SelectCar/SelectCar.vue
Normal file
140
src/layouts/SelectCar/SelectCar.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<div class="select-car sticky-lg-top py-4">
|
||||
<div class="select-car-form overflow-hidden p-3 rounded">
|
||||
<div class="car_info text-center">
|
||||
<div class="car-image mb-3">
|
||||
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
|
||||
</div>
|
||||
<div class="current_car_info mb-4">
|
||||
<transition name="slide-fade">
|
||||
<div class="current_car_info-text" v-if="translate === 0">
|
||||
<p class="text-center text-secondary fs-5">Select a year to get started</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="needed_car_info d-flex overflow-hidden">
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="year in years" :key="year" class="mb-2">
|
||||
<Button
|
||||
:buttonText="year"
|
||||
v-on:click="selectAttribute(year, 'year')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="make in makes" :key="make" class="mb-2">
|
||||
<Button
|
||||
:buttonText="make"
|
||||
v-on:click="selectAttribute(make, 'make')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="model in models" :key="model" class="mb-2">
|
||||
<Button
|
||||
:buttonText="model"
|
||||
v-on:click="selectAttribute(model, 'model')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="style in styles" :key="style" class="mb-2">
|
||||
<Button
|
||||
:buttonText="style"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Button from '../../sharedcomponents/Button';
|
||||
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
data() {
|
||||
return {
|
||||
years: [],
|
||||
makes: [],
|
||||
models: [],
|
||||
styles: [],
|
||||
translate: 0,
|
||||
carViewTranslate: 'translateX(0%)',
|
||||
year: '',
|
||||
make: '',
|
||||
model: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
|
||||
this.years = response.data.Result;
|
||||
console.log(this.years);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
translateView(forward=true) {
|
||||
this.translate = forward ? this.translate - 100 : this.translate + 100;
|
||||
this.carViewTranslate = `translateX(${this.translate}%)`;
|
||||
},
|
||||
selectAttribute(attribute, attributeType){
|
||||
let link;
|
||||
switch (attributeType) {
|
||||
case 'year':
|
||||
link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
|
||||
this.year = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.makes = response.data.Result;
|
||||
});
|
||||
break;
|
||||
case 'make':
|
||||
link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
|
||||
this.make = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.models = response.data.Result;
|
||||
});
|
||||
break;
|
||||
case 'model':
|
||||
link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
|
||||
this.model = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.styles = response.data.Result;
|
||||
});
|
||||
break;
|
||||
}
|
||||
this.translateView();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
140
src/layouts/SelectCar/SelectYear.vue
Normal file
140
src/layouts/SelectCar/SelectYear.vue
Normal file
|
|
@ -0,0 +1,140 @@
|
|||
<template>
|
||||
<div class="select-car sticky-lg-top py-4">
|
||||
<div class="select-car-form overflow-hidden p-3 rounded">
|
||||
<div class="car_info text-center">
|
||||
<div class="car-image mb-3">
|
||||
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
|
||||
</div>
|
||||
<div class="current_car_info mb-4">
|
||||
<transition name="slide-fade">
|
||||
<div class="current_car_info-text" v-if="translate === 0">
|
||||
<p class="text-center text-secondary fs-5">Select a year to get started</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
<transition name="slide-fade">
|
||||
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
|
||||
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<div class="needed_car_info d-flex overflow-hidden">
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
|
||||
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
|
||||
</div>
|
||||
</div>
|
||||
<form class="list-view d-flex ">
|
||||
<div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="year in years" :key="year" class="mb-2">
|
||||
<Button
|
||||
:buttonText="year"
|
||||
v-on:click="selectAttribute(year, 'year')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="make in makes" :key="make" class="mb-2">
|
||||
<Button
|
||||
:buttonText="make"
|
||||
v-on:click="selectAttribute(make, 'make')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="model in models" :key="model" class="mb-2">
|
||||
<Button
|
||||
:buttonText="model"
|
||||
v-on:click="selectAttribute(model, 'model')"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
|
||||
<div v-for="style in styles" :key="style" class="mb-2">
|
||||
<Button
|
||||
:buttonText="style"
|
||||
buttonType="btn-funnel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Button from '../../sharedcomponents/Button';
|
||||
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
data() {
|
||||
return {
|
||||
years: [],
|
||||
makes: [],
|
||||
models: [],
|
||||
styles: [],
|
||||
translate: 0,
|
||||
carViewTranslate: 'translateX(0%)',
|
||||
year: '',
|
||||
make: '',
|
||||
model: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
|
||||
this.years = response.data.Result;
|
||||
console.log(this.years);
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
translateView(forward=true) {
|
||||
this.translate = forward ? this.translate - 100 : this.translate + 100;
|
||||
this.carViewTranslate = `translateX(${this.translate}%)`;
|
||||
},
|
||||
selectAttribute(attribute, attributeType){
|
||||
let link;
|
||||
switch (attributeType) {
|
||||
case 'year':
|
||||
link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
|
||||
this.year = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.makes = response.data.Result;
|
||||
});
|
||||
break;
|
||||
case 'make':
|
||||
link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
|
||||
this.make = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.models = response.data.Result;
|
||||
});
|
||||
break;
|
||||
case 'model':
|
||||
link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
|
||||
this.model = attribute;
|
||||
axios.get(link).then((response) => {
|
||||
this.styles = response.data.Result;
|
||||
});
|
||||
break;
|
||||
}
|
||||
this.translateView();
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Button
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { createApp } from "vue";
|
||||
import Funnel1 from "./Funnel1.vue";
|
||||
import App from "./App.vue";
|
||||
import router from './router'
|
||||
|
||||
//Bootstrap JavaScript
|
||||
import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
||||
|
|
@ -7,4 +8,4 @@ import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
|||
//Get Bootstrap and Custom Styles
|
||||
import "./assets/scss/custom.scss";
|
||||
|
||||
createApp(Funnel1).mount("#Funnel1");
|
||||
createApp(App).use(router).mount("#app")
|
||||
23
src/router/index.js
Normal file
23
src/router/index.js
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import Home from "@/layouts/ContentSite/Home.vue";
|
||||
import SelectCar from "@/layouts/SelectCar/SelectCar.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
},
|
||||
{
|
||||
path: "/select-car",
|
||||
name: "SelectCar",
|
||||
component: SelectCar,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
18
src/sharedcomponents/Button.vue
Normal file
18
src/sharedcomponents/Button.vue
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
v-bind:class="this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType"
|
||||
>{{ this.buttonText }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'button',
|
||||
props: {
|
||||
buttonText: String,
|
||||
buttonType: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
0
src/store/index.js
Normal file
0
src/store/index.js
Normal file
Loading…
Reference in a new issue