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

Address Autocomplete POC

Browse source
This commit is contained in:
Leah Schumann 2022-01-05 16:32:15 -05:00
parent e6a10324cb
commit f16c997920
6 changed files with 593 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

535
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

3
package.json
View file

@ -17,6 +17,9 @@
"http-status-codes": "^2.1.4", "http-status-codes": "^2.1.4",
"jest-junit": "^13.0.0", "jest-junit": "^13.0.0",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-google-autocomplete": "^1.1.2",
"vue-place-autocomplete": "^0.5.3",
"vue-plugin-load-script": "^1.3.5",
"vue-router": "^4.0.11", "vue-router": "^4.0.11",
"vuex": "^4.0.2", "vuex": "^4.0.2",
"vuex-persistedstate": "^4.1.0" "vuex-persistedstate": "^4.1.0"

1
public/index.html
View file

@ -9,6 +9,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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"> <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> <title><%= htmlWebpackPlugin.options.title %></title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo&libraries=places"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

80
src/layouts/address-poc/address-poc.vue Normal file
View file

@ -0,0 +1,80 @@
<template>
<div class="container-fluid container-shadow p-2 rounded-3">
<div class="row my-3">
<div class="col">
<vehicleBanner
vehicleImageSrc="https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3"
/>
</div>
</div>
<!-- <div class="row my-4">
<div class="col">
<label for="map">Home address</label>
<vue-google-autocomplete
id="map"
classname="form-control"
placeholder="Start typing"
v-on:placechanged="getAddressData"
>
</vue-google-autocomplete>
</div>
</div> -->
<div class="row my-4">
<div class="col">
<label for="autocomplete">Home address</label>
<input ref="autocomplete"
id="autocomplete"
placeholder="Search"
class="form-control search-location"
onfocus="value = ''"
type="text" />
</div>
</div>
</div>
</template>
<script>
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
//import FormField from '../../ux-components/form-field/form-field.vue';
//import VueGoogleAutocomplete from 'vue-google-autocomplete'
export default {
name: "App",
components: {
vehicleBanner
//FormField
//VueGoogleAutocomplete
},
/* mounted() {
// To demonstrate functionality of exposed component functions
// Here we make focus on the user input
this.$refs.address.focus();
}, */
mounted() {
this.autocomplete = new window.google.maps.places.Autocomplete(
(this.$refs.autocomplete),
{
componentRestrictions: { country: ["us"] },
fields: ["address_components"],
types: ['address']
}
);
this.autocomplete.addListener('place_changed', () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
/* let lat = place.geometry.location.lat();
let lon = place.geometry.location.lng(); */
let city = ac[0]["short_name"];
/*
console.log(`The user picked ${city} with the coordinates ${lat}, ${lon}`);
console.log(ac); */
});
},
};
</script>

6
src/router/index.js
View file

@ -4,6 +4,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
import { routingTable } from "@/router/router-constants/routing-table.js"; import { routingTable } from "@/router/router-constants/routing-table.js";
import ComponentTest from "@/layouts/component-test/component-test.vue"; import ComponentTest from "@/layouts/component-test/component-test.vue";
import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue"; import LoaderDemo from "@/layouts/loader-demo/loader-demo.vue";
import AddressPOC from "@/layouts/address-poc/address-poc.vue";
import NotFound from "@/layouts/not-found/not-found.vue"; import NotFound from "@/layouts/not-found/not-found.vue";
import store from "@/store"; import store from "@/store";
@ -23,6 +24,11 @@ const routes = [
name: "LoaderDemo", name: "LoaderDemo",
component: LoaderDemo, component: LoaderDemo,
}, },
{
path: "/address-poc", // This is a temporary route for testing.
name: "AddressPOC",
component: AddressPOC,
},
{ {
path: "/", path: "/",
beforeEnter(to, from, next) { beforeEnter(to, from, next) {

45
src/ux-components/form-field/form-field.vue Normal file
View file

@ -0,0 +1,45 @@
<template>
<div class="d-flex flex-column w-100">
<div class="form-group">
<label v-bind:for="formFieldId">{{ labelText }}</label>
<input type="text" class="form-control" v-bind:id="formFieldId" v-bind:name="formFieldName" :required="required == 1" />
<loader
v-if="display"
v-bind:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"
v-bind:class="[this.loaderColor, this.loaderPosition]"
/>
</div>
<label class="small mt-1">{{ this.errorText }}</label>
</div>
</template>
<script>
import loader from "@/ux-components/loader/loader";
export default {
name: "formField",
props: {
formFieldId: String,
formFieldName: String,
required: Number,
labelText: String,
errorText: String,
loaderColor: String,
loaderPosition: String,
sizeInRem: [Number, String],
},
data() {
return {
display: false,
isError: false,
};
},
methods: {
displayComponent() {
this.display = true;
},
},
components: {
loader,
},
};
</script>