|
|
|
@ -31,108 +31,68 @@ |
|
|
|
<a |
|
|
|
href="#" |
|
|
|
@click="searchLocal()" |
|
|
|
class="inline-block py-3 rounded-t-lg border-b-2 active text-blue-600 border-blue-600 font-semibold" |
|
|
|
v-bind:class="computedLocalTabClassNames()" |
|
|
|
> |
|
|
|
Nearby |
|
|
|
<span |
|
|
|
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" |
|
|
|
>20+</span |
|
|
|
>{{ localCount }}</span |
|
|
|
> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<a |
|
|
|
href="#" |
|
|
|
class="inline-block py-3 rounded-t-lg border-b-2 border-transparent hover:text-slate-600 hover:border-slate-300" |
|
|
|
v-bind:class="computedRemoteTabClassNames()" |
|
|
|
@click="search()" |
|
|
|
> |
|
|
|
Remote |
|
|
|
<span |
|
|
|
class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md" |
|
|
|
>13</span |
|
|
|
>{{ remoteCount }}</span |
|
|
|
> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- Results List --> |
|
|
|
<ul class=""> |
|
|
|
<li class="border-b border-slate-300"> |
|
|
|
<a |
|
|
|
@click=" |
|
|
|
onClickLoadProject( |
|
|
|
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ', |
|
|
|
) |
|
|
|
" |
|
|
|
class="block py-4 flex gap-4" |
|
|
|
<!-- Loading Animation --> |
|
|
|
<div |
|
|
|
class="fixed left-6 bottom-24 text-center text-4xl leading-none bg-slate-400 text-white w-14 py-2.5 rounded-full" |
|
|
|
v-if="isLoading" |
|
|
|
> |
|
|
|
<div class="w-12"> |
|
|
|
<img |
|
|
|
src="https://picsum.photos/200/200?random=1" |
|
|
|
class="w-full rounded" |
|
|
|
/> |
|
|
|
<fa icon="spinner" class="fa-spin-pulse"></fa> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="grow"> |
|
|
|
<h2 class="text-base font-semibold">Canyon cleanup</h2> |
|
|
|
<div class="text-sm"> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> Rotary |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
|
|
|
|
<li class="border-b border-slate-300"> |
|
|
|
<a |
|
|
|
@click=" |
|
|
|
onClickLoadProject( |
|
|
|
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ', |
|
|
|
) |
|
|
|
" |
|
|
|
class="block py-4 flex gap-4" |
|
|
|
<!-- Results List --> |
|
|
|
<ul v-if="projects.length > 0"> |
|
|
|
<li |
|
|
|
class="border-b border-slate-300" |
|
|
|
v-for="project in projects" |
|
|
|
:key="project.handleId" |
|
|
|
> |
|
|
|
<div class="w-12"> |
|
|
|
<img |
|
|
|
src="https://picsum.photos/200/200?random=2" |
|
|
|
class="w-full rounded" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="grow"> |
|
|
|
<h2 class="text-base font-semibold">Potluck with neighbors</h2> |
|
|
|
<div class="text-sm"> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> Andrew A. |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
|
|
|
|
<li class="border-b border-slate-300"> |
|
|
|
<a |
|
|
|
@click=" |
|
|
|
onClickLoadProject( |
|
|
|
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ', |
|
|
|
) |
|
|
|
" |
|
|
|
@click="onClickLoadProject(project.handleId)" |
|
|
|
class="block py-4 flex gap-4" |
|
|
|
> |
|
|
|
<div class="w-12"> |
|
|
|
<img |
|
|
|
src="https://picsum.photos/200/200?random=3" |
|
|
|
src="https://picsum.photos/200/200?random=1" |
|
|
|
class="w-full rounded" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="grow"> |
|
|
|
<h2 class="text-base font-semibold">Historical site</h2> |
|
|
|
<h2 class="text-base font-semibold">Canyon cleanup</h2> |
|
|
|
<div class="text-sm"> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400 mr-1"></fa> |
|
|
|
<em>Unknown</em> |
|
|
|
<fa icon="user" class="fa-fw text-slate-400"></fa> |
|
|
|
{{ project.name }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
<p v-else>No projects found yet.</p> |
|
|
|
<AlertMessage |
|
|
|
:alertTitle="alertTitle" |
|
|
|
:alertMessage="alertMessage" |
|
|
|
@ -149,6 +109,28 @@ import { accessToken } from "@/libs/crypto"; |
|
|
|
import AlertMessage from "@/components/AlertMessage"; |
|
|
|
import QuickNav from "@/components/QuickNav"; |
|
|
|
|
|
|
|
/** |
|
|
|
* Represents data about a project |
|
|
|
**/ |
|
|
|
interface ProjectData { |
|
|
|
/** |
|
|
|
* Name of the project |
|
|
|
**/ |
|
|
|
name: string; |
|
|
|
/** |
|
|
|
* Description of the project |
|
|
|
**/ |
|
|
|
description: string; |
|
|
|
/** |
|
|
|
* URL referencing information about the project |
|
|
|
**/ |
|
|
|
handleId: string; |
|
|
|
/** |
|
|
|
* The Identier of the project |
|
|
|
**/ |
|
|
|
rowid: string; |
|
|
|
} |
|
|
|
|
|
|
|
@Component({ |
|
|
|
components: { AlertMessage, QuickNav }, |
|
|
|
}) |
|
|
|
@ -158,12 +140,19 @@ export default class DiscoverView extends Vue { |
|
|
|
searchTerms = ""; |
|
|
|
alertMessage = ""; |
|
|
|
alertTitle = ""; |
|
|
|
projects: ProjectData[] = []; |
|
|
|
isLocalActive = true; |
|
|
|
isRemoteActive = false; |
|
|
|
localCount = 0; |
|
|
|
remoteCount = 0; |
|
|
|
isLoading = false; |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
await db.open(); |
|
|
|
const settings = await db.settings.get(MASTER_SETTINGS_KEY); |
|
|
|
this.activeDid = settings?.activeDid || ""; |
|
|
|
this.apiServer = settings?.apiServer || ""; |
|
|
|
this.searchLocal(); |
|
|
|
} |
|
|
|
|
|
|
|
public async buildHeaders() { |
|
|
|
@ -194,7 +183,11 @@ export default class DiscoverView extends Vue { |
|
|
|
const claimType = "claimType=PlanAction"; |
|
|
|
const queryParams = [claimContents, claimType].join("&"); |
|
|
|
|
|
|
|
this.isRemoteActive = true; |
|
|
|
this.isLocalActive = false; |
|
|
|
|
|
|
|
try { |
|
|
|
this.isLoading = true; |
|
|
|
const response = await fetch( |
|
|
|
this.apiServer + "/api/v2/report/claims?" + queryParams, |
|
|
|
{ |
|
|
|
@ -211,7 +204,8 @@ export default class DiscoverView extends Vue { |
|
|
|
const results = await response.json(); |
|
|
|
|
|
|
|
if (results.data) { |
|
|
|
console.log("Plans found in that search:", results.data); |
|
|
|
this.projects = results.data; |
|
|
|
this.remoteCount = this.projects.length; |
|
|
|
} else { |
|
|
|
throw JSON.stringify(results); |
|
|
|
} |
|
|
|
@ -220,6 +214,8 @@ export default class DiscoverView extends Vue { |
|
|
|
this.alertMessage = |
|
|
|
e.userMessage || "There was an error retrieving projects."; |
|
|
|
this.alertTitle = "Error"; |
|
|
|
} finally { |
|
|
|
this.isLoading = false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -235,6 +231,9 @@ export default class DiscoverView extends Vue { |
|
|
|
].join("&"); |
|
|
|
|
|
|
|
try { |
|
|
|
this.isLoading = true; |
|
|
|
this.isLocalActive = true; |
|
|
|
this.isRemoteActive = false; |
|
|
|
const response = await fetch( |
|
|
|
this.apiServer + "/api/v2/report/plansByLocation?" + queryParams, |
|
|
|
{ |
|
|
|
@ -250,7 +249,8 @@ export default class DiscoverView extends Vue { |
|
|
|
const results = await response.json(); |
|
|
|
|
|
|
|
if (results.data) { |
|
|
|
console.log("Plans found in that location:", results.data); |
|
|
|
this.projects = results.data; |
|
|
|
this.localCount = this.projects.length; |
|
|
|
} else { |
|
|
|
throw JSON.stringify(results); |
|
|
|
} |
|
|
|
@ -259,6 +259,8 @@ export default class DiscoverView extends Vue { |
|
|
|
this.alertMessage = |
|
|
|
e.userMessage || "There was an error retrieving projects."; |
|
|
|
this.alertTitle = "Error"; |
|
|
|
} finally { |
|
|
|
this.isLoading = false; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -273,5 +275,37 @@ export default class DiscoverView extends Vue { |
|
|
|
}; |
|
|
|
this.$router.push(route); |
|
|
|
} |
|
|
|
|
|
|
|
public computedLocalTabClassNames() { |
|
|
|
return { |
|
|
|
"inline-block": true, |
|
|
|
"py-3": true, |
|
|
|
"rounded-t-lg": true, |
|
|
|
"border-b-2": true, |
|
|
|
active: this.isLocalActive, |
|
|
|
"text-blue-600": this.isLocalActive, |
|
|
|
"border-blue-600": this.isLocalActive, |
|
|
|
"font-semibold": this.isLocalActive, |
|
|
|
"border-transparent": !this.isLocalActive, |
|
|
|
"hover:text-slate-600": !this.isLocalActive, |
|
|
|
"hover:border-slate-300": !this.isLocalActive, |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
public computedRemoteTabClassNames() { |
|
|
|
return { |
|
|
|
"inline-block": true, |
|
|
|
"py-3": true, |
|
|
|
"rounded-t-lg": true, |
|
|
|
"border-b-2": true, |
|
|
|
active: this.isRemoteActive, |
|
|
|
"text-blue-600": this.isRemoteActive, |
|
|
|
"border-blue-600": this.isRemoteActive, |
|
|
|
"font-semibold": this.isRemoteActive, |
|
|
|
"border-transparent": !this.isRemoteActive, |
|
|
|
"hover:text-slate-600": !this.isRemoteActive, |
|
|
|
"hover:border-slate-300": !this.isRemoteActive, |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
Matthew Raymer
1 year ago