From 62ec6de8ba330410e0be704f32c2bdc7eb46f65b Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Wed, 13 Apr 2022 01:40:46 +0530 Subject: [PATCH] Feature and UI update Added lazy loading to transactions history --- css/main.css | 80 ++++++++-- css/main.css.map | 9 -- css/main.min.css | 2 +- css/main.scss | 81 ++++++++-- index.html | 126 +++++++++------- scripts/components.js | 333 ++++++++++++++++++++++-------------------- scripts/fn_ui.js | 37 +++-- scripts/std_ui.js | 80 ++++++++-- 8 files changed, 469 insertions(+), 279 deletions(-) delete mode 100644 css/main.css.map diff --git a/css/main.css b/css/main.css index d310320..5638492 100644 --- a/css/main.css +++ b/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); } } diff --git a/css/main.css.map b/css/main.css.map deleted file mode 100644 index b51315e..0000000 --- a/css/main.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "version": 3, - "mappings": "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", - "sources": [ - "main.scss" - ], - "names": [], - "file": "main.css" -} \ No newline at end of file diff --git a/css/main.min.css b/css/main.min.css index b9af1e7..5780331 100644 --- a/css/main.min.css +++ b/css/main.min.css @@ -1 +1 @@ -*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .3s;display:flex;flex-direction:column}body[data-theme=dark]{--accent-color: #90b8f8;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.6rem 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{padding:1rem 1.5rem}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.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}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.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;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#history>*,#wallet_history>*{width:min(60ch,100%);justify-self:center}#token_transactions{flex-direction:column;padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}.button:not([disabled]){transition:background-color .3s,filter .3s}.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important} \ No newline at end of file +*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #256eff;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;scrollbar-width:thin;scrollbar-gutter:stable;color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);transition:background-color .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;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676}body[data-theme=dark] sm-popup::part(popup){background-color:rgba(var(--foreground-color), 1)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}p:not(:last-of-type),strong:not(:last-of-type){margin-bottom:1.5rem}a{text-decoration:none;color:var(--accent-color)}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}a.button{padding:.4rem .6rem;border-radius:.3rem;font-size:.9rem;font-weight:500;color:inherit}button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-flex;border:none;background-color:transparent;overflow:hidden;color:inherit;-webkit-tap-highlight-color:transparent;align-items:center;font-size:.9rem;font-weight:500;white-space:nowrap;padding:.8rem;border-radius:.3rem;justify-content:center}button:focus-visible{outline:var(--accent-color) solid medium}button:not(:disabled){cursor:pointer}.button{background-color:rgba(var(--text-color), 0.06)}.button--primary,.button--danger{color:rgba(var(--background-color), 1)}.button--primary .icon,.button--danger .icon{fill:rgba(var(--background-color), 1)}.button--primary{background-color:var(--accent-color)}.button--danger{background-color:var(--danger-color)}.cta{text-transform:uppercase;font-size:.8rem;font-weight:700;letter-spacing:.05em;padding:1rem}.icon-only{padding:.5rem;border-radius:.3rem}button:disabled{opacity:.5}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}details{padding:1rem 0}details summary{display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;align-items:center;justify-content:space-between;color:var(--accent-color)}details[open] summary{margin-bottom:1rem}details[open]>summary .down-arrow{transform:rotate(180deg)}sm-input,sm-textarea{font-size:.9rem;--border-radius: 0.3rem;--background-color: rgba(var(--foreground-color), 1)}sm-input button .icon,sm-textarea button .icon{fill:var(--accent-color)}sm-button{--padding: 0.8rem}sm-button[variant=primary] .icon{fill:rgba(var(--background-color), 1)}sm-button[disabled] .icon{fill:rgba(var(--text-color), 0.6)}sm-button.danger{--background: var(--danger-color);color:rgba(var(--background-color), 1)}sm-spinner{--size: 1rem;--stroke-width: 0.1rem}sm-form{--gap: 1rem}strip-select{--gap: 0;background-color:rgba(var(--text-color), 0.06);border-radius:.3rem;padding:.3rem}strip-option{font-size:.8rem;--border-radius: 0.2rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}ul{list-style:none}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/-1}.h1{font-size:1.5rem}.h2{font-size:1.2rem}h3{font-size:1.2rem;line-height:1.3}.h4{font-size:.9rem}.h5{font-size:.75rem}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.sticky{position:-webkit-sticky;position:sticky}.top-0{top:0}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.grid{display:grid}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-content:flex-start}.align-center{align-items:center}.align-end{align-items:flex-end}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.h-100{height:100%}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.button--primary .ripple,.button--danger .ripple{background:radial-gradient(circle, rgba(var(--background-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.empty-state{display:grid;width:100%;padding:1.5rem 0}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)+.empty-state{display:none}.bullet-point{display:flex;align-items:center;justify-content:center;margin:0 .8ch}.bullet-point::after{content:"";height:.4ch;width:.4ch;border-radius:.5em;background-color:var(--accent-color)}.icon{width:1.2rem;height:1.2rem;fill:rgba(var(--text-color), 0.8);flex-shrink:0}.margin-right-0-5{margin-right:.5rem}.margin-left-0-5{margin-left:.5rem}.icon-button{padding:.6rem;border-radius:.8rem;background-color:rgba(var(--text-color), 0.1);height:-webkit-max-content;height:-moz-max-content;height:max-content}.icon-button .icon{fill:var(--accent-color)}.page{height:100%}.page-layout{display:grid;gap:1.5rem 0;grid-template-columns:1.5rem minmax(0, 1fr) 1.5rem;align-content:flex-start}.page-layout>*{grid-column:2/3}#confirmation_popup,#prompt_popup{flex-direction:column}#confirmation_popup h4,#prompt_popup h4{font-weight:500;margin-bottom:.5rem}#confirmation_popup sm-button,#prompt_popup sm-button{margin:0}#confirmation_popup .flex,#prompt_popup .flex{padding:0;margin-top:1rem}#confirmation_popup .flex sm-button:first-of-type,#prompt_popup .flex sm-button:first-of-type{margin-right:.6rem;margin-left:auto}#prompt_message{margin-bottom:1.5rem}.popup__header{display:grid;gap:.5rem;width:100%;padding:0 1.5rem;align-items:center}.popup__header__close{padding:.5rem;margin-left:-0.5rem;cursor:pointer}#landing>section{justify-content:center;justify-items:center;align-items:center;text-align:center;padding:8vw 0}#landing h1{font-size:clamp(2rem,5vw,5rem)}#sign_in,#sign_up{justify-items:center;align-content:center}#sign_in section,#sign_up section{margin-top:-8rem;width:min(24rem,100%)}#sign_in sm-form,#sign_up sm-form{margin:2rem 0}#sign_up .h2{margin-bottom:.5rem}#sign_up .card{margin:1.5rem 0}#sign_up h5{font-weight:500;color:rgba(var(--text-color), 0.8)}#sign_up .warning{margin-top:2rem}#main_header{--text-color: 220, 220, 220;padding:1rem max(4vw,1.5rem)}#main_header a{color:rgba(var(--text-color), 1)}#pages_container{flex:1;overflow-y:auto}.password-field label{display:flex}.password-field label input:checked~.visible{display:none}.password-field label input:not(:checked)~.invisible{display:none}.multi-state-button{display:grid;text-align:center;align-items:center}.multi-state-button>*{grid-area:1/1/2/2}.multi-state-button button{z-index:1}.clip{-webkit-clip-path:circle(0);clip-path:circle(0)}#user{gap:.5rem;padding:0 1.5rem}#quick_actions_container{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill, minmax(4rem, 1fr))}.primary-action{display:flex;flex-direction:column;align-items:center;padding:.8rem 1rem;gap:.5rem;white-space:normal;font-size:.8rem;border-radius:.5rem;background-color:transparent;text-align:center}.primary-action .icon{fill:var(--accent-color)}#rupee_balance span:first-of-type{font-size:1.5rem}#rupee_balance span:last-of-type{font-size:.8rem}.wallet-action{display:flex;flex-direction:column;white-space:normal;font-size:.85rem;padding:.8rem .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 .5rem}.wallet-action .icon{margin-bottom:.8rem;fill:var(--accent-color)}#saved_ids_list{display:grid;grid-template-columns:repeat(auto-fill, minmax(10rem, 1fr));gap:1rem;margin-top:1.5rem}.saved-id{display:grid;gap:1rem;grid-template-columns:auto 1fr;align-items:center;color:inherit;padding:.5rem 0}.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;text-transform:uppercase;font-weight:700}.saved-id__title{font-size:.9rem;color:rgba(var(--text-color), 1)}.card{background-color:rgba(var(--foreground-color), 1);border-radius:.5rem;padding:1.5rem}#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:.5rem;grid-template-columns:minmax(0, 1fr)}#payments_history_wrapper,#wallet_history_wrapper{padding-bottom:4rem}.transaction{grid-template-columns:auto 1fr auto;gap:.5rem 1rem;padding:.8rem;align-items:center;background-color:rgba(var(--text-color), 0.03);border-radius:.3rem}.transaction:not(:last-of-type){margin-bottom:.5rem}.transaction__icon{display:flex;align-items:center;justify-content:center;grid-area:1/1/3/2;width:2.5rem;height:2.5rem;background-color:rgba(var(--text-color), 0.03);border-radius:.5rem}.transaction__icon .icon{fill:var(--accent-color)}.transaction__receiver{font-size:.9rem;font-weight:500;color:rgba(var(--text-color), 0.8)}.transaction__time{font-size:.8rem;color:rgba(var(--text-color), 0.8)}.transaction__amount{font-size:1rem;font-weight:700;grid-area:1/3/3/4}.transaction__amount.sent::before{content:"-"}.transaction__amount.received{color:var(--green)}.transaction__amount.received::before{content:"+"}.fab{position:absolute;right:0;bottom:0;margin:1.5rem;box-shadow:0 .5rem 1rem rgba(0,0,0,.2);z-index:2}#scroll_to_top{border-radius:3rem;background-color:rgba(var(--foreground-color), 1)}#transaction_result{display:grid;gap:.5rem;height:max(40vh,24rem);align-items:center;justify-content:center;text-align:center;align-content:center}#transaction_result.success .icon--failed{display:none}#transaction_result.failed .icon--success{display:none}#transaction_result h3{text-align:center;width:100%}#transaction_result .icon{justify-self:center;height:4rem;width:4rem;border-radius:5rem;margin-bottom:1rem;-webkit-animation:popup 1s;animation:popup 1s}#transaction_result .icon--success{fill:rgba(var(--background-color), 1);padding:1rem;background-color:#0bbe56}#transaction_result .icon--failed{background-color:rgba(var(--text-color), 0.03);fill:var(--danger-color)}#transaction_result sm-copy{font-size:.8rem}@-webkit-keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}@keyframes popup{0%{opacity:0;transform:scale(0.2) translateY(600%)}10%{transform:scale(0.2) translateY(5rem);opacity:1}40%{transform:scale(0.2) translateY(0)}80%{transform:scale(1.1) translateY(0)}100%{transform:scale(1) translateY(0)}}.cashier-request,.wallet-request,.payment-request{display:flex;gap:1rem;align-items:center;padding:.8rem;border-radius:.3rem;background-color:rgba(var(--text-color), 0.06)}.cashier-request:not(:last-of-type),.wallet-request:not(:last-of-type),.payment-request:not(:last-of-type){margin-bottom:1rem}.cashier-request__time,.wallet-request__time,.payment-request__time{font-size:.8rem}.payment-request{display:grid;grid-template-columns:1fr auto}.payment-request__amount{font-weight:700;text-align:right}@media screen and (min-width: 40rem){sm-popup{--width: 24rem}.page-layout{grid-template-columns:1fr 90vw 1fr}.popup__header{grid-column:1/-1;padding:1rem 1.5rem 0 1.5rem}#user{gap:1rem;padding:1.5rem 8vmax;grid-template-columns:1fr 20rem;align-content:flex-start;align-items:flex-start}.saved-id{padding:1rem;border-radius:.5rem;background-color:rgba(var(--text-color), 0.03);grid-template-columns:minmax(0, 1fr)}#wallet_section{grid-area:1/2/3/3}}@media(any-hover: hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.interact:not([disabled]){transition:background-color .3s}.interact:not([disabled]):hover{background-color:rgba(var(--text-color), 0.06)}button,.button:not([disabled]){transition:background-color .3s,filter .3s}button:hover,.button:not([disabled]):hover{filter:contrast(2)}}@supports(overflow: overlay){body{overflow:overlay}}.hide{display:none !important} \ No newline at end of file diff --git a/css/main.scss b/css/main.scss index 22019df..d28920e 100644 --- a/css/main.scss +++ b/css/main.scss @@ -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 { diff --git a/index.html b/index.html index 8cd467a..628b4b5 100644 --- a/index.html +++ b/index.html @@ -146,16 +146,13 @@
-
+

Quick actions

- - See history -
-
- -
Balance

-
- -
-
--> +
+ + - + + + + - - Withdraw - -
+ 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" /> + + + + + + + See History +
@@ -247,38 +265,34 @@
-
-
- +
+
+ -

Transactions history

+
+

Transactions history

+ + Payments + Wallet + +
-
    -
-
-

No transactions

-
-
-
-
- - - - - - -

Wallet history

-
-
    -
    -

    No transactions

    +
    +
      +
      +

      No transactions

      +
      +
      +
        +
        +

        No transactions

        +

        Activity

        @@ -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 = `${beforeDecimal}.${afterDecimal}` }) 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)) } diff --git a/scripts/components.js b/scripts/components.js index 13bd9a7..b0ba987 100644 --- a/scripts/components.js +++ b/scripts/components.js @@ -689,150 +689,150 @@ customElements.define('sm-input', }) const smNotifications = document.createElement('template') smNotifications.innerHTML = ` - -
        -`; - - + .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); + } + } + +
        + `; 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 += ` -
        ${icon}
        -

        ${message}

        - `; +
        ${icon}
        +

        ${message}

        + `; if (pinned) { notification.classList.add('pinned'); composition += ` - - `; + + `; } 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 = []; diff --git a/scripts/fn_ui.js b/scripts/fn_ui.js index 46c4dc0..18e4a1f 100644 --- a/scripts/fn_ui.js +++ b/scripts/fn_ui.js @@ -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 = { `; 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; diff --git a/scripts/std_ui.js b/scripts/std_ui.js index 56522e7..5996a97 100644 --- a/scripts/std_ui.js +++ b/scripts/std_ui.js @@ -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 = '' + 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 = '' + 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