finish selection of a location on the nearby search -- it all works :-)

project.task.yaml

@@ -5,11 +5,10 @@ tasks:
 - 40 notifications :
   - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew
 
-- 01 add my bounding box(es) of interest for searches on Nearby part of Discovery page
-- .5 fix the look-and-feel of the map on the Discovery page assignee-group:ui
-- .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 fix the Discovery map display to not show on top of bottom icons (and any other UI tweaks on the map flow) assignee-group:ui
+
 - 08 Scan QR code to import into contacts assignee:matthew
   - SEE: https://github.com/gruhn/vue-qrcode-reader
 
@@ -25,6 +24,7 @@ tasks:
 
 - 24 Move to Vite assignee:matthew
 
+- .2 Edit Plan does not have icons across the bottom assignee-group:ui
 - .5 include the hash of the latest commit, and maybe a version
 - .5 add link to further project / people when a project pays ahead
 - .5 add project ID to the URL, to make a project publicly-accessible

src/views/DiscoverView.vue

@@ -32,6 +32,8 @@
             href="#"
             @click="
               projects = [];
+              isLocalActive = true;
+              isRemoteActive = false;
               searchLocal();
             "
             v-bind:class="computedLocalTabClassNames()"
@@ -49,6 +51,8 @@
             v-bind:class="computedRemoteTabClassNames()"
             @click="
               projects = [];
+              isRemoteActive = true;
+              isLocalActive = false;
               searchAll();
             "
           >
@@ -72,22 +76,29 @@
         </button>
       </div>
       <div v-else>
-        <button v-if="!searchBox && !isMarkerSet" class="m-4 px-4 py-2">
+        <button v-if="!searchBox && !isNewMarkerSet" class="m-4 px-4 py-2">
           Choose Location Below for Nearby Search
         </button>
         <button
-          v-if="!searchBox && isMarkerSet"
+          v-if="isNewMarkerSet"
           class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="storeSearchBox"
         >
-          Save Location for Nearby Search
+          Store This Location for Nearby Search
         </button>
         <button
           v-if="searchBox"
           class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
           @click="forgetSearchBox"
         >
-          Delete Location for Nearby Search
+          Delete Stored Location
+        </button>
+        <button
+          v-if="isNewMarkerSet"
+          class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
+          @click="resetLatLong"
+        >
+          Reset Marker
         </button>
         <button
           class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500"
@@ -107,7 +118,7 @@
     </div>
 
     <!-- Results List -->
-    <InfiniteScroll @reached-bottom="loadMoreData">
+    <InfiniteScroll @reached-bottom="loadMoreData" v-if="!isChoosingSearchBox">
       <ul>
         <li
           class="border-b border-slate-300"
@@ -140,7 +151,10 @@
       </ul>
     </InfiniteScroll>
 
-    <div v-if="isChoosingSearchBox" style="height: 600px; width: 800px">
+    <div
+      v-if="isLocalActive && isChoosingSearchBox"
+      style="height: 600px; width: 800px"
+    >
       <l-map
         ref="map"
         :center="[localCenterLat, localCenterLong]"
@@ -153,12 +167,12 @@
           name="OpenStreetMap"
         />
         <l-marker
-          v-if="isMarkerSet"
+          v-if="isNewMarkerSet"
           :lat-lng="[localCenterLat, localCenterLong]"
-          @click="resetLatLong()"
+          @click="isNewMarkerSet = false"
         />
         <l-rectangle
-          v-if="isMarkerSet"
+          v-if="isNewMarkerSet"
           :bounds="[
             [localCenterLat - localLatDiff, localCenterLong - localLongDiff],
             [localCenterLat + localLatDiff, localCenterLong + localLongDiff],
