autosuggestion address added

katemat · Jul 16, 2020 · a62e168 · a62e168
1 parent 5799f81
commit a62e168
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 55 deletions.
diff --git a/public/item.js b/public/item.js
@@ -23,7 +23,7 @@ const reverseGeocode = function (e) {
     });
   } else {
     var searchRequest = {
-      // local arguement to be passed in
+      // local argument to be passed in
       location: e.location,
       callback: function (res) {
         //Tell the user the name of the result.
@@ -52,25 +52,11 @@ const reverseGeocode = function (e) {
     //Make the reverse geocode request.
     searchManager.reverseGeocode(searchRequest);
 
-    // var greenPin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(center.latitude, center.longitude - 0.1), { color: '#0f0', draggable: true });
-    // map.entities.push(greenPin);
-
     var pin = new Microsoft.Maps.Pushpin(e.location, {
-      draggable: true,
-      // title: address
+      //   title: address,
       // color: 'green'
     });
     map.entities.push(pin);
-
-    Microsoft.Maps.Events.addHandler(pin, 'drag', function (e) {
-      highlight('pushpinDrag', e);
-    });
-    Microsoft.Maps.Events.addHandler(pin, 'dragend', function (e) {
-      highlight('pushpinDragEnd', e);
-    });
-    Microsoft.Maps.Events.addHandler(pin, 'dragstart', function (e) {
-      highlight('pushpinDragStart', e);
-    });
     console.log(map.entities);
   }
 };
@@ -83,6 +69,34 @@ function getMap() {
       'AuewOzxuyMxFiwOpCiEiYyNsck-yIwg3nBqGlLukoPc6gZm-v9Eiyw3eBGpPPTDw',
   });
 
+  Microsoft.Maps.loadModule('Microsoft.Maps.AutoSuggest', {
+    callback: function () {
+      var options = {
+        maxResults: 3,
+        map: map,
+      };
+      var manager = new Microsoft.Maps.AutosuggestManager(options);
+      manager.attachAutosuggest(
+        '.item-location',
+        '#searchBoxContainer',
+        selectedSuggestion
+      );
+    },
+  });
+
+  function selectedSuggestion(suggestionResult) {
+    map.entities.clear();
+
+    var pin = new Microsoft.Maps.Pushpin(suggestionResult.location);
+    map.entities.push(pin);
+
+    itemAddress.value = suggestionResult.formattedSuggestion;
+    itemLatitude.value = suggestionResult.location.latitude;
+    itemLongitude.value = suggestionResult.location.longitude;
+
+    map.setView({ bounds: suggestionResult.bestView });
+  }
+
   Microsoft.Maps.Events.addHandler(map, 'click', (e) => {
     reverseGeocode(e);
   });

diff --git a/public/trashure-client.js b/public/trashure-client.js
@@ -70,8 +70,8 @@ function showPosition(position, cb) {
 
 // Fetches information to be displayed
 const handlePinClick = function (e) {
-  const url = `https://trashure-app.herokuapp.com/api/trashure_items/${e.target.metadata.id}`;
-  // const url = `http://localhost:8080/api/trashure_items/${e.target.metadata.id}`;
+  // const url = `https://trashure-app.herokuapp.com/api/trashure_items/${e.target.metadata.id}`;
+  const url = `http://localhost:8080/api/trashure_items/${e.target.metadata.id}`;
   axios.get(url).then((res) => {
     res.data.forEach(function (data) {
       document.querySelector('.description-of-item').classList.remove('hidden');
@@ -90,8 +90,8 @@ const handlePinClick = function (e) {
 
       reverseGeocode(fakevent);
 
-      const url = `https://trashure-app.herokuapp.com/api/users/${data.owner_id}`;
-      // const url = `http://localhost:8080/api/users/${data.owner_id}`;
+      // const url = `https://trashure-app.herokuapp.com/api/users/${data.owner_id}`;
+      const url = `http://localhost:8080/api/users/${data.owner_id}`;
       axios.get(url).then((res) => {
         document.querySelector(
           '.owner-of-item'
@@ -155,8 +155,8 @@ function getMap() {
 
     var center = map.getCenter();
 
-    const url = 'https://trashure-app.herokuapp.com/api/trashure_items';
-    // const url = 'http://localhost:8080/api/trashure_items';
+    // const url = 'https://trashure-app.herokuapp.com/api/trashure_items';
+    const url = 'http://localhost:8080/api/trashure_items';
 
     axios.get(url).then((res) => {
       res.data.forEach(function (data) {

diff --git a/views/edit-item.ejs b/views/edit-item.ejs
@@ -4,24 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Update Trashure Item</title>
-    <script
-      type="text/javascript"
-      src="https://www.bing.com/api/maps/mapcontrol?callback=getMap&key=AuewOzxuyMxFiwOpCiEiYyNsck-yIwg3nBqGlLukoPc6gZm-v9Eiyw3eBGpPPTDw"
-      async
-      defer
-    ></script>
     <link
       href="https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="/style2.css" />
-    <!-- <script
+    <script
       type="text/javascript"
-      src="http://www.bing.com/api/maps/mapcontrol?callback=GetMap&key=AuewOzxuyMxFiwOpCiEiYyNsck-yIwg3nBqGlLukoPc6gZm-v9Eiyw3eBGpPPTDw"
+      src="http://www.bing.com/api/maps/mapcontrol?callback=getMap&key=AuewOzxuyMxFiwOpCiEiYyNsck-yIwg3nBqGlLukoPc6gZm-v9Eiyw3eBGpPPTDw"
       async
       defer
-    ></script> -->
+    ></script>
   </head>
   <body>
     <nav class="page-nav">
@@ -74,42 +68,44 @@
           <label for="">Trashure Type: </label>
 
           <select class="selection" name="item_type" required>
-            <!-- to keep selected item_type showing before editing item details -->
             <% const types = ["Furniture", "Book", "Food", "Ticket", "Others"]
             %> <% types.forEach((option, index) => { %> <% if
             ((item[0].item_type) == option) { %>
             <option value="<%= option %>" <%="selected" %>
-              <%= option %>>
+              > <%= option %>
             </option>
             <% } else { %>
-            <option value="<%= option %>"> <%= option %></option>
+            <option value="<%= option %>">
+              <%= option %>
+            </option>
             <% } %> <% }) %>
           </select>
         </div>
-        <div>
+
+        <div id="searchBoxContainer">
           <label for="">Place the pin where the item is located</label>
           <input
             type="text"
             class="item-location"
             name="address"
-            readonly
             placeholder="address will be displayed here"
-            value="<%= item[0].address%>"
-          />
-          <input
-            type="hidden"
-            name="latitude"
-            class="lat"
-            value="<%= item[0].lat %>"
+            value=" <%= item[0].address %>"
           />
-          <input
-            type="hidden"
-            name="longitude"
-            class="long"
-            value="<%= item[0].long %>"
-          />
-          <div class="item-map"></div>
         </div>
+        <input
+          type="hidden"
+          name="latitude"
+          class="lat"
+          value="<%= item[0].lat %>"
+        />
+        <input
+          type="hidden"
+          name="longitude"
+          class="long"
+          value="<%= item[0].long %>"
+        />
+        <div class="item-map"></div>
+
         <div>
           <label for="">Quantity: </label>
           <input

diff --git a/views/new-item.ejs b/views/new-item.ejs
@@ -60,19 +60,19 @@
             <option value="Others">Others</option>
           </select>
         </div>
-        <div>
+        <div id="searchBoxContainer">
           <label for="">Place the pin where the item is located</label>
           <input
             type="text"
             class="item-location"
             name="address"
-            readonly
             placeholder="address will be displayed here"
           />
-          <input type="hidden" name="latitude" class="lat" />
-          <input type="hidden" name="longitude" class="long" />
-          <div class="item-map"></div>
         </div>
+        <input type="hidden" name="latitude" class="lat" />
+        <input type="hidden" name="longitude" class="long" />
+        <div class="item-map"></div>
+
         <div>
           <label for="">Quantity: </label>
           <input type="text" class="quantity" name="quantity" />