Merge branch 'develop' into features/funnel-transitions
This commit is contained in:
Max
commit
e42b5820b8
25 changed files with 570 additions and 377 deletions
27
README.md
27
README.md
|
|
@ -1,19 +1,16 @@
|
|||
# fmg-funnel-2021
|
||||
### Fix My Glass Vue Project
|
||||
---
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
This Repository is for Fix My Glass front end Vue and documentation associated with it.
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
#### Routing
|
||||
We are using [Vue Router](https://next.router.vuejs.org/) 4.x for our front end routing. We are using a runtime dynamic routing solution. Some more information about dynamic routing can be found on the [official Vue Router documentation](https://next.router.vuejs.org/guide/advanced/dynamic-routing.html).
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
Here is a high level overview of how our routing works:
|
||||
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
`RetainStructureAndGoTo404(to, next)` - Since our 404 path on our router is `path: '/:pathMatch(.*)*'` (meaning that we don't have a dedicated 404 route) we retain the information entered by the user in the url bar and just serve back our `NotFound` component on Vue. For example if a user was to type in `.../fmg/fmgPage=junkPage` Vue will retain this url in the browser and return our `NotFound` component. This could be especially useful for analytics and reporting.
|
||||
|
||||
`Next()` - Is a function that is native to Vue Router in which we call in order to send the user where want them to go based on some logic we have[. You can read more about Navigation Guards and the `Next()` function on the Vue Router documentation. ](https://next.router.vuejs.org/guide/advanced/navigation-guards.html)
|
||||
|
||||
`GetRouteInfoFromPageName(PageName)` - This method typically takes the query string value of `fmgPage` and passes it into a call to our Content Service. The service will pull information on the page; matching page name passed to page name in our Cms. If we have a match, we will compile the route information and send it to our router to process. If we do not have a that page in our Cms, the user will be served back a 404 page while retaining the structure.
|
||||
|
|
@ -26,7 +26,7 @@ resources:
|
|||
type: github
|
||||
name: Safelite/AzureDevOps
|
||||
endpoint: Safelite
|
||||
ref: DigitalConsumer #refs/tags/t5.3.4
|
||||
ref: refs/tags/t5.4.0
|
||||
|
||||
variables:
|
||||
- group: Digital-Infrastructure
|
||||
|
|
@ -69,8 +69,11 @@ stages:
|
|||
parameters:
|
||||
artifactName: vueDist
|
||||
awsProfile: $(devDeploymentProfile)
|
||||
outputPath: /fmg/
|
||||
deployBuckets:
|
||||
safelite-dev-fmg-us-east-1:
|
||||
clearFolder: true
|
||||
deployFolder: ''
|
||||
region: us-east-1
|
||||
appDeployVariables:
|
||||
__VUE_APP_CONSUMER_API_GATEWAY__: $(__VUE_APP_CONSUMER_API_GATEWAY__)
|
||||
201
package-lock.json
generated
201
package-lock.json
generated
|
|
@ -444,7 +444,9 @@
|
|||
"version": "7.15.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
|
||||
"integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
|
||||
"bin": "./bin/babel-parser.js",
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
}
|
||||
|
|
@ -2773,13 +2775,15 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/cli-service/node_modules/chalk": {
|
||||
|
|
@ -2787,7 +2791,6 @@
|
|||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/chalk?sponsor=1",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
|
|
@ -2795,6 +2798,9 @@
|
|||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/cli-service/node_modules/color-convert": {
|
||||
|
|
@ -3055,7 +3061,7 @@
|
|||
"dev": true,
|
||||
"optional": true,
|
||||
"bin": {
|
||||
"prettier": "./bin-prettier.js"
|
||||
"prettier": "bin-prettier.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
|
|
@ -3504,12 +3510,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
|
||||
"integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"type-fest": "^0.21.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-escapes/node_modules/type-fest": {
|
||||
|
|
@ -3517,9 +3525,11 @@
|
|||
"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz",
|
||||
"integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-html": {
|
||||
|
|
@ -3531,7 +3541,7 @@
|
|||
"node >= 0.8.0"
|
||||
],
|
||||
"bin": {
|
||||
"ansi-html": "./bin/ansi-html"
|
||||
"ansi-html": "bin/ansi-html"
|
||||
}
|
||||
},
|
||||
"node_modules/ansi-regex": {
|
||||
|
|
@ -4256,7 +4266,7 @@
|
|||
"integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"babylon": "./bin/babylon.js"
|
||||
"babylon": "bin/babylon.js"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
|
|
@ -4886,9 +4896,11 @@
|
|||
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
|
||||
"integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-api": {
|
||||
|
|
@ -5241,12 +5253,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/cli-highlight/node_modules/chalk": {
|
||||
|
|
@ -5254,13 +5268,15 @@
|
|||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/chalk?sponsor=1",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/cli-highlight/node_modules/color-convert": {
|
||||
|
|
@ -5307,9 +5323,11 @@
|
|||
"resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.6.0.tgz",
|
||||
"integrity": "sha512-t+4/y50K/+4xcCRosKkA7W4gTr1MySvLV0q+PxmG7FJ5g+66ChKurYjxBCjHggHH3HA5Hh9cy+lcUGWDqVH+4Q==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/cli-width": {
|
||||
|
|
@ -5921,7 +5939,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/copy-webpack-plugin/node_modules/slash": {
|
||||
|
|
@ -6052,7 +6070,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/crypto-browserify": {
|
||||
|
|
@ -6556,12 +6574,14 @@
|
|||
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
|
||||
"integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"pump": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/default-gateway/node_modules/is-stream": {
|
||||
|
|
@ -6569,9 +6589,11 @@
|
|||
"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
|
||||
"integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/default-gateway/node_modules/mimic-fn": {
|
||||
|
|
@ -6600,12 +6622,14 @@
|
|||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
|
||||
"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"mimic-fn": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/default-gateway/node_modules/p-finally": {
|
||||
|
|
@ -6656,7 +6680,7 @@
|
|||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"node-which": "./bin/node-which"
|
||||
"node-which": "bin/node-which"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
|
|
@ -6877,11 +6901,13 @@
|
|||
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
|
||||
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/cheeriojs/dom-serializer?sponsor=1",
|
||||
"dependencies": {
|
||||
"domelementtype": "^2.0.1",
|
||||
"domhandler": "^4.2.0",
|
||||
"entities": "^2.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/domain-browser": {
|
||||
|
|
@ -7045,7 +7071,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/editorconfig/node_modules/yallist": {
|
||||
|
|
@ -7162,7 +7188,9 @@
|
|||
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
|
||||
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/fb55/entities?sponsor=1"
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/errno": {
|
||||
"version": "0.1.8",
|
||||
|
|
@ -7304,7 +7332,6 @@
|
|||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz",
|
||||
"integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==",
|
||||
"dev": true,
|
||||
"funding": "https://opencollective.com/eslint",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"ajv": "^6.10.0",
|
||||
|
|
@ -7345,10 +7372,13 @@
|
|||
"v8-compile-cache": "^2.0.3"
|
||||
},
|
||||
"bin": {
|
||||
"eslint": "./bin/eslint.js"
|
||||
"eslint": "bin/eslint.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^8.10.0 || ^10.13.0 || >=11.10.1"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/eslint"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-config-prettier": {
|
||||
|
|
@ -7428,12 +7458,14 @@
|
|||
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
|
||||
"integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/mysticatea",
|
||||
"dependencies": {
|
||||
"eslint-visitor-keys": "^1.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mysticatea"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint-scope": {
|
||||
|
|
@ -7500,12 +7532,14 @@
|
|||
"resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
|
||||
"integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"type-fest": "^0.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/import-fresh": {
|
||||
|
|
@ -7513,13 +7547,15 @@
|
|||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
|
||||
"integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"parent-module": "^1.0.0",
|
||||
"resolve-from": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/eslint/node_modules/resolve-from": {
|
||||
|
|
@ -7560,8 +7596,8 @@
|
|||
"integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"esparse": "./bin/esparse.js",
|
||||
"esvalidate": "./bin/esvalidate.js"
|
||||
"esparse": "bin/esparse.js",
|
||||
"esvalidate": "bin/esvalidate.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
|
|
@ -8119,12 +8155,14 @@
|
|||
"resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz",
|
||||
"integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"escape-string-regexp": "^1.0.5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/file-entry-cache": {
|
||||
|
|
@ -8275,7 +8313,6 @@
|
|||
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
|
||||
"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/avajs/find-cache-dir?sponsor=1",
|
||||
"dependencies": {
|
||||
"commondir": "^1.0.1",
|
||||
"make-dir": "^3.0.2",
|
||||
|
|
@ -8283,6 +8320,9 @@
|
|||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/find-up": {
|
||||
|
|
@ -8321,7 +8361,7 @@
|
|||
"glob": "^7.1.3"
|
||||
},
|
||||
"bin": {
|
||||
"rimraf": "./bin.js"
|
||||
"rimraf": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/flatted": {
|
||||
|
|
@ -9006,7 +9046,7 @@
|
|||
"uglify-js": "3.4.x"
|
||||
},
|
||||
"bin": {
|
||||
"html-minifier": "./cli.js"
|
||||
"html-minifier": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
|
|
@ -9515,12 +9555,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/inquirer/node_modules/chalk": {
|
||||
|
|
@ -9528,13 +9570,15 @@
|
|||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/chalk?sponsor=1",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/inquirer/node_modules/cli-cursor": {
|
||||
|
|
@ -9599,12 +9643,14 @@
|
|||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
|
||||
"integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"mimic-fn": "^2.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/inquirer/node_modules/restore-cursor": {
|
||||
|
|
@ -9925,12 +9971,14 @@
|
|||
"resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
|
||||
"integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"bin": {
|
||||
"is-docker": "cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-extendable": {
|
||||
|
|
@ -10082,9 +10130,11 @@
|
|||
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
|
||||
"integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/is-plain-object": {
|
||||
|
|
@ -10283,7 +10333,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-lib-report/node_modules/supports-color": {
|
||||
|
|
@ -10333,7 +10383,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-lib-source-maps/node_modules/source-map": {
|
||||
|
|
@ -10373,7 +10423,7 @@
|
|||
"jest-cli": "^24.9.0"
|
||||
},
|
||||
"bin": {
|
||||
"jest": "./bin/jest.js"
|
||||
"jest": "bin/jest.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
|
|
@ -10414,7 +10464,7 @@
|
|||
"yargs": "^13.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"jest": "./bin/jest.js"
|
||||
"jest": "bin/jest.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
|
|
@ -11083,7 +11133,7 @@
|
|||
"yargs": "^13.3.0"
|
||||
},
|
||||
"bin": {
|
||||
"jest-runtime": "./bin/jest-runtime.js"
|
||||
"jest-runtime": "bin/jest-runtime.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
|
|
@ -11640,9 +11690,6 @@
|
|||
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
|
||||
"integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"graceful-fs": "^4.1.6"
|
||||
}
|
||||
|
|
@ -11998,12 +12045,14 @@
|
|||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
|
||||
"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"semver": "^6.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/make-error": {
|
||||
|
|
@ -12601,7 +12650,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/node-releases": {
|
||||
|
|
@ -12643,7 +12692,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/normalize-path": {
|
||||
|
|
@ -13120,12 +13169,14 @@
|
|||
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
|
||||
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"p-try": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/p-locate": {
|
||||
|
|
@ -13396,9 +13447,11 @@
|
|||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
|
||||
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/jonschlinkert",
|
||||
"engines": {
|
||||
"node": ">=8.6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/pify": {
|
||||
|
|
@ -14707,7 +14760,6 @@
|
|||
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
|
||||
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.0.0",
|
||||
"error-ex": "^1.3.1",
|
||||
|
|
@ -14716,6 +14768,9 @@
|
|||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/readable-stream": {
|
||||
|
|
@ -15118,7 +15173,7 @@
|
|||
"glob": "^7.1.3"
|
||||
},
|
||||
"bin": {
|
||||
"rimraf": "./bin.js"
|
||||
"rimraf": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/ripemd160": {
|
||||
|
|
@ -15209,7 +15264,7 @@
|
|||
"walker": "~1.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"sane": "./src/cli.js"
|
||||
"sane": "src/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "6.* || 8.* || >= 10.*"
|
||||
|
|
@ -15346,7 +15401,7 @@
|
|||
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver.js"
|
||||
"semver": "bin/semver.js"
|
||||
}
|
||||
},
|
||||
"node_modules/send": {
|
||||
|
|
@ -15554,7 +15609,7 @@
|
|||
"safe-buffer": "^5.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"sha.js": "./bin.js"
|
||||
"sha.js": "bin.js"
|
||||
}
|
||||
},
|
||||
"node_modules/shallow-clone": {
|
||||
|
|
@ -16476,9 +16531,11 @@
|
|||
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
|
||||
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/sindresorhus",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/stylehacks": {
|
||||
|
|
@ -16549,7 +16606,7 @@
|
|||
"util.promisify": "~1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"svgo": "./bin/svgo"
|
||||
"svgo": "bin/svgo"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
|
|
@ -16572,9 +16629,11 @@
|
|||
"resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
|
||||
"integrity": "sha512-ACUm3L0/jiZTqfzRM3Hi9Q8eZqd6IK37mMWPLz9PJxkLWllYeRf+EHUSHYEtFop2Eqytaq1FizFVh7XfBnXCDQ==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/fb55",
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/fb55"
|
||||
}
|
||||
},
|
||||
"node_modules/svgo/node_modules/dom-serializer": {
|
||||
|
|
@ -16816,7 +16875,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/terser-webpack-plugin/node_modules/source-map": {
|
||||
|
|
@ -17117,7 +17176,7 @@
|
|||
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"semver": "./bin/semver"
|
||||
"semver": "bin/semver"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-jest/node_modules/yargs-parser": {
|
||||
|
|
@ -17602,7 +17661,7 @@
|
|||
"deprecated": "Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"uuid": "./bin/uuid"
|
||||
"uuid": "bin/uuid"
|
||||
}
|
||||
},
|
||||
"node_modules/v8-compile-cache": {
|
||||
|
|
@ -17681,7 +17740,6 @@
|
|||
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz",
|
||||
"integrity": "sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/sponsors/mysticatea",
|
||||
"dependencies": {
|
||||
"debug": "^4.1.1",
|
||||
"eslint-scope": "^5.1.1",
|
||||
|
|
@ -17694,6 +17752,9 @@
|
|||
"engines": {
|
||||
"node": ">=8.10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/mysticatea"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"eslint": ">=5.0.0"
|
||||
}
|
||||
|
|
@ -17886,7 +17947,6 @@
|
|||
"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"chokidar": "^3.4.1",
|
||||
"graceful-fs": "^4.1.2",
|
||||
"neo-async": "^2.5.0"
|
||||
},
|
||||
|
|
@ -17950,7 +18010,6 @@
|
|||
"anymatch": "^2.0.0",
|
||||
"async-each": "^1.0.1",
|
||||
"braces": "^2.3.2",
|
||||
"fsevents": "^1.2.7",
|
||||
"glob-parent": "^3.1.0",
|
||||
"inherits": "^2.0.3",
|
||||
"is-binary-path": "^1.0.0",
|
||||
|
|
@ -18690,7 +18749,7 @@
|
|||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"which": "./bin/which"
|
||||
"which": "bin/which"
|
||||
}
|
||||
},
|
||||
"node_modules/which-boxed-primitive": {
|
||||
|
|
@ -18761,12 +18820,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/wrap-ansi/node_modules/color-convert": {
|
||||
|
|
@ -18934,12 +18995,14 @@
|
|||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/ansi-styles?sponsor=1",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/cliui": {
|
||||
|
|
@ -19011,7 +19074,6 @@
|
|||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
|
||||
"integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
|
||||
"dev": true,
|
||||
"funding": "https://github.com/chalk/wrap-ansi?sponsor=1",
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.0.0",
|
||||
"string-width": "^4.1.0",
|
||||
|
|
@ -19019,6 +19081,9 @@
|
|||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/wrap-ansi?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/yargs/node_modules/y18n": {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
65
src/App.vue
65
src/App.vue
|
|
@ -1,69 +1,4 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
<div class="container-fluid">
|
||||
<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 mt-5">
|
||||
<radioCard
|
||||
radioLabel="Windshield"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
radioID="windshield"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Side Window"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
radioID="sidewindow"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Back Glass"
|
||||
radioImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
radioID="backglass"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<listButton
|
||||
buttonText="List Button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<a href="#">Text Link</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
|
||||
import radioCard from "@/uxComponents/radioCard/radioCard";
|
||||
import listButton from "@/uxComponents/listButton/listButton";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonPrimary,
|
||||
radioCard,
|
||||
listButton
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,106 +0,0 @@
|
|||
// Color system
|
||||
|
||||
// scss-docs-start gray-color-variables
|
||||
$white: #FFFFFF;
|
||||
$gray-100: #F4F4F4;
|
||||
$gray-200: #CACBCC;
|
||||
$gray-300: #B3B4B5;
|
||||
$gray-400: #B0B3B3;//Default Gray (Gray 400)
|
||||
$black: #000;
|
||||
// scss-docs-end gray-color-variables
|
||||
|
||||
// fusv-disable
|
||||
// scss-docs-start gray-colors-map
|
||||
$grays: (
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
);
|
||||
// scss-docs-end gray-colors-map
|
||||
// fusv-enable
|
||||
|
||||
// scss-docs-start color-variables
|
||||
$blue-100: #E4F1F7;
|
||||
$blue-200: #E7F1F6;
|
||||
$blue-300: #B9D7E6;
|
||||
$blue-400: #125B7E;
|
||||
$blue-600: #1574A1;
|
||||
$blue-700: #06577C;
|
||||
$blue: #167CAC;//Default Blue (Blue 500)
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #d63384;
|
||||
$red-200: #FBE9E8;
|
||||
$red-300: #F3BEBA;
|
||||
$red: #DA291C;//Default Red (Red 400)
|
||||
$red-500: #AF2117;
|
||||
$orange: #fd7e14;
|
||||
$yellow-200: #FEF6E8;
|
||||
$yellow-300: #FCE6BA;
|
||||
$yellow: #F88F1C;//Default Yellow (Yellow 400)
|
||||
$green-200: #E6F2EC;
|
||||
$green-300: #B5DAC8;
|
||||
$green: #098649;//Default Green (Green 400)
|
||||
$green-500: #075F35;
|
||||
$teal: #20c997;
|
||||
$cyan: #0dcaf0;
|
||||
// scss-docs-end color-variables
|
||||
|
||||
// scss-docs-start colors-map
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-400,
|
||||
"gray-dark": $gray-400
|
||||
);
|
||||
// scss-docs-end colors-map
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: $red;
|
||||
$secondary: $gray-400;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red-500;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-400;
|
||||
// scss-docs-end theme-color-variables
|
||||
|
||||
// scss-docs-start theme-colors-map
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
);
|
||||
// scss-docs-end theme-colors-map
|
||||
|
||||
//Fonts
|
||||
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
// stylelint-enable value-keyword-case
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$font-family-code: $font-family-monospace;
|
||||
|
||||
//Gutters
|
||||
$grid-gutter-width: .75rem;
|
||||
|
||||
//Border Radius
|
||||
$border-radius: .25rem;
|
||||
$border-radius-sm: .2rem;
|
||||
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course.
|
||||
$border-radius-pill: 50rem;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
body {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
padding: 0 .75rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue-600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $blue-600;
|
||||
&:hover {
|
||||
color: $blue-400;
|
||||
}
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
159
src/assets/scss/_custom-variables.scss
Normal file
159
src/assets/scss/_custom-variables.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
//Colors
|
||||
|
||||
// White/black
|
||||
$white: #FFFFFF;
|
||||
$black: #000;
|
||||
|
||||
// Blues
|
||||
$blue-100: #E4F1F7;// Used in theme
|
||||
$blue-200: #C1DFEE;
|
||||
$blue-300: #9FCEE6;
|
||||
$blue-400: #69ADCF;// Used in theme
|
||||
$blue-500: #3B8FB8;
|
||||
$blue: #167CAC;// Default Blue
|
||||
$blue-700: #06577C;
|
||||
$blue-800: #003D58;
|
||||
$blue-900: #002433;// Used in theme
|
||||
|
||||
// Reds
|
||||
$red-100: #FFE6E4;
|
||||
$red-200: #FDC0BB;
|
||||
$red-300: #FB9A93;
|
||||
$red-400: #EB5E54;
|
||||
$red: #DA291C;// Default Red
|
||||
$red-600: #B0160B;
|
||||
$red-700: #870900;
|
||||
$red-800: #5D0600;
|
||||
$red-900: #330300;
|
||||
|
||||
// Greens
|
||||
$green-100: #E3F2EA;
|
||||
$green-200: #BCEDD4;
|
||||
$green-300: #94D7B6;
|
||||
$green-400: #EB594F;// Used in theme
|
||||
$green-500: #2CA168;
|
||||
$green: #C40E01;// Default Green
|
||||
$green-700: #006A36;
|
||||
$green-800: #004F28;
|
||||
$green-900: #00331A;
|
||||
|
||||
// Yellows
|
||||
$yellow-100: #FFF5EB;
|
||||
$yellow-200: #FFE7C7;
|
||||
$yellow-300: #FFD8A1;
|
||||
$yellow-400: #FFB25C;
|
||||
$yellow: #F88F1C;// Default Yellow
|
||||
$yellow-600: #C76902;
|
||||
$yellow-700: #964E00;
|
||||
$yellow-800: #643400;
|
||||
$yellow-900: #331A00;
|
||||
|
||||
// Grays
|
||||
$gray-100: #F5F5F5;// Used in theme
|
||||
$gray-200: #E3E4E4;// Used in theme
|
||||
$gray-300: #D2D4D4;
|
||||
$gray: #B0B3B3;// Default Gray
|
||||
$gray-500: #8E9292;// Used in theme
|
||||
$gray-600: #4D5151;// Used in theme
|
||||
$gray-700: #303333;// Used in theme
|
||||
$gray-800: #222424;// Used in theme
|
||||
$gray-900: #181A1A;// Used in theme
|
||||
|
||||
// Miscellaneous Colors
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #d63384;
|
||||
$orange: #fd7e14;
|
||||
$teal: #20c997;
|
||||
$cyan: #0dcaf0;
|
||||
|
||||
// scss-docs-start colors-map
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray,
|
||||
"gray-dark": $gray-500
|
||||
);
|
||||
|
||||
// scss-docs-start theme-color-variables
|
||||
$primary: $blue;
|
||||
$secondary: $red;
|
||||
$success: $green;
|
||||
$info: $cyan;
|
||||
$warning: $yellow;
|
||||
$danger: $red;
|
||||
$light: $gray-100;
|
||||
$dark: $gray-500;
|
||||
|
||||
// scss-docs-start theme-colors-map
|
||||
$theme-colors: (
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
);
|
||||
|
||||
//Fonts
|
||||
$font-family-sans-serif: Roboto, Arial, Helvetica, sans-serif;
|
||||
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
// stylelint-enable value-keyword-case
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
$font-family-code: $font-family-monospace;
|
||||
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
|
||||
|
||||
//Font weight
|
||||
$font-weight-lighter: lighter !default;
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 500 !default;
|
||||
$font-weight-bolder: bolder !default;
|
||||
|
||||
//Headings
|
||||
$h1-font-size: $font-size-base * 3;
|
||||
$h2-font-size: $font-size-base * 2.625;
|
||||
$h3-font-size: $font-size-base * 2;
|
||||
$h4-font-size: $font-size-base * 1.625;
|
||||
$h5-font-size: $font-size-base * 1.25;
|
||||
$h6-font-size: $font-size-base * .875;
|
||||
|
||||
//Border Radius
|
||||
$border-radius: .25rem;
|
||||
$border-radius-sm: .2rem;
|
||||
$border-radius-lg: .5rem;//Used for buttons. Can be used for other things, of course.
|
||||
$border-radius-pill: 50rem;
|
||||
|
||||
//Spacing
|
||||
// Seven spacers available instead of the usual 5
|
||||
$spacer: 1rem;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * .25,
|
||||
2: $spacer * .5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 2,
|
||||
6: $spacer * 2.5,
|
||||
7: $spacer * 3,
|
||||
);
|
||||
|
||||
//Grid breakpoints
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 838px,
|
||||
lg: 1074px,
|
||||
xl: 1416px
|
||||
);
|
||||
22
src/assets/scss/_global-styles.scss
Normal file
22
src/assets/scss/_global-styles.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
body {
|
||||
font-size: 16px;
|
||||
background-color: #fff;
|
||||
padding: .5rem;
|
||||
.container-fluid {
|
||||
max-width: 576px;//Remove once desktop app is complete
|
||||
&.container-shadow {
|
||||
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);//Use instead of Bootstrap's helper
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: $blue-600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid $blue-600;
|
||||
&:hover {
|
||||
color: $blue-400;
|
||||
}
|
||||
}
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
&.btn-primary {
|
||||
position: relative;
|
||||
background: $blue-700;
|
||||
background: linear-gradient(270deg, rgba(21,116,161,1) 0%, rgba(18,91,126,1) 100%);
|
||||
background: linear-gradient(270deg, $blue-500 0%, $blue-700 100%);
|
||||
border: none;
|
||||
border-radius: $border-radius-lg;
|
||||
height: 48px;
|
||||
|
|
@ -12,7 +12,8 @@
|
|||
&:hover {
|
||||
background: linear-gradient(270deg, rgba(6,87,124,1) 0%, rgba(6,87,124,1) 100%);
|
||||
}
|
||||
&:focus {
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible { // Keyboard focus for accessibility
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
|
||||
}
|
||||
|
|
@ -50,7 +51,8 @@
|
|||
border-radius: $border-radius-lg;
|
||||
border: 1px solid rgba($gray-300,.3);
|
||||
width: 100%;
|
||||
&:focus, &:focus-visible {
|
||||
&:focus, // Mouse, touch, stylus focus
|
||||
&:focus-visible { // Keyboard focus for accessibility
|
||||
box-shadow: none;
|
||||
}
|
||||
&.button-loader {
|
||||
|
|
@ -72,36 +74,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
||||
// Non-Bootstrap button
|
||||
// Intended to be used without .btn class
|
||||
.btn-damage {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
border: 1px solid #b3b4b5;
|
||||
&:focus {
|
||||
background-color: #e7f1f6;
|
||||
border: 1px solid $blue;
|
||||
}
|
||||
&:focus-visible { // For keyboard/screenreader
|
||||
background-color: #e7f1f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px $blue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
46
src/assets/scss/components/_typogrophy.scss
Normal file
46
src/assets/scss/components/_typogrophy.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
//Typogrophy
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 1.625;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
//Headings
|
||||
//font-size defined in _custom-variables.scss
|
||||
//add helper fw-bold to any element to get bold style (500)
|
||||
h1,.h1 {
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
}
|
||||
h2,.h2 {
|
||||
line-height: 1.325;
|
||||
font-weight: 300;
|
||||
}
|
||||
h3,.h3 {
|
||||
line-height: 1.375;
|
||||
font-weight: 300;
|
||||
}
|
||||
h4,.h4 {
|
||||
line-height: 1.6;
|
||||
font-weight: 300;
|
||||
}
|
||||
h5,.h5 {
|
||||
line-height: 1.325;
|
||||
font-weight: 400;
|
||||
}
|
||||
h6,.h6 {
|
||||
line-height: 1.7;
|
||||
letter-spacing: .75px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
label {
|
||||
line-height: 1.625;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
caption {
|
||||
font-size: .75rem;
|
||||
line-height: 1.7;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
@import "./node_modules/bootstrap/scss/functions";
|
||||
|
||||
//Variable Overrides
|
||||
@import "_CustomVariables";
|
||||
@import "_custom-variables";
|
||||
|
||||
//Bootstrap Default Variables and Mixins
|
||||
@import "./node_modules/bootstrap/scss/variables";
|
||||
|
|
@ -14,11 +14,12 @@
|
|||
@import "./node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
//Custom Global CSS
|
||||
@import "_GlobalStyles";
|
||||
@import "_global-styles";
|
||||
|
||||
//Custom Components CSS
|
||||
@import "./components/_typogrophy";
|
||||
@import "./components/_navbar";
|
||||
@import "./components/_SelectCar";
|
||||
@import "./components/_SelectCar";
|
||||
@import "./components/_buttons";
|
||||
@import "./components/_vehicle-image";
|
||||
@import "./components/_radio-card";
|
||||
|
|
|
|||
5
src/constants/applicationConfig.js
Normal file
5
src/constants/applicationConfig.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
const applicationConfig = {
|
||||
CONSUMER_APIGATEWAY_URL: process.env.VUE_APP_CONSUMER_API_GATEWAY
|
||||
}
|
||||
|
||||
export { applicationConfig }
|
||||
|
|
@ -1,22 +1,23 @@
|
|||
import axios from "axios";
|
||||
import { applicationConfig } from "@/constants/applicationConfig.js";
|
||||
import httpStatusCodes from "http-status-codes";
|
||||
|
||||
export default {
|
||||
callHttpClient({ method, endpoint, payload, responseType = {} }) {
|
||||
callHttpClient({ method, endpoint, payload}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const apiGatewayUrl = "https://consumerapidev.safelite.com"; // TODO: Some environment variable
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, {
|
||||
AppName: "FixMyGlass",
|
||||
});
|
||||
|
||||
const apiGatewayUrl = applicationConfig.CONSUMER_APIGATEWAY_URL;
|
||||
const payloadAndAnalyticsData = Object.assign({}, payload, {AppName: "FixMyGlass"});
|
||||
|
||||
axios({
|
||||
method: method,
|
||||
url: `${apiGatewayUrl}${endpoint}`,
|
||||
data: payloadAndAnalyticsData,
|
||||
crossDomain: true,
|
||||
responseType: responseType,
|
||||
}).then(
|
||||
(response) => {
|
||||
if (response.data.isSuccess || response.status == 200) {
|
||||
responseType: {},
|
||||
}).then((response) => {
|
||||
|
||||
if (response.status == httpStatusCodes.OK) {
|
||||
resolve(response);
|
||||
} else {
|
||||
reject(response);
|
||||
|
|
|
|||
97
src/layouts/componentTest/componentTest.vue
Normal file
97
src/layouts/componentTest/componentTest.vue
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="container-fluid container-shadow p-2 rounded-3">
|
||||
<div class="row g-2">
|
||||
<radioCard
|
||||
radioLabel="Windshield"
|
||||
radioImage="windshield-damage.svg"
|
||||
altText="Windshield"
|
||||
groupName="damageKey"
|
||||
radioID="windshield"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Side Window"
|
||||
radioImage="side-window-damage.svg"
|
||||
altText="Side Window"
|
||||
groupName="damageKey"
|
||||
radioID="sidewindow"
|
||||
/>
|
||||
<radioCard
|
||||
radioLabel="Back Glass"
|
||||
radioImage="back-glass-damage.svg"
|
||||
altText="Back Glass"
|
||||
groupName="damageKey"
|
||||
radioID="backglass"
|
||||
/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<buttonPrimary
|
||||
buttonText="Primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<listButton
|
||||
buttonText="List Button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col my-3 d-flex align-items-center">
|
||||
<a href="#">Text Link</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<p>This is default body copy font size/weight</p>
|
||||
<p class="small">This is small body copy using <code>.small</code> class</p>
|
||||
<p><small>This is also small using <code><small></code> tag</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h1>h1 Heading</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h2>h2 Heading</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h3>h3 Heading</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h4>h4 Heading</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h5>h5 Heading</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-2">
|
||||
<div class="col">
|
||||
<h6>h6 Heading</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonPrimary from "@/uxComponents/buttonPrimary/buttonPrimary";
|
||||
import radioCard from "@/uxComponents/radioCard/radioCard";
|
||||
import listButton from "@/uxComponents/listButton/listButton";
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
buttonPrimary,
|
||||
radioCard,
|
||||
listButton
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1 +0,0 @@
|
|||
test.todo('some test to be written in the future');
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<h1>Home</h1>
|
||||
<router-link to="/testc">Test</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1 +0,0 @@
|
|||
test.todo('some test to be written in the future');
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
<template>
|
||||
<div>
|
||||
<p>Not found</p>
|
||||
</div>
|
||||
</template>
|
||||
<p> Not Found .... :( </p>
|
||||
</template>
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
export function lazyLoadComponent(componentName) {
|
||||
return () => import(`@/layouts/${componentName}.vue`); // /selectModel/SelectModel
|
||||
return () => import(`@/layouts/${componentName}/${componentName}.vue`); // /src/layouts/folder/component.vue
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import { createWebHistory, createRouter } from "vue-router";
|
||||
import { storeActions } from "@/constants/storeActions.js";
|
||||
import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js";
|
||||
import ComponentTest from "@/layouts/componentTest/componentTest.vue";
|
||||
import NotFound from "@/layouts/notFound/notFound.vue";
|
||||
import Home from "@/layouts/home/home.vue";
|
||||
import store from "@/store";
|
||||
import selectYear from "@/layouts/selectYear/selectYear.vue";
|
||||
import selectMake from "@/layouts/selectMake/selectMake.vue";
|
||||
|
|
@ -12,14 +12,59 @@ import selectDamage from "@/layouts/selectDamage/selectDamage.vue";
|
|||
|
||||
const routes = [
|
||||
{
|
||||
path: "/not-found",
|
||||
name: "NotFound",
|
||||
path: '/:pathMatch(.*)*',
|
||||
component: NotFound,
|
||||
name: "NotFound"
|
||||
},
|
||||
{
|
||||
path: "/component-test", // This is a temporary route for testing.
|
||||
name: "ComponentTest",
|
||||
component: ComponentTest,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
Name: "Home",
|
||||
component: Home,
|
||||
beforeEnter(to, from, next) {
|
||||
|
||||
// If we have no query string, or we don't have the FmgPage query string.
|
||||
if (to.query.fmgPage === undefined) {
|
||||
RetainStructureAndGoTo404(to, next);
|
||||
} else {
|
||||
|
||||
// If we already have our route, go to it.
|
||||
if (router.hasRoute(to.query.fmgPage)) {
|
||||
return next({
|
||||
name: to.query.fmgPage,
|
||||
query: to.query,
|
||||
});
|
||||
}
|
||||
|
||||
// Get route info for the given url. Names will have a 1:1 relationship with names in the Cms.
|
||||
GetRouteInfoFromPageName(to.query.fmgPage).then((routeData) => {
|
||||
|
||||
// Add our dynamic route.
|
||||
router.addRoute({
|
||||
path: '/', // Always the same path, because we control it with query strings.
|
||||
name: routeData[0].name,
|
||||
component: routeData[0].component,
|
||||
});
|
||||
|
||||
// Assign current query string parameters, as well as our fmgPage one.
|
||||
next({
|
||||
name: routeData[0].name,
|
||||
query: Object.assign(to.query, { fmgPage: routeData[0].name })
|
||||
});
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
|
||||
// If we can't find the route, go to the 404 page.
|
||||
RetainStructureAndGoTo404(to, next);
|
||||
|
||||
console.log("error:");
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "/select-year",
|
||||
|
|
@ -53,45 +98,12 @@ const router = createRouter({
|
|||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
console.log(to);
|
||||
console.log(from);
|
||||
next();
|
||||
});
|
||||
|
||||
// Go to route if page exists in the CMS.
|
||||
// If not, go to 404 page.
|
||||
function NavigateToDynamicCmsRoute(to, next) {
|
||||
let doesRouteResolve = router.resolve(to.path).matched.length > 0;
|
||||
|
||||
if (!doesRouteResolve) {
|
||||
GetRouteInfoForUrl(to.path)
|
||||
.then((routeData) => {
|
||||
// Add our dynamic route.
|
||||
router.addRoute({
|
||||
path: routeData[0].path,
|
||||
name: routeData[0].name,
|
||||
component: routeData[0].component,
|
||||
});
|
||||
|
||||
next(to.fullPath);
|
||||
})
|
||||
.catch((error) => {
|
||||
// Check status code, go to 404 page if 404.
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
next(); // Home (/) and NotFound (/not-found) will always resolve.
|
||||
}
|
||||
}
|
||||
|
||||
// Get the route info for the given url.
|
||||
// This will hit the content service and eventually the Cms.
|
||||
// If the route is not found, reject Promise.
|
||||
function GetRouteInfoForUrl(url) {
|
||||
// Get route information by page name.
|
||||
// This will reach out to the Cms and there is a 1:1 relationship between page names and route names.
|
||||
function GetRouteInfoFromPageName(pageName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
store
|
||||
.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: url })
|
||||
.dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName })
|
||||
.then((response) => {
|
||||
// Add our route data and return our array.
|
||||
let jsonFromResponse = JSON.parse(response.data.Result);
|
||||
|
|
@ -106,6 +118,7 @@ function GetRouteInfoForUrl(url) {
|
|||
});
|
||||
|
||||
resolve(routeData);
|
||||
|
||||
})
|
||||
.catch((error) => {
|
||||
reject(error);
|
||||
|
|
@ -113,4 +126,14 @@ function GetRouteInfoForUrl(url) {
|
|||
});
|
||||
}
|
||||
|
||||
// Go to our 404 page but retain our structure when we go there (path, queryString, hash).
|
||||
function RetainStructureAndGoTo404(to, next) {
|
||||
next({
|
||||
name: 'NotFound',
|
||||
params: { pathMatch: to.path.split('/').slice(1) },
|
||||
query: to.query,
|
||||
hash: to.hash
|
||||
});
|
||||
}
|
||||
|
||||
export default router;
|
||||
|
|
|
|||
0
src/styles/commonStyles.scss
Normal file
0
src/styles/commonStyles.scss
Normal file
0
src/styles/uxStyles.scss
Normal file
0
src/styles/uxStyles.scss
Normal file
|
|
@ -1,3 +1,5 @@
|
|||
process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com";
|
||||
|
||||
module.exports = {
|
||||
outputDir: "dist/fmg",
|
||||
publicPath: "/fmg",
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__";
|
||||
|
||||
module.exports = {
|
||||
outputDir: "dist/fmg",
|
||||
publicPath: "/fmg",
|
||||
|
|
|
|||
Loading…
Reference in a new issue