From 531d4627daffbce252c63b580f5e8fa2c922c983 Mon Sep 17 00:00:00 2001
From: Corban-Lee <77944149+Corban-Lee@users.noreply.github.com>
Date: Wed, 22 Nov 2023 00:24:25 +0000
Subject: [PATCH] google places api

---
 src/mainapp/templates/index.html | 10 ++++----
 src/static/js/mainapp/venues.js  | 39 ++++++++++++++++++++++++++++++++
 src/static/scss/base.scss        |  4 ++++
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/mainapp/templates/index.html b/src/mainapp/templates/index.html
index 8f228ff..e201a44 100644
--- a/src/mainapp/templates/index.html
+++ b/src/mainapp/templates/index.html
@@ -218,12 +218,12 @@
                         </div>
                         <div id="addressContent" class="tab-pane fade flex-column h-100">
                             <div class="form-floating mb-4">
-                                <input type="text" name="venueName" id="venueName" class="form-control" placeholder="">
-                                <label for="venueName" class="form-label">
+                                <input type="text" name="venueSearch" id="venueSearch" class="form-control" placeholder="">
+                                <label for="venueSearch" class="form-label">
                                     <i class="bi bi-search me-1"></i>
                                     Post Code or Street Address
                                 </label>
-                            </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="$('#detailsTab').click();">Back</button>
                                 <button class="btn btn-primary px-3" type="button" onclick="$('#contactTab').click();">Next</button>
@@ -392,8 +392,8 @@
     const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl, {trigger : 'hover'}))
 </script>
 <script>
-    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-      key: "AIzaSyBCs8WSphiPhNl2MJtJnPDFD8KLjjhAIYY",
+    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r, "places"]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+      key: "AIzaSyDFR2xw2LhMPb6FC8OrfiLrJZRMRLMocvw",
       v: "weekly",
     });
 </script>
diff --git a/src/static/js/mainapp/venues.js b/src/static/js/mainapp/venues.js
index 2b54b48..98f6366 100644
--- a/src/static/js/mainapp/venues.js
+++ b/src/static/js/mainapp/venues.js
@@ -61,13 +61,52 @@ async function initMap() {
         disableDefaultUI: true,
     });
 
+    window.initAutocomplete();
+
     // const marker = new AdvancedMarkerElement({
     //     map: map,
     //     position: position,
     //     title: "Test"
     // });
+
+    
+
+    // const infoWindow = new google.maps.InfoWindow();
+    // const infoWindowContent = $("#venueSearchResults")[0]
+    // infoWindow.setContent(infoWindowContent);
+
+    // autoComplete.addListener("place_changed", () => {
+    //     // infoWindow.close();
+
+    //     const place = autoComplete.getPlace();
+    //     alert(JSON.stringify(place, null, 4));
+
+
+    //     if (!place.geometry || !place.geometry.location) {
+    //         alert("Couldn't find place");
+    //         return;
+    //     }
+
+        
+    // });
 }
 
+let autocomplete;
+
+function initAutocomplete() {
+
+    autocomplete = new google.maps.places.Autocomplete(
+        $("#venueSearch")[0],
+        {
+            fields: ["address_components", "geometry"],
+            types: ["address"],
+            strictBounds: false
+        }
+    )
+}
+
+window.initAutocomplete = initAutocomplete;
+
 $(document).ready(function() {
     initMap();
 });
\ No newline at end of file
diff --git a/src/static/scss/base.scss b/src/static/scss/base.scss
index 586ce6a..92de54a 100644
--- a/src/static/scss/base.scss
+++ b/src/static/scss/base.scss
@@ -266,6 +266,10 @@ $body-bg :#000;
 
 }
 
+.pac-container {
+    z-index: 9999 !important;
+}
+
 // .card-badge-container {
 //     position: relative;