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

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

kb/add-usage-guide
Trent Larson 1 year ago
parent
26d9b134c7
commit
f7f947bfdd
2 changed files with 67 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      project.task.yaml
  2. 115
      src/views/DiscoverView.vue

6
project.task.yaml
View File

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

Write Preview
Loading…
Cancel
Save