Merge pull request 'add link to map on projects which have a location' (#61) from project-map-link into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/61

project.task.yaml

@@ -2,16 +2,12 @@
 tasks:
 - test alerts on all pages -- or refactor to new "notify" (since AlertMessage refactoring may require a change, et. ContactQRScanShowView)
 - .2 bug - on contacts view, click on "to" & "from" and nothing happens
-- 01 add a location for a project via map pin :
-  - add with a "location" field containing this: { "geo":{ "@type":"GeoCoordinates", "latitude":40.883944, "longitude":-111.884787 } }
 - 40 notifications :
   - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
 
-- 01 add a location for a project via map pin
+- 01 add my bounding box(es) of interest for searches on Nearby part of Discovery page
-- 04 search by a bounding box for local projects (see API by clicking on "Nearby")
+- .5 search by a bounding box(s) of interest for local projects (see API by clicking on "Nearby")
 - 01 Replace Gifted/Give in ContactsView with GiftedDialog assignee:matthew
-- 02 Fix images on projectview - allow choice of image from a pallete of images or a url image (discovery page display also)
-  - SEE: https://github.com/dmester/jdenticon assignee:jose
 
 - 08 Scan QR code to import into contacts assignee:matthew
   - SEE: https://github.com/gruhn/vue-qrcode-reader

src/main.ts

@@ -35,6 +35,7 @@ import {
   faGift,
   faHand,
   faHouseChimney,
+  faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
@@ -80,6 +81,7 @@ library.add(
   faGift,
   faHand,
   faHouseChimney,
+  faLocationDot,
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,

src/views/HomeView.vue

@@ -111,7 +111,7 @@
 
     <div class="mb-8">
       <h2 class="text-xl font-bold">Quick Action</h2>
-      <p class="mb-4">Show appreciation to a contact:</p>
+      <p class="mb-4">Record a gift from a contact:</p>
 
       <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
         <li @click="openDialog()">

src/views/ProjectViewView.vue

@@ -39,6 +39,16 @@
                 <fa icon="calendar" class="fa-fw text-slate-400"></fa>
                 {{ timeSince }}
               </div>
+              <div v-if="latitude || longitude">
+                <fa icon="location-dot" class="fa-fw text-slate-400"></fa>
+                <a
+                  :href="getOpenStreetMapUrl()"
+                  target="_blank"
+                  class="underline"
+                >
+                  Map View
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -231,6 +241,8 @@ export default class ProjectViewView extends Vue {
   expanded = false;
   givesToThis: Array<GiveServerRecord> = [];
   givesByThis: Array<GiveServerRecord> = [];
+  latitude = 0;
+  longitude = 0;
   name = "";
   issuer = "";
   projectId = localStorage.getItem("projectId") || ""; // handle ID
@@ -326,6 +338,8 @@ export default class ProjectViewView extends Vue {
         this.name = resp.data.claim?.name || "(no name)";
         this.description = resp.data.claim?.description || "(no description)";
         this.truncatedDesc = this.description.slice(0, this.truncateLength);
+        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
+        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
       } else if (resp.status === 404) {
         // actually, axios throws an error so we never get here
         this.$notify(
@@ -441,6 +455,20 @@ export default class ProjectViewView extends Vue {
     this.$refs.customDialog.open(contact);
   }
 
+  getOpenStreetMapUrl() {
+    // Google URL is https://maps.google.com/?q=LAT,LONG
+    return (
+      "https://www.openstreetmap.org/?mlat=" +
+      this.latitude +
+      "&mlon=" +
+      this.longitude +
+      "#map=15/" +
+      this.latitude +
+      "/" +
+      this.longitude
+    );
+  }
+
   handleDialogResult(result) {
     if (result.action === "confirm") {
       return new Promise((resolve) => {