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

Moved the script src for Google Maps API from head of index.html to component, using load script plugin

Browse source
This commit is contained in:
Leah Schumann 2022-01-10 10:05:46 -05:00
parent 9ead873449
commit 3b7a650eb9
6 changed files with 13989 additions and 4716 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
2.0.0 Normal file
View file

@ -0,0 +1,15 @@
removed 2 packages, and audited 1692 packages in 8s
94 packages are looking for funding
run `npm fund` for details
103 vulnerabilities (88 moderate, 15 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.

18581
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

2
package.json
View file

@ -19,7 +19,7 @@
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-google-autocomplete": "^1.1.2", "vue-google-autocomplete": "^1.1.2",
"vue-place-autocomplete": "^0.5.3", "vue-place-autocomplete": "^0.5.3",
"vue-plugin-load-script": "^1.3.5", "vue-plugin-load-script": "^2.1.0",
"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,7 +9,6 @@
<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>

103
src/layouts/address-poc/address-poc.vue
View file

@ -31,59 +31,70 @@ export default {
//FormField //FormField
//VueGoogleAutocomplete //VueGoogleAutocomplete
}, },
mounted() { mounted() {
this.autocomplete = new window.google.maps.places.Autocomplete( let self = this;
(this.$refs.autocomplete),
{
componentRestrictions: { country: ["us"] },
fields: ["address_components"],
types: ['address']
}
);
this.autocomplete.addListener('place_changed', () => { this.$loadScript("https://maps.googleapis.com/maps/api/js?key=AIzaSyDptGCkOPgN2uWJOy4ou4M33phRD4MAoJo&libraries=places")
let place = this.autocomplete.getPlace(); .then(() => {
let address1 = ""; // Script is loaded, do something
let postcode = ""; self.autocomplete = new window.google.maps.places.Autocomplete(
(self.$refs.autocomplete),
let input = document.getElementById("autocomplete"); {
componentRestrictions: { country: ["us"] },
for (const component of place.address_components) { fields: ["address_components"],
const componentType = component.types[0]; types: ['address']
switch (componentType) {
case "street_number": {
address1 = `${component.long_name} ${address1}`;
break;
} }
);
case "route": { self.autocomplete.addListener('place_changed', () => {
address1 += component.short_name; let place = self.autocomplete.getPlace();
break; let address1 = "";
} let postcode = "";
case "locality":
address1 += ', ' + component.long_name;
break;
case "administrative_area_level_1": {
address1 += ', ' + component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": { let input = document.getElementById("autocomplete");
postcode = `${postcode}-${component.long_name}`;
break;
}
} for (const component of place.address_components) {
const componentType = component.types[0];
let addressField1 = document.querySelector("#autocomplete"); switch (componentType) {
addressField1.value = address1 + ' ' + postcode; case "street_number": {
} address1 = `${component.long_name} ${address1}`;
}); break;
}
case "route": {
address1 += component.short_name;
break;
}
case "locality":
address1 += ', ' + component.long_name;
break;
case "administrative_area_level_1": {
address1 += ', ' + component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
}
let addressField1 = document.querySelector("#autocomplete");
addressField1.value = address1 + ' ' + postcode;
}
});
})
.catch(() => {
// Failed to fetch script
console.log("Unable to load Google Places API script")
});
}, },
}; };

3
src/main.js
View file

@ -1,4 +1,5 @@
import { createApp } from "vue"; import { createApp } from "vue";
import LoadScript from "vue-plugin-load-script";
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import store from "@/store"; import store from "@/store";
@ -10,7 +11,7 @@ const vueApp = createApp(App);
vueApp.use(router); vueApp.use(router);
vueApp.use(store); vueApp.use(store);
vueApp.use(LoadScript);
vueApp.mixin(baseMixin); vueApp.mixin(baseMixin);
vueApp.mount("#app"); vueApp.mount("#app");