Feature update
-- Added option to edit and delete saved IDs
This commit is contained in:
sairaj mote
parent
9dd23f6151
commit
c701c5d3b3
74
css/main.css
74
css/main.css
@ -669,34 +669,53 @@ h3 {
|
||||
|
||||
#saved_ids_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.saved-id {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
.saved-id.highlight {
|
||||
box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
|
||||
}
|
||||
.saved-id .edit-saved {
|
||||
padding: 0.3rem;
|
||||
position: relative;
|
||||
justify-self: center;
|
||||
}
|
||||
.saved-id .edit-saved .icon {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.2rem;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
.saved-id__initials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 1rem;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--background-color), 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
.saved-id__title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
line-height: 1;
|
||||
background-color: var(--accent-color);
|
||||
justify-self: flex-start;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -705,7 +724,10 @@ h3 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#history {
|
||||
#cashier,
|
||||
#contact,
|
||||
#history,
|
||||
#settings {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
@ -718,6 +740,15 @@ h3 {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
#contact__transactions {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#payments_history_wrapper,
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
@ -741,7 +772,7 @@ h3 {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.transaction.sent .transaction__amount::before {
|
||||
content: "-";
|
||||
content: "- ";
|
||||
}
|
||||
.transaction.received .icon {
|
||||
fill: var(--green);
|
||||
@ -750,7 +781,7 @@ h3 {
|
||||
color: var(--green);
|
||||
}
|
||||
.transaction.received .transaction__amount::before {
|
||||
content: "-";
|
||||
content: "+ ";
|
||||
}
|
||||
.transaction__icon {
|
||||
display: flex;
|
||||
@ -950,17 +981,24 @@ h3 {
|
||||
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 8vmax;
|
||||
padding: 0 8vmax;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
#saved_ids_list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
|
||||
.saved-id {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#wallet_section {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -624,32 +624,48 @@ h3 {
|
||||
|
||||
#saved_ids_list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
.saved-id {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
user-select: none;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
padding: 0.5rem 0;
|
||||
&.highlight {
|
||||
box-shadow: 0 0 0.1rem 0.1rem var(--accent-color) inset;
|
||||
}
|
||||
.edit-saved {
|
||||
padding: 0.3rem;
|
||||
position: relative;
|
||||
justify-self: center;
|
||||
.icon {
|
||||
position: absolute;
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.2rem;
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
}
|
||||
}
|
||||
&__initials {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
color: rgba(var(--background-color), 1);
|
||||
background-color: var(--accent-color);
|
||||
border-radius: 1rem;
|
||||
height: 2.4rem;
|
||||
width: 2.4rem;
|
||||
font-size: 1.2rem;
|
||||
text-transform: uppercase;
|
||||
color: rgba(var(--background-color), 1);
|
||||
font-weight: 700;
|
||||
}
|
||||
&__title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
line-height: 1;
|
||||
background-color: var(--accent-color);
|
||||
justify-self: flex-start;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -658,7 +674,10 @@ h3 {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
#history {
|
||||
#cashier,
|
||||
#contact,
|
||||
#history,
|
||||
#settings {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
@ -670,6 +689,13 @@ h3 {
|
||||
border-radius: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#contact {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
#contact__transactions {
|
||||
overflow-y: auto;
|
||||
}
|
||||
#payments_history_wrapper,
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
@ -690,7 +716,7 @@ h3 {
|
||||
.transaction__amount {
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
&::before {
|
||||
content: "-";
|
||||
content: "- ";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -701,7 +727,7 @@ h3 {
|
||||
.transaction__amount {
|
||||
color: var(--green);
|
||||
&::before {
|
||||
content: "-";
|
||||
content: "+ ";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -880,16 +906,22 @@ h3 {
|
||||
}
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 8vmax;
|
||||
padding: 0 8vmax;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#saved_ids_list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
|
||||
}
|
||||
.saved-id {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
#wallet_section {
|
||||
grid-area: 1/2/3/3;
|
||||
|
||||
167
index.html
167
index.html
@ -147,57 +147,52 @@
|
||||
</div>
|
||||
<section id="home" class="page hide">
|
||||
<div id="user" class="hide grid user-element">
|
||||
<div class="card grid gap-1-5">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Quick actions </h4>
|
||||
</div>
|
||||
<div id="quick_actions_container">
|
||||
<button class="primary-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<div id="quick_actions_container" class="card">
|
||||
<button class="primary-action" onclick="showTokenTransfer('send')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
Send rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="showTokenTransfer('request')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
|
||||
</g>
|
||||
</svg>
|
||||
Request rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
<path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
|
||||
<path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
|
||||
<path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
|
||||
<rect height="2" width="2" x="19" y="19" />
|
||||
<rect height="2" width="2" x="13" y="13" />
|
||||
<rect height="2" width="2" x="15" y="15" />
|
||||
<rect height="2" width="2" x="13" y="17" />
|
||||
<rect height="2" width="2" x="15" y="19" />
|
||||
<rect height="2" width="2" x="17" y="17" />
|
||||
<rect height="2" width="2" x="17" y="13" />
|
||||
<rect height="2" width="2" x="19" y="15" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M20,2H4.01c-1.1,0-2,0.9-2,2L2,22l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M12,6c1.1,0,2,0.9,2,2s-0.9,2-2,2 s-2-0.9-2-2S10.9,6,12,6z M16,14H8v-0.57c0-0.81,0.48-1.53,1.22-1.85C10.07,11.21,11.01,11,12,11c0.99,0,1.93,0.21,2.78,0.58 C15.52,11.9,16,12.62,16,13.43V14z" />
|
||||
</g>
|
||||
</svg>
|
||||
Request rupee
|
||||
</button>
|
||||
<button class="primary-action" onclick="">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path d="M3,11h8V3H3V11z M5,5h4v4H5V5z" />
|
||||
<path d="M3,21h8v-8H3V21z M5,15h4v4H5V15z" />
|
||||
<path d="M13,3v8h8V3H13z M19,9h-4V5h4V9z" />
|
||||
<rect height="2" width="2" x="19" y="19" />
|
||||
<rect height="2" width="2" x="13" y="13" />
|
||||
<rect height="2" width="2" x="15" y="15" />
|
||||
<rect height="2" width="2" x="13" y="17" />
|
||||
<rect height="2" width="2" x="15" y="19" />
|
||||
<rect height="2" width="2" x="17" y="17" />
|
||||
<rect height="2" width="2" x="17" y="13" />
|
||||
<rect height="2" width="2" x="19" y="15" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
Scan FLO QR
|
||||
</button>
|
||||
</div>
|
||||
</g>
|
||||
</svg>
|
||||
Scan FLO QR
|
||||
</button>
|
||||
</div>
|
||||
<section id="wallet_section" class="card grid gap-1-5">
|
||||
<div class="flex align-center space-between">
|
||||
@ -220,10 +215,10 @@
|
||||
<h5>Balance</h5>
|
||||
<h1 class="h1" id="rupee_balance"></h1>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<!-- <div class="grid gap-1">
|
||||
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
|
||||
</sm-input>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="grid gap-0-5">
|
||||
<div class="flex">
|
||||
<button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
|
||||
@ -320,6 +315,23 @@
|
||||
<h4>No transactions</h4>
|
||||
</div>
|
||||
</section>
|
||||
<section id="contact" class="page hide">
|
||||
<div class="flex align-center">
|
||||
<a href="#/home" class="button icon-only margin-right-0-5">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
|
||||
</svg>
|
||||
</a>
|
||||
<h4 id="contact__title"></h4>
|
||||
</div>
|
||||
<div id="contact__transactions"></div>
|
||||
<div class="flex">
|
||||
<button class="button flex-1">Pay</button>
|
||||
<button class="button flex-1">Request</button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="activity" class="page page-layout hide">
|
||||
<h4>Activity</h4>
|
||||
<ul id="user-money-requests" class="observe-empty-state"></ul>
|
||||
@ -327,7 +339,7 @@
|
||||
<h4>No requests</h4>
|
||||
</div>
|
||||
</section>
|
||||
<section id="settings" class="page page-layout hide">
|
||||
<section id="settings" class="page hide">
|
||||
<h4>Settings</h4>
|
||||
<section class="grid gap-1">
|
||||
<div class="grid">
|
||||
@ -366,9 +378,43 @@
|
||||
autofocus>
|
||||
</sm-input>
|
||||
<sm-input id="flo_id_title_to_save" placeholder="Title" animate required></sm-input>
|
||||
<button class="button button--primary cta" onclick="userUI.saveId()" type="submit">Save</button>
|
||||
<button class="button button--primary cta" onclick="saveId()" type="submit">Save</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
<sm-popup id="edit_saved_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<div class="flex align-center">
|
||||
<button class="popup__header__close" onclick="hidePopup()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h3>Edit</h3>
|
||||
</div>
|
||||
</header>
|
||||
<section class="grid gap-1-5">
|
||||
<div class="grid gap-0-5">
|
||||
<h5>FLO ID</h5>
|
||||
<sm-copy id="edit_saved_id"></sm-copy>
|
||||
</div>
|
||||
<sm-form>
|
||||
<sm-input id="newAddrLabel" placeholder="Name" autofocus animate required></sm-input>
|
||||
<div class="flex align-center space-between">
|
||||
<button class="button icon-only" title="Delete this FLO ID?" onclick="deleteSaved()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="button button--primary cta" type="submit" onclick="saveChanges()">Save</button>
|
||||
</div>
|
||||
</sm-form>
|
||||
</section>
|
||||
</sm-popup>
|
||||
<sm-popup id="token_transfer_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<button class="popup__header__close justify-self-start" onclick="hidePopup()">
|
||||
@ -409,12 +455,17 @@
|
||||
|
||||
<!-- templates -->
|
||||
<template id="saved_id_template">
|
||||
<li>
|
||||
<a class="saved-id interact" href="">
|
||||
<li class="saved-id grid interact" tabindex="0">
|
||||
<button class="interact edit-saved" title="Edit saved ID">
|
||||
<div class="saved-id__initials"></div>
|
||||
<span class="saved-id__title"></span>
|
||||
<!-- <sm-copy class="saved-id__flo-id"></sm-copy> -->
|
||||
</a>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path
|
||||
d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h4 class="saved-id__title"></h4>
|
||||
</li>
|
||||
</template>
|
||||
<template id="transaction_template">
|
||||
|
||||
@ -2368,14 +2368,19 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
this.slottedOptions = undefined;
|
||||
this._value = undefined;
|
||||
this.scrollDistance = 0;
|
||||
this.assignedElements = [];
|
||||
|
||||
this.scrollLeft = this.scrollLeft.bind(this);
|
||||
this.scrollRight = this.scrollRight.bind(this);
|
||||
this.fireEvent = this.fireEvent.bind(this);
|
||||
this.setSelectedOption = this.setSelectedOption.bind(this);
|
||||
}
|
||||
get value() {
|
||||
return this._value;
|
||||
}
|
||||
set value(val) {
|
||||
this.setSelectedOption(val);
|
||||
}
|
||||
scrollLeft() {
|
||||
this.stripSelect.scrollBy({
|
||||
left: -this.scrollDistance,
|
||||
@ -2389,6 +2394,19 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
setSelectedOption(value) {
|
||||
if (this._value === value) return
|
||||
this._value = value;
|
||||
this.assignedElements.forEach(elem => {
|
||||
if (elem.value === value) {
|
||||
elem.setAttribute('active', '');
|
||||
elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
|
||||
}
|
||||
else
|
||||
elem.removeAttribute('active')
|
||||
});
|
||||
}
|
||||
|
||||
fireEvent() {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("change", {
|
||||
@ -2409,17 +2427,17 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
|
||||
const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
|
||||
slot.addEventListener('slotchange', e => {
|
||||
const assignedElements = slot.assignedElements();
|
||||
assignedElements.forEach(elem => {
|
||||
this.assignedElements = slot.assignedElements();
|
||||
this.assignedElements.forEach(elem => {
|
||||
if (elem.hasAttribute('selected')) {
|
||||
elem.setAttribute('active', '');
|
||||
this._value = elem.value;
|
||||
}
|
||||
});
|
||||
if (!this.hasAttribute('multiline')) {
|
||||
if (assignedElements.length > 0) {
|
||||
firstOptionObserver.observe(slot.assignedElements()[0]);
|
||||
lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]);
|
||||
if (this.assignedElements.length > 0) {
|
||||
firstOptionObserver.observe(this.assignedElements[0]);
|
||||
lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
|
||||
}
|
||||
else {
|
||||
navButtonLeft.classList.add('hide');
|
||||
@ -2446,10 +2464,7 @@ customElements.define('strip-select', class extends HTMLElement {
|
||||
resObs.observe(this);
|
||||
this.stripSelect.addEventListener('option-clicked', e => {
|
||||
if (this._value !== e.target.value) {
|
||||
this._value = e.target.value;
|
||||
slot.assignedElements().forEach(elem => elem.removeAttribute('active'));
|
||||
e.target.setAttribute('active', '');
|
||||
e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
|
||||
this.setSelectedOption(e.target.value);
|
||||
this.fireEvent();
|
||||
}
|
||||
});
|
||||
|
||||
@ -97,8 +97,7 @@ userUI.renderSavedIds = async function () {
|
||||
if (savedIds.length && await compactIDB.readData('savedIds', 'lastSyncTime') !== savedIds[0].time) {
|
||||
await compactIDB.clearData('savedIds');
|
||||
const dataToDecrypt = floCloudAPI.util.decodeMessage(savedIds[0].message)
|
||||
const data = JSON.parse(floCrypto.decryptData(dataToDecrypt, myPrivKey));
|
||||
console.log(data)
|
||||
const data = JSON.parse(Crypto.AES.decrypt(dataToDecrypt, myPrivKey));
|
||||
for (let key in data) {
|
||||
floGlobals.savedIds[key] = data[key];
|
||||
compactIDB.addData('savedIds', data[key], key);
|
||||
@ -111,29 +110,12 @@ userUI.renderSavedIds = async function () {
|
||||
floGlobals.savedIds[key] = idsToRender[key];
|
||||
}
|
||||
}
|
||||
console.log(floGlobals.savedIds)
|
||||
for (const key in floGlobals.savedIds) {
|
||||
frag.append(render.savedId(key, floGlobals.savedIds[key]));
|
||||
}
|
||||
getRef('saved_ids_list').append(frag);
|
||||
}
|
||||
|
||||
userUI.saveId = async function () {
|
||||
const floID = getRef('flo_id_to_save').value.trim();
|
||||
const title = getRef('flo_id_title_to_save').value.trim();
|
||||
const dataToSend = floCrypto.encryptData(JSON.stringify({ ...floGlobals.savedIds, [floID]: { title } }), myPubKey)
|
||||
floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID }).then(result => {
|
||||
console.log(result);
|
||||
floGlobals.savedIds[floID] = { title }
|
||||
notify(`Saved ${floID}`, 'success');
|
||||
getRef('saved_ids_list').append(render.savedId(floID, { title }));
|
||||
hidePopup();
|
||||
}).catch(error => {
|
||||
console.error(error);
|
||||
notify(error, 'error');
|
||||
})
|
||||
}
|
||||
|
||||
userUI.payRequest = function (reqID) {
|
||||
let request = User.moneyRequests[reqID];
|
||||
getConfirmation('Pay?', { message: `Do you want to pay ${request.message.amount} to ${request.senderID}?` }).then(confirmation => {
|
||||
@ -231,7 +213,7 @@ function completeTokenToCashRequest(request) {
|
||||
})
|
||||
}
|
||||
|
||||
function getFloIdName(floID) {
|
||||
function getFloIdTitle(floID) {
|
||||
return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
|
||||
}
|
||||
|
||||
@ -257,7 +239,6 @@ const render = {
|
||||
const { title } = details.hasOwnProperty('title') ? details : { title: details };
|
||||
const clone = getRef('saved_id_template').content.cloneNode(true).firstElementChild;
|
||||
clone.dataset.floId = floID;
|
||||
clone.querySelector('a').href = `#/saved&id=${floID}`;
|
||||
clone.querySelector('.saved-id__initials').textContent = title.charAt(0);
|
||||
clone.querySelector('.saved-id__title').textContent = title;
|
||||
return clone;
|
||||
@ -270,11 +251,11 @@ const render = {
|
||||
clone.querySelector('.transaction__amount').textContent = formatAmount(tokenAmount);
|
||||
if (sender === myFloID) {
|
||||
clone.classList.add('sent');
|
||||
clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdName(receiver) || 'Myself'}`;
|
||||
clone.querySelector('.transaction__receiver').textContent = `Sent to ${getFloIdTitle(receiver) || 'Myself'}`;
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon sent" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"/></svg>`;
|
||||
} else if (receiver === myFloID) {
|
||||
clone.classList.add('received');
|
||||
clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdName(sender)}`;
|
||||
clone.querySelector('.transaction__receiver').textContent = `Received from ${getFloIdTitle(sender)}`;
|
||||
clone.querySelector('.transaction__icon').innerHTML = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/></svg>`;
|
||||
} else { //This should not happen unless API returns transaction that does not involve myFloID
|
||||
row.insertCell().textContent = tx.sender;
|
||||
@ -297,8 +278,7 @@ const render = {
|
||||
return clone;
|
||||
},
|
||||
walletRequestCard(details) {
|
||||
const { time, receiverID, message: { mode, amount }, note, tag, vectorClock } = details;
|
||||
console.log(details);
|
||||
const { time, message: { mode, amount }, note, tag, vectorClock } = details;
|
||||
const clone = getRef('wallet_request_template').content.cloneNode(true).firstElementChild;
|
||||
clone.id = vectorClock;
|
||||
clone.querySelector('.wallet-request__details').textContent = `${mode === 'cash-to-token' ? 'Deposit' : 'Withdraw'} ${formatAmount(amount)}`;
|
||||
@ -309,11 +289,8 @@ const render = {
|
||||
case 'COMPLETED':
|
||||
clone.children[1].append(
|
||||
createElement('div', {
|
||||
className: 'grid',
|
||||
innerHTML: `
|
||||
<h5 style="margin-bottom: 0.3rem;">Transaction ID</h5>
|
||||
<sm-copy class="wallet-request__note" value="${note}"></sm-copy>
|
||||
`
|
||||
className: 'flex flex-wrap align-center wallet-request__note',
|
||||
innerHTML: `<b>Transaction ID:</b><sm-copy value="${note}"></sm-copy>`
|
||||
})
|
||||
);
|
||||
icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>`
|
||||
@ -375,6 +352,52 @@ function showTokenTransfer(type) {
|
||||
showPopup('token_transfer_popup');
|
||||
}
|
||||
|
||||
saveId = async function () {
|
||||
const floID = getRef('flo_id_to_save').value.trim();
|
||||
const title = getRef('flo_id_title_to_save').value.trim();
|
||||
floGlobals.savedIds[floID] = { title }
|
||||
getRef('saved_ids_list').append(render.savedId(floID, { title }));
|
||||
syncSavedIds().then(() => {
|
||||
notify(`Saved ${floID}`, 'success');
|
||||
hidePopup();
|
||||
}).catch(error => {
|
||||
notify(error, 'error');
|
||||
})
|
||||
}
|
||||
function syncSavedIds() {
|
||||
const dataToSend = Crypto.AES.encrypt(JSON.stringify(floGlobals.savedIds), myPrivKey);
|
||||
return floCloudAPI.sendApplicationData(dataToSend, 'savedIds', { receiverID: myFloID });
|
||||
}
|
||||
delegate(getRef('saved_ids_list'), 'click', '.saved-id', e => {
|
||||
if (e.target.closest('.edit-saved')) {
|
||||
const target = e.target.closest('.saved-id');
|
||||
getRef('edit_saved_id').setAttribute('value', target.dataset.floId);
|
||||
getRef('newAddrLabel').value = getFloIdTitle(target.dataset.floId);
|
||||
showPopup('edit_saved_popup');
|
||||
} else {
|
||||
const target = e.target.closest('.saved-id');
|
||||
window.location.hash = `#/contact?floId=${target.dataset.floId}`;
|
||||
}
|
||||
});
|
||||
function deleteSaved() {
|
||||
getConfirmation('Do you want delete this FLO ID?', {
|
||||
confirmText: 'Delete',
|
||||
}).then(res => {
|
||||
if (res) {
|
||||
const toDelete = getRef('saved_ids_list').querySelector(`.saved-id[data-flo-id="${getRef('edit_saved_id').value}"]`);
|
||||
if (toDelete)
|
||||
toDelete.remove();
|
||||
delete floGlobals.savedIds[getRef('edit_saved_id').value];
|
||||
hidePopup();
|
||||
syncSavedIds().then(() => {
|
||||
notify(`Deleted saved ID`, 'success');
|
||||
}).catch(error => {
|
||||
notify(error, 'error');
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function executeUserAction() {
|
||||
const floID = getRef('tt_flo_id').value.trim(),
|
||||
amount = parseFloat(getRef('tt_amount').value),
|
||||
|
||||
@ -186,7 +186,7 @@ function getFormattedTime(time, format) {
|
||||
return `${month} ${date}, ${year}`;
|
||||
break;
|
||||
default:
|
||||
return `${month} ${date} ${year}, ${finalHours}`;
|
||||
return `${month} ${date}, ${year} at ${finalHours}`;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@ -307,6 +307,9 @@ async function showPage(targetPage, options = {}) {
|
||||
getRef('generated_private_key').value = privKey
|
||||
targetPage = 'sign_up'
|
||||
break;
|
||||
case 'contact':
|
||||
getRef('contact__title').textContent = getFloIdTitle(params.floId)
|
||||
break;
|
||||
case 'history':
|
||||
let transactionsList = []
|
||||
if (!params.hasOwnProperty('type')) {
|
||||
@ -351,12 +354,13 @@ async function showPage(targetPage, options = {}) {
|
||||
walletHistoryLoader.update(transactionsList)
|
||||
} else {
|
||||
walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
|
||||
// to-do: set value of history type selector
|
||||
}
|
||||
walletHistoryLoader.init()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
getRef('history_type_selector').value = params.type
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
@ -365,7 +369,23 @@ async function showPage(targetPage, options = {}) {
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
|
||||
getRef(pageId).classList.remove('hide')
|
||||
getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' })
|
||||
getRef('pages_container').style.overflowY = "hidden";
|
||||
getRef(pageId).animate([
|
||||
{
|
||||
opacity: 0,
|
||||
transform: 'translateY(1rem)'
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
transform: 'translateY(0)'
|
||||
},
|
||||
],
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
|
||||
}).onfinish = () => {
|
||||
getRef('pages_container').style.overflowY = "";
|
||||
}
|
||||
pagesData.lastPage = pageId
|
||||
}
|
||||
if (params)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user