|
|
@ -9,7 +9,7 @@ |
|
|
|
</h1> |
|
|
|
|
|
|
|
<!-- Quick Search --> |
|
|
|
<div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="search()"> |
|
|
|
<div id="QuickSearch" class="mb-4 flex" v-on:keyup.enter="searchAll()"> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
v-model="searchTerms" |
|
|
@ -17,7 +17,7 @@ |
|
|
|
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2" |
|
|
|
/> |
|
|
|
<button |
|
|
|
@click="search()" |
|
|
|
@click="searchAll()" |
|
|
|
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" |
|
|
|
> |
|
|
|
<fa icon="magnifying-glass" class="fa-fw"></fa> |
|
|
@ -49,7 +49,7 @@ |
|
|
|
v-bind:class="computedRemoteTabClassNames()" |
|
|
|
@click=" |
|
|
|
projects = []; |
|
|
|
search(); |
|
|
|
searchAll(); |
|
|
|
" |
|
|
|
> |
|
|
|
Remote |
|
|
@ -103,15 +103,55 @@ |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</InfiniteScroll> |
|
|
|
<AlertMessage |
|
|
|
:alertTitle="alertTitle" |
|
|
|
:alertMessage="alertMessage" |
|
|
|
></AlertMessage> |
|
|
|
|
|
|
|
<div |
|
|
|
v-if="isLocalActive && searchBoxes.length === 0" |
|
|
|
style="height: 600px; width: 800px" |
|
|
|
> |
|
|
|
<l-map |
|
|
|
ref="map" |
|
|
|
v-model:zoom="localZoom" |
|
|
|
:center="[0, 0]" |
|
|
|
@click=" |
|
|
|
(event) => { |
|
|
|
localLatitude = event.latlng.lat; |
|
|
|
localLongitude = event.latlng.lng; |
|
|
|
} |
|
|
|
" |
|
|
|
> |
|
|
|
<l-tile-layer |
|
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" |
|
|
|
layer-type="base" |
|
|
|
name="OpenStreetMap" |
|
|
|
/> |
|
|
|
<l-marker |
|
|
|
v-if="localLatitude || localLongitude" |
|
|
|
:lat-lng="[localLatitude, localLongitude]" |
|
|
|
/> |
|
|
|
<l-rectangle |
|
|
|
:bounds="[ |
|
|
|
[localLatitude - 0.1, localLongitude - 0.1], |
|
|
|
[localLatitude + 0.1, localLongitude + 0.1], |
|
|
|
]" |
|
|
|
:color="ff7800" |
|
|
|
:weight="1" |
|
|
|
/> |
|
|
|
</l-map> |
|
|
|
</div> |
|
|
|
|
|
|
|
<AlertMessage :alertTitle="alertTitle" :alertMessage="alertMessage" /> |
|
|
|
</section> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts"> |
|
|
|
import "leaflet/dist/leaflet.css"; |
|
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
|
import { |
|
|
|
LMap, |
|
|
|
LMarker, |
|
|
|
LRectangle, |
|
|
|
LTileLayer, |
|
|
|
} from "@vue-leaflet/vue-leaflet"; |
|
|
|
|
|
|
|
import { accountsDB, db } from "@/db"; |
|
|
|
import { Contact } from "@/db/tables/contacts"; |
|
|
@ -124,7 +164,16 @@ import InfiniteScroll from "@/components/InfiniteScroll"; |
|
|
|
import EntityIcon from "@/components/EntityIcon"; |
|
|
|
|
|
|
|
@Component({ |
|
|
|
components: { AlertMessage, QuickNav, InfiniteScroll, EntityIcon }, |
|
|
|
components: { |
|
|
|
LRectangle, |
|
|
|
AlertMessage, |
|
|
|
QuickNav, |
|
|
|
InfiniteScroll, |
|
|
|
EntityIcon, |
|
|
|
LMap, |
|
|
|
LMarker, |
|
|
|
LTileLayer, |
|
|
|
}, |
|
|
|
}) |
|
|
|
export default class DiscoverView extends Vue { |
|
|
|
activeDid = ""; |
|
|
@ -138,7 +187,11 @@ export default class DiscoverView extends Vue { |
|
|
|
isLocalActive = true; |
|
|
|
isRemoteActive = false; |
|
|
|
localCount = 0; |
|
|
|
localLatitude = 0; |
|
|
|
localLongitude = 0; |
|
|
|
localZoom = 2; |
|
|
|
remoteCount = 0; |
|
|
|
searchBoxes = []; |
|
|
|
isLoading = false; |
|
|
|
|
|
|
|
// make this function available to the Vue template |
|
|
@ -149,6 +202,7 @@ 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.allContacts = await db.contacts.toArray(); |
|
|
|
|
|
|
|
await accountsDB.open(); |
|
|
@ -180,7 +234,7 @@ export default class DiscoverView extends Vue { |
|
|
|
return headers; |
|
|
|
} |
|
|
|
|
|
|
|
public async search(beforeId?: string) { |
|
|
|
public async searchAll(beforeId?: string) { |
|
|
|
let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms); |
|
|
|
|
|
|
|
if (beforeId) { |
|
|
@ -328,7 +382,7 @@ export default class DiscoverView extends Vue { |
|
|
|
if (this.isLocalActive) { |
|
|
|
this.searchLocal(latestProject["rowid"]); |
|
|
|
} else if (this.isRemoteActive) { |
|
|
|
this.search(latestProject["rowid"]); |
|
|
|
this.searchAll(latestProject["rowid"]); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|