@@ -184,7 +198,7 @@ import {
 
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
-import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { BoundingBox, MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { didInfo, ProjectData } from "@/libs/endorserServer";
 import AlertMessage from "@/components/AlertMessage";
@@ -220,7 +234,7 @@ export default class DiscoverView extends Vue {
   isChoosingSearchBox = false;
   isLocalActive = true;
   isRemoteActive = false;
-  isMarkerSet = false;
+  isNewMarkerSet = false;
   localCenterLat = 0;
   localCenterLong = 0;
   localLatDiff = DEFAULT_LAT_LONG_DIFF;
@@ -228,7 +242,7 @@ export default class DiscoverView extends Vue {
   localCount = 0;
   localZoom = DEFAULT_ZOOM;
   remoteCount = 0;
-  searchBox: BoundingBox | null = null;
+  searchBox: { name: string; bbox: BoundingBox } | null = null;
   isLoading = false;
 
   // make this function available to the Vue template
@@ -239,8 +253,9 @@ export default class DiscoverView extends Vue {
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
-    this.searchBox = settings?.searchBoxes?.[0];
+    this.searchBox = settings?.searchBoxes?.[0] || null;
     this.resetLatLong();
+
     this.allContacts = await db.contacts.toArray();
 
     await accountsDB.open();
@@ -279,9 +294,6 @@ export default class DiscoverView extends Vue {
       queryParams = queryParams + `&beforeId=${beforeId}`;
     }
 
-    this.isRemoteActive = true;
-    this.isLocalActive = false;
-
     try {
       this.isLoading = true;
       const response = await fetch(
@@ -336,14 +348,19 @@ export default class DiscoverView extends Vue {
   }
 
   public async searchLocal(beforeId?: string) {
+    if (!this.searchBox) {
+      this.projects = [];
+      return;
+    }
+
     const claimContents =
       "claimContents=" + encodeURIComponent(this.searchTerms);
     let queryParams = [
       claimContents,
-      "minLocLat=40.901000",
+      "minLocLat=" + this.searchBox.bbox.minLat,
-      "maxLocLat=40.904000",
+      "maxLocLat=" + this.searchBox.bbox.maxLat,
-      "westLocLon=-111.914000",
+      "westLocLon=" + this.searchBox.bbox.westLong,
-      "eastLocLon=-111.909000",
+      "eastLocLon=" + this.searchBox.bbox.eastLong,
     ].join("&");
 
     if (beforeId) {
@@ -352,8 +369,6 @@ export default class DiscoverView extends Vue {
 
     try {
       this.isLoading = true;
-      this.isLocalActive = true;
-      this.isRemoteActive = false;
       const response = await fetch(
         this.apiServer + "/api/v2/report/plansByLocation?" + queryParams,
         {
@@ -438,7 +453,7 @@ export default class DiscoverView extends Vue {
   }
 
   setMapPoint(event) {
-    if (this.isMarkerSet) {
+    if (this.isNewMarkerSet) {
       this.localLatDiff = Math.abs(event.latlng.lat - this.localCenterLat);
       this.localLongDiff = Math.abs(event.latlng.lng - this.localCenterLong);
     } else {
@@ -457,48 +472,43 @@ export default class DiscoverView extends Vue {
       }
       this.localLatDiff = latDiff;
       this.localLongDiff = longDiff;
-      this.isMarkerSet = true;
+      this.isNewMarkerSet = true;
     }
   }
 
   public resetLatLong() {
-    if (this.searchBox) {
+    if (this.searchBox?.bbox) {
-      this.localCenterLat = (this.searchBox.maxLat + this.searchBox.minLat) / 2;
+      const bbox = this.searchBox.bbox;
-      this.localCenterLong =
+      this.localCenterLat = (bbox.maxLat + bbox.minLat) / 2;
-        (this.searchBox.eastLong + this.searchBox.westLong) / 2;
+      this.localCenterLong = (bbox.eastLong + bbox.westLong) / 2;
-      this.localLatDiff = (this.searchBox.maxLat - this.searchBox.minLat) / 2;
+      this.localLatDiff = (bbox.maxLat - bbox.minLat) / 2;
-      this.localLongDiff =
+      this.localLongDiff = (bbox.eastLong - bbox.westLong) / 2;
-        (this.searchBox.eastLong - this.searchBox.westLong) / 2;
       this.localZoom = WORLD_ZOOM;
+      this.isNewMarkerSet = true;
+    } else {
+      this.isNewMarkerSet = false;
     }
-    // otherwise, don't change their viewport
-    this.isMarkerSet = false;
   }
 
   public async storeSearchBox() {
     if (this.localCenterLong || this.localCenterLat) {
       try {
+        const newSearchBox = {
+          name: "Local",
+          bbox: {
+            eastLong: this.localCenterLong + this.localLongDiff,
+            maxLat: this.localCenterLat + this.localLatDiff,
+            minLat: this.localCenterLat - this.localLatDiff,
+            westLong: this.localCenterLong - this.localLongDiff,
+          },
+        };
         await db.open();
         db.settings.update(MASTER_SETTINGS_KEY, {
-          searchBoxes: [
+          searchBoxes: [newSearchBox],
-            {
-              name: "Local",
-              bbox: {
-                eastLong: this.localCenterLong + this.localLongDiff,
-                maxLat: this.localCenterLat + this.localLatDiff,
-                minLat: this.localCenterLat - this.localLatDiff,
-                westLong: this.localCenterLong - this.localLongDiff,
-              },
-            },
-          ],
         });
-        this.searchBox = {
+        this.searchBox = newSearchBox;
-          eastLong: this.localCenterLong + this.localLongDiff,
+        this.isChoosingSearchBox = false;
-          maxLat: this.localCenterLat + this.localLatDiff,
+        this.searchLocal();
-          minLat: this.localCenterLat - this.localLatDiff,
-          westLong: this.localCenterLong - this.localLongDiff,
-        };
-        this.localZoom = WORLD_ZOOM;
       } catch (err) {
         this.$notify(
           {
@@ -539,6 +549,9 @@ export default class DiscoverView extends Vue {
       this.localLatDiff = DEFAULT_LAT_LONG_DIFF;
       this.localLongDiff = DEFAULT_LAT_LONG_DIFF;
       this.localZoom = DEFAULT_ZOOM;
+      this.isChoosingSearchBox = false;
+      this.isNewMarkerSet = false;
+      this.searchLocal();
     } catch (err) {
       this.$notify(
         {