Updated routing for S3
This commit is contained in:
Frank
parent
a9c2ab27c2
commit
31fe28f8d2
6 changed files with 124 additions and 6460 deletions
6419
package-lock.json
generated
6419
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,4 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
|
<!-- Comment -->
|
||||||
|
|
||||||
<div class="container-lg">
|
<div class="container-lg">
|
||||||
<router-view />
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -12,4 +14,5 @@ export default {
|
||||||
components: {
|
components: {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,141 +0,0 @@
|
||||||
<template>
|
|
||||||
<router-link to="/Home">Home</router-link>
|
|
||||||
<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 '@/components/buttons/buttonFunnel.vue';
|
|
||||||
|
|
||||||
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,11 +0,0 @@
|
||||||
<template>
|
|
||||||
<router-link to="/select-car">select-car</router-link>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'SelectCar',
|
|
||||||
data() {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,11 +1,13 @@
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import { lazyLoadComponent } from "@/router/dyanmic-routing/component-loader.js";
|
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||||
|
|
||||||
export function getRouteData(relativeUrl) {
|
export function getRouteData(relativeUrl) {
|
||||||
return axios
|
return axios
|
||||||
.get("https://mockey.qa.sagaws.net/service/content/sitemap" + relativeUrl)
|
.post("/api/v1/content/RouteInfo", {
|
||||||
|
relativeUrl: relativeUrl
|
||||||
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
|
||||||
// This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
|
// This is really only for Mockey. In a real case, this would just be a 404 and we would check status code.
|
||||||
if (response.data.Result === undefined) {
|
if (response.data.Result === undefined) {
|
||||||
return Promise.reject("Could not find any details about given route.");
|
return Promise.reject("Could not find any details about given route.");
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@ const routes = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
history: createWebHistory(),
|
history: createWebHistory('/fmg/'),
|
||||||
routes,
|
routes,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue