Browse Source

add link to map on projects which have a location

project-map-link
Trent Larson 1 year ago
parent
commit
c8de13d376
  1. 8
      project.task.yaml
  2. 2
      src/main.ts
  3. 2
      src/views/HomeView.vue
  4. 28
      src/views/ProjectViewView.vue

8
project.task.yaml

@ -2,16 +2,12 @@
tasks: tasks:
- test alerts on all pages -- or refactor to new "notify" (since AlertMessage refactoring may require a change, et. ContactQRScanShowView) - 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 - .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 : - 40 notifications :
- push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew - 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 - 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 - 08 Scan QR code to import into contacts assignee:matthew
- SEE: https://github.com/gruhn/vue-qrcode-reader - SEE: https://github.com/gruhn/vue-qrcode-reader

2
src/main.ts

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

2
src/views/HomeView.vue

@ -111,7 +111,7 @@
<div class="mb-8"> <div class="mb-8">
<h2 class="text-xl font-bold">Quick Action</h2> <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"> <ul class="grid grid-cols-4 gap-x-3 gap-y-5 text-center mb-5">
<li @click="openDialog()"> <li @click="openDialog()">

28
src/views/ProjectViewView.vue

@ -39,6 +39,16 @@
<fa icon="calendar" class="fa-fw text-slate-400"></fa> <fa icon="calendar" class="fa-fw text-slate-400"></fa>
{{ timeSince }} {{ timeSince }}
</div> </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> </div>
</div> </div>
@ -231,6 +241,8 @@ export default class ProjectViewView extends Vue {
expanded = false; expanded = false;
givesToThis: Array<GiveServerRecord> = []; givesToThis: Array<GiveServerRecord> = [];
givesByThis: Array<GiveServerRecord> = []; givesByThis: Array<GiveServerRecord> = [];
latitude = 0;
longitude = 0;
name = ""; name = "";
issuer = ""; issuer = "";
projectId = localStorage.getItem("projectId") || ""; // handle ID 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.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)"; this.description = resp.data.claim?.description || "(no description)";
this.truncatedDesc = this.description.slice(0, this.truncateLength); 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) { } else if (resp.status === 404) {
// actually, axios throws an error so we never get here // actually, axios throws an error so we never get here
this.$notify( this.$notify(
@ -441,6 +455,20 @@ export default class ProjectViewView extends Vue {
this.$refs.customDialog.open(contact); 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) { handleDialogResult(result) {
if (result.action === "confirm") { if (result.action === "confirm") {
return new Promise((resolve) => { return new Promise((resolve) => {

Loading…
Cancel
Save