start the assignment of boundaries for a local search

project.task.yaml

@@ -6,6 +6,7 @@ tasks:
   - 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
 

src/db/tables/settings.ts

@@ -1,3 +1,10 @@
+export type BoundingBox = {
+  maxLat: number;
+  maxLong: number;
+  minLat: number;
+  minLong: number;
+};
+
 // a singleton
 export type Settings = {
   id: number; // there's only one entry: MASTER_SETTINGS_KEY
@@ -7,6 +14,7 @@ export type Settings = {
   firstName?: string;
   lastName?: string;
   lastViewedClaimId?: string;
+  searchBoxes?: Array<BoundingBox>;
   showContactGivesInline?: boolean;
 };
 

src/views/DiscoverView.vue

@@ -9,7 +9,7 @@
     </h1>
 
     <!-- Quick Search -->
-    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="search()">
+    <div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchAll()">
       <input
         type="text"
         v-model="searchTerms"
@@ -17,7 +17,7 @@
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
       />
       <button
-        @click="search()"
+        @click="searchAll()"
         class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
       >
         <fa icon="magnifying-glass" class="fa-fw"></fa>
@@ -49,7 +49,7 @@
             v-bind:class="computedRemoteTabClassNames()"
             @click="
               projects = [];
-              search();
+              searchAll();
             "
           >
             Remote
@@ -103,15 +103,55 @@
         </li>
       </ul>
     </InfiniteScroll>
-    <AlertMessage
-      :alertTitle="alertTitle"
-      :alertMessage="alertMessage"
-    ></AlertMessage>
+
+    <div
+      v-if="isLocalActive && searchBoxes.length === 0"
+      style="height: 600px; width: 800px"
+    >
+      <l-map
+        ref="map"
+        v-model:zoom="localZoom"
+        :center="[0, 0]"
+        @click="
+          (event) => {
+            localLatitude = event.latlng.lat;
+            localLongitude = 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="localLatitude || localLongitude"
+          :lat-lng="[localLatitude, localLongitude]"
+        />
+        <l-rectangle
+          :bounds="[
+            [localLatitude - 0.1, localLongitude - 0.1],
+            [localLatitude + 0.1, localLongitude + 0.1],
+          ]"
+          :color="ff7800"
+          :weight="1"
+        />
+      </l-map>
+    </div>
+
+    <AlertMessage :alertTitle="alertTitle" :alertMessage="alertMessage" />
   </section>
 </template>
 
 <script lang="ts">
+import "leaflet/dist/leaflet.css";
 import { Component, Vue } from "vue-facing-decorator";
+import {
+  LMap,
+  LMarker,
+  LRectangle,
+  LTileLayer,
+} from "@vue-leaflet/vue-leaflet";
 
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
@@ -124,7 +164,16 @@ import InfiniteScroll from "@/components/InfiniteScroll";
 import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { AlertMessage, QuickNav, InfiniteScroll, EntityIcon },
+  components: {
+    LRectangle,
+    AlertMessage,
+    QuickNav,
+    InfiniteScroll,
+    EntityIcon,
+    LMap,
+    LMarker,
+    LTileLayer,
+  },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
@@ -138,7 +187,11 @@ export default class DiscoverView extends Vue {
   isLocalActive = true;
   isRemoteActive = false;
   localCount = 0;
+  localLatitude = 0;
+  localLongitude = 0;
+  localZoom = 2;
   remoteCount = 0;
+  searchBoxes = [];
   isLoading = false;
 
   // make this function available to the Vue template
@@ -149,6 +202,7 @@ export default class DiscoverView extends Vue {
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
+    this.searchBoxes = settings?.searchBoxes || [];
     this.allContacts = await db.contacts.toArray();
 
     await accountsDB.open();
@@ -180,7 +234,7 @@ export default class DiscoverView extends Vue {
     return headers;
   }
 
-  public async search(beforeId?: string) {
+  public async searchAll(beforeId?: string) {
     let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms);
 
     if (beforeId) {
@@ -328,7 +382,7 @@ export default class DiscoverView extends Vue {
       if (this.isLocalActive) {
         this.searchLocal(latestProject["rowid"]);
       } else if (this.isRemoteActive) {
-        this.search(latestProject["rowid"]);
+        this.searchAll(latestProject["rowid"]);
       }
     }
   }