|
@ -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> |
|
|