Feature and UI update
Added lazy loading to transactions history
This commit is contained in:
sairaj mote
parent
9f2826d887
commit
62ec6de8ba
80
css/main.css
80
css/main.css
@ -26,9 +26,20 @@ body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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] {
|
||||
--accent-color: #90b8f8;
|
||||
@ -182,7 +193,7 @@ sm-textarea button .icon {
|
||||
}
|
||||
|
||||
sm-button {
|
||||
--padding: 0.6rem 0.8rem;
|
||||
--padding: 0.8rem;
|
||||
}
|
||||
sm-button[variant=primary] .icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
@ -560,7 +571,8 @@ h3 {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
padding: 1rem 1.5rem;
|
||||
--text-color: 220, 220, 220;
|
||||
padding: 1rem max(4vw, 1.5rem);
|
||||
}
|
||||
#main_header a {
|
||||
color: rgba(var(--text-color), 1);
|
||||
@ -598,6 +610,17 @@ h3 {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -608,16 +631,38 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
background-color: transparent;
|
||||
min-width: 5rem;
|
||||
max-width: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
.primary-action .icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
|
||||
#user {
|
||||
padding: 1rem 1.5rem;
|
||||
#rupee_balance span:first-of-type {
|
||||
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 {
|
||||
@ -649,6 +694,7 @@ h3 {
|
||||
}
|
||||
.saved-id__title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -657,14 +703,21 @@ h3 {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#history > *,
|
||||
#wallet_history > * {
|
||||
#history {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
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 {
|
||||
flex-direction: column;
|
||||
#payments_history_wrapper,
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
@ -855,6 +908,7 @@ h3 {
|
||||
}
|
||||
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 8vmax;
|
||||
grid-template-columns: 1fr 20rem;
|
||||
align-content: flex-start;
|
||||
@ -893,10 +947,12 @@ h3 {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
|
||||
.button:not([disabled]) {
|
||||
button,
|
||||
.button:not([disabled]) {
|
||||
transition: background-color 0.3s, filter 0.3s;
|
||||
}
|
||||
.button:not([disabled]):hover {
|
||||
button:hover,
|
||||
.button:not([disabled]):hover {
|
||||
filter: contrast(2);
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -26,8 +26,19 @@ body {
|
||||
color: rgba(var(--text-color), 1);
|
||||
background-color: rgba(var(--background-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
position: relative;
|
||||
display: flex;
|
||||
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"] {
|
||||
@ -160,7 +171,7 @@ sm-textarea {
|
||||
}
|
||||
}
|
||||
sm-button {
|
||||
--padding: 0.6rem 0.8rem;
|
||||
--padding: 0.8rem;
|
||||
&[variant="primary"] {
|
||||
.icon {
|
||||
fill: rgba(var(--background-color), 1);
|
||||
@ -519,7 +530,8 @@ h3 {
|
||||
}
|
||||
}
|
||||
#main_header {
|
||||
padding: 1rem 1.5rem;
|
||||
--text-color: 220, 220, 220;
|
||||
padding: 1rem max(4vw, 1.5rem);
|
||||
a {
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
@ -554,6 +566,15 @@ h3 {
|
||||
.clip {
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -565,16 +586,40 @@ h3 {
|
||||
border-radius: 0.5rem;
|
||||
// background-color: rgba(var(--text-color), 0.06);
|
||||
background-color: transparent;
|
||||
min-width: 5rem;
|
||||
max-width: 6rem;
|
||||
text-align: center;
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
}
|
||||
}
|
||||
#user {
|
||||
padding: 1rem 1.5rem;
|
||||
#rupee_balance {
|
||||
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 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
||||
@ -602,6 +647,7 @@ h3 {
|
||||
}
|
||||
&__title {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -610,15 +656,20 @@ h3 {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#history,
|
||||
#wallet_history {
|
||||
& > * {
|
||||
width: min(60ch, 100%);
|
||||
justify-self: center;
|
||||
}
|
||||
#history {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
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 {
|
||||
flex-direction: column;
|
||||
#payments_history_wrapper,
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
.transaction {
|
||||
@ -785,6 +836,7 @@ h3 {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 1.5rem 8vmax;
|
||||
grid-template-columns: 1fr 20rem;
|
||||
align-content: flex-start;
|
||||
@ -821,6 +873,7 @@ h3 {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
}
|
||||
}
|
||||
button,
|
||||
.button:not([disabled]) {
|
||||
transition: background-color 0.3s, filter 0.3s;
|
||||
&:hover {
|
||||
|
||||
126
index.html
126
index.html
@ -146,16 +146,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<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="flex align-center space-between">
|
||||
<h4>Quick actions </h4>
|
||||
<a href="#/history" class="button flex align-center">
|
||||
See history
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button class="button primary-action" onclick="showTokenTransfer('send')">
|
||||
<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" />
|
||||
@ -163,7 +160,7 @@
|
||||
</svg>
|
||||
Send
|
||||
</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"
|
||||
height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
@ -194,38 +191,59 @@
|
||||
</svg>
|
||||
Wallet
|
||||
</h4>
|
||||
<a href="#/wallet_history" class="button">See History</a>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h5>Balance</h5>
|
||||
<h1 class="h1" id="rupee_balance"></h1>
|
||||
</div>
|
||||
<div class="grid gap-1">
|
||||
<!-- <sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
|
||||
<!-- <div class="grid gap-1">
|
||||
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount"
|
||||
animate>
|
||||
</sm-input> -->
|
||||
<div class="flex">
|
||||
<button class="flex gap-0-5 flex-1" onclick="userUI.requestTokenFromCashier()">
|
||||
<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">
|
||||
</sm-input>
|
||||
</div> -->
|
||||
<div class="flex">
|
||||
<button class="wallet-action" onclick="userUI.requestTokenFromCashier()">
|
||||
<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" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
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="4" y="10" />
|
||||
<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>
|
||||
</svg>
|
||||
Deposit
|
||||
</button>
|
||||
<button class="flex gap-0-5 flex-1" onclick="userUI.withdrawCashFromCashier()">
|
||||
<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" />
|
||||
</g>
|
||||
</svg>
|
||||
Transfer to bank
|
||||
</button>
|
||||
<a href="#/history" class="wallet-action interact button">
|
||||
<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">
|
||||
<path d="M0,0h24v24H0V0z" fill="none" />
|
||||
<g>
|
||||
<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" />
|
||||
</svg>
|
||||
Withdraw
|
||||
</button>
|
||||
</div>
|
||||
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" />
|
||||
<rect height="2" width="6" x="9" y="7" />
|
||||
<rect height="2" width="2" x="16" y="7" />
|
||||
<rect height="2" width="6" x="9" y="10" />
|
||||
<rect height="2" width="2" x="16" y="10" />
|
||||
</g>
|
||||
</svg>
|
||||
See History
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="card">
|
||||
@ -247,38 +265,34 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="history" class="page page-layout hide grid gap-1">
|
||||
<div class="grid gap-1" style="justify-items: flex-start;">
|
||||
<a href="#/home" class="button align-start">
|
||||
<section id="history" class="page hide grid gap-1">
|
||||
<div class="grid gap-1">
|
||||
<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"
|
||||
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>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>
|
||||
<ul id="token_transactions" class="observe-empty-state">
|
||||
</ul>
|
||||
<div class=" empty-state gap-1 justify-center text-center">
|
||||
<h4>No transactions</h4>
|
||||
</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 id="payments_history_wrapper">
|
||||
<ul id="payments_history" 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 id="activity" class="page page-layout hide">
|
||||
<h4>Activity</h4>
|
||||
@ -429,12 +443,13 @@
|
||||
floDapps.setCustomPrivKeyInput(getSignedIn)
|
||||
floDapps.setAppObjectStores({ savedIds: {} })
|
||||
floDapps.launchStartUp().then(result => {
|
||||
history.replaceState(null, null, " ")
|
||||
console.log(`Welcome ${myFloID}`);
|
||||
getRef('logged_in_user_id').value = myFloID;
|
||||
floGlobals.isSubAdmin = floGlobals.subAdmins.includes(myFloID)
|
||||
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) {
|
||||
cashierUI.renderRequests(Cashier.Requests);
|
||||
@ -456,7 +471,6 @@
|
||||
showPage(window.location.hash, { firstLoad: true })
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
renderAllTokenTransactions();
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -689,150 +689,150 @@ customElements.define('sm-input',
|
||||
})
|
||||
const smNotifications = document.createElement('template')
|
||||
smNotifications.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-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);
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
:host{
|
||||
display: flex;
|
||||
--icon-height: 1.5rem;
|
||||
--icon-width: 1.5rem;
|
||||
}
|
||||
}
|
||||
.close:hover{
|
||||
background-color: rgba(var(--text-color, (17,17,17)), 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="notification-panel"></div>
|
||||
`;
|
||||
|
||||
|
||||
.hide{
|
||||
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 {
|
||||
constructor() {
|
||||
super();
|
||||
@ -864,6 +864,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
this.swipeTime = 0;
|
||||
this.swipeTimeThreshold = 200;
|
||||
this.currentTarget = null;
|
||||
|
||||
this.mediaQuery = window.matchMedia('(min-width: 640px)')
|
||||
this.handleOrientationChange = this.handleOrientationChange.bind(this)
|
||||
this.isLandscape = false
|
||||
}
|
||||
|
||||
randString(length) {
|
||||
@ -881,16 +885,16 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
notification.classList.add('notification');
|
||||
let composition = ``;
|
||||
composition += `
|
||||
<div class="icon-container">${icon}</div>
|
||||
<p>${message}</p>
|
||||
`;
|
||||
<div class="icon-container">${icon}</div>
|
||||
<p>${message}</p>
|
||||
`;
|
||||
if (pinned) {
|
||||
notification.classList.add('pinned');
|
||||
composition += `
|
||||
<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>
|
||||
</button>
|
||||
`;
|
||||
<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>
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
notification.innerHTML = composition;
|
||||
return notification;
|
||||
@ -898,11 +902,14 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
|
||||
push(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(
|
||||
[
|
||||
{
|
||||
transform: `translateY(${notification.clientHeight}px)`,
|
||||
transform: `translateY(${this.isLandscape ? '' : '-'}${notification.clientHeight}px)`,
|
||||
},
|
||||
{
|
||||
transform: `none`,
|
||||
@ -911,7 +918,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
)
|
||||
notification.animate([
|
||||
{
|
||||
transform: `translateX(-1rem)`,
|
||||
transform: `translateY(-1rem)`,
|
||||
opacity: '0'
|
||||
},
|
||||
{
|
||||
@ -952,7 +959,20 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
this.currentTarget.style.transform = `translateX(${this.currentX}px)`;
|
||||
}
|
||||
|
||||
handleOrientationChange(e) {
|
||||
this.isLandscape = e.matches
|
||||
if (e.matches) {
|
||||
// landscape
|
||||
|
||||
} else {
|
||||
// portrait
|
||||
}
|
||||
}
|
||||
connectedCallback() {
|
||||
|
||||
this.handleOrientationChange(this.mediaQuery);
|
||||
|
||||
this.mediaQuery.addEventListener('change', this.handleOrientationChange);
|
||||
this.notificationPanel.addEventListener('pointerdown', e => {
|
||||
if (e.target.closest('.notification')) {
|
||||
this.swipeThreshold = this.clientWidth / 2;
|
||||
@ -975,7 +995,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
this.swipeDirection = 'left';
|
||||
}
|
||||
if (this.swipeTime < this.swipeTimeThreshold) {
|
||||
this.removeNotification(this.currentTarget, this.swipeDirection);
|
||||
if (this.swipeDistance > 50)
|
||||
this.removeNotification(this.currentTarget, this.swipeDirection);
|
||||
} else {
|
||||
if (this.swipeDistance > this.swipeThreshold) {
|
||||
this.removeNotification(this.currentTarget, this.swipeDirection);
|
||||
@ -1018,8 +1039,10 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
childList: true,
|
||||
});
|
||||
}
|
||||
disconnectedCallback() {
|
||||
mediaQueryList.removeEventListener('change', handleOrientationChange);
|
||||
}
|
||||
});
|
||||
|
||||
class Stack {
|
||||
constructor() {
|
||||
this.items = [];
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/*jshint esversion: 8 */
|
||||
const userUI = {};
|
||||
let paymentsHistoryLoader
|
||||
let walletHistoryLoader
|
||||
|
||||
userUI.requestTokenFromCashier = function () {
|
||||
let cashier = User.findCashier();
|
||||
@ -63,13 +65,15 @@ userUI.renderCashierRequests = function (requests, error = null) {
|
||||
return console.error(error);
|
||||
else if (typeof requests !== "object" || requests === null)
|
||||
return;
|
||||
const frag = document.createDocumentFragment()
|
||||
for (let r in requests) {
|
||||
let oldCard = document.getElementById(r);
|
||||
if (oldCard) oldCard.remove();
|
||||
frag.append(render.walletRequestCard(requests[r]))
|
||||
if (pagesData.lastPage === 'history' && pagesData.params.type === 'wallet') {
|
||||
const frag = document.createDocumentFragment()
|
||||
for (let transactionID in requests) {
|
||||
let oldCard = getRef('wallet_history').querySelector(`#${transactionID}`);
|
||||
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) {
|
||||
@ -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) {
|
||||
return floGlobals.savedIds[floID] ? floGlobals.savedIds[floID].title : floID;
|
||||
}
|
||||
@ -252,8 +245,8 @@ const render = {
|
||||
clone.querySelector('.saved-id__title').textContent = title;
|
||||
return clone;
|
||||
},
|
||||
transactionCard(txid, transactionDetails) {
|
||||
const { time, sender, receiver, tokenAmount } = transactionDetails;
|
||||
transactionCard(transactionDetails) {
|
||||
const { txid, time, sender, receiver, tokenAmount } = transactionDetails;
|
||||
const clone = getRef('transaction_template').content.cloneNode(true).firstElementChild;
|
||||
clone.dataset.txid = txid;
|
||||
clone.querySelector('.transaction__time').textContent = getFormattedTime(time * 1000);
|
||||
@ -315,9 +308,13 @@ const render = {
|
||||
<button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
|
||||
|
||||
return clone;
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
getRef('history_type_selector').addEventListener('change', (e) => {
|
||||
location.hash = `#/history?type=${e.target.value}`;
|
||||
})
|
||||
|
||||
let currentUserAction;
|
||||
function showTokenTransfer(type) {
|
||||
getRef('tt_button').textContent = type;
|
||||
|
||||
@ -253,7 +253,8 @@ function createRipple(event, target) {
|
||||
}
|
||||
|
||||
const pagesData = {
|
||||
params: {}
|
||||
params: {},
|
||||
openedPages: new Set(),
|
||||
}
|
||||
|
||||
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
|
||||
else if (typeof myFloID !== "undefined" && (['sign_up', 'sign_in', 'loading', 'landing'].includes(pageId))) {
|
||||
history.replaceState(null, null, '#/home');
|
||||
pageId = 'home'
|
||||
}
|
||||
if (searchParams) {
|
||||
const urlSearchParams = new URLSearchParams('?' + searchParams);
|
||||
params = Object.fromEntries(urlSearchParams.entries());
|
||||
}
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
pagesData.lastPage = pageId
|
||||
}
|
||||
if (params)
|
||||
pagesData.params = params
|
||||
switch (pageId) {
|
||||
case 'sign_in':
|
||||
setTimeout(() => {
|
||||
@ -307,14 +307,71 @@ async function showPage(targetPage, options = {}) {
|
||||
getRef('generated_private_key').value = privKey
|
||||
targetPage = 'sign_up'
|
||||
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;
|
||||
default:
|
||||
|
||||
break;
|
||||
}
|
||||
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' })
|
||||
|
||||
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' })
|
||||
pagesData.lastPage = pageId
|
||||
}
|
||||
if (params)
|
||||
pagesData.params = params
|
||||
pagesData.openedPages.add(pageId)
|
||||
|
||||
}
|
||||
|
||||
// class based lazy loading
|
||||
@ -364,7 +421,6 @@ class LazyLoader {
|
||||
}
|
||||
update(elementsToRender) {
|
||||
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
|
||||
this.render()
|
||||
}
|
||||
render(options = {}) {
|
||||
let { lazyLoad = false } = options
|
||||
|
||||
Loading…
Reference in New Issue
Block a user