Merge pull request 'add a location marker to a new plan' (#59) from plan-loc into master

Reviewed-on: trent_larson/kick-starter-for-time-pwa#59
2023-08-27 01:07:57 -04:00
parent f1b3094026 519f320a2e
commit 9b4db018f5
4 changed files with 102 additions and 16 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,6 +61,7 @@
        "@types/three": "^0.152.1",
        "@typescript-eslint/eslint-plugin": "^5.61.0",
        "@typescript-eslint/parser": "^5.61.0",
+        "@vue-leaflet/vue-leaflet": "^0.10.1",
        "@vue/cli-plugin-babel": "~5.0.8",
        "@vue/cli-plugin-eslint": "~5.0.8",
        "@vue/cli-plugin-pwa": "~5.0.8",
@@ -74,6 +75,7 @@
        "eslint-config-prettier": "^8.8.0",
        "eslint-plugin-prettier": "^5.0.0-alpha.1",
        "eslint-plugin-vue": "^9.15.1",
+        "leaflet": "^1.9.4",
        "postcss": "^8.4.24",
        "prettier": "^3.0.0",
        "tailwindcss": "^3.3.2",
@@ -9639,6 +9641,24 @@
        "uint8arrays": "^3.0.0"
      }
    },
+    "node_modules/@vue-leaflet/vue-leaflet": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@vue-leaflet/vue-leaflet/-/vue-leaflet-0.10.1.tgz",
+      "integrity": "sha512-RNEDk8TbnwrJl8ujdbKgZRFygLCxd0aBcWLQ05q/pGv4+d0jamE3KXQgQBqGAteE1mbQsk3xoNcqqUgaIGfWVg==",
+      "dev": true,
+      "dependencies": {
+        "vue": "^3.2.25"
+      },
+      "peerDependencies": {
+        "@types/leaflet": "^1.5.7",
+        "leaflet": "^1.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/leaflet": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@vue/babel-helper-vue-jsx-merge-props": {
      "version": "1.4.0",
      "resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
@@ -19067,6 +19087,12 @@
        "launch-editor": "^2.6.0"
      }
    },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
+      "dev": true
+    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/leven/-/leven-3.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
    "@types/three": "^0.152.1",
    "@typescript-eslint/eslint-plugin": "^5.61.0",
    "@typescript-eslint/parser": "^5.61.0",
+    "@vue-leaflet/vue-leaflet": "^0.10.1",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-pwa": "~5.0.8",
@@ -74,6 +75,7 @@
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^5.0.0-alpha.1",
    "eslint-plugin-vue": "^9.15.1",
+    "leaflet": "^1.9.4",
    "postcss": "^8.4.24",
    "prettier": "^3.0.0",
    "tailwindcss": "^3.3.2",
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -16,10 +16,10 @@ tasks:
 - 08 Scan QR code to import into contacts assignee:matthew
  - SEE: https://github.com/gruhn/vue-qrcode-reader

- 01 Show pop-up or some message confirming that settings & contacts download has been initiated/finished assignee:matthew
+- 01 Show pop-up or some message confirming that settings & contacts download has been initiated/finished assignee:matthew assignee-group:ui

- 01 Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s)
-  - SEE: https://github.com/emmanuelsw/notiwind assignee:jose
+- 01 Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s) assignee-group:ui
+  - SEE: https://github.com/emmanuelsw/notiwind assignee:jose assignee-group:ui

 - Home Feed & Quick Give screen :
  - 01 save the feed-viewed status in settings storage ("afterQuery")
@@ -33,10 +33,10 @@ tasks:
 - .5 add project ID to the URL, to make a project publicly-accessible
 - .5 remove edit from project page for projects owned by others
 - .5 fix where user 0 sees no txns from user 1 on contacts page but sees them on list page
