Make addresses clickable to highlight stores on map, add button to ge…

…t directions GUI#138
dominicrutk · May 2, 2021 · e094fa2 · e094fa2
1 parent 8b4b742
commit e094fa2
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 7 deletions.
diff --git a/website/components/LocationDetails.vue b/website/components/LocationDetails.vue
@@ -55,8 +55,18 @@
             name: store.properties.provider_brand_name,
           })
         }}
-        <font-awesome-icon icon="arrow-alt-circle-right"
-      /></a>
+        <font-awesome-icon icon="arrow-alt-circle-right" />
+      </a>
+
+      <a
+        :href="directionsLink"
+        class="btn btn-primary"
+        target="_blank"
+        :rel="noopener"
+      >
+        {{ $t("Get Directions") }}
+        <font-awesome-icon icon="directions" />
+      </a>
     </div>
     <div v-else class="location-status">
       <div v-if="store.properties.appointments_available === false">
@@ -105,6 +115,12 @@
           <font-awesome-icon icon="external-link-alt"
         /></a>
       </p>
+      <p>
+        <a :href="directionsLink" target="_blank" :rel="noopener">
+          {{ $t("Get Directions") }}
+          <font-awesome-icon icon="external-link-alt" />
+        </a>
+      </p>
     </div>
 
     <p class="card-text text-secondary mt-2">
@@ -151,6 +167,20 @@ export default {
 
       return rel;
     },
+
+    directionsLink() {
+      return `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(
+        [
+          this.store.properties.address,
+          this.store.properties.city,
+          [this.store.properties.state, this.store.properties.postal_code]
+            .filter((value) => !!value)
+            .join(", "),
+        ]
+          .filter((value) => !!value)
+          .join(", ")
+      )}`;
+    },
   },
 };
 </script>

diff --git a/website/components/LocationMap.vue b/website/components/LocationMap.vue
@@ -178,8 +178,12 @@ export default {
       });
 
       this.map.on("click", "locations", (e) => {
-        const coordinates = e.features[0].geometry.coordinates.slice();
-        const store = e.features[0];
+        const store = e.highlightLocationId
+          ? e.features.find(
+              (feature) => feature.properties.id === e.highlightLocationId
+            )
+          : e.features[0];
+        const coordinates = store.geometry.coordinates.slice();
 
         // Nested JSON data in the properties is represented as JSON strings
         // (rather than actual objects) when fetching the object from the click
@@ -255,6 +259,28 @@ export default {
         this.mapBoundsAnimate = true;
       }
     },
+
+    highlightLocation(store) {
+      const [lng, lat] = store.geometry.coordinates;
+      this.map.panTo(
+        {
+          lon: lng,
+          lat,
+        },
+        {
+          duration: 250,
+        }
+      );
+      setTimeout(() => {
+        this.map.fire("click", {
+          lngLat: {
+            lng,
+            lat,
+          },
+          highlightLocationId: store.properties.id,
+        });
+      }, 500);
+    },
   },
 };
 </script>

diff --git a/website/components/Store.vue b/website/components/Store.vue
@@ -4,7 +4,13 @@
     <div class="card-header">
       <div class="row">
         <h5 class="col-sm mb-0">
-          {{ title }}
+          {{ title }} -
+          <a
+            href="javascript:void(0);"
+            @click="$emit('highlight-location', store)"
+          >
+            {{ fullAddress }}
+          </a>
         </h5>
         <div v-if="store.distance" class="col-sm-auto">
           {{ $t("{distance} miles", { distance: store.distance }) }}
@@ -37,7 +43,6 @@ export default {
       ) {
         title += ` - ${this.store.properties.name}`;
       }
-      title += ` - ${this.fullAddress}`;
 
       return title;
     },

diff --git a/website/pages/_state.vue b/website/pages/_state.vue
@@ -17,7 +17,7 @@
       <div class="container-fluid container-lg-no-padding">
         <div class="row g-3 g-lg-0">
           <div class="col-lg-6 col-map">
-            <location-map />
+            <location-map ref="locationMap" />
           </div>
           <div class="col-lg-6 col-list">
             <div class="results-container">
@@ -58,6 +58,9 @@
                 v-for="store in filteredLocationsPage"
                 :key="store.properties.id"
                 :store="store"
+                @highlight-location="
+                  $refs.locationMap.highlightLocation($event)
+                "
               ></store>
 
               <location-pagination

diff --git a/website/plugins/fontawesome.js b/website/plugins/fontawesome.js
@@ -7,6 +7,7 @@ import {
   faCheckCircle,
   faChevronLeft,
   faChevronRight,
+  faDirections,
   faExclamationTriangle,
   faTimesCircle,
   faExternalLinkAlt,
@@ -24,6 +25,7 @@ library.add(
   faCheckCircle,
   faChevronLeft,
   faChevronRight,
+  faDirections,
   faExclamationTriangle,
   faTimesCircle,
   faExternalLinkAlt,