jsnbuchanan/crowd-funder-for-time-pwa
1
0
Fork 1
forked from trent_larson/crowd-funder-for-time-pwa
Code Issues Pull Requests Projects Releases Wiki Activity

DiscoverView searches almost done.

Browse Source 
Contact fixes
ContactAmounts fix quick-nav
Cleaning up ProjectView still more to do
Hide advanced by default on StatisticsView
project.task updated
This commit is contained in:
Matthew Raymer
2023-07-10 18:03:51 +08:00
parent 3f8be3b4de
commit b6b7c56157
8 changed files with 258 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
project.task.yaml
View File

@@ -1,13 +1,11 @@
tasks:
- .5 audit all console.log calls
- 01 design ideas for simple gives on the Home page
- 01 add list of 'give' records for a project on ProjectView UI
- 02 Discover page - display results (currently in console.log) & link, spin when searching
- 02 Discover page - add infinite search
- 08 search by location, endpoint, etc assignee:trent
- 01 add a location for a project via map pin (see API by clicking on "Nearby")
- 01 remove all the "form" fields (or at least investigate to see if that page refresh is desired)
- .2 change "errorMessage" to "alertMessage" on ProjectViewView.vue
- 08 Scan QR code to import into contacts.
@@ -22,8 +20,6 @@ tasks:
- refactor UI :
- .5 Alerts show at the top and can be missed, eg. account data download
- .5 Fix how icons show on top of bottom bar on ContactAmounts page
- .2 Hide "Advanced" section in Account page by default
- show pop-up confirming that settings & contacts have been downloaded
@@ -44,7 +40,7 @@ tasks:
- Discuss whether the remaining tasks are worthwhile before MVP release.
- 01 fix images on project page, on discovery page
- .2 fix "Rotary" and static icon to the right on project page
- .2 fix static icon to the right on project page (Matthew: I've made "Rotary" into issuer?)
- stats v1 :
- 01 show numeric stats

1
src/db/index.ts
View File

@@ -54,7 +54,6 @@ if (localStorage.getItem("secret") == null) {
localStorage.setItem("secret", secret);
}
//console.log("IndexedDB Encryption Secret:", secret);
encrypted(accountsDB, { secretKey: secret });
accountsDB.version(1).stores(SensitiveSchemas);

243
src/views/AccountViewView.vue
View File

@@ -158,117 +158,126 @@
</form>
</dialog>
<h3 class="text-sm uppercase font-semibold mb-3">Advanced</h3>
<label
for="toggleShowAmounts"
class="flex items-center cursor-pointer mb-6"
@click="handleChange"
<h3
class="text-sm uppercase font-semibold mb-3"
@click="showAdvanced = !showAdvanced"
>
<!-- toggle -->
<div class="relative">
<!-- input -->
<input
type="checkbox"
v-model="showContactGives"
name="showContactGives"
class="sr-only"
/>
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
<!-- label -->
<div class="ml-2">Show amounts given with contacts</div>
</label>
<div class="flex py-2">
<button class="text-center text-md text-blue-500" @click="checkLimits()">
Check Limits
</button>
<!-- show spinner if loading limits -->
<div v-if="loadingLimits" class="ml-2">
Checking... <fa icon="spinner" class="fa-spin"></fa>
</div>
<div class="ml-2">
{{ limitsMessage }}
</div>
<div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
<span class="font-bold">Rate Limits</span>
<p>
You have done {{ limits.doneClaimsThisWeek }} claims out of
{{ limits.maxClaimsPerWeek }} for this week. Your claims counter
resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
</p>
<p>
You have done {{ limits.doneRegistrationsThisMonth }} registrations
out of {{ limits.maxRegistrationsPerMonth }} for this month. Your
registrations counter resets at
{{ readableTime(limits.nextMonthBeginDateTime) }}
</p>
</div>
</div>
<div class="flex py-2">
Claim Server
<input
type="text"
class="block w-full rounded border border-slate-400 px-3 py-2"
v-model="apiServerInput"
/>
<button
v-if="apiServerInput != apiServer"
class="px-4 rounded bg-red-500 border border-slate-400"
@click="onClickSaveApiServer()"
Advanced
</h3>
<div v-if="showAdvanced">
<label
for="toggleShowAmounts"
class="flex items-center cursor-pointer mb-6"
@click="handleChange"
>
<fa icon="floppy-disk" class="fa-fw" color="white"></fa>
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.PROD_ENDORSER_API_SERVER)"
>
Use Prod
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.TEST_ENDORSER_API_SERVER)"
>
Use Test
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.LOCAL_ENDORSER_API_SERVER)"
>
Use Local
</button>
</div>
<!-- toggle -->
<div class="relative">
<!-- input -->
<input
type="checkbox"
v-model="showContactGives"
name="showContactGives"
class="sr-only"
/>
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
<!-- label -->
<div class="ml-2">Show amounts given with contacts</div>
</label>
<div v-if="numAccounts > 0" class="flex py-2">
Switch Identifier
<span>
<button class="text-blue-500 px-2" @click="switchAccount(0)">
None
</button>
</span>
<span v-for="accountNum in numAccounts" :key="accountNum">
<button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
#{{ accountNum }}
</button>
</span>
</div>
<div>
<button class="text-blue-500">
<router-link
:to="{ name: 'statistics' }"
class="block text-center py-3"
<div class="flex py-2">
<button
class="text-center text-md text-blue-500"
@click="checkLimits()"
>
See Achievements & Statistics
</router-link>
</button>
Check Limits
</button>
<!-- show spinner if loading limits -->
<div v-if="loadingLimits" class="ml-2">
Checking... <fa icon="spinner" class="fa-spin"></fa>
</div>
<div class="ml-2">
{{ limitsMessage }}
</div>
<div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
<span class="font-bold">Rate Limits</span>
<p>
You have done {{ limits.doneClaimsThisWeek }} claims out of
{{ limits.maxClaimsPerWeek }} for this week. Your claims counter
resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
</p>
<p>
You have done {{ limits.doneRegistrationsThisMonth }} registrations
out of {{ limits.maxRegistrationsPerMonth }} for this month. Your
registrations counter resets at
{{ readableTime(limits.nextMonthBeginDateTime) }}
</p>
</div>
</div>
<div class="flex py-2">
Claim Server
<input
type="text"
class="block w-full rounded border border-slate-400 px-3 py-2"
v-model="apiServerInput"
/>
<button
v-if="apiServerInput != apiServer"
class="px-4 rounded bg-red-500 border border-slate-400"
@click="onClickSaveApiServer()"
>
<fa icon="floppy-disk" class="fa-fw" color="white"></fa>
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.PROD_ENDORSER_API_SERVER)"
>
Use Prod
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.TEST_ENDORSER_API_SERVER)"
>
Use Test
</button>
<button
class="px-4 rounded bg-slate-200 border border-slate-400"
@click="setApiServerInput(Constants.LOCAL_ENDORSER_API_SERVER)"
>
Use Local
</button>
</div>
<div v-if="numAccounts > 0" class="flex py-2">
Switch Identifier
<span>
<button class="text-blue-500 px-2" @click="switchAccount(0)">
None
</button>
</span>
<span v-for="accountNum in numAccounts" :key="accountNum">
<button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
#{{ accountNum }}
</button>
</span>
</div>
<div>
<button class="text-blue-500">
<router-link
:to="{ name: 'statistics' }"
class="block text-center py-3"
>
See Achievements & Statistics
</router-link>
</button>
</div>
</div>
<AlertMessage
:alertTitle="alertTitle"
@@ -303,6 +312,12 @@ interface RateLimits {
nextWeekBeginDateTime: string;
}
interface ErrorResponse {
error?: {
message?: string;
};
}
@Component({ components: { AlertMessage, QuickNav } })
export default class AccountViewView extends Vue {
Constants = AppString;
@@ -327,6 +342,8 @@ export default class AccountViewView extends Vue {
showB64Copy = false;
showPubCopy = false;
showAdvanced = false;
public async getIdentity(activeDid) {
await accountsDB.open();
const account = await accountsDB.accounts
@@ -483,10 +500,14 @@ export default class AccountViewView extends Vue {
} else {
const serverError = error as AxiosError;
console.error("Bad response retrieving limits: ", serverError);
// Anybody know how to access items inside "response.data" without this?
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const data: any = serverError.response?.data;
this.limitsMessage = data?.error?.message || "Bad server response.";
const data: ErrorResponse | undefined =
serverError.response && serverError.response.data;
if (data && data.error && data.error.message) {
this.limitsMessage = data.error.message;
} else {
this.limitsMessage = "Bad server response.";
}
}
}

49
src/views/ContactAmountsView.vue
View File

@@ -1,48 +1,5 @@
<template>
<!-- QUICK NAV -->
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
<ul class="flex text-2xl p-2 gap-2">
<!-- Home Feed -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
><fa icon="house-chimney" class="fa-fw"></fa
></router-link>
</li>
<!-- Search -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'discover' }"
class="block text-center py-3 px-1"
><fa icon="magnifying-glass" class="fa-fw"></fa
></router-link>
</li>
<!-- Contacts -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'projects' }"
class="block text-center py-3 px-1"
><fa icon="folder-open" class="fa-fw"></fa
></router-link>
</li>
<!-- Contacts -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'contacts' }"
class="block text-center py-3 px-1"
><fa icon="users" class="fa-fw"></fa
></router-link>
</li>
<!-- Profile -->
<li class="basis-1/5 rounded-md text-slate-500">
<router-link
:to="{ name: 'account' }"
class="block text-center py-3 px-1"
><fa icon="circle-user" class="fa-fw"></fa
></router-link>
</li>
</ul>
</nav>
<QuickNav selected="Contacts"></QuickNav>
<section id="Content" class="p-6 pb-24">
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
Given with {{ contact?.name }}
@@ -134,8 +91,9 @@ import {
import * as didJwt from "did-jwt";
import { AxiosError } from "axios";
import AlertMessage from "@/components/AlertMessage";
import QuickNav from "@/components/QuickNav";
@Component({ components: { AlertMessage } })
@Component({ components: { AlertMessage, QuickNav } })
export default class ContactsView extends Vue {
activeDid = "";
apiServer = "";
@@ -313,7 +271,6 @@ export default class ContactsView extends Vue {
try {
const resp = await this.axios.post(url, payload, { headers });
//console.log("Got resp data:", resp.data);
if (resp.data?.success) {
record.amountConfirmed = origClaim.object?.amountOfThisGood || 1;
}

2
src/views/ContactsView.vue
View File

@@ -465,7 +465,6 @@ export default class ContactsView extends Vue {
try {
const resp = await this.axios.post(url, payload, { headers });
//console.log("Got resp data:", resp.data);
if (resp.data?.success?.embeddedRecordError) {
this.alertTitle = "Registration Still Unknown";
let message = "There was some problem with the registration.";
@@ -692,7 +691,6 @@ export default class ContactsView extends Vue {
try {
const resp = await this.axios.post(url, payload, { headers });
//console.log("Got resp data:", resp.data);
if (resp.data?.success?.handleId) {
this.alertTitle = "Done";
this.alertMessage = "Successfully logged time to the server.";

164
src/views/DiscoverView.vue
View File

@@ -31,39 +31,48 @@
<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>
<!-- 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"
>
<fa icon="spinner" class="fa-spin-pulse"></fa>
</div>
<!-- Results List -->
<ul class="">
<li class="border-b border-slate-300">
<ul v-if="projects.length > 0">
<li
class="border-b border-slate-300"
v-for="project in projects"
:key="project.handleId"
>
<a
@click="
onClickLoadProject(
'https://endorser.ch/entity/01H3HER4DTNCR6ZC4VXA3VPWVQ',
)
"
@click="onClickLoadProject(project.handleId)"
class="block py-4 flex gap-4"
>
<div class="w-12">
@@ -76,63 +85,14 @@
<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"
>
<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',
)
"
class="block py-4 flex gap-4"
>
<div class="w-12">
<img
src="https://picsum.photos/200/200?random=3"
class="w-full rounded"
/>
</div>
<div class="grow">
<h2 class="text-base font-semibold">Historical site</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>

41
src/views/ProjectViewView.vue
View File

@@ -23,16 +23,15 @@
</h1>
</div>
<div class="text-red-500">
{{ errorMessage }}
</div>
<!-- Project Details -->
<div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
<div>
<h2 class="text-xl font-semibold">{{ name }}</h2>
<div class="flex justify-between gap-4 text-sm mb-3">
<span><fa icon="user" class="fa-fw text-slate-400"></fa> Rotary</span>
<span
><fa icon="user" class="fa-fw text-slate-400"></fa>
{{ issuer }}</span
>
<span
><fa icon="calendar" class="fa-fw text-slate-400"></fa
>{{ timeSince }}
@@ -187,11 +186,11 @@ export default class ProjectViewView extends Vue {
allContacts: Array<Contact> = [];
apiServer = "";
description = "";
errorMessage = "";
expanded = false;
givesToThis: Array<GiveServerRecord> = [];
givesByThis: Array<GiveServerRecord> = [];
name = "";
issuer = "";
numAccounts = 0;
projectId = localStorage.getItem("projectId") || ""; // handle ID
timeSince = "";
@@ -280,30 +279,29 @@ export default class ProjectViewView extends Vue {
try {
const resp = await this.axios.get(url, { headers });
if (resp.status === 200) {
// feel free to remove this; I haven't yet because it's helpful
console.log('Loaded project: ', resp.data);
const startTime = resp.data.startTime;
if (startTime != null) {
const eventDate = new Date(startTime);
const now = moment.now();
this.timeSince = moment.utc(now).to(eventDate);
}
this.issuer = resp.data.issuer;
this.name = resp.data.claim?.name || "(no name)";
this.description = resp.data.claim?.description || "(no description)";
this.truncatedDesc = this.description.slice(0, this.truncateLength);
} else if (resp.status === 404) {
// actually, axios throws an error so we never get here
this.errorMessage = "That project does not exist.";
this.alertMessage = "That project does not exist.";
}
} catch (error: unknown) {
const serverError = error as AxiosError;
if (serverError.response?.status === 404) {
this.errorMessage = "That project does not exist.";
this.alertMessage = "That project does not exist.";
} else {
this.errorMessage =
this.alertMessage =
"Something went wrong retrieving that project." +
" See logs for more info.";
console.error("Error retrieving project:", error);
console.error("Error retrieving project:", serverError.message);
}
}
@@ -316,13 +314,16 @@ export default class ProjectViewView extends Vue {
if (resp.status === 200 && resp.data.data) {
this.givesToThis = resp.data.data;
} else {
this.errorMessage = "Failed to retrieve gives to this project.";
this.alertMessage = "Failed to retrieve gives to this project.";
}
} catch (error: unknown) {
console.error("Error retrieving gives to this project:", error);
const serverError = error as AxiosError;
this.errorMessage =
this.alertMessage =
"Something went wrong retrieving gives to this project.";
console.error(
"Error retrieving gives to this project:",
serverError.message,
);
}
const givesOutUrl =
@@ -334,13 +335,15 @@ export default class ProjectViewView extends Vue {
if (resp.status === 200 && resp.data.data) {
this.givesByThis = resp.data.data;
} else {
this.errorMessage = "Failed to retrieve gives by this project.";
this.alertMessage = "Failed to retrieve gives by this project.";
}
} catch (error: unknown) {
console.error("Error retrieving gives by this project:", error);
const serverError = error as AxiosError;
this.errorMessage =
"Something went wrong retrieving gives by project.";
this.alertMessage = "Something went wrong retrieving gives by project.";
console.error(
"Error retrieving gives by this project:",
serverError.message,
);
}
}

1
src/views/StatisticsView.vue
View File

@@ -62,7 +62,6 @@ export default class StatisticsView extends Vue {
mounted() {
try {
const container = document.querySelector("#scene-container");
console.log(container);
const newWorld = new World(container, this);
newWorld.start();
this.world = newWorld;