jamesparkin/Results-Page
1
0
Fork 0
Code Issues 9 Pull Requests Projects 1 Releases Activity

Functional google places api for searching

Browse Source
This commit is contained in:
Corban-Lee 2023-11-23 00:35:15 +00:00
parent 531d4627da
commit e726441285
2 changed files with 122 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
src/mainapp/templates/index.html
View File

@ -223,7 +223,62 @@
<i class="bi bi-search me-1"></i>
Post Code or Street Address
</label>
</div>
</div>
<div id="venueSearchResults" style="display: none">
<div class="row">
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueStreetNum" id="venueStreetNum" class="form-control-plaintext" placeholder="" readonly>
<label for="venueStreetNum" class="form-label">Street Number</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueStreet" id="venueStreet" class="form-control-plaintext" placeholder="" readonly>
<label for="venueStreet" class="form-label">Street Address</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCity" id="venueCity" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCity" class="form-label">Town/City</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCounty" id="venueCounty" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCounty" class="form-label">County/Region</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venuePost" id="venuePost" class="form-control-plaintext" placeholder="" readonly>
<label for="venuePost" class="form-label">Post Code</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueCountry" id="venueCountry" class="form-control-plaintext" placeholder="" readonly>
<label for="venueCountry" class="form-label">Country</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueLat" id="venueLat" class="form-control-plaintext" placeholder="" readonly>
<label for="venueLat" class="form-label">Latitude</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="venueLng" id="venueLng" class="form-control-plaintext" placeholder="" readonly>
<label for="venueLng" class="form-label">Longitude</label>
</div>
</div>
</div>
</div>
<div id="venueSearchHelper" class="my-auto text-center">
<label for="venueSearch" class="fs-4 mx-lg-4 text-body-secondary">Use the search to find your venue.</label>
</div>
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#detailsTab').click();">Back</button>
<button class="btn btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
@ -244,11 +299,10 @@
</div>
</div>
</div>
<div class="form-floating">
<div class="form-floating mb-4">
<input type="url" name="venueWebsite" id="venueWebsite" class="form-control" placeholder="">
<label for="venueWebsite" class="form-label">Website URL</label>
</div>
<hr class="my-4">
<div class="form-floating mb-4">
<input type="url" name="venueFacebook" id="venueFacebook" class="form-control" placeholder="">
<label for="" class="form-label">Facebook URL</label>
@ -274,7 +328,27 @@
</div>
</div>
<div id="confirmContent" class="tab-pane fade flex-column h-100">
confirm
<div class="row">
<div class="col-12">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Chequered Lake">
<label for="" class="form-label">Venue Name</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Some description...">
<label for="" class="form-label">Description</label>
</div>
</div>
<div class="col-lg-6">
<div class="form-floating mb-3">
<input type="text" name="" id="" class="form-control-plaintext" placeholder="" readonly value="Fishery">
<label for="" class="form-label">Venue Type</label>
</div>
</div>
</div>
<div class="mt-5 mt-md-auto d-flex justify-content-end">
<button class="btn btn-outline-secondary me-3" type="button" onclick="$('#watersTab').click();">Back</button>
<button class="btn btn-primary" type="button" onclick="alert('not implemented')">Save Changes</button>

44
src/static/js/mainapp/venues.js
View File

@ -98,15 +98,59 @@ function initAutocomplete() {
autocomplete = new google.maps.places.Autocomplete(
$("#venueSearch")[0],
{
componentRestrictions: { country: "gb" },
fields: ["address_components", "geometry"],
types: ["address"],
strictBounds: false
}
)
autocomplete.addListener("place_changed", () => {
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
alert("couldn't find this place");
return;
}
alert(JSON.stringify(place, null, 4));
fillAddress(place);
});
}
window.initAutocomplete = initAutocomplete;
function fillAddressControl(component, types, fieldSelector, component_attr="long_name") {
if (types.some(type => component.types.includes(type))) {
$(fieldSelector).val(component[component_attr]);
}
}
function fillAddress(place) {
// Clear the fields first, because sometimes we cant find data to replace them.
$("#venueSearchResults").show();
$("#venueSearchHelper").hide();
$("#addressContent input[readonly], #addressContent input[readonly='readonly']").val("");
place.address_components.forEach(component => {
fillAddressControl(component, ["street_number"], "#venueStreetNum");
fillAddressControl(component, ["route"], "#venueStreet");
fillAddressControl(component, ["postal_town", "locality"], "#venueCity");
fillAddressControl(component, ["administrative_area_level_2"], "#venueCounty");
fillAddressControl(component, ["postal_code"], "#venuePost");
fillAddressControl(component, ["country"], "#venueCountry");
});
$("#venueLat").val(place.geometry.location.lat);
$("#venueLng").val(place.geometry.location.lng);
// place.geometry.forEach(item => {
// fillAddressControl(item, ["lat"], "#venueLat", "lat");
// fillAddressControl(item, ["lng"], "#venueLng", "lng");
// });
}
$(document).ready(function() {
initMap();
});