Functional google places api for searching

src/mainapp/templates/index.html

@@ -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>

src/static/js/mainapp/venues.js

@@ -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();
 });