Address Autocomplete POC
This commit is contained in:
Leah Schumann
parent
e6a10324cb
commit
f16c997920
6 changed files with 593 additions and 77 deletions
535
package-lock.json
generated
535
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -17,6 +17,9 @@
|
|||
"http-status-codes": "^2.1.4",
|
||||
"jest-junit": "^13.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",
|
||||
"vuex": "^4.0.2",
|
||||
"vuex-persistedstate": "^4.1.0"
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
<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">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo&libraries=places"></script>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
80
src/layouts/address-poc/address-poc.vue
Normal file
80
src/layouts/address-poc/address-poc.vue
Normal 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>
|
||||
|
|
@ -4,6 +4,7 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
|
|||
import { routingTable } from "@/router/router-constants/routing-table.js";
|
||||
import ComponentTest from "@/layouts/component-test/component-test.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 store from "@/store";
|
||||
|
||||
|
|
@ -23,6 +24,11 @@ const routes = [
|
|||
name: "LoaderDemo",
|
||||
component: LoaderDemo,
|
||||
},
|
||||
{
|
||||
path: "/address-poc", // This is a temporary route for testing.
|
||||
name: "AddressPOC",
|
||||
component: AddressPOC,
|
||||
},
|
||||
{
|
||||
path: "/",
|
||||
beforeEnter(to, from, next) {
|
||||
|
|
|
|||
45
src/ux-components/form-field/form-field.vue
Normal file
45
src/ux-components/form-field/form-field.vue
Normal 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>
|
||||
Loading…
Reference in a new issue