RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feature and UI update

Browse Source 
Added lazy loading to transactions history
This commit is contained in:
sairaj mote 2022-04-13 01:40:46 +05:30
parent 9f2826d887
commit 62ec6de8ba
8 changed files with 469 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
css/main.css
View File

@ -26,9 +26,20 @@ body {
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
transition: background-color 0.3s; transition: background-color 0.3s;
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
body::before {
content: "";
position: absolute;
height: max(12rem, 16vmax);
background-color: #256eff;
width: 100%;
left: 0;
top: 0;
z-index: -1;
}
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #90b8f8; --accent-color: #90b8f8;
@ -182,7 +193,7 @@ sm-textarea button .icon {
} }
sm-button { sm-button {
--padding: 0.6rem 0.8rem; --padding: 0.8rem;
} }
sm-button[variant=primary] .icon { sm-button[variant=primary] .icon {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
@ -560,7 +571,8 @@ h3 {
} }
#main_header { #main_header {
padding: 1rem 1.5rem; --text-color: 220, 220, 220;
padding: 1rem max(4vw, 1.5rem);
} }
#main_header a { #main_header a {
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
@ -598,6 +610,17 @@ h3 {
clip-path: circle(0); clip-path: circle(0);
} }
#user {
gap: 0.5rem;
padding: 0 1.5rem;
}
#quick_actions_container {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
}
.primary-action { .primary-action {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -608,16 +631,38 @@ h3 {
font-size: 0.8rem; font-size: 0.8rem;
border-radius: 0.5rem; border-radius: 0.5rem;
background-color: transparent; background-color: transparent;
min-width: 5rem;
max-width: 6rem;
text-align: center; text-align: center;
} }
.primary-action .icon { .primary-action .icon {
fill: var(--accent-color); fill: var(--accent-color);
} }
#user { #rupee_balance span:first-of-type {
padding: 1rem 1.5rem; font-size: 1.5rem;
}
#rupee_balance span:last-of-type {
font-size: 0.8rem;
}
.wallet-action {
display: flex;
flex-direction: column;
white-space: normal;
font-size: 0.85rem;
padding: 0.8rem 0.5rem;
color: rgba(var(--text-color), 1);
text-align: center;
align-items: center;
justify-content: center;
background-color: rgba(var(--text-color), 0.03);
flex: 1;
}
.wallet-action:nth-of-type(2) {
margin: 0 0.5rem;
}
.wallet-action .icon {
margin-bottom: 0.8rem;
fill: var(--accent-color);
} }
#saved_ids_list { #saved_ids_list {
@ -649,6 +694,7 @@ h3 {
} }
.saved-id__title { .saved-id__title {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 1);
} }
.card { .card {
@ -657,14 +703,21 @@ h3 {
padding: 1.5rem; padding: 1.5rem;
} }
#history > *, #history {
#wallet_history > * { height: 100%;
align-content: flex-start;
background-color: rgba(var(--foreground-color), 1);
width: min(60ch, 100%); width: min(60ch, 100%);
justify-self: center; justify-self: center;
margin: 0 auto;
padding: 1.5rem;
overflow-y: auto;
border-radius: 0.5rem;
grid-template-columns: minmax(0, 1fr);
} }
#token_transactions { #payments_history_wrapper,
flex-direction: column; #wallet_history_wrapper {
padding-bottom: 4rem; padding-bottom: 4rem;
} }
@ -855,6 +908,7 @@ h3 {
} }
#user { #user {
gap: 1rem;
padding: 1.5rem 8vmax; padding: 1.5rem 8vmax;
grid-template-columns: 1fr 20rem; grid-template-columns: 1fr 20rem;
align-content: flex-start; align-content: flex-start;
@ -893,10 +947,12 @@ h3 {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
.button:not([disabled]) { button,
.button:not([disabled]) {
transition: background-color 0.3s, filter 0.3s; transition: background-color 0.3s, filter 0.3s;
} }
.button:not([disabled]):hover { button:hover,
.button:not([disabled]):hover {
filter: contrast(2); filter: contrast(2);
} }
} }

9
css/main.css.map
View File

File diff suppressed because one or more lines are too long

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

81
css/main.scss
View File

