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

feat: allow selection of total vs confirmed vs unconfirmed give amounts

Browse Source
This commit is contained in:
Trent Larson
2023-03-22 21:56:02 -06:00
parent cdef139468
commit 3177d0f4b3
3 changed files with 122 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/AccountViewView.vue
View File

@@ -194,7 +194,7 @@
href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showContactGivesClassNames()"
@click="toggleShowContactAmounts"
@click="toggleShowContactAmounts()"
>
{{ showContactGives ? "Showing" : "Hiding" }}
amounts given with contacts (Click to
@@ -359,13 +359,6 @@ export default class AccountViewView extends Vue {
}
}
public showContactGivesClassNames() {
return {
"bg-slate-900": !this.showContactGives,
"bg-green-600": this.showContactGives,
};
}
public async exportDatabase() {
try {
const blob = await db.export({ prettyJson: true });
@@ -422,6 +415,13 @@ export default class AccountViewView extends Vue {
}
}
public showContactGivesClassNames() {
return {
"bg-slate-900": !this.showContactGives,
"bg-green-600": this.showContactGives,
};
}
alertMessage = "";
alertTitle = "";
isAlertVisible = false;

137
src/views/ContactsView.vue
View File

@@ -65,7 +65,7 @@
</button>
</div>
<div class="flex justify-between" v-if="showGiveTotals">
<div class="flex justify-between" v-if="showGiveNumbers">
<div class="w-full text-right">
Hours to Add:
<input
@@ -81,6 +81,22 @@
placeholder="Description"
v-model="hourDescriptionInput"
/>
<br />
<br />
<button
href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showGiveAmountsClassNames()"
@click="toggleShowGiveTotals()"
>
{{
showGiveTotals
? "Totals"
: showGiveConfirmed
? "Confirmed"
: "Unconfirmed"
}}
</button>
</div>
</div>
@@ -135,10 +151,20 @@
<fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
</button>
<div v-if="showGiveTotals" class="float-right">
<div v-if="showGiveNumbers" class="float-right">
<div class="float-right">
<div class="tooltip">
to: {{ givenByMeTotals[contact.did] || 0 }}
to:
{{
/* eslint-disable prettier/prettier */
this.showGiveTotals
? ((givenByMeConfirmed[contact.did] || 0)
+ (givenByMeUnconfirmed[contact.did] || 0))
: this.showGiveConfirmed
? (givenByMeConfirmed[contact.did] || 0)
: (givenByMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */
}}
<span class="tooltiptext-left">{{
givenByMeDescriptions[contact.did]
}}</span>
@@ -150,7 +176,17 @@
</button>
</div>
<div class="tooltip px-2">
by: {{ givenToMeTotals[contact.did] || 0 }}
by:
{{
/* eslint-disable prettier/prettier */
this.showGiveTotals
? ((givenToMeConfirmed[contact.did] || 0)
+ (givenToMeUnconfirmed[contact.did] || 0))
: this.showGiveConfirmed
? (givenToMeConfirmed[contact.did] || 0)
: (givenToMeUnconfirmed[contact.did] || 0)
/* eslint-enable prettier/prettier */
}}
<span class="tooltiptext-left">
{{ givenToMeDescriptions[contact.did] }}
</span>
@@ -234,15 +270,21 @@ export default class ContactsView extends Vue {
// { "did:...": concatenated-descriptions } entry for each contact
givenByMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact
givenByMeTotals: Record<string, number> = {};
givenByMeConfirmed: Record<string, number> = {};
// { "did:...": amount } entry for each contact
givenByMeUnconfirmed: Record<string, number> = {};
// { "did:...": concatenated-descriptions } entry for each contact
givenToMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact
givenToMeTotals: Record<string, number> = {};
givenToMeConfirmed: Record<string, number> = {};
// { "did:...": amount } entry for each contact
givenToMeUnconfirmed: Record<string, number> = {};
hourDescriptionInput = "";
hourInput = "0";
identity: IIdentifier | null = null;
showGiveTotals = false;
showGiveNumbers = false;
showGiveTotals = true;
showGiveConfirmed = true;
// 'created' hook runs when the Vue instance is first created
async created() {
@@ -252,8 +294,8 @@ export default class ContactsView extends Vue {
await db.open();
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
this.showGiveTotals = !!settings?.showContactGivesInline;
if (this.showGiveTotals) {
this.showGiveNumbers = !!settings?.showContactGivesInline;
if (this.showGiveNumbers) {
this.loadGives();
}
const allContacts = await db.contacts.toArray();
@@ -315,21 +357,27 @@ export default class ContactsView extends Vue {
console.log("All your gifts:", resp.data);
if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {};
const contactConfirmed: Record<string, number> = {};
const contactUnconfirmed: Record<string, number> = {};
const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) {
if (give.unit == "HUR") {
const recipDid: string = give.recipientDid;
const prevAmount = contactTotals[recipDid] || 0;
contactTotals[recipDid] = prevAmount + give.amount;
if (give.confirmed) {
const prevAmount = contactConfirmed[recipDid] || 0;
contactConfirmed[recipDid] = prevAmount + give.amount;
} else {
const prevAmount = contactUnconfirmed[recipDid] || 0;
contactUnconfirmed[recipDid] = prevAmount + give.amount;
}
const prevDesc = contactDescriptions[recipDid] || "";
// Since many make the tooltip too big, we'll just use the latest;
contactDescriptions[recipDid] = give.description || prevDesc;
}
}
//console.log("Done retrieving gives", contactTotals);
//console.log("Done retrieving gives", contactConfirmed);
this.givenByMeDescriptions = contactDescriptions;
this.givenByMeTotals = contactTotals;
this.givenByMeConfirmed = contactConfirmed;
}
} catch (error) {
this.alertTitle = "Error from Server";
@@ -352,20 +400,26 @@ export default class ContactsView extends Vue {
console.log("All gifts you've recieved:", resp.data);
if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {};
const contactConfirmed: Record<string, number> = {};
const contactUnconfirmed: Record<string, number> = {};
const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) {
if (give.unit == "HUR") {
const prevAmount = contactTotals[give.agentDid] || 0;
contactTotals[give.agentDid] = prevAmount + give.amount;
if (give.confirmed) {
const prevAmount = contactConfirmed[give.agentDid] || 0;
contactConfirmed[give.agentDid] = prevAmount + give.amount;
} else {
const prevAmount = contactUnconfirmed[give.agentDid] || 0;
contactUnconfirmed[give.agentDid] = prevAmount + give.amount;
}
const prevDesc = contactDescriptions[give.agentDid] || "";
// Since many make the tooltip too big, we'll just use the latest;
contactDescriptions[give.agentDid] = give.description || prevDesc;
}
}
//console.log("Done retrieving receipts", contactTotals);
//console.log("Done retrieving receipts", contactConfirmed);
this.givenToMeDescriptions = contactDescriptions;
this.givenToMeTotals = contactTotals;
this.givenToMeConfirmed = contactConfirmed;
}
} catch (error) {
this.alertTitle = "Error from Server";
@@ -675,16 +729,17 @@ export default class ContactsView extends Vue {
this.alertTitle = "";
this.alertMessage = "";
if (fromDid === identity.did) {
this.givenByMeTotals[toDid] = this.givenByMeTotals[toDid] + amount;
this.givenByMeConfirmed[toDid] =
this.givenByMeConfirmed[toDid] + amount;
// do this to update the UI (is there a better way?)
// eslint-disable-next-line no-self-assign
this.givenByMeTotals = this.givenByMeTotals;
this.givenByMeConfirmed = this.givenByMeConfirmed;
} else {
this.givenToMeTotals[fromDid] =
this.givenToMeTotals[fromDid] + amount;
this.givenToMeConfirmed[fromDid] =
this.givenToMeConfirmed[fromDid] + amount;
// do this to update the UI (is there a better way?)
// eslint-disable-next-line no-self-assign
this.givenToMeTotals = this.givenToMeTotals;
this.givenToMeConfirmed = this.givenToMeConfirmed;
}
}
} catch (error) {
@@ -707,6 +762,32 @@ export default class ContactsView extends Vue {
}
}
public selectedGiveTotal(
contactGivesConfirmed: Record<string, number>,
contactGivesUnconfirmed: Record<string, number>,
did: string
) {
/* eslint-disable prettier/prettier */
this.showGiveTotals
? ((contactGivesConfirmed[did] || 0) + (contactGivesUnconfirmed[did] || 0))
: this.showGiveConfirmed
? (contactGivesConfirmed[did] || 0)
: (contactGivesUnconfirmed[did] || 0);
/* eslint-enable prettier/prettier */
}
public toggleShowGiveTotals() {
if (this.showGiveTotals) {
this.showGiveTotals = false;
this.showGiveConfirmed = true;
} else if (this.showGiveConfirmed) {
this.showGiveTotals = false; // stays the same
this.showGiveConfirmed = false;
} else {
this.showGiveTotals = true;
this.showGiveConfirmed = true;
}
}
alertTitle = "";
alertMessage = "";
isAlertVisible = false;
@@ -733,6 +814,14 @@ export default class ContactsView extends Vue {
"duration-300": true,
};
}
public showGiveAmountsClassNames() {
return {
"bg-slate-900": this.showGiveTotals,
"bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
"bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
};
}
}
</script>