Browse Source

feat: add tooltip for latest give description

kb/add-usage-guide
Trent Larson 2 years ago
parent
commit
a7363eadcf
  1. 69
      src/views/ContactsView.vue
  2. 2
      src/views/ProjectsView.vue

69
src/views/ContactsView.vue

@ -46,7 +46,7 @@
<section id="Content" class="p-6 pb-24"> <section id="Content" class="p-6 pb-24">
<!-- Heading --> <!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
My Contacts Your Contacts
</h1> </h1>
<!-- New Contact --> <!-- New Contact -->
@ -137,14 +137,23 @@
<div v-if="showGiveTotals" class="float-right"> <div v-if="showGiveTotals" class="float-right">
<div class="float-right"> <div class="float-right">
<div class="tooltip">
to: {{ givenByMeTotals[contact.did] || 0 }} to: {{ givenByMeTotals[contact.did] || 0 }}
<span class="tooltiptext-left">{{
givenByMeDescriptions[contact.did]
}}</span>
<button <button
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6" class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@click="onClickAddGive(identity.did, contact.did)" @click="onClickAddGive(identity.did, contact.did)"
> >
+ +
</button> </button>
</div>
<div class="tooltip">
by: {{ givenToMeTotals[contact.did] || 0 }} by: {{ givenToMeTotals[contact.did] || 0 }}
<span class="tooltiptext-left">
{{ givenByMeDescriptions[contact.did] }}
</span>
<button <button
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6" class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@click="onClickAddGive(contact.did, identity.did)" @click="onClickAddGive(contact.did, identity.did)"
@ -154,6 +163,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</li> </li>
</ul> </ul>
</section> </section>
@ -187,6 +197,17 @@ const Buffer = require("buffer/").Buffer;
const SERVICE_ID = "endorser.ch"; const SERVICE_ID = "endorser.ch";
export interface GiveServerRecord {
agentDid: string;
amount: number;
confirmed: number;
description: string;
fullClaim: GiveVerifiableCredential;
handleId: string;
recipientDid: string;
unit: string;
}
export interface GiveVerifiableCredential { export interface GiveVerifiableCredential {
"@context": string; "@context": string;
"@type": string; "@type": string;
@ -210,8 +231,12 @@ export interface RegisterVerifiableCredential {
export default class ContactsView extends Vue { export default class ContactsView extends Vue {
contacts: Array<Contact> = []; contacts: Array<Contact> = [];
contactInput = ""; contactInput = "";
// { "did:...": concatenated-descriptions } entry for each contact
givenByMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact // { "did:...": amount } entry for each contact
givenByMeTotals: Record<string, number> = {}; givenByMeTotals: Record<string, number> = {};
// { "did:...": concatenated-descriptions } entry for each contact
givenToMeDescriptions: Record<string, string> = {};
// { "did:...": amount } entry for each contact // { "did:...": amount } entry for each contact
givenToMeTotals: Record<string, number> = {}; givenToMeTotals: Record<string, number> = {};
hourDescriptionInput = ""; hourDescriptionInput = "";
@ -287,17 +312,23 @@ export default class ContactsView extends Vue {
Authorization: "Bearer " + token, Authorization: "Bearer " + token,
}; };
const resp = await this.axios.get(url, { headers }); const resp = await this.axios.get(url, { headers });
//console.log("Server response", resp.status, resp.data); console.log("All your gifts:", resp.data);
if (resp.status === 200) { if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {}; const contactTotals: Record<string, number> = {};
for (const give of resp.data.data) { const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) {
if (give.unit == "HUR") { if (give.unit == "HUR") {
const recipDid: string = give.recipientDid; const recipDid: string = give.recipientDid;
const prevAmount = contactTotals[recipDid] || 0; const prevAmount = contactTotals[recipDid] || 0;
contactTotals[recipDid] = prevAmount + give.amount; contactTotals[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", contactTotals);
this.givenByMeDescriptions = contactDescriptions;
this.givenByMeTotals = contactTotals; this.givenByMeTotals = contactTotals;
} }
} catch (error) { } catch (error) {
@ -318,16 +349,22 @@ export default class ContactsView extends Vue {
Authorization: "Bearer " + token, Authorization: "Bearer " + token,
}; };
const resp = await this.axios.get(url, { headers }); const resp = await this.axios.get(url, { headers });
//console.log("Server response", resp.status, resp.data); console.log("All gifts you've recieved:", resp.data);
if (resp.status === 200) { if (resp.status === 200) {
const contactDescriptions: Record<string, string> = {};
const contactTotals: Record<string, number> = {}; const contactTotals: Record<string, number> = {};
for (const give of resp.data.data) { const allData: Array<GiveServerRecord> = resp.data.data;
for (const give of allData) {
if (give.unit == "HUR") { if (give.unit == "HUR") {
const prevAmount = contactTotals[give.agentDid] || 0; const prevAmount = contactTotals[give.agentDid] || 0;
contactTotals[give.agentDid] = prevAmount + give.amount; contactTotals[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", contactTotals);
this.givenToMeDescriptions = contactDescriptions;
this.givenToMeTotals = contactTotals; this.givenToMeTotals = contactTotals;
} }
} catch (error) { } catch (error) {
@ -700,6 +737,7 @@ export default class ContactsView extends Vue {
</script> </script>
<style> <style>
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
/* Tooltip container */ /* Tooltip container */
.tooltip { .tooltip {
position: relative; position: relative;
@ -717,13 +755,32 @@ export default class ContactsView extends Vue {
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute; position: absolute;
z-index: 1; z-index: 1;
} }
/* How do we share with the above so code isn't duplicated? */
.tooltip .tooltiptext-left {
visibility: hidden;
width: 200px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 0%;
right: 105%;
margin-left: -60px;
}
/* Show the tooltip text when you mouse over the tooltip container */ /* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext { .tooltip:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
.tooltip:hover .tooltiptext-left {
visibility: visible;
}
</style> </style>

2
src/views/ProjectsView.vue

@ -45,7 +45,7 @@
<section id="Content" class="p-6 pb-24"> <section id="Content" class="p-6 pb-24">
<!-- Heading --> <!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8"> <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
My Plans Your Plans
</h1> </h1>
<!-- Quick Search --> <!-- Quick Search -->

Loading…
Cancel
Save