jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Trent Larson
2023-08-31 20:55:51 -06:00
parent 26d9b134c7
commit f7f947bfdd
2 changed files with 67 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
src/views/DiscoverView.vue
View File

@@ -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(
{