Browse Source

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

search-bbox
Trent Larson 1 year ago
parent
commit
f7f947bfdd
  1. 6
      project.task.yaml
  2. 115
      src/views/DiscoverView.vue

6
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

115
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",
"maxLocLat=40.904000",
"westLocLon=-111.914000",
"eastLocLon=-111.909000",
"minLocLat=" + this.searchBox.bbox.minLat,
"maxLocLat=" + this.searchBox.bbox.maxLat,
"westLocLon=" + this.searchBox.bbox.westLong,
"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) {
this.localCenterLat = (this.searchBox.maxLat + this.searchBox.minLat) / 2;
this.localCenterLong =
(this.searchBox.eastLong + this.searchBox.westLong) / 2;
this.localLatDiff = (this.searchBox.maxLat - this.searchBox.minLat) / 2;
this.localLongDiff =
(this.searchBox.eastLong - this.searchBox.westLong) / 2;
if (this.searchBox?.bbox) {
const bbox = this.searchBox.bbox;
this.localCenterLat = (bbox.maxLat + bbox.minLat) / 2;
this.localCenterLong = (bbox.eastLong + bbox.westLong) / 2;
this.localLatDiff = (bbox.maxLat - bbox.minLat) / 2;
this.localLongDiff = (bbox.eastLong - bbox.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: [
{
name: "Local",
bbox: {
eastLong: this.localCenterLong + this.localLongDiff,
maxLat: this.localCenterLat + this.localLatDiff,
minLat: this.localCenterLat - this.localLatDiff,
westLong: this.localCenterLong - this.localLongDiff,
},
},
],
searchBoxes: [newSearchBox],
});
this.searchBox = {
eastLong: this.localCenterLong + this.localLongDiff,
maxLat: this.localCenterLat + this.localLatDiff,
minLat: this.localCenterLat - this.localLatDiff,
westLong: this.localCenterLong - this.localLongDiff,
};
this.localZoom = WORLD_ZOOM;
this.searchBox = newSearchBox;
this.isChoosingSearchBox = false;
this.searchLocal();
} 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(
{

Loading…
Cancel
Save