jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated routing for S3

Browse source
This commit is contained in:
Frank 2021-10-26 09:19:54 -04:00
parent a9c2ab27c2
commit 31fe28f8d2
6 changed files with 124 additions and 6460 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6419
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
src/App.vue
View file

@ -1,4 +1,6 @@
<template>
<!-- Comment -->
<div class="container-lg">
<router-view />
</div>
@ -12,4 +14,5 @@ export default {
components: {
}
}
</script>

141
src/layouts/SelectCar.vue
View file

@ -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>

11
src/layouts/SelectYear.vue
View file

@ -1,11 +0,0 @@
<template>
<router-link to="/select-car">select-car</router-link>
</template>
<script>
export default {
name: 'SelectCar',
data() {
}
}
</script>

8
src/router/dynamic-routing/route-compile.js
View file

@ -1,11 +1,13 @@
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) {
return axios
.get("https://mockey.qa.sagaws.net/service/content/sitemap" + relativeUrl)
.post("/api/v1/content/RouteInfo", {
relativeUrl: 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.");

2
src/router/index.js
View file

@ -17,7 +17,7 @@ const routes = [
];
const router = createRouter({
history: createWebHistory(),
history: createWebHistory('/fmg/'),
routes,
});