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": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"serve": "vue-cli-service serve",
|
||||||
"build": "vue-cli-service build",
|
"build": "vue-cli-service build",
|
||||||
"lint": "vue-cli-service lint",
|
"lint": "vue-cli-service lint"
|
||||||
"test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --ci --watchAll=false"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.21.4",
|
"axios": "^0.21.4",
|
||||||
"bootstrap": "^5.1.1",
|
"bootstrap": "^5.1.1",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.11"
|
"vue-router": "^4.0.11",
|
||||||
|
"vuex": "^4.0.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
"@vue/cli-plugin-eslint": "~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/cli-service": "~4.5.0",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
|
|
@ -26,16 +25,10 @@
|
||||||
"eslint": "^6.7.2",
|
"eslint": "^6.7.2",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"eslint-plugin-prettier": "^3.3.1",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^7.0.0",
|
||||||
"jest-junit": "^12.3.0",
|
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.2.1",
|
||||||
"sass": "^1.26.5",
|
"sass": "^1.26.5",
|
||||||
"sass-loader": "^8.0.2"
|
"sass-loader": "^8.0.2"
|
||||||
},
|
},
|
||||||
"jest-junit": {
|
|
||||||
"suiteNameTemplate": "{filepath}",
|
|
||||||
"outputDirectory": ".",
|
|
||||||
"outputName": "junit.xml"
|
|
||||||
},
|
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"root": true,
|
"root": true,
|
||||||
"env": {
|
"env": {
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="Funnel1"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
12
src/App.vue
12
src/App.vue
|
|
@ -1,22 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container-lg">
|
<div class="container-lg">
|
||||||
<div class="row">
|
<router-view />
|
||||||
<div class="col">
|
|
||||||
<SelectCar/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SelectCar from './components/SelectCar';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {
|
||||||
SelectCar
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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%;
|
height: 100%;
|
||||||
|
|
||||||
form {
|
form {
|
||||||
height: calc(100% - 80px);
|
height: calc(100% - 230px);
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
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 {
|
.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 {
|
.slide-fade-enter-active {
|
||||||
transition: all .3s ease-out;
|
transition: all .3s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-leave-active {
|
.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-enter-from, .slide-fade-leave-to {
|
||||||
.slide-fade-leave-to {
|
transform: translateX(20px);
|
||||||
transform: translateX(20px);
|
opacity: 0;
|
||||||
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 { createApp } from "vue";
|
||||||
import Funnel1 from "./Funnel1.vue";
|
import App from "./App.vue";
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
//Bootstrap JavaScript
|
//Bootstrap JavaScript
|
||||||
import "../node_modules/bootstrap/dist/js/bootstrap.js";
|
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
|
//Get Bootstrap and Custom Styles
|
||||||
import "./assets/scss/custom.scss";
|
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