@ -26,8 +26,19 @@ body {
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
background-color: rgba(var(--background-color), 1); background-color: rgba(var(--background-color), 1);
transition: background-color 0.3s; transition: background-color 0.3s;
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&::before {
content: "";
position: absolute;
height: max(12rem, 16vmax);
background-color: #256eff;
width: 100%;
left: 0;
top: 0;
z-index: -1;
}
} }
body[data-theme="dark"] { body[data-theme="dark"] {
@ -160,7 +171,7 @@ sm-textarea {
} }
} }
sm-button { sm-button {
--padding: 0.6rem 0.8rem; --padding: 0.8rem;
&[variant="primary"] { &[variant="primary"] {
.icon { .icon {
fill: rgba(var(--background-color), 1); fill: rgba(var(--background-color), 1);
@ -519,7 +530,8 @@ h3 {
} }
} }
#main_header { #main_header {
padding: 1rem 1.5rem; --text-color: 220, 220, 220;
padding: 1rem max(4vw, 1.5rem);
a { a {
color: rgba(var(--text-color), 1); color: rgba(var(--text-color), 1);
} }
@ -554,6 +566,15 @@ h3 {
.clip { .clip {
clip-path: circle(0); clip-path: circle(0);
} }
#user {
gap: 0.5rem;
padding: 0 1.5rem;
}
#quick_actions_container {
display: grid;
gap: 0.5rem;
grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
}
.primary-action { .primary-action {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -565,16 +586,40 @@ h3 {
border-radius: 0.5rem; border-radius: 0.5rem;
// background-color: rgba(var(--text-color), 0.06); // background-color: rgba(var(--text-color), 0.06);
background-color: transparent; background-color: transparent;
min-width: 5rem;
max-width: 6rem;
text-align: center; text-align: center;
.icon { .icon {
fill: var(--accent-color); fill: var(--accent-color);
} }
} }
#user { #rupee_balance {
padding: 1rem 1.5rem; span:first-of-type {
font-size: 1.5rem;
}
span:last-of-type {
font-size: 0.8rem;
}
} }
.wallet-action {
display: flex;
flex-direction: column;
white-space: normal;
font-size: 0.85rem;
padding: 0.8rem 0.5rem;
color: rgba(var(--text-color), 1);
text-align: center;
align-items: center;
justify-content: center;
background-color: rgba(var(--text-color), 0.03);
flex: 1;
&:nth-of-type(2) {
margin: 0 0.5rem;
}
.icon {
margin-bottom: 0.8rem;
fill: var(--accent-color);
}
}
#saved_ids_list { #saved_ids_list {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
@ -602,6 +647,7 @@ h3 {
} }
&__title { &__title {
font-size: 0.9rem; font-size: 0.9rem;
color: rgba(var(--text-color), 1);
} }
} }
@ -610,15 +656,20 @@ h3 {
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 1.5rem; padding: 1.5rem;
} }
#history, #history {
#wallet_history { height: 100%;
& > * { align-content: flex-start;
width: min(60ch, 100%); background-color: rgba(var(--foreground-color), 1);
justify-self: center; width: min(60ch, 100%);
} justify-self: center;
margin: 0 auto;
padding: 1.5rem;
overflow-y: auto;
border-radius: 0.5rem;
grid-template-columns: minmax(0, 1fr);
} }
#token_transactions { #payments_history_wrapper,
flex-direction: column; #wallet_history_wrapper {
padding-bottom: 4rem; padding-bottom: 4rem;
} }
.transaction { .transaction {
@ -785,6 +836,7 @@ h3 {
padding: 1rem 1.5rem 0 1.5rem; padding: 1rem 1.5rem 0 1.5rem;
} }
#user { #user {
gap: 1rem;
padding: 1.5rem 8vmax; padding: 1.5rem 8vmax;
grid-template-columns: 1fr 20rem; grid-template-columns: 1fr 20rem;
align-content: flex-start; align-content: flex-start;
@ -821,6 +873,7 @@ h3 {
background-color: rgba(var(--text-color), 0.06); background-color: rgba(var(--text-color), 0.06);
} }
} }
button,
.button:not([disabled]) { .button:not([disabled]) {
transition: background-color 0.3s, filter 0.3s; transition: background-color 0.3s, filter 0.3s;
&:hover { &:hover {

126
index.html
View File

@ -146,16 +146,13 @@
</div> </div>
</div> </div>
<section id="home" class="page hide"> <section id="home" class="page hide">
<div id="user" class="hide grid gap-1-5 user-element"> <div id="user" class="hide grid user-element">
<div class="card grid gap-1-5"> <div class="card grid gap-1-5">
<div class="flex align-center space-between"> <div class="flex align-center space-between">
<h4>Quick actions </h4> <h4>Quick actions </h4>
<a href="#/history" class="button flex align-center">
See history
</a>
</div> </div>
<div class="flex"> <div id="quick_actions_container">
<button class="button primary-action" onclick="showTokenTransfer('send')"> <button class="primary-action" onclick="showTokenTransfer('send')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
width="24px" fill="#000000"> width="24px" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <path d="M0 0h24v24H0z" fill="none" />
@ -163,7 +160,7 @@
</svg> </svg>
Send Send
</button> </button>
<button class="button primary-action" onclick="showTokenTransfer('request')"> <button class="primary-action" onclick="showTokenTransfer('request')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" <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"> height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<g> <g>
@ -194,38 +191,59 @@
</svg> </svg>
Wallet Wallet
</h4> </h4>
<a href="#/wallet_history" class="button">See History</a>
</div> </div>
<div class="grid gap-0-5"> <div class="grid gap-0-5">
<h5>Balance</h5> <h5>Balance</h5>
<h1 class="h1" id="rupee_balance"></h1> <h1 class="h1" id="rupee_balance"></h1>
</div> </div>
<div class="grid gap-1"> <!-- <div class="grid gap-1">
<!-- <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
animate> animate>
</sm-input> --> </sm-input>
<div class="flex"> </div> -->
<button class="flex gap-0-5 flex-1" onclick="userUI.requestTokenFromCashier()"> <div class="flex">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" <button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <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="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
</svg>
Top-up wallet
</button>
<button class="wallet-action" onclick="userUI.withdrawCashFromCashier()">
<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" /> <rect fill="none" height="24" width="24" />
</g>
<g>
<g> <g>
<path <rect height="7" width="3" x="4" y="10" />
d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z" /> <rect height="7" width="3" x="10.5" y="10" />
<rect height="3" width="20" x="2" y="19" />
<rect height="7" width="3" x="17" y="10" />
<polygon points="12,1 2,6 2,8 22,8 22,6" />
</g> </g>
</svg> </g>
Deposit </svg>
</button> Transfer to bank
<button class="flex gap-0-5 flex-1" onclick="userUI.withdrawCashFromCashier()"> </button>
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" <a href="#/history" class="wallet-action interact button">
width="24px" fill="#000000"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
<path d="M0 0h24v24H0z" fill="none" /> height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
<path d="M0,0h24v24H0V0z" fill="none" />
<g>
<path <path
d="M19 14V6c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zm-9-1c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-6v11c0 1.1-.9 2-2 2H4v-2h17V7h2z" /> d="M19.5,3.5L18,2l-1.5,1.5L15,2l-1.5,1.5L12,2l-1.5,1.5L9,2L7.5,3.5L6,2v14H3v3c0,1.66,1.34,3,3,3h12c1.66,0,3-1.34,3-3V2 L19.5,3.5z M19,19c0,0.55-0.45,1-1,1s-1-0.45-1-1v-3H8V5h11V19z" />
</svg> <rect height="2" width="6" x="9" y="7" />
Withdraw <rect height="2" width="2" x="16" y="7" />
</button> <rect height="2" width="6" x="9" y="10" />
</div> <rect height="2" width="2" x="16" y="10" />
</g>
</svg>
See History
</a>
</div> </div>
</section> </section>
<div class="card"> <div class="card">
@ -247,38 +265,34 @@
</div> </div>
</section> </section>
</section> </section>
<section id="history" class="page page-layout hide grid gap-1"> <section id="history" class="page hide grid gap-1">
<div class="grid gap-1" style="justify-items: flex-start;"> <div class="grid gap-1">
<a href="#/home" class="button align-start"> <a href="#/home" class="button icon-only justify-self-start">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
fill="#000000"> fill="#000000">
<path d="M0 0h24v24H0z" fill="none" /> <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" /> <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
</svg> </svg>
</a> </a>
<h4>Transactions history</h4> <div class="flex align-center space-between">
<h4>Transactions history</h4>
<strip-select id="history_type_selector">
<strip-option value="payments" selected>Payments</strip-option>
<strip-option value="wallet">Wallet</strip-option>
</strip-select>
</div>
</div> </div>
<ul id="token_transactions" class="observe-empty-state"> <div id="payments_history_wrapper">
</ul> <ul id="payments_history" class="observe-empty-state"></ul>
<div class=" empty-state gap-1 justify-center text-center"> <div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4> <h4>No transactions</h4>
</div> </div>
</section>
<section id="wallet_history" class="page page-layout hide">
<div class="grid gap-1" style="justify-items: flex-start;">
<a href="#/home" class="button align-start">
<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>Wallet history</h4>
</div>
<ul id="user-cashier-requests" class="observe-empty-state"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4>
</div> </div>
<div id="wallet_history_wrapper" class="hide">
<ul id="wallet_history" class="observe-empty-state"></ul>
<div class=" empty-state gap-1 justify-center text-center">
<h4>No transactions</h4>
</div>
</section> </section>
<section id="activity" class="page page-layout hide"> <section id="activity" class="page page-layout hide">
<h4>Activity</h4> <h4>Activity</h4>
@ -429,12 +443,13 @@
floDapps.setCustomPrivKeyInput(getSignedIn) floDapps.setCustomPrivKeyInput(getSignedIn)
floDapps.setAppObjectStores({ savedIds: {} }) floDapps.setAppObjectStores({ savedIds: {} })
floDapps.launchStartUp().then(result => { floDapps.launchStartUp().then(result => {
history.replaceState(null, null, " ")
console.log(`Welcome ${myFloID}`); console.log(`Welcome ${myFloID}`);
getRef('logged_in_user_id').value = myFloID; getRef('logged_in_user_id').value = myFloID;
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID) floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
tokenAPI.getBalance(myFloID).then(balance => { tokenAPI.getBalance(myFloID).then(balance => {
getRef('rupee_balance').textContent = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' }) const formattedBalance = balance.toLocaleString(`en-IN`, { style: 'currency', currency: 'INR' })
const [beforeDecimal, afterDecimal] = formattedBalance.split('.')
getRef('rupee_balance').innerHTML = `<span><b>${beforeDecimal}</b></span>.<span>${afterDecimal}</span>`
}) })
if (floGlobals.isSubAdmin) { if (floGlobals.isSubAdmin) {
cashierUI.renderRequests(Cashier.Requests); cashierUI.renderRequests(Cashier.Requests);
@ -456,7 +471,6 @@
showPage(window.location.hash, { firstLoad: true }) showPage(window.location.hash, { firstLoad: true })
}).catch(error => console.error(error)) }).catch(error => console.error(error))
} }
renderAllTokenTransactions();
}).catch(error => console.error(error)) }).catch(error => console.error(error))
} }
</script> </script>

