Merge pull request #14 from Safelite/feature/dynamic-routing
Initial Dynamic Routing
This commit is contained in:
Frank Rua
GitHub
commit
6fdb6cb558
11 changed files with 1112 additions and 552 deletions
1340
package-lock.json
generated
1340
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -9,6 +9,7 @@
|
|||
"test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --coverageReporters=html --ci --watchAll=false --reporters=jest-junit --reporters=default"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.23.0",
|
||||
"bootstrap": "^5.1.1",
|
||||
"canvas-confetti": "^1.4.0",
|
||||
"core-js": "^3.6.5",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex justify-content-center">
|
||||
|
|
@ -18,24 +19,9 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row mt-5">
|
||||
<imageButton
|
||||
btnText="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
damageTitle="Windshield"
|
||||
ariaLabel="Windshield"
|
||||
/>
|
||||
<imageButton
|
||||
btnText="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
damageTitle="Side door"
|
||||
ariaLabel="Side door"
|
||||
/>
|
||||
<imageButton
|
||||
btnText="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
damageTitle="Back glass"
|
||||
ariaLabel="Back glass"
|
||||
/>
|
||||
<imageButton btnText="windshield-damage.svg" altText="Windshield" damageTitle="Windshield" ariaLabel="Windshield" />
|
||||
<imageButton btnText="side-window-damage.svg" altText="Side Window" damageTitle="Side door" ariaLabel="Side door" />
|
||||
<imageButton btnText="back-glass-damage.svg" altText="Back Glass" damageTitle="Back glass" ariaLabel="Back glass" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -45,8 +31,6 @@
|
|||
import vehicleImage from './components/vehicleImage';
|
||||
import imageButton from './components/imageButton';
|
||||
import confetti from './components/confetti';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
|
|
|
|||
6
src/layouts/Home.vue
Normal file
6
src/layouts/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>
|
||||
6
src/layouts/NotFound.vue
Normal file
6
src/layouts/NotFound.vue
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<p> Not found </p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
141
src/layouts/SelectCar.vue
Normal file
141
src/layouts/SelectCar.vue
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
<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>
|
||||
11
src/layouts/SelectYear.vue
Normal file
11
src/layouts/SelectYear.vue
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<template>
|
||||
<router-link to="/select-car">select-car</router-link>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'SelectCar',
|
||||
data() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { createApp } from "vue";
|
||||
import Funnel1 from "./Funnel1.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(Funnel1).use(router).mount("#Funnel1");
|
||||
54
src/router/index.js
Normal file
54
src/router/index.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import { getRouteData } from "@/utilities/route-compile.js";
|
||||
import NotFound from "@/layouts/NotFound.vue";
|
||||
import Home from "@/layouts/Home.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/not-found",
|
||||
name: "NotFound",
|
||||
component: NotFound,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
Name: "Home",
|
||||
component: Home
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
await GoToDynamicRoute(to, next);
|
||||
});
|
||||
|
||||
async function GoToDynamicRoute(to, next) {
|
||||
|
||||
let doesRouteResolve = router.resolve(to.path).matched.length > 0;
|
||||
|
||||
console.log("Does route resolve?" + " " + (doesRouteResolve ? "Yes" : "No"));
|
||||
|
||||
if (!doesRouteResolve) {
|
||||
|
||||
let routeData = await getRouteData(to.path).catch((exp) => {
|
||||
console.log(exp);
|
||||
next({ name: "NotFound" });
|
||||
});
|
||||
|
||||
// Add our dynamic route.
|
||||
router.addRoute({
|
||||
path: routeData[0].path,
|
||||
name: routeData[0].name,
|
||||
component: routeData[0].component,
|
||||
});
|
||||
|
||||
next(to.fullPath);
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
|
||||
export default router;
|
||||
3
src/utilities/component-loader.js
Normal file
3
src/utilities/component-loader.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function lazyLoadComponent(componentName) {
|
||||
return () => import(`@/layouts/${componentName}.vue`)
|
||||
}
|
||||
29
src/utilities/route-compile.js
Normal file
29
src/utilities/route-compile.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import axios from "axios";
|
||||
import { lazyLoadComponent } from "@/utilities/component-loader.js";
|
||||
|
||||
export function getRouteData(relativeUrl) {
|
||||
return axios
|
||||
.get("https://mockey.qa.sagaws.net/service/content/sitemap" + relativeUrl)
|
||||
.then((response) => {
|
||||
// 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) {
|
||||
return Promise.reject("Could not find any details about given route.");
|
||||
}
|
||||
|
||||
// Get our route data
|
||||
let json = JSON.parse(response.data.Result);
|
||||
let routeData = [];
|
||||
|
||||
// Push the item onto the array
|
||||
Object.keys(json).forEach((key) => {
|
||||
routeData.push({
|
||||
path: `${json[key].RelativeUrl}`,
|
||||
name: `${key}`,
|
||||
component: lazyLoadComponent(json[key].LayoutName),
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
return Promise.resolve(routeData);
|
||||
});
|
||||
}
|
||||
Loading…
Reference in a new issue