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

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

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",

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",

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)
+- 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
+  - 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 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
+- .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 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
+- .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.

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 = "";
+  alertTitle = "";
+  alertMessage = "";
   apiServer = "";
-  projectName = "";
   description = "";
   errorMessage = "";
+  includeLocation = false;
+  latitude = 0;
+  longitude = 0;
   numAccounts = 0;
-  alertTitle = "";
+  projectName = "";
-  alertMessage = "";
+  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();
   }