331
scripts/components.js
View File

@ -689,150 +689,150 @@ customElements.define('sm-input',
}) })
const smNotifications = document.createElement('template') const smNotifications = document.createElement('template')
smNotifications.innerHTML = ` smNotifications.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
}
:host{
display: flex;
--icon-height: 1.5rem;
--icon-width: 1.5rem;
}
.hide{
opacity: 0 !important;
pointer-events: none !important;
}
.notification-panel{
display: grid;
width: 100%;
gap: 0.5rem;
position: fixed;
left: 0;
bottom: 0;
z-index: 100;
max-height: 100%;
padding: 1rem;
overflow: hidden auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
touch-action: none;
}
.notification-panel:empty{
display:none;
}
.notification{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 0.3rem;
background: rgba(var(--background-color, (255,255,255)), 1);
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
padding: 1rem;
align-items: center;
touch-action: none;
}
.icon-container:not(:empty){
margin-right: 0.5rem;
height: var(--icon-height);
width: var(--icon-width);
}
h4:first-letter,
p:first-letter{
text-transform: uppercase;
}
h4{
font-weight: 400;
}
p{
line-height: 1.6;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgba(var(--text-color, (17,17,17)), 0.9);
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
}
.notification:last-of-type{
margin-bottom: 0;
}
.icon {
height: 100%;
width: 100%;
fill: rgba(var(--text-color, (17,17,17)), 0.7);
}
.icon--success {
fill: var(--green);
}
.icon--failure,
.icon--error {
fill: var(--danger-color);
}
.close{
height: 2rem;
width: 2rem;
border: none;
cursor: pointer;
margin-left: 1rem;
border-radius: 50%;
padding: 0.3rem;
transition: background-color 0.3s, transform 0.3s;
background-color: transparent;
}
.close:active{
transform: scale(0.9);
}
@media screen and (min-width: 640px){
.notification-panel{
max-width: 28rem;
width: max-content;
}
.notification{
width: auto;
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color, (17,17,17)), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color, (17,17,17)), 0.5);
} }
} :host{
.close:hover{ display: flex;
background-color: rgba(var(--text-color, (17,17,17)), 0.1); --icon-height: 1.5rem;
} --icon-width: 1.5rem;
} }
</style> .hide{
<div class="notification-panel"></div> opacity: 0 !important;
`; pointer-events: none !important;
}
.notification-panel{
display: grid;
width: 100%;
gap: 0.5rem;
position: fixed;
left: 0;
top: 0;
z-index: 100;
max-height: 100%;
padding: 1rem;
overflow: hidden auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
touch-action: none;
}
.notification-panel:empty{
display:none;
}
.notification{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
border-radius: 0.3rem;
background: rgba(var(--foreground-color, (255,255,255)), 1);
overflow: hidden;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
padding: 1rem;
align-items: center;
touch-action: none;
}
.icon-container:not(:empty){
margin-right: 0.5rem;
height: var(--icon-height);
width: var(--icon-width);
}
h4:first-letter,
p:first-letter{
text-transform: uppercase;
}
h4{
font-weight: 400;
}
p{
line-height: 1.6;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgba(var(--text-color, (17,17,17)), 0.9);
overflow-wrap: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
max-width: 100%;
}
.notification:last-of-type{
margin-bottom: 0;
}
.icon {
height: 100%;
width: 100%;
fill: rgba(var(--text-color, (17,17,17)), 0.7);
}
.icon--success {
fill: var(--green);
}
.icon--failure,
.icon--error {
fill: var(--danger-color);
}
.close{
height: 2rem;
width: 2rem;
border: none;
cursor: pointer;
margin-left: 1rem;
border-radius: 50%;
padding: 0.3rem;
transition: background-color 0.3s, transform 0.3s;
background-color: transparent;
}
.close:active{
transform: scale(0.9);
}
@media screen and (min-width: 640px){
.notification-panel{
max-width: 28rem;
width: max-content;
top: auto;
bottom: 0;
}
.notification{
width: auto;
border: solid 1px rgba(var(--text-color, (17,17,17)), 0.2);
}
}
@media (any-hover: hover){
::-webkit-scrollbar{
width: 0.5rem;
}
::-webkit-scrollbar-thumb{
background: rgba(var(--text-color, (17,17,17)), 0.3);
border-radius: 1rem;
&:hover{
background: rgba(var(--text-color, (17,17,17)), 0.5);
}
}
.close:hover{
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
}
}
</style>
<div class="notification-panel"></div>
`;
customElements.define('sm-notifications', class extends HTMLElement { customElements.define('sm-notifications', class extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -864,6 +864,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
this.swipeTime = 0; this.swipeTime = 0;
this.swipeTimeThreshold = 200; this.swipeTimeThreshold = 200;
this.currentTarget = null; this.currentTarget = null;
this.mediaQuery = window.matchMedia('(min-width: 640px)')
this.handleOrientationChange = this.handleOrientationChange.bind(this)
this.isLandscape = false
} }
randString(length) { randString(length) {
@ -881,16 +885,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
notification.classList.add('notification'); notification.classList.add('notification');
let composition = ``; let composition = ``;
composition += ` composition += `
<div class="icon-container">${icon}</div> <div class="icon-container">${icon}</div>
<p>${message}</p> <p>${message}</p>
`; `;
if (pinned) { if (pinned) {
notification.classList.add('pinned'); notification.classList.add('pinned');
composition += ` composition += `
<button class="close"> <button class="close">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button> </button>
`; `;
} }
notification.innerHTML = composition; notification.innerHTML = composition;
return notification; return notification;
@ -898,11 +902,14 @@ customElements.define('sm-notifications', class extends HTMLElement {
push(message, options = {}) { push(message, options = {}) {
const notification = this.createNotification(message, options); const notification = this.createNotification(message, options);
this.notificationPanel.append(notification); if (this.isLandscape)
this.notificationPanel.append(notification);
else
this.notificationPanel.prepend(notification);
this.notificationPanel.animate( this.notificationPanel.animate(
[ [
{ {
transform: `translateY(${notification.clientHeight}px)`, transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
}, },
{ {
transform: `none`, transform: `none`,
@ -911,7 +918,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
) )
notification.animate([ notification.animate([
{ {
transform: `translateX(-1rem)`, transform: `translateY(-1rem)`,
opacity: '0' opacity: '0'
}, },
{ {
@ -952,7 +959,20 @@ customElements.define('sm-notifications', class extends HTMLElement {
this.currentTarget.style.transform = `translateX(${this.currentX}px)`; this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
} }
handleOrientationChange(e) {
this.isLandscape = e.matches
if (e.matches) {
// landscape
} else {
// portrait
}
}
connectedCallback() { connectedCallback() {
this.handleOrientationChange(this.mediaQuery);
this.mediaQuery.addEventListener('change', this.handleOrientationChange);
this.notificationPanel.addEventListener('pointerdown', e => { this.notificationPanel.addEventListener('pointerdown', e => {
if (e.target.closest('.notification')) { if (e.target.closest('.notification')) {
this.swipeThreshold = this.clientWidth / 2; this.swipeThreshold = this.clientWidth / 2;
@ -975,7 +995,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
this.swipeDirection = 'left'; this.swipeDirection = 'left';
} }
if (this.swipeTime < this.swipeTimeThreshold) { if (this.swipeTime < this.swipeTimeThreshold) {
this.removeNotification(this.currentTarget, this.swipeDirection); if (this.swipeDistance > 50)
this.removeNotification(this.currentTarget, this.swipeDirection);
} else { } else {
if (this.swipeDistance > this.swipeThreshold) { if (this.swipeDistance > this.swipeThreshold) {
this.removeNotification(this.currentTarget, this.swipeDirection); this.removeNotification(this.currentTarget, this.swipeDirection);
@ -1018,8 +1039,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
childList: true, childList: true,
}); });
} }
disconnectedCallback() {
mediaQueryList.removeEventListener('change', handleOrientationChange);
}
}); });
class Stack { class Stack {
constructor() { constructor() {
this.items = []; this.items = [];

37
scripts/fn_ui.js
View File

@ -1,5 +1,7 @@
/*jshint esversion: 8 */ /*jshint esversion: 8 */
const userUI = {}; const userUI = {};
let paymentsHistoryLoader
let walletHistoryLoader
userUI.requestTokenFromCashier = function () { userUI.requestTokenFromCashier = function () {
let cashier = User.findCashier(); let cashier = User.findCashier();
@ -63,13 +65,15 @@ userUI.renderCashierRequests = function (requests, error = null) {
return console.error(error); return console.error(error);
else if (typeof requests !== "object" || requests === null) else if (typeof requests !== "object" || requests === null)
return; return;
const frag = document.createDocumentFragment() if (pagesData.lastPage === 'history' && pagesData.params.type === 'wallet') {
for (let r in requests) { const frag = document.createDocumentFragment()
let oldCard = document.getElementById(r); for (let transactionID in requests) {
if (oldCard) oldCard.remove(); let oldCard = getRef('wallet_history').querySelector(`#${transactionID}`);
frag.append(render.walletRequestCard(requests[r])) if (oldCard) oldCard.remove();
frag.append(render.walletRequestCard(transactionID, requests[transactionID]))
}
getRef('wallet_history').prepend(frag)
} }
getRef('user-cashier-requests').append(frag)
} }
userUI.renderMoneyRequests = function (requests, error = null) { userUI.renderMoneyRequests = function (requests, error = null) {
@ -227,17 +231,6 @@ function completeTokenToCashRequest(request) {
}) })
} }
function renderAllTokenTransactions() {
tokenAPI.getAllTxs(myFloID).then(result => {
getRef('token_transactions').innerHTML = ''
const frag = document.createDocumentFragment();
for (let txid in result.transactions) {
frag.append(render.transactionCard(txid, tokenAPI.util.parseTxData(result.transactions[txid])));
}
getRef('token_transactions').append(frag);
}).catch(error => console.error(error));
}
function getFloIdName(floID) { function getFloIdName(floID) {
return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID; return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
} }
@ -252,8 +245,8 @@ const render = {
clone.querySelector('.saved-id__title').textContent = title; clone.querySelector('.saved-id__title').textContent = title;
return clone; return clone;
}, },
transactionCard(txid, transactionDetails) { transactionCard(transactionDetails) {
const { time, sender, receiver, tokenAmount } = transactionDetails; const { txid, time, sender, receiver, tokenAmount } = transactionDetails;
const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild; const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
clone.dataset.txid = txid; clone.dataset.txid = txid;
clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000); clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
@ -315,9 +308,13 @@ const render = {
<button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`; <button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
return clone; return clone;
}, }
}; };
getRef('history_type_selector').addEventListener('change', (e) => {
location.hash = `#/history?type=${e.target.value}`;
})
let currentUserAction; let currentUserAction;
function showTokenTransfer(type) { function showTokenTransfer(type) {
getRef('tt_button').textContent = type; getRef('tt_button').textContent = type;

80
scripts/std_ui.js
View File

@ -253,7 +253,8 @@ function createRipple(event, target) {
} }
const pagesData = { const pagesData = {
params: {} params: {},
openedPages: new Set(),
} }
async function showPage(targetPage, options = {}) { async function showPage(targetPage, options = {}) {
@ -285,15 +286,14 @@ async function showPage(targetPage, options = {}) {
} }
} }
if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return if (typeof myFloID === "undefined" && !(['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) return
else if (typeof myFloID !== "undefined" && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
history.replaceState(null, null, '#/home');
pageId = 'home'
}
if (searchParams) { if (searchParams) {
const urlSearchParams = new URLSearchParams('?' + searchParams); const urlSearchParams = new URLSearchParams('?' + searchParams);
params = Object.fromEntries(urlSearchParams.entries()); params = Object.fromEntries(urlSearchParams.entries());
} }
if (pagesData.lastPage !== pageId) {
pagesData.lastPage = pageId
}
if (params)
pagesData.params = params
switch (pageId) { switch (pageId) {
case 'sign_in': case 'sign_in':
setTimeout(() => { setTimeout(() => {
@ -307,14 +307,71 @@ async function showPage(targetPage, options = {}) {
getRef('generated_private_key').value = privKey getRef('generated_private_key').value = privKey
targetPage = 'sign_up' targetPage = 'sign_up'
break; break;
case 'transactions': case 'history':
let transactionsList = []
if (!params.hasOwnProperty('type')) {
history.replaceState(null, null, '#/history?type=payments');
params.type = 'payments'
}
switch (params.type) {
case 'payments':
if (paymentsHistoryLoader)
paymentsHistoryLoader.clear()
getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
getRef('payments_history_wrapper').classList.remove('hide')
getRef('wallet_history_wrapper').classList.add('hide')
tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
for (const transactionId in transactions) {
transactionsList.push({
...tokenAPI.util.parseTxData(transactions[transactionId]),
txid: transactionId
})
}
if (paymentsHistoryLoader) {
paymentsHistoryLoader.update(transactionsList)
} else {
paymentsHistoryLoader = new LazyLoader('#payments_history', transactionsList, render.transactionCard);
}
paymentsHistoryLoader.init()
}).catch(e => {
console.error(e)
})
break;
case 'wallet':
if (walletHistoryLoader)
walletHistoryLoader.clear()
getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
getRef('payments_history_wrapper').classList.add('hide')
getRef('wallet_history_wrapper').classList.remove('hide')
const requests = User.cashierRequests;
for (const transactionId in requests) {
transactionsList.push(User.cashierRequests[transactionId])
}
if (walletHistoryLoader) {
walletHistoryLoader.update(transactionsList)
} else {
walletHistoryLoader = new LazyLoader('#wallet_history', transactionsList, render.walletRequestCard);
// to-do: set value of history type selector
}
walletHistoryLoader.init()
default:
break;
}
break; break;
default: default:
break;
} }
document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
getRef(pageId).classList.remove('hide') if (pagesData.lastPage !== pageId) {
getRef(pageId).animate([{ opacity: 0 }, { opacity: 1 }], { duration: 300, fill: 'forwards', easing: 'ease' }) 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' })
pagesData.lastPage = pageId
}
if (params)
pagesData.params = params
pagesData.openedPages.add(pageId)
} }
// class based lazy loading // class based lazy loading
@ -364,7 +421,6 @@ class LazyLoader {
} }
update(elementsToRender) { update(elementsToRender) {
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || [] this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
this.render()
} }
render(options = {}) { render(options = {}) {
let { lazyLoad = false } = options let { lazyLoad = false } = options