From 26d9b134c7088e5ece129ef9e1ad777aa9631c57 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Thu, 31 Aug 2023 18:58:34 -0600 Subject: [PATCH] refactor map selection, and now location selection & cancellation works (but not saving yet) --- README.md | 3 + src/db/tables/settings.ts | 9 +- src/views/DiscoverView.vue | 208 +++++++++++++++++++++++++++++++++---- 3 files changed, 194 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 7a84a33..93c1b8d 100644 --- a/README.md +++ b/README.md @@ -99,6 +99,9 @@ See https://tea.xyz ### Reference Material +* Notifications can be type of `toast` (self-dismiss), `info`, `success`, `warning`, and `danger`. + They are done via [notiwind](https://www.npmjs.com/package/notiwind) and set up in App.vue. + ``` // reference material from https://github.com/trentlarson/endorser-mobile/blob/8dc8e0353e0cc80ffa7ed89ded15c8b0da92726b/src/utility/idUtility.ts#L83 diff --git a/src/db/tables/settings.ts b/src/db/tables/settings.ts index e0eee3e..8298dfe 100644 --- a/src/db/tables/settings.ts +++ b/src/db/tables/settings.ts @@ -1,8 +1,8 @@ export type BoundingBox = { + eastLong: number; maxLat: number; - maxLong: number; minLat: number; - minLong: number; + westLong: number; }; // a singleton @@ -14,7 +14,10 @@ export type Settings = { firstName?: string; lastName?: string; lastViewedClaimId?: string; - searchBoxes?: Array; + searchBoxes?: Array<{ + name: string; + bbox: BoundingBox; + }>; showContactGivesInline?: boolean; }; diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue index cdaf2f1..07f6b32 100644 --- a/src/views/DiscoverView.vue +++ b/src/views/DiscoverView.vue @@ -62,6 +62,42 @@ +
+
+ +
+
+ + + + +
+
+
-
+
@@ -155,14 +184,18 @@ import { import { accountsDB, db } from "@/db"; import { Contact } from "@/db/tables/contacts"; -import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; +import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { accessToken } from "@/libs/crypto"; -import { didInfo } from "@/libs/endorserServer"; +import { didInfo, ProjectData } from "@/libs/endorserServer"; import AlertMessage from "@/components/AlertMessage"; import QuickNav from "@/components/QuickNav"; import InfiniteScroll from "@/components/InfiniteScroll"; import EntityIcon from "@/components/EntityIcon"; +const DEFAULT_LAT_LONG_DIFF = 0.01; +const WORLD_ZOOM = 2; +const DEFAULT_ZOOM = 2; + @Component({ components: { LRectangle, @@ -184,14 +217,18 @@ export default class DiscoverView extends Vue { alertMessage = ""; alertTitle = ""; projects: ProjectData[] = []; + isChoosingSearchBox = false; isLocalActive = true; isRemoteActive = false; + isMarkerSet = false; + localCenterLat = 0; + localCenterLong = 0; + localLatDiff = DEFAULT_LAT_LONG_DIFF; + localLongDiff = DEFAULT_LAT_LONG_DIFF; localCount = 0; - localLatitude = 0; - localLongitude = 0; - localZoom = 2; + localZoom = DEFAULT_ZOOM; remoteCount = 0; - searchBoxes = []; + searchBox: BoundingBox | null = null; isLoading = false; // make this function available to the Vue template @@ -202,7 +239,8 @@ 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.searchBox = settings?.searchBoxes?.[0]; + this.resetLatLong(); this.allContacts = await db.contacts.toArray(); await accountsDB.open(); @@ -399,6 +437,130 @@ export default class DiscoverView extends Vue { this.$router.push(route); } + setMapPoint(event) { + if (this.isMarkerSet) { + this.localLatDiff = Math.abs(event.latlng.lat - this.localCenterLat); + this.localLongDiff = Math.abs(event.latlng.lng - this.localCenterLong); + } else { + // marker is not set + this.localCenterLat = event.latlng.lat; + this.localCenterLong = event.latlng.lng; + + let latDiff = DEFAULT_LAT_LONG_DIFF; + let longDiff = DEFAULT_LAT_LONG_DIFF; + // Guess at a size for the bounding box. + // This doesn't seem like the right approach but it's the only way I can find to get the screen bounds. + const bounds = event.target.boxZoom?._map?.getBounds(); + if (bounds) { + latDiff = Math.abs(bounds._northEast.lat - bounds._southWest.lat) / 8; + longDiff = Math.abs(bounds._northEast.lng - bounds._southWest.lng) / 8; + } + this.localLatDiff = latDiff; + this.localLongDiff = longDiff; + this.isMarkerSet = 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; + this.localZoom = WORLD_ZOOM; + } + // otherwise, don't change their viewport + this.isMarkerSet = false; + } + + public async storeSearchBox() { + if (this.localCenterLong || this.localCenterLat) { + try { + 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, + }, + }, + ], + }); + 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; + } catch (err) { + this.$notify( + { + group: "alert", + type: "danger", + title: "Error Updating Search Settings", + text: "Try going to a different page and then coming back.", + }, + -1, + ); + console.error( + "Telling user to retry the location search setting because:", + err, + ); + } + } else { + this.$notify( + { + group: "alert", + type: "warning", + title: "No Location Selected", + text: "Select a location on the map.", + }, + -1, + ); + } + } + + public async forgetSearchBox() { + try { + await db.open(); + db.settings.update(MASTER_SETTINGS_KEY, { + searchBoxes: [], + }); + this.searchBox = null; + this.localCenterLat = 0; + this.localCenterLong = 0; + this.localLatDiff = DEFAULT_LAT_LONG_DIFF; + this.localLongDiff = DEFAULT_LAT_LONG_DIFF; + this.localZoom = DEFAULT_ZOOM; + } catch (err) { + this.$notify( + { + group: "alert", + type: "danger", + title: "Error Updating Search Settings", + text: "Try going to a different page and then coming back.", + }, + -1, + ); + console.error( + "Telling user to retry the location search setting because:", + err, + ); + } + } + + public cancelSearchBoxSelect() { + this.isChoosingSearchBox = false; + this.localZoom = WORLD_ZOOM; + } + public computedLocalTabClassNames() { return { "inline-block": true,