- .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist
- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose
+- .2 on ProjectViewView, show different messages for "to" and "from" sections if none exist assignee-group:ui
+- .2 fix static icon to the right on project page (Matthew - I've made "Rotary" into issuer?) assignee:jose assignee-group:ui
 - .2 fix rate limit verbiage (with the new one-per-day allowance) assignee:trent
- .2 move 'switch identity' to the advanced section
+- .2 move 'switch identity' to the advanced section assignee-group:ui
 - .1 remove the logic to exclude beforeId in list of plans after server has commit 26b25af605e715600d4f12b6416ed9fd7142d164
 - .2 in SeedBackupView, don't load the mnemonic and keep it in memory; only load it when they click "show"

@@ -45,10 +45,12 @@ tasks:
 - 04 allow user to download claims, mine + ones I can see about me from others
 - .5 change the derivation path, and regenerate test IDs
 - 02 allow user to create new DIDs from the same seed phrase (ie. increment derivation path)
- .5 on ProjectView page, show immediate feedback when a gift is given (on list?) -- and consider the same for Home & Contacts pages
- .5 customize favicon
+- .5 on ProjectView page, show immediate feedback when a gift is given (on list?) -- and consider the same for Home & Contacts pages assignee-group:ui
+- .5 customize favicon assignee-group:ui
 - .5 Do we want to combine first name & last name?
- .2 Show a warning if both giver and recipient are the same (but still allow?)
+- .2 Show a warning if both giver and recipient are the same (but still allow?) assignee-group:ui
+- 01 Would it look better to shrink the buttons on many pages so they don't expand to the width of the screen? assignee-group:ui
+- .5 Display a more appealing confirmation on the map when erasing the marker assignee-group:ui

 - contacts v+ :
  - 01 Import all the non-sensitive data (ie. contacts & settings).
@@ -66,7 +68,6 @@ tasks:
  - 08 thorough testing for errors & edge cases
  - Turn off stats-world or ensure it's usable (eg. cannot zoom out too far and lose world, cannot screenshot).
  - Add disclaimers.
-  - Rename DB to TimeSafari.
  - Switch default server to the public server.
  - Deploy to a server.
  - Ensure public server has limits that work for group adoption.
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -39,6 +39,40 @@
      {{ description.length }}/500 max. characters
    </div>

+    <div class="flex items-center mb-4">
+      <input
+        type="checkbox"
+        class="mr-2"
+        v-model="includeLocation"
+        @change="includeLocation = true"
+      />
+      <label for="includeLocation">Include Location</label>
+    </div>
+    <div v-if="includeLocation" style="height: 600px; width: 800px">
+      <l-map
+        ref="map"
+        v-model:zoom="zoom"
+        :center="[0, 0]"
+        @click="
+          (event) => {
+            latitude = event.latlng.lat;
+            longitude = event.latlng.lng;
+          }
+        "
+      >
+        <l-tile-layer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          layer-type="base"
+          name="OpenStreetMap"
+        />
+        <l-marker
+          v-if="latitude || longitude"
+          :lat-lng="[latitude, longitude]"
+          @click="maybeEraseLatLong()"
+        />
+      </l-map>
+    </div>
+
    <div class="mt-8">
      <button
        :disabled="isHiddenSave"
@@ -71,9 +105,11 @@
 </template>

 <script lang="ts">
+import "leaflet/dist/leaflet.css";
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import { Component, Vue } from "vue-facing-decorator";
+import { LMap, LMarker, LTileLayer } from "@vue-leaflet/vue-leaflet";

 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -83,17 +119,21 @@ import { IIdentifier } from "@veramo/core";
 import AlertMessage from "@/components/AlertMessage";

@Component({
-  components: { AlertMessage },
+  components: { AlertMessage, LMap, LMarker, LTileLayer },
 })
 export default class NewEditProjectView extends Vue {
  activeDid = "";
-  apiServer = "";
-  projectName = "";
-  description = "";
-  errorMessage = "";
-  numAccounts = 0;
  alertTitle = "";
  alertMessage = "";
+  apiServer = "";
+  description = "";
+  errorMessage = "";
+  includeLocation = false;
+  latitude = 0;
+  longitude = 0;
+  numAccounts = 0;
+  projectName = "";
+  zoom = 2;

  async beforeCreate() {
    await accountsDB.open();
@@ -185,6 +225,15 @@ export default class NewEditProjectView extends Vue {
    if (this.projectId) {
      vcClaim.identifier = this.projectId;
    }
+    if (this.includeLocation) {
+      vcClaim.location = {
+        geo: {
+          "@type": "GeoCoordinates",
+          latitude: this.latitude,
+          longitude: this.longitude,
+        },
+      };
+    }
    // Make a payload for the claim
    const vcPayload = {
      vc: {
@@ -299,6 +348,14 @@ export default class NewEditProjectView extends Vue {
    }
  }

+  public maybeEraseLatLong() {
+    if (window.confirm("Are you sure you don't want to mark a location?")) {
+      this.latitude = 0;
+      this.longitude = 0;
+      this.includeLocation = false;
+    }
+  }
+
  public onCancelClick() {
    this.$router.back();
  }