6 changed files with 304 additions and 212 deletions
@ -0,0 +1,281 @@ |
|||
<template> |
|||
<!-- CONTENT --> |
|||
<section id="Content" class="p-6 pb-24"> |
|||
<!-- Breadcrumb --> |
|||
<div class="mb-8"> |
|||
<!-- Back --> |
|||
<div class="text-lg text-center font-light relative px-7"> |
|||
<h1 |
|||
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1" |
|||
@click="$router.back()" |
|||
> |
|||
<fa icon="chevron-left" class="fa-fw"></fa> |
|||
</h1> |
|||
</div> |
|||
|
|||
<!-- Heading --> |
|||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> |
|||
Area for Nearby Search |
|||
</h1> |
|||
</div> |
|||
|
|||
<div class="px-2 py-4"> |
|||
This location is only stored on your device. It is used to show you more |
|||
appropriate projects but is not stored on any servers. |
|||
</div> |
|||
|
|||
<div> |
|||
<button v-if="!searchBox && !isNewMarkerSet" class="m-4 px-4 py-2"> |
|||
Click to Choose a Location for Nearby Search |
|||
</button> |
|||
<button |
|||
v-if="isNewMarkerSet" |
|||
class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500" |
|||
@click="storeSearchBox" |
|||
> |
|||
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 Stored Location |
|||
</button> |
|||
<button |
|||
v-if="searchBox" |
|||
class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500" |
|||
@click="resetLatLong" |
|||
> |
|||
Reset Marker |
|||
</button> |
|||
<button |
|||
v-if="isNewMarkerSet" |
|||
class="m-4 px-4 py-2 rounded-md bg-blue-200 text-blue-500" |
|||
@click="isNewMarkerSet = false" |
|||
> |
|||
Erase Marker |
|||
</button> |
|||
<div v-if="isNewMarkerSet"> |
|||
Click on the pin to erase it. Click anywhere else to set a different |
|||
different corner. |
|||
</div> |
|||
</div> |
|||
|
|||
<div style="height: 600px; width: 800px"> |
|||
<l-map |
|||
ref="map" |
|||
:center="[localCenterLat, localCenterLong]" |
|||
v-model:zoom="localZoom" |
|||
@click="setMapPoint" |
|||
> |
|||
<l-tile-layer |
|||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
|||
layer-type="base" |
|||
name="OpenStreetMap" |
|||
/> |
|||
<l-marker |
|||
v-if="isNewMarkerSet" |
|||
:lat-lng="[localCenterLat, localCenterLong]" |
|||
@click="isNewMarkerSet = false" |
|||
/> |
|||
<l-rectangle |
|||
v-if="isNewMarkerSet" |
|||
:bounds="[ |
|||
[localCenterLat - localLatDiff, localCenterLong - localLongDiff], |
|||
[localCenterLat + localLatDiff, localCenterLong + localLongDiff], |
|||
]" |
|||
:weight="1" |
|||
/> |
|||
</l-map> |
|||
</div> |
|||
</section> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { LeafletMouseEvent } from "leaflet"; |
|||
import "leaflet/dist/leaflet.css"; |
|||
import { Component, Vue } from "vue-facing-decorator"; |
|||
import { |
|||
LMap, |
|||
LMarker, |
|||
LRectangle, |
|||
LTileLayer, |
|||
} from "@vue-leaflet/vue-leaflet"; |
|||
|
|||
import { db } from "@/db/index"; |
|||
import { BoundingBox, MASTER_SETTINGS_KEY } from "@/db/tables/settings"; |
|||
|
|||
const DEFAULT_LAT_LONG_DIFF = 0.01; |
|||
const WORLD_ZOOM = 2; |
|||
const DEFAULT_ZOOM = 2; |
|||
|
|||
interface Notification { |
|||
group: string; |
|||
type: string; |
|||
title: string; |
|||
text: string; |
|||
} |
|||
|
|||
@Component({ |
|||
components: { |
|||
LRectangle, |
|||
LMap, |
|||
LMarker, |
|||
LTileLayer, |
|||
}, |
|||
}) |
|||
export default class DiscoverView extends Vue { |
|||
$notify!: (notification: Notification, timeout?: number) => void; |
|||
|
|||
isChoosingSearchBox = false; |
|||
isNewMarkerSet = false; |
|||
|
|||
// "local" vars are for the currently selected map box |
|||
localCenterLat = 0; |
|||
localCenterLong = 0; |
|||
localLatDiff = DEFAULT_LAT_LONG_DIFF; |
|||
localLongDiff = DEFAULT_LAT_LONG_DIFF; |
|||
localZoom = DEFAULT_ZOOM; |
|||
|
|||
// searchBox reflects what is stored in the database |
|||
searchBox: { name: string; bbox: BoundingBox } | null = null; |
|||
|
|||
async mounted() { |
|||
await db.open(); |
|||
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
|||
this.searchBox = settings?.searchBoxes?.[0] || null; |
|||
this.resetLatLong(); |
|||
} |
|||
|
|||
setMapPoint(event: LeafletMouseEvent) { |
|||
if (this.isNewMarkerSet) { |
|||
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.isNewMarkerSet = true; |
|||
} |
|||
} |
|||
|
|||
public resetLatLong() { |
|||
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; |
|||
} |
|||
} |
|||
|
|||
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: [newSearchBox], |
|||
}); |
|||
this.searchBox = newSearchBox; |
|||
this.isChoosingSearchBox = false; |
|||
|
|||
this.$notify( |
|||
{ |
|||
group: "alert", |
|||
type: "success", |
|||
title: "Saved", |
|||
text: "That has been saved in your preferences.", |
|||
}, |
|||
-1, |
|||
); |
|||
} 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; |
|||
this.isChoosingSearchBox = false; |
|||
this.isNewMarkerSet = false; |
|||
} 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; |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue