|
|
@ -6,7 +6,7 @@ |
|
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|
|
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto"> |
|
|
<!-- Heading --> |
|
|
<!-- Heading --> |
|
|
<h1 id="ViewHeading" class="text-4xl text-center font-light"> |
|
|
<h1 id="ViewHeading" class="text-4xl text-center font-light"> |
|
|
Discover Projects |
|
|
Discover Projects & People |
|
|
</h1> |
|
|
</h1> |
|
|
|
|
|
|
|
|
<OnboardingDialog ref="onboardingDialog" /> |
|
|
<OnboardingDialog ref="onboardingDialog" /> |
|
|
@ -15,7 +15,6 @@ |
|
|
<div |
|
|
<div |
|
|
id="QuickSearch" |
|
|
id="QuickSearch" |
|
|
class="mt-8 mb-4 flex" |
|
|
class="mt-8 mb-4 flex" |
|
|
v-on:keyup.enter="searchSelected()" |
|
|
|
|
|
:style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }" |
|
|
:style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }" |
|
|
> |
|
|
> |
|
|
<input |
|
|
<input |
|
|
@ -23,16 +22,54 @@ |
|
|
v-model="searchTerms" |
|
|
v-model="searchTerms" |
|
|
placeholder="Search…" |
|
|
placeholder="Search…" |
|
|
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2" |
|
|
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2" |
|
|
|
|
|
v-on:keyup.enter="searchSelected()" |
|
|
/> |
|
|
/> |
|
|
<button |
|
|
<button |
|
|
@click="searchSelected()" |
|
|
|
|
|
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" |
|
|
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400" |
|
|
|
|
|
@click="searchSelected()" |
|
|
> |
|
|
> |
|
|
<fa icon="magnifying-glass" class="fa-fw"></fa> |
|
|
<fa icon="magnifying-glass" class="fa-fw"></fa> |
|
|
</button> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<!-- Result Tabs --> |
|
|
<!-- Result Tabs --> |
|
|
|
|
|
<!-- Top Level Selection --> |
|
|
|
|
|
<div class="text-center text-slate-500 border-b border-slate-300 mb-4"> |
|
|
|
|
|
<ul class="flex flex-wrap justify-center gap-4 -mb-px"> |
|
|
|
|
|
<li> |
|
|
|
|
|
<a |
|
|
|
|
|
href="#" |
|
|
|
|
|
@click=" |
|
|
|
|
|
projects = []; |
|
|
|
|
|
userProfiles = []; |
|
|
|
|
|
isProjectsActive = true; |
|
|
|
|
|
isPeopleActive = false; |
|
|
|
|
|
searchSelected(); |
|
|
|
|
|
" |
|
|
|
|
|
v-bind:class="computedProjectsTabStyleClassNames()" |
|
|
|
|
|
> |
|
|
|
|
|
Projects |
|
|
|
|
|
</a> |
|
|
|
|
|
</li> |
|
|
|
|
|
<li> |
|
|
|
|
|
<a |
|
|
|
|
|
href="#" |
|
|
|
|
|
@click=" |
|
|
|
|
|
projects = []; |
|
|
|
|
|
userProfiles = []; |
|
|
|
|
|
isProjectsActive = false; |
|
|
|
|
|
isPeopleActive = true; |
|
|
|
|
|
searchSelected(); |
|
|
|
|
|
" |
|
|
|
|
|
v-bind:class="computedPeopleTabStyleClassNames()" |
|
|
|
|
|
> |
|
|
|
|
|
People |
|
|
|
|
|
</a> |
|
|
|
|
|
</li> |
|
|
|
|
|
</ul> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Secondary Tabs --> |
|
|
<div class="text-center text-slate-500 border-b border-slate-300"> |
|
|
<div class="text-center text-slate-500 border-b border-slate-300"> |
|
|
<ul class="flex flex-wrap justify-center gap-4 -mb-px"> |
|
|
<ul class="flex flex-wrap justify-center gap-4 -mb-px"> |
|
|
<li> |
|
|
<li> |
|
|
@ -40,9 +77,10 @@ |
|
|
href="#" |
|
|
href="#" |
|
|
@click=" |
|
|
@click=" |
|
|
projects = []; |
|
|
projects = []; |
|
|
|
|
|
userProfiles = []; |
|
|
isLocalActive = true; |
|
|
isLocalActive = true; |
|
|
isMappedActive = false; |
|
|
isMappedActive = false; |
|
|
isRemoteActive = false; |
|
|
isAnywhereActive = false; |
|
|
isSearchVisible = true; |
|
|
isSearchVisible = true; |
|
|
tempSearchBox = null; |
|
|
tempSearchBox = null; |
|
|
searchLocal(); |
|
|
searchLocal(); |
|
|
@ -65,15 +103,17 @@ |
|
|
href="#" |
|
|
href="#" |
|
|
@click=" |
|
|
@click=" |
|
|
projects = []; |
|
|
projects = []; |
|
|
|
|
|
userProfiles = []; |
|
|
isLocalActive = false; |
|
|
isLocalActive = false; |
|
|
isMappedActive = true; |
|
|
isMappedActive = true; |
|
|
isRemoteActive = false; |
|
|
isAnywhereActive = false; |
|
|
isSearchVisible = false; |
|
|
isSearchVisible = false; |
|
|
searchTerms = ''; |
|
|
searchTerms = ''; |
|
|
tempSearchBox = null; |
|
|
tempSearchBox = null; |
|
|
" |
|
|
" |
|
|
v-bind:class="computedMappedTabStyleClassNames()" |
|
|
v-bind:class="computedMappedTabStyleClassNames()" |
|
|
> |
|
|
> |
|
|
|
|
|
<!-- search is triggered when map component gets to "ready" state --> |
|
|
Mapped |
|
|
Mapped |
|
|
</a> |
|
|
</a> |
|
|
</li> |
|
|
</li> |
|
|
@ -82,9 +122,10 @@ |
|
|
href="#" |
|
|
href="#" |
|
|
@click=" |
|
|
@click=" |
|
|
projects = []; |
|
|
projects = []; |
|
|
|
|
|
userProfiles = []; |
|
|
isLocalActive = false; |
|
|
isLocalActive = false; |
|
|
isMappedActive = false; |
|
|
isMappedActive = false; |
|
|
isRemoteActive = true; |
|
|
isAnywhereActive = true; |
|
|
isSearchVisible = true; |
|
|
isSearchVisible = true; |
|
|
tempSearchBox = null; |
|
|
tempSearchBox = null; |
|
|
searchAll(); |
|
|
searchAll(); |
|
|
@ -95,7 +136,7 @@ |
|
|
<!-- restore when the links don't jump around for different numbers |
|
|
<!-- restore when the links don't jump around for different numbers |
|
|
<span |
|
|
<span |
|
|
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" |
|
|
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" |
|
|
v-if="isRemoteActive" |
|
|
v-if="isAnywhereActive" |
|
|
> |
|
|
> |
|
|
{{ remoteCount > -1 ? remoteCount : "?" }} |
|
|
{{ remoteCount > -1 ? remoteCount : "?" }} |
|
|
</span> |
|
|
</span> |
|
|
@ -143,13 +184,13 @@ |
|
|
> |
|
|
> |
|
|
<fa icon="spinner" class="fa-spin-pulse"></fa> |
|
|
<fa icon="spinner" class="fa-spin-pulse"></fa> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="projects.length === 0" class="text-center mt-8"> |
|
|
<div v-else-if="projects.length === 0 && userProfiles.length === 0" class="text-center mt-8"> |
|
|
<p class="text-lg text-slate-500"> |
|
|
<p class="text-lg text-slate-500"> |
|
|
<span v-if="isLocalActive"> |
|
|
<span v-if="isLocalActive"> |
|
|
<span v-if="searchBox"> None found in the selected area. </span> |
|
|
<span v-if="searchBox"> None found in the selected area. </span> |
|
|
<!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. --> |
|
|
<!-- Otherwise there's no search area selected so we'll just leave the search box for them to click. --> |
|
|
</span> |
|
|
</span> |
|
|
<span v-else-if="isRemoteActive" |
|
|
<span v-else-if="isAnywhereActive" |
|
|
>No projects were found with that search.</span |
|
|
>No projects were found with that search.</span |
|
|
> |
|
|
> |
|
|
</p> |
|
|
</p> |
|
|
@ -158,35 +199,68 @@ |
|
|
<!-- Results List --> |
|
|
<!-- Results List --> |
|
|
<InfiniteScroll @reached-bottom="loadMoreData"> |
|
|
<InfiniteScroll @reached-bottom="loadMoreData"> |
|
|
<ul id="listDiscoverResults"> |
|
|
<ul id="listDiscoverResults"> |
|
|
<li |
|
|
<!-- Projects List --> |
|
|
class="border-b border-slate-300" |
|
|
<template v-if="isProjectsActive"> |
|
|
v-for="project in projects" |
|
|
<li |
|
|
:key="project.handleId" |
|
|
class="border-b border-slate-300" |
|
|
> |
|
|
v-for="project in projects" |
|
|
<a |
|
|
:key="project.handleId" |
|
|
@click="onClickLoadProject(project.handleId)" |
|
|
|
|
|
class="block py-4 flex gap-4 cursor-pointer" |
|
|
|
|
|
> |
|
|
> |
|
|
<div> |
|
|
<a |
|
|
<ProjectIcon |
|
|
@click="onClickLoadItem(project.handleId)" |
|
|
:entityId="project.handleId" |
|
|
class="block py-4 flex gap-4 cursor-pointer" |
|
|
:iconSize="48" |
|
|
> |
|
|
:imageUrl="project.image" |
|
|
<div> |
|
|
class="block border border-slate-300 rounded-md max-h-12 max-w-12" |
|
|
<ProjectIcon |
|
|
/> |
|
|
:entityId="project.handleId" |
|
|
</div> |
|
|
:iconSize="48" |
|
|
|
|
|
:imageUrl="project.image" |
|
|
<div class="grow"> |
|
|
class="block border border-slate-300 rounded-md max-h-12 max-w-12" |
|
|
<h2 class="text-base font-semibold">{{ project.name }}</h2> |
|
|
/> |
|
|
<div class="text-sm"> |
|
|
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
|
|
{{ |
|
|
|
|
|
didInfo(project.issuerDid, activeDid, allMyDids, allContacts) |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</a> |
|
|
<div class="grow"> |
|
|
</li> |
|
|
<h2 class="text-base font-semibold">{{ project.name }}</h2> |
|
|
|
|
|
<div class="text-sm"> |
|
|
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
|
|
{{ |
|
|
|
|
|
didInfo(project.issuerDid, activeDid, allMyDids, allContacts) |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</a> |
|
|
|
|
|
</li> |
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Profiles List --> |
|
|
|
|
|
<template v-else> |
|
|
|
|
|
<li |
|
|
|
|
|
class="border-b border-slate-300" |
|
|
|
|
|
v-for="profile in userProfiles" |
|
|
|
|
|
:key="profile.issuerDid" |
|
|
|
|
|
> |
|
|
|
|
|
<a |
|
|
|
|
|
@click="onClickLoadItem(profile.issuerDid)" |
|
|
|
|
|
class="block py-4 flex gap-4 cursor-pointer" |
|
|
|
|
|
> |
|
|
|
|
|
<div class="grow"> |
|
|
|
|
|
<div class="text-sm"> |
|
|
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
|
|
{{ |
|
|
|
|
|
didInfo(profile.issuerDid, activeDid, allMyDids, allContacts) |
|
|
|
|
|
}} |
|
|
|
|
|
</div> |
|
|
|
|
|
<p v-if="profile.description" class="mt-1 text-sm text-slate-600"> |
|
|
|
|
|
{{ profile.description }} |
|
|
|
|
|
</p> |
|
|
|
|
|
<div v-if="profile.locLat && profile.locLon" class="mt-1 text-xs text-slate-500"> |
|
|
|
|
|
<fa icon="location-dot" class="fa-fw"></fa> |
|
|
|
|
|
{{ profile.locLat.toFixed(2) }}, {{ profile.locLon.toFixed(2) }} |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</a> |
|
|
|
|
|
</li> |
|
|
|
|
|
</template> |
|
|
</ul> |
|
|
</ul> |
|
|
</InfiniteScroll> |
|
|
</InfiniteScroll> |
|
|
</section> |
|
|
</section> |
|
|
@ -197,14 +271,14 @@ import "leaflet/dist/leaflet.css"; |
|
|
import * as L from "leaflet"; |
|
|
import * as L from "leaflet"; |
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
import { Component, Vue } from "vue-facing-decorator"; |
|
|
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet"; |
|
|
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet"; |
|
|
import { Router } from "vue-router"; |
|
|
import { Router, RouteLocationNormalizedLoaded } from "vue-router"; |
|
|
|
|
|
|
|
|
import QuickNav from "@/components/QuickNav.vue"; |
|
|
import QuickNav from "@/components/QuickNav.vue"; |
|
|
import InfiniteScroll from "@/components/InfiniteScroll.vue"; |
|
|
import InfiniteScroll from "@/components/InfiniteScroll.vue"; |
|
|
import ProjectIcon from "@/components/ProjectIcon.vue"; |
|
|
import ProjectIcon from "@/components/ProjectIcon.vue"; |
|
|
import OnboardingDialog from "@/components/OnboardingDialog.vue"; |
|
|
import OnboardingDialog from "@/components/OnboardingDialog.vue"; |
|
|
import TopMessage from "@/components/TopMessage.vue"; |
|
|
import TopMessage from "@/components/TopMessage.vue"; |
|
|
import { NotificationIface } from "@/constants/app"; |
|
|
import { DEFAULT_PARTNER_API_SERVER, NotificationIface } from "@/constants/app"; |
|
|
import { |
|
|
import { |
|
|
db, |
|
|
db, |
|
|
logConsoleAndDb, |
|
|
logConsoleAndDb, |
|
|
@ -218,8 +292,19 @@ import { |
|
|
getHeaders, |
|
|
getHeaders, |
|
|
PlanData, |
|
|
PlanData, |
|
|
} from "@/libs/endorserServer"; |
|
|
} from "@/libs/endorserServer"; |
|
|
|
|
|
import { UserProfile } from "@/libs/partnerServer"; |
|
|
import { OnboardPage, retrieveAccountDids } from "@/libs/util"; |
|
|
import { OnboardPage, retrieveAccountDids } from "@/libs/util"; |
|
|
|
|
|
|
|
|
|
|
|
interface Tile { |
|
|
|
|
|
indexLat: number; |
|
|
|
|
|
indexLon: number; |
|
|
|
|
|
minFoundLat: number; |
|
|
|
|
|
maxFoundLat: number; |
|
|
|
|
|
minFoundLon: number; |
|
|
|
|
|
maxFoundLon: number; |
|
|
|
|
|
recordCount: number; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
@Component({ |
|
|
@Component({ |
|
|
components: { |
|
|
components: { |
|
|
InfiniteScroll, |
|
|
InfiniteScroll, |
|
|
@ -233,25 +318,31 @@ import { OnboardPage, retrieveAccountDids } from "@/libs/util"; |
|
|
}) |
|
|
}) |
|
|
export default class DiscoverView extends Vue { |
|
|
export default class DiscoverView extends Vue { |
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
$notify!: (notification: NotificationIface, timeout?: number) => void; |
|
|
|
|
|
$router!: Router; |
|
|
|
|
|
$route!: RouteLocationNormalizedLoaded; |
|
|
|
|
|
|
|
|
activeDid = ""; |
|
|
activeDid = ""; |
|
|
allContacts: Array<Contact> = []; |
|
|
allContacts: Array<Contact> = []; |
|
|
allMyDids: Array<string> = []; |
|
|
allMyDids: Array<string> = []; |
|
|
apiServer = ""; |
|
|
apiServer = ""; |
|
|
searchTerms = ""; |
|
|
|
|
|
projects: PlanData[] = []; |
|
|
|
|
|
isLoading = false; |
|
|
isLoading = false; |
|
|
isLocalActive = true; |
|
|
isLocalActive = true; |
|
|
isMappedActive = false; |
|
|
isMappedActive = false; |
|
|
isRemoteActive = false; |
|
|
isAnywhereActive = false; |
|
|
|
|
|
isProjectsActive = true; |
|
|
|
|
|
isPeopleActive = false; |
|
|
isSearchVisible = true; |
|
|
isSearchVisible = true; |
|
|
localCenterLat = 0; |
|
|
localCenterLat = 0; |
|
|
localCenterLong = 0; |
|
|
localCenterLong = 0; |
|
|
localCount = -1; |
|
|
localCount = -1; |
|
|
markers: { [key: string]: L.Marker } = {}; |
|
|
markers: { [key: string]: L.Marker } = {}; |
|
|
|
|
|
partnerApiServer = DEFAULT_PARTNER_API_SERVER; |
|
|
|
|
|
projects: PlanData[] = []; |
|
|
remoteCount = -1; |
|
|
remoteCount = -1; |
|
|
searchBox: { name: string; bbox: BoundingBox } | null = null; |
|
|
searchBox: { name: string; bbox: BoundingBox } | null = null; |
|
|
|
|
|
searchTerms = ""; |
|
|
tempSearchBox: BoundingBox | null = null; |
|
|
tempSearchBox: BoundingBox | null = null; |
|
|
|
|
|
userProfiles: UserProfile[] = []; |
|
|
zoomedSoDoNotMove = false; |
|
|
zoomedSoDoNotMove = false; |
|
|
|
|
|
|
|
|
// make this function available to the Vue template |
|
|
// make this function available to the Vue template |
|
|
@ -261,13 +352,15 @@ export default class DiscoverView extends Vue { |
|
|
const settings = await retrieveSettingsForActiveAccount(); |
|
|
const settings = await retrieveSettingsForActiveAccount(); |
|
|
this.activeDid = (settings.activeDid as string) || ""; |
|
|
this.activeDid = (settings.activeDid as string) || ""; |
|
|
this.apiServer = (settings.apiServer as string) || ""; |
|
|
this.apiServer = (settings.apiServer as string) || ""; |
|
|
|
|
|
this.partnerApiServer = |
|
|
|
|
|
(settings.partnerApiServer as string) || this.partnerApiServer; |
|
|
this.searchBox = settings.searchBoxes?.[0] || null; |
|
|
this.searchBox = settings.searchBoxes?.[0] || null; |
|
|
|
|
|
|
|
|
this.allContacts = await db.contacts.toArray(); |
|
|
this.allContacts = await db.contacts.toArray(); |
|
|
|
|
|
|
|
|
this.allMyDids = await retrieveAccountDids(); |
|
|
this.allMyDids = await retrieveAccountDids(); |
|
|
|
|
|
|
|
|
this.searchTerms = (this.$route as Router).query["searchText"] || ""; |
|
|
this.searchTerms = this.$route.query["searchText"]?.toString() || ""; |
|
|
|
|
|
|
|
|
if (!settings.finishedOnboarding) { |
|
|
if (!settings.finishedOnboarding) { |
|
|
(this.$refs.onboardingDialog as OnboardingDialog).open( |
|
|
(this.$refs.onboardingDialog as OnboardingDialog).open( |
|
|
@ -284,7 +377,7 @@ export default class DiscoverView extends Vue { |
|
|
} else { |
|
|
} else { |
|
|
this.isLocalActive = false; |
|
|
this.isLocalActive = false; |
|
|
this.isMappedActive = false; |
|
|
this.isMappedActive = false; |
|
|
this.isRemoteActive = true; |
|
|
this.isAnywhereActive = true; |
|
|
await this.searchAll(); |
|
|
await this.searchAll(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -298,8 +391,8 @@ export default class DiscoverView extends Vue { |
|
|
if (this.isLocalActive) { |
|
|
if (this.isLocalActive) { |
|
|
await this.searchLocal(); |
|
|
await this.searchLocal(); |
|
|
} else if (this.isMappedActive) { |
|
|
} else if (this.isMappedActive) { |
|
|
this.isRemoteActive = true; |
|
|
const mapRef = this.$refs.projectMap as L.Map; |
|
|
await this.searchAll(); |
|
|
this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation |
|
|
} else { |
|
|
} else { |
|
|
await this.searchAll(); |
|
|
await this.searchAll(); |
|
|
} |
|
|
} |
|
|
@ -311,6 +404,7 @@ export default class DiscoverView extends Vue { |
|
|
if (!beforeId) { |
|
|
if (!beforeId) { |
|
|
// this was an initial search so clear any previous results |
|
|
// this was an initial search so clear any previous results |
|
|
this.projects = []; |
|
|
this.projects = []; |
|
|
|
|
|
this.userProfiles = []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms); |
|
|
let queryParams = "claimContents=" + encodeURIComponent(this.searchTerms); |
|
|
@ -319,62 +413,62 @@ export default class DiscoverView extends Vue { |
|
|
queryParams = queryParams + `&beforeId=${beforeId}`; |
|
|
queryParams = queryParams + `&beforeId=${beforeId}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const endpoint = this.isProjectsActive |
|
|
|
|
|
? this.apiServer + "/api/v2/report/plans" |
|
|
|
|
|
: this.partnerApiServer + "/api/partner/userProfile"; |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
this.isLoading = true; |
|
|
this.isLoading = true; |
|
|
const response = await fetch( |
|
|
const response = await fetch(endpoint + "?" + queryParams, { |
|
|
this.apiServer + "/api/v2/report/plans?" + queryParams, |
|
|
method: "GET", |
|
|
{ |
|
|
headers: await getHeaders(this.activeDid), |
|
|
method: "GET", |
|
|
}); |
|
|
headers: await getHeaders(this.activeDid), |
|
|
|
|
|
}, |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (response.status !== 200) { |
|
|
if (response.status !== 200) { |
|
|
const details = await response.text(); |
|
|
const details = await response.text(); |
|
|
console.error("Problem with full search:", details); |
|
|
|
|
|
this.$notify( |
|
|
|
|
|
{ |
|
|
|
|
|
group: "alert", |
|
|
|
|
|
type: "danger", |
|
|
|
|
|
title: "Error", |
|
|
|
|
|
text: `There was a problem accessing the server.`, |
|
|
|
|
|
}, |
|
|
|
|
|
3000, |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
throw details; |
|
|
throw details; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const results = await response.json(); |
|
|
const results = await response.json(); |
|
|
|
|
|
|
|
|
const plans: PlanData[] = results.data; |
|
|
if (this.isProjectsActive) { |
|
|
if (plans) { |
|
|
const plans: PlanData[] = results.data; |
|
|
for (const plan of plans) { |
|
|
if (plans) { |
|
|
const { name, description, handleId, image, issuerDid, rowid } = plan; |
|
|
for (const plan of plans) { |
|
|
this.projects.push({ |
|
|
const { name, description, handleId, image, issuerDid, rowid } = plan; |
|
|
name, |
|
|
this.projects.push({ |
|
|
description, |
|
|
name, |
|
|
handleId, |
|
|
description, |
|
|
image, |
|
|
handleId, |
|
|
issuerDid, |
|
|
image, |
|
|
rowid, |
|
|
issuerDid, |
|
|
}); |
|
|
rowid, |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
this.remoteCount = this.projects.length; |
|
|
|
|
|
} else { |
|
|
|
|
|
throw JSON.stringify(results); |
|
|
} |
|
|
} |
|
|
this.remoteCount = this.projects.length; |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
throw JSON.stringify(results); |
|
|
const profiles: UserProfile[] = results.data; |
|
|
|
|
|
if (profiles) { |
|
|
|
|
|
this.userProfiles.push(...profiles); |
|
|
|
|
|
this.remoteCount = this.userProfiles.length; |
|
|
|
|
|
} else { |
|
|
|
|
|
throw JSON.stringify(results); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|
|
} catch (e: any) { |
|
|
} catch (e: any) { |
|
|
console.error("Error with feed load:", e); |
|
|
console.error("Error with search all:", e); |
|
|
// this sometimes gives different information |
|
|
// this sometimes gives different information |
|
|
console.error("Error with feed load (error added): " + e); |
|
|
console.error("Error with search all (error added): " + e); |
|
|
this.$notify( |
|
|
this.$notify( |
|
|
{ |
|
|
{ |
|
|
group: "alert", |
|
|
group: "alert", |
|
|
type: "danger", |
|
|
type: "danger", |
|
|
title: "Error", |
|
|
title: "Error Searching", |
|
|
text: e.userMessage || "There was a problem retrieving projects.", |
|
|
text: e.userMessage || "There was a problem retrieving " + (this.isProjectsActive ? "projects" : "profiles") + ".", |
|
|
}, |
|
|
}, |
|
|
5000, |
|
|
5000, |
|
|
); |
|
|
); |
|
|
@ -392,12 +486,14 @@ export default class DiscoverView extends Vue { |
|
|
|
|
|
|
|
|
if (!searchBox) { |
|
|
if (!searchBox) { |
|
|
this.projects = []; |
|
|
this.projects = []; |
|
|
|
|
|
this.userProfiles = []; |
|
|
return; |
|
|
return; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
if (!beforeId) { |
|
|
if (!beforeId) { |
|
|
// this was an initial search so clear any previous results |
|
|
// this was an initial search so clear any previous results |
|
|
this.projects = []; |
|
|
this.projects = []; |
|
|
|
|
|
this.userProfiles = []; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const claimContents = |
|
|
const claimContents = |
|
|
@ -407,70 +503,71 @@ export default class DiscoverView extends Vue { |
|
|
claimContents, |
|
|
claimContents, |
|
|
"minLocLat=" + searchBox.minLat, |
|
|
"minLocLat=" + searchBox.minLat, |
|
|
"maxLocLat=" + searchBox.maxLat, |
|
|
"maxLocLat=" + searchBox.maxLat, |
|
|
"westLocLon=" + searchBox.westLong, |
|
|
"minLocLon=" + searchBox.westLong, |
|
|
"eastLocLon=" + searchBox.eastLong, |
|
|
"maxLocLon=" + searchBox.eastLong, |
|
|
].join("&"); |
|
|
].join("&"); |
|
|
|
|
|
|
|
|
if (beforeId) { |
|
|
if (beforeId) { |
|
|
queryParams = queryParams + `&beforeId=${beforeId}`; |
|
|
queryParams = queryParams + `&beforeId=${beforeId}`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const endpoint = this.isProjectsActive |
|
|
|
|
|
? this.apiServer + "/api/v2/report/plansByLocation" |
|
|
|
|
|
: this.partnerApiServer + "/api/partner/userProfile"; |
|
|
|
|
|
|
|
|
try { |
|
|
try { |
|
|
this.isLoading = true; |
|
|
this.isLoading = true; |
|
|
const response = await fetch( |
|
|
const response = await fetch(endpoint + "?" + queryParams, { |
|
|
this.apiServer + "/api/v2/report/plansByLocation?" + queryParams, |
|
|
method: "GET", |
|
|
{ |
|
|
headers: await getHeaders(this.activeDid), |
|
|
method: "GET", |
|
|
}); |
|
|
headers: await getHeaders(this.activeDid), |
|
|
|
|
|
}, |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
if (response.status !== 200) { |
|
|
if (response.status !== 200) { |
|
|
const details = await response.text(); |
|
|
const details = await response.text(); |
|
|
console.error("Problem with nearby search:", details); |
|
|
throw details; |
|
|
this.$notify( |
|
|
|
|
|
{ |
|
|
|
|
|
group: "alert", |
|
|
|
|
|
type: "danger", |
|
|
|
|
|
title: "Error", |
|
|
|
|
|
text: "There was a problem accessing the server.", |
|
|
|
|
|
}, |
|
|
|
|
|
3000, |
|
|
|
|
|
); |
|
|
|
|
|
throw await response.text(); |
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const results = await response.json(); |
|
|
const results = await response.json(); |
|
|
|
|
|
|
|
|
if (results.data) { |
|
|
if (this.isProjectsActive) { |
|
|
if (beforeId) { |
|
|
if (results.data) { |
|
|
const plans: PlanData[] = results.data; |
|
|
if (beforeId) { |
|
|
for (const plan of plans) { |
|
|
const plans: PlanData[] = results.data; |
|
|
const { name, description, handleId, issuerDid, rowid } = plan; |
|
|
for (const plan of plans) { |
|
|
this.projects.push({ |
|
|
const { name, description, handleId, issuerDid, rowid } = plan; |
|
|
name, |
|
|
this.projects.push({ |
|
|
description, |
|
|
name, |
|
|
handleId, |
|
|
description, |
|
|
issuerDid, |
|
|
handleId, |
|
|
rowid, |
|
|
issuerDid, |
|
|
}); |
|
|
rowid, |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
} else { |
|
|
|
|
|
this.projects = results.data; |
|
|
} |
|
|
} |
|
|
|
|
|
this.localCount = this.projects.length; |
|
|
} else { |
|
|
} else { |
|
|
this.projects = results.data; |
|
|
throw JSON.stringify(results); |
|
|
} |
|
|
} |
|
|
this.localCount = this.projects.length; |
|
|
|
|
|
} else { |
|
|
} else { |
|
|
throw JSON.stringify(results); |
|
|
const profiles: UserProfile[] = results.data; |
|
|
|
|
|
if (profiles) { |
|
|
|
|
|
this.userProfiles.push(...profiles); |
|
|
|
|
|
this.localCount = this.userProfiles.length; |
|
|
|
|
|
} else { |
|
|
|
|
|
throw JSON.stringify(results); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any |
|
|
} catch (e: any) { |
|
|
} catch (e: any) { |
|
|
console.error("Error with feed load:", e); |
|
|
console.error("Error with search local:", e); |
|
|
this.$notify( |
|
|
this.$notify( |
|
|
{ |
|
|
{ |
|
|
group: "alert", |
|
|
group: "alert", |
|
|
type: "danger", |
|
|
type: "danger", |
|
|
title: "Error", |
|
|
title: "Error", |
|
|
text: e.userMessage || "There was a problem retrieving projects.", |
|
|
text: e.userMessage || "There was a problem retrieving " + (this.isProjectsActive ? "projects" : "profiles") + ".", |
|
|
}, |
|
|
}, |
|
|
5000, |
|
|
5000, |
|
|
); |
|
|
); |
|
|
@ -484,14 +581,21 @@ export default class DiscoverView extends Vue { |
|
|
* @param payload is the flag from the InfiniteScroll indicating if it should load |
|
|
* @param payload is the flag from the InfiniteScroll indicating if it should load |
|
|
**/ |
|
|
**/ |
|
|
async loadMoreData(payload: boolean) { |
|
|
async loadMoreData(payload: boolean) { |
|
|
if (this.projects.length > 0 && payload) { |
|
|
if (payload) { |
|
|
const latestProject = this.projects[this.projects.length - 1]; |
|
|
if (this.isProjectsActive && this.projects.length > 0) { |
|
|
if (this.isLocalActive) { |
|
|
const latestProject = this.projects[this.projects.length - 1]; |
|
|
this.searchLocal(latestProject["rowid"]); |
|
|
if (this.isLocalActive || this.isMappedActive) { |
|
|
} else if (this.isMappedActive) { |
|
|
this.searchLocal(latestProject.rowid); |
|
|
this.searchLocal(latestProject["rowid"]); |
|
|
} else if (this.isAnywhereActive) { |
|
|
} else if (this.isRemoteActive) { |
|
|
this.searchAll(latestProject.rowid); |
|
|
this.searchAll(latestProject["rowid"]); |
|
|
} |
|
|
|
|
|
} else if (!this.isProjectsActive && this.userProfiles.length > 0) { |
|
|
|
|
|
const latestProfile = this.userProfiles[this.userProfiles.length - 1]; |
|
|
|
|
|
if (this.isLocalActive || this.isMappedActive) { |
|
|
|
|
|
this.searchLocal(latestProfile.rowid || ""); |
|
|
|
|
|
} else if (this.isAnywhereActive) { |
|
|
|
|
|
this.searchAll(latestProfile.rowid || ""); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
@ -503,7 +607,7 @@ export default class DiscoverView extends Vue { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// Tried but failed to use other vue-leaflet methods update:zoom and update:bounds |
|
|
// Tried but failed to use other vue-leaflet methods update:zoom and update:bounds |
|
|
// To access the from this.$refs, use this.$refs.projectMap.mapObject |
|
|
// To access the from this.$refs, use this.$refs.projectMap.leafletObject (or maybe mapObject) |
|
|
|
|
|
|
|
|
onMoveStart(/* event: L.LocationEvent */) { |
|
|
onMoveStart(/* event: L.LocationEvent */) { |
|
|
// don't remove markers because they follow the map when moving (and the experience is jarring) |
|
|
// don't remove markers because they follow the map when moving (and the experience is jarring) |
|
|
@ -540,9 +644,10 @@ export default class DiscoverView extends Vue { |
|
|
"westLocLon=" + bounds?.getSouthWest().lng, |
|
|
"westLocLon=" + bounds?.getSouthWest().lng, |
|
|
"eastLocLon=" + bounds?.getNorthEast().lng, |
|
|
"eastLocLon=" + bounds?.getNorthEast().lng, |
|
|
].join("&"); |
|
|
].join("&"); |
|
|
const response = await fetch( |
|
|
const endpoint = this.isProjectsActive |
|
|
this.apiServer + "/api/v2/report/planCountsByBBox?" + queryParams, |
|
|
? this.apiServer + "/api/v2/report/planCountsByBBox" |
|
|
); |
|
|
: this.partnerApiServer + "/api/partner/userProfileCountsByBBox"; |
|
|
|
|
|
const response = await fetch(endpoint + "?" + queryParams); |
|
|
if (response.status === 200) { |
|
|
if (response.status === 200) { |
|
|
Object.values(this.markers).forEach((marker) => marker.remove()); |
|
|
Object.values(this.markers).forEach((marker) => marker.remove()); |
|
|
this.markers = {}; |
|
|
this.markers = {}; |
|
|
@ -601,14 +706,16 @@ export default class DiscoverView extends Vue { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
/** |
|
|
/** |
|
|
* Handle clicking on a project entry found in the list |
|
|
* Handle clicking on a project or profile entry found in the list |
|
|
* @param id of the project |
|
|
* @param id of the project or profile |
|
|
**/ |
|
|
**/ |
|
|
onClickLoadProject(id: string) { |
|
|
onClickLoadItem(id: string) { |
|
|
const route = { |
|
|
const route = { |
|
|
path: "/project/" + encodeURIComponent(id), |
|
|
path: this.isProjectsActive |
|
|
|
|
|
? "/project/" + encodeURIComponent(id) |
|
|
|
|
|
: "/userProfile/" + encodeURIComponent(id), |
|
|
}; |
|
|
}; |
|
|
(this.$router as Router).push(route); |
|
|
this.$router.push(route); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
public computedLocalTabStyleClassNames() { |
|
|
public computedLocalTabStyleClassNames() { |
|
|
@ -654,14 +761,50 @@ export default class DiscoverView extends Vue { |
|
|
"rounded-t-lg": true, |
|
|
"rounded-t-lg": true, |
|
|
"border-b-2": true, |
|
|
"border-b-2": true, |
|
|
|
|
|
|
|
|
active: this.isRemoteActive, |
|
|
active: this.isAnywhereActive, |
|
|
"text-black": this.isRemoteActive, |
|
|
"text-black": this.isAnywhereActive, |
|
|
"border-black": this.isRemoteActive, |
|
|
"border-black": this.isAnywhereActive, |
|
|
"font-semibold": this.isRemoteActive, |
|
|
"font-semibold": this.isAnywhereActive, |
|
|
|
|
|
|
|
|
|
|
|
"text-blue-600": !this.isAnywhereActive, |
|
|
|
|
|
"border-transparent": !this.isAnywhereActive, |
|
|
|
|
|
"hover:border-slate-400": !this.isAnywhereActive, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public computedProjectsTabStyleClassNames() { |
|
|
|
|
|
return { |
|
|
|
|
|
"inline-block": true, |
|
|
|
|
|
"py-3": true, |
|
|
|
|
|
"rounded-t-lg": true, |
|
|
|
|
|
"border-b-2": true, |
|
|
|
|
|
|
|
|
|
|
|
active: this.isProjectsActive, |
|
|
|
|
|
"text-black": this.isProjectsActive, |
|
|
|
|
|
"border-black": this.isProjectsActive, |
|
|
|
|
|
"font-semibold": this.isProjectsActive, |
|
|
|
|
|
|
|
|
|
|
|
"text-blue-600": !this.isProjectsActive, |
|
|
|
|
|
"border-transparent": !this.isProjectsActive, |
|
|
|
|
|
"hover:border-slate-400": !this.isProjectsActive, |
|
|
|
|
|
}; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
public computedPeopleTabStyleClassNames() { |
|
|
|
|
|
return { |
|
|
|
|
|
"inline-block": true, |
|
|
|
|
|
"py-3": true, |
|
|
|
|
|
"rounded-t-lg": true, |
|
|
|
|
|
"border-b-2": true, |
|
|
|
|
|
|
|
|
|
|
|
active: this.isPeopleActive, |
|
|
|
|
|
"text-black": this.isPeopleActive, |
|
|
|
|
|
"border-black": this.isPeopleActive, |
|
|
|
|
|
"font-semibold": this.isPeopleActive, |
|
|
|
|
|
|
|
|
"text-blue-600": !this.isRemoteActive, |
|
|
"text-blue-600": !this.isPeopleActive, |
|
|
"border-transparent": !this.isRemoteActive, |
|
|
"border-transparent": !this.isPeopleActive, |
|
|
"hover:border-slate-400": !this.isRemoteActive, |
|
|
"hover:border-slate-400": !this.isPeopleActive, |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
