Browse Source

start the assignment of boundaries for a local search

search-bbox
Trent Larson 1 year ago
parent
commit
8ee610c1bc
  1. 1
      project.task.yaml
  2. 8
      src/db/tables/settings.ts
  3. 74
      src/views/DiscoverView.vue

1
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

8
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;
};

74
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"]);
}
}
}

Loading…
Cancel
Save