Feature update and bug fixes
This commit is contained in:
sairaj mote
parent
c701c5d3b3
commit
04a7ea76f3
234
css/main.css
234
css/main.css
@ -31,16 +31,6 @@ body {
|
||||
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;
|
||||
@ -532,6 +522,18 @@ h3 {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#secondary_pages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
#secondary_pages header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#secondary_pages .inner-page {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#landing > section {
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
@ -573,16 +575,80 @@ h3 {
|
||||
}
|
||||
|
||||
#main_header {
|
||||
--text-color: 220, 220, 220;
|
||||
padding: 1rem max(4vw, 1.5rem);
|
||||
}
|
||||
#main_header a {
|
||||
color: rgba(var(--text-color), 1);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#pages_container {
|
||||
#main_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
display: flex;
|
||||
background: rgba(var(--text-color), 0.03);
|
||||
}
|
||||
#main_navbar.hide-away {
|
||||
position: absolute;
|
||||
}
|
||||
#main_navbar ul {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
#main_navbar ul li {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.7rem;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
.nav-item .icon {
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.nav-item__title {
|
||||
margin-top: 0.3rem;
|
||||
transition: opacity 0.2s, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
.nav-item--active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
.nav-item--active .icon {
|
||||
fill: var(--accent-color);
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.nav-item--active .nav-item__title {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.nav-item__indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 2rem;
|
||||
height: 0.3rem;
|
||||
background: var(--accent-color);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.inner-page {
|
||||
padding: 0 1.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.password-field label {
|
||||
@ -614,7 +680,6 @@ h3 {
|
||||
|
||||
#user {
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
#quick_actions_container {
|
||||
@ -633,7 +698,7 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 400;
|
||||
background-color: transparent;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
text-align: center;
|
||||
}
|
||||
.primary-action .icon {
|
||||
@ -717,6 +782,10 @@ h3 {
|
||||
justify-self: flex-start;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
.saved-id__title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
@ -724,34 +793,57 @@ h3 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#cashier,
|
||||
#contact,
|
||||
#history,
|
||||
#settings {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
width: min(42rem, 100%);
|
||||
justify-self: center;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
border-radius: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
#contact {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
}
|
||||
#contact > * {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#contact__transactions {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 0 max(1rem, 8vw);
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.transaction-message {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0 1rem 1rem 1rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.transaction-message.received {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
}
|
||||
.transaction-message.received + .transaction-message.received {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.transaction-message.sent {
|
||||
margin-left: auto;
|
||||
justify-self: flex-end;
|
||||
border-radius: 1rem 1rem 0 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
.transaction-message__amount {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.transaction-message__time {
|
||||
opacity: 0.8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
#payments_history_wrapper,
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
#payments_history {
|
||||
@ -961,6 +1053,13 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar.hide-away {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
@ -975,15 +1074,60 @@ h3 {
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#main_card {
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05), 0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#main_card:not(.nav-hidden) {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: "nav header" "nav .";
|
||||
}
|
||||
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
border-top: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
#main_navbar ul {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
}
|
||||
#main_navbar ul li:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
.nav-item__indicator {
|
||||
width: 0.25rem;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 0 8vmax;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
@ -1000,9 +1144,11 @@ h3 {
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#wallet_section {
|
||||
grid-area: 1/2/3/3;
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
#main_card {
|
||||
height: 80vh;
|
||||
width: 56rem;
|
||||
}
|
||||
}
|
||||
@media (any-hover: hover) {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
233
css/main.scss
233
css/main.scss
@ -30,16 +30,6 @@ body {
|
||||
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"] {
|
||||
@ -491,6 +481,18 @@ h3 {
|
||||
margin-left: -0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#secondary_pages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
header {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.inner-page {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#landing {
|
||||
& > section {
|
||||
justify-content: center;
|
||||
@ -532,15 +534,78 @@ h3 {
|
||||
}
|
||||
}
|
||||
#main_header {
|
||||
--text-color: 220, 220, 220;
|
||||
padding: 1rem max(4vw, 1.5rem);
|
||||
a {
|
||||
color: rgba(var(--text-color), 1);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#main_card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
display: flex;
|
||||
background: rgba(var(--text-color), 0.03);
|
||||
&.hide-away {
|
||||
position: absolute;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
#pages_container {
|
||||
.nav-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.5rem 0.3rem;
|
||||
color: var(--text-color);
|
||||
font-size: 0.7rem;
|
||||
border-radius: 0.3rem;
|
||||
.icon {
|
||||
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&__title {
|
||||
margin-top: 0.3rem;
|
||||
transition: opacity 0.2s,
|
||||
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
&--active {
|
||||
color: var(--accent-color);
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
transform: translateY(50%);
|
||||
}
|
||||
.nav-item__title {
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 2rem;
|
||||
height: 0.3rem;
|
||||
background: var(--accent-color);
|
||||
border-radius: 1rem 1rem 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.inner-page {
|
||||
padding: 0 1.5rem;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.password-field {
|
||||
@ -570,7 +635,6 @@ h3 {
|
||||
}
|
||||
#user {
|
||||
gap: 0.5rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
#quick_actions_container {
|
||||
display: grid;
|
||||
@ -587,8 +651,7 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 400;
|
||||
// background-color: rgba(var(--text-color), 0.06);
|
||||
background-color: transparent;
|
||||
background-color: rgba(var(--text-color), 0.03);
|
||||
text-align: center;
|
||||
.icon {
|
||||
fill: var(--accent-color);
|
||||
@ -667,6 +730,10 @@ h3 {
|
||||
justify-self: flex-start;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
&__title {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
@ -674,31 +741,56 @@ h3 {
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
#cashier,
|
||||
#contact,
|
||||
#history,
|
||||
#settings {
|
||||
height: 100%;
|
||||
align-content: flex-start;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
width: min(42rem, 100%);
|
||||
justify-self: center;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
border-radius: 0.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
#contact {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
& > * {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
#contact__transactions {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
padding: 0 max(1rem, 8vw);
|
||||
align-items: flex-start;
|
||||
}
|
||||
#payments_history_wrapper,
|
||||
.transaction-message {
|
||||
background-color: rgba(var(--text-color), 0.06);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 0 1rem 1rem 1rem;
|
||||
gap: 0.5rem;
|
||||
&.received {
|
||||
background-color: var(--accent-color);
|
||||
color: rgba(var(--background-color), 1);
|
||||
& + & {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
}
|
||||
&.sent {
|
||||
margin-left: auto;
|
||||
justify-self: flex-end;
|
||||
border-radius: 1rem 1rem 0 1rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__amount {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
&__time {
|
||||
opacity: 0.8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
#wallet_history_wrapper {
|
||||
padding-bottom: 4rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
#payments_history {
|
||||
display: grid;
|
||||
@ -890,6 +982,15 @@ h3 {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 40rem) {
|
||||
#main_navbar {
|
||||
&.hide-away {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 40rem) {
|
||||
sm-popup {
|
||||
--width: 24rem;
|
||||
@ -901,14 +1002,58 @@ h3 {
|
||||
grid-column: 1/-1;
|
||||
padding: 1rem 1.5rem 0 1.5rem;
|
||||
}
|
||||
body {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#main_card {
|
||||
&:not(.nav-hidden) {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-template-areas: "nav header" "nav .";
|
||||
}
|
||||
position: relative;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05),
|
||||
0 1rem 3rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#main_header {
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
#main_navbar {
|
||||
grid-area: nav;
|
||||
border-top: none;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
ul {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
|
||||
li:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
aspect-ratio: 1/1;
|
||||
&__indicator {
|
||||
width: 0.25rem;
|
||||
height: 50%;
|
||||
left: 0;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
#user {
|
||||
gap: 1rem;
|
||||
padding: 0 8vmax;
|
||||
grid-template-columns: 1fr 22rem;
|
||||
align-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
#saved_ids_list {
|
||||
@ -923,11 +1068,13 @@ h3 {
|
||||
text-align: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
#wallet_section {
|
||||
grid-area: 1/2/3/3;
|
||||
}
|
||||
@media screen and (min-width: 56rem) {
|
||||
#main_card {
|
||||
height: 80vh;
|
||||
width: 56rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-hover: hover) {
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
|
||||
384
index.html
384
index.html
@ -55,47 +55,39 @@
|
||||
<sm-button variant="no-outline" class="submit-btn">OK</sm-button>
|
||||
</div>
|
||||
</sm-popup>
|
||||
<header id="main_header" class="flex align-center gap-1">
|
||||
<a href="#/home" class="flex align-center flex-1">
|
||||
<svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
|
||||
style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
|
||||
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
|
||||
c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
|
||||
c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
|
||||
c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
|
||||
c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
|
||||
c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
|
||||
c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
|
||||
c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
|
||||
c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
|
||||
c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
|
||||
c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
|
||||
c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
|
||||
c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
|
||||
c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
|
||||
c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
|
||||
c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
|
||||
c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
|
||||
C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
|
||||
c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
|
||||
c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
|
||||
c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
|
||||
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
|
||||
</svg>
|
||||
<h4>RanchiMall Pay</h4>
|
||||
</a>
|
||||
<theme-toggle></theme-toggle>
|
||||
<a href="#/settings" class="icon-only">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
|
||||
</svg>
|
||||
</a>
|
||||
</header>
|
||||
<section id="pages_container">
|
||||
<article id="landing" class="page page-layout hide">
|
||||
<div id="secondary_pages" class="page hide">
|
||||
<header class="flex align-center gap-1">
|
||||
<a href="#/home" class="flex align-center flex-1">
|
||||
<svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
|
||||
style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
|
||||
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
|
||||
c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
|
||||
c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
|
||||
c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
|
||||
c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
|
||||
c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
|
||||
c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
|
||||
c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
|
||||
c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
|
||||
c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
|
||||
c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
|
||||
c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
|
||||
c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
|
||||
c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
|
||||
c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
|
||||
c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
|
||||
c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
|
||||
C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
|
||||
c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
|
||||
c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
|
||||
c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
|
||||
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
|
||||
</svg>
|
||||
<h4>RanchiMall Pay</h4>
|
||||
</a>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<article id="landing" class="inner-page page-layout hide">
|
||||
<section class="grid justify-center gap-1">
|
||||
<h1 class="h1">Send.request</h1>
|
||||
<div class="flex gap-0-5">
|
||||
@ -104,7 +96,7 @@
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
<article id="sign_in" class="page page-layout hide">
|
||||
<article id="sign_in" class="inner-page page-layout hide">
|
||||
<section>
|
||||
<h1 class="h2">Sign In</h1>
|
||||
<p>Welcome back, glad to see you again</p>
|
||||
@ -118,7 +110,7 @@
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
<article id="sign_up" class="page page-layout hide">
|
||||
<article id="sign_up" class="inner-page page-layout hide">
|
||||
<section class="grid">
|
||||
<h1 class="h2">FLO credentials</h1>
|
||||
<p>Get your FLO credentials to use RanchiMall Pay and all RanchiMall FLO apps. </p>
|
||||
@ -139,15 +131,48 @@
|
||||
</strong>
|
||||
</section>
|
||||
</article>
|
||||
<div id="loading" class="page flex align-center justify-center">
|
||||
<div id="loading" class="inner-page flex align-center justify-center">
|
||||
<div class="grid gap-1 text-center">
|
||||
<sm-spinner></sm-spinner>
|
||||
<h4>Loading RanchiMall Pay</h4>
|
||||
</div>
|
||||
</div>
|
||||
<section id="home" class="page hide">
|
||||
</div>
|
||||
<div id="main_card" class="page hide">
|
||||
<header id="main_header" class="flex align-center space-between">
|
||||
<a href="#/home" class="flex align-center flex-1">
|
||||
<svg class="icon" style="margin-right:0.3rem" viewBox="0 0 96 108"
|
||||
style="enable-background:new 0 0 90.5 106.3;" xml:space="preserve">
|
||||
<path d="M90.2,102.5c-2.4-8.2-9.9-14.5-27.4-23.1c-7.1-3.5-11.8-6.2-14-8.3c-1.7-1.6-3.5-4-4.2-5.5c-0.7-1.7-0.7-5.5,0-7.5
|
||||
c1.3-3.6,2.6-5.2,12.9-15.1c6.2-5.9,9.3-10.3,11.1-15.5c0.7-2.1,0.8-7.6,0.2-9.4C66.5,12,61.7,6.7,53.7,1.6c-3-1.9-4.3-2.1-4.3-0.8
|
||||
c0,0.3-0.5,1.4-1,2.4l-1,1.8l-2.8-1.9c-1.5-1.1-3.4-2.2-4.1-2.6c-1.3-0.7-2.4-0.6-2.4,0.2c0,0.3-1.4,3.4-2,4.4
|
||||
c0,0.1-0.4-0.1-0.9-0.4c-6.1-4.4-8.7-5.5-8.7-3.9c0,0.7-1.8,4.2-4,7.9C16,19.5,9.4,24.9,2.6,24.9c-3,0-2.9-0.1-2,3.4
|
||||
c0.7,2.8,1.1,3.1,3.6,2.3c2.3-0.7,3.9-1.5,5.8-2.9c0.8-0.6,1.5-0.9,1.6-0.9c0.1,0.1,0.5,1,0.7,2.1s0.7,2,0.9,2.1
|
||||
c0.8,0.3,5.1-1.3,7.5-2.9l2.3-1.5l0.5,1.8c0.6,2.4,1,2.7,3.3,2.1c3.9-1,7.7-3.7,11.5-8.2l2-2.4l-0.2,2.1c-0.6,5.4-4.3,11.4-11.3,18
|
||||
c-1.8,1.7-4.7,4.5-6.5,6.2c-10.7,10.2-10,18.6,2,26.5c2.7,1.8,10.3,5.8,15.3,8c0.9,0.4,3.3,1.7,5.3,2.9c11,6.5,16.4,13.1,16.4,19.7
|
||||
c0,1.3,0.1,2.4,0.2,2.6l0,0c0.3,0.3,0.1,0.3,3-0.5c1.4-0.4,2.6-0.9,2.8-1.1c0.4-0.6-0.6-3.7-1.8-6.1c-1.3-2.5-5.6-7-8.9-9.4
|
||||
c-3.8-2.8-9.3-5.9-17-9.7c-8.5-4.2-11.8-6.2-14.7-9.1c-2.6-2.6-3.9-5.3-3.9-8.2c0-4.6,2.3-8.6,8.3-14.1c9.4-8.7,13-13,15.5-18.8
|
||||
c1.3-3,1.4-3.4,1.4-6.7c0-3.1-0.1-3.8-1.1-6l-1.1-2.4l1-1.6c0.5-0.9,1.2-2.1,1.5-2.6l0.5-1l1.5,2.1c1.8,2.6,3.2,6.8,3.2,9.3
|
||||
c0,1.7-0.6,4.7-1.4,6.4c-0.2,0.4-0.4,1-0.5,1.3c-0.1,0.3-1.1,2-2.2,3.7c-2,3-5.2,6.4-13.4,14.2c-5.7,5.4-7.6,8.6-7.8,13.1
|
||||
c-0.2,3.7,0.7,5.9,3.7,9.2c3.2,3.4,6.9,5.8,17.4,11c12.1,6,17.3,9.6,21.3,14.5c2.5,3.2,3.7,5.8,3.9,9.3c0.1,1.6,0.3,3,0.5,3
|
||||
c0.1,0.1,0.8,0,1.4-0.2s1.9-0.5,2.7-0.7l1.5-0.4l-0.2-1.5c-0.7-5.1-5.4-10.8-13.1-16c-4.4-2.9-5.8-3.7-17.3-9.4
|
||||
c-5.7-2.8-9.2-5.1-11.8-7.6c-4.3-4.2-5.1-8.8-2.7-13.9c1.4-2.8,2.7-4.4,12.5-13.8c8-7.7,11.4-13.7,11.4-20.1c0-5.1-2.3-9.9-6.9-14.3
|
||||
c-1.1-1-2-2-2.1-2.2c-0.2-0.4,1.5-3.9,1.9-3.9c1.2,0,7.8,6.3,9.7,9.2c2,3.3,2.5,5,2.5,8.9c0,3.9-0.6,5.9-2.9,9.8
|
||||
c-2.4,4.1-4.2,6-14.2,15.5c-3.4,3.2-5.7,6.1-6.9,8.7c-0.9,2-1.1,2.7-1.1,5.1c0,2.3,0.2,3.2,1,4.9c1.9,4,7.4,8.5,15.4,12.4
|
||||
c12.5,6.1,15.1,7.6,19.4,10.7c7.2,5.3,10.6,10.5,10.6,16c0,1.3,0.1,2.4,0.3,2.5c0.4,0.3,4.8-0.8,5.5-1.3
|
||||
C90.7,104.4,90.7,104.3,90.2,102.5z M20.3,23.3L20.3,23.3c-2,1-3.3,1.4-4.8,1.5L13.3,25l2.3-2.8c3.7-4.5,6.4-8.9,10-16
|
||||
c0.9-1.8,1.8-3.5,2-3.6c0.4-0.4,2.6,1.1,5.1,3.4l2.1,1.9l-1.9,2.8C28.2,17.5,24.5,21.2,20.3,23.3z M39.3,17.4
|
||||
c-1.2,1.7-6.5,5.7-8.6,6.5v0c-1.1,0.4-2.8,0.8-3.9,0.9L24.9,25l2.1-2.6c2.5-3.1,5.1-7,7-10.4c0.7-1.4,1.4-2.5,1.5-2.6
|
||||
c0.3-0.4,1.7,1.4,3,4.1l1.5,3L39.3,17.4z M44.6,10c-0.7,1.2-1.4,2.1-1.5,2.1c-0.1,0-1.5-1.4-3-3l-2.8-3l0.6-1.5
|
||||
c1.1-2.6,1.3-2.7,3.4-1c1.9,1.5,4.5,3.8,4.5,4.1C45.8,7.8,45.3,8.9,44.6,10z" />
|
||||
</svg>
|
||||
<h4>RanchiMall Pay</h4>
|
||||
</a>
|
||||
<theme-toggle></theme-toggle>
|
||||
</header>
|
||||
<section id="home" class="inner-page hide">
|
||||
<div id="user" class="hide grid user-element">
|
||||
<div id="quick_actions_container" class="card">
|
||||
<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">
|
||||
@ -194,80 +219,7 @@
|
||||
Scan FLO QR
|
||||
</button>
|
||||
</div>
|
||||
<section id="wallet_section" class="card grid gap-1-5">
|
||||
<div class="flex align-center space-between">
|
||||
<h4 class="flex align-center">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
|
||||
</g>
|
||||
</svg>
|
||||
Wallet
|
||||
</h4>
|
||||
</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" animate>
|
||||
</sm-input>
|
||||
</div> -->
|
||||
<div class="grid gap-0-5">
|
||||
<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>
|
||||
<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>
|
||||
</g>
|
||||
</svg>
|
||||
Transfer to bank
|
||||
</button>
|
||||
</div>
|
||||
<a href="#/history" class="button interact wallet-action">
|
||||
<svg class="icon margin-right-0-5" 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.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 transactions history
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<div class="card">
|
||||
<div class="">
|
||||
<div class="flex align-center space-between">
|
||||
<h4>Saved IDs</h4>
|
||||
<button class="button" onclick="showPopup('save_id_popup')">Save FLO ID</button>
|
||||
@ -286,36 +238,14 @@
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<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>
|
||||
<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>
|
||||
<section id="history" class="inner-page hide grid gap-1">
|
||||
<h4>Payments history</h4>
|
||||
<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 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="contact" class="page hide">
|
||||
<section id="contact" class="inner-page hide">
|
||||
<div class="flex align-center">
|
||||
<a href="#/home" class="button icon-only margin-right-0-5">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
@ -326,20 +256,77 @@
|
||||
</a>
|
||||
<h4 id="contact__title"></h4>
|
||||
</div>
|
||||
<div id="contact__transactions"></div>
|
||||
<ul id="contact__transactions"></ul>
|
||||
<div class="flex">
|
||||
<button class="button flex-1">Pay</button>
|
||||
<button class="button flex-1">Request</button>
|
||||
</div>
|
||||
</section>
|
||||
<section id="activity" class="page page-layout hide">
|
||||
<h4>Activity</h4>
|
||||
<section id="requests" class="inner-page hide">
|
||||
<h4>Payment requests</h4>
|
||||
<ul id="user-money-requests" class="observe-empty-state"></ul>
|
||||
<div class=" empty-state gap-1 justify-center text-center">
|
||||
<h4>No requests</h4>
|
||||
</div>
|
||||
</section>
|
||||
<section id="settings" class="page hide">
|
||||
<section id="wallet" class="inner-page hide">
|
||||
<div class="flex align-center space-between">
|
||||
<h4 class="flex align-center">
|
||||
<svg class="icon margin-right-0-5" xmlns="http://www.w3.org/2000/svg"
|
||||
enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="M18,4H6C3.79,4,2,5.79,2,8v8c0,2.21,1.79,4,4,4h12c2.21,0,4-1.79,4-4V8C22,5.79,20.21,4,18,4z M16.14,13.77 c-0.24,0.2-0.57,0.28-0.88,0.2L4.15,11.25C4.45,10.52,5.16,10,6,10h12c0.67,0,1.26,0.34,1.63,0.84L16.14,13.77z M6,6h12 c1.1,0,2,0.9,2,2v0.55C19.41,8.21,18.73,8,18,8H6C5.27,8,4.59,8.21,4,8.55V8C4,6.9,4.9,6,6,6z" />
|
||||
</g>
|
||||
</svg>
|
||||
Wallet
|
||||
</h4>
|
||||
</div>
|
||||
<div class="grid gap-0-5">
|
||||
<h5>Balance</h5>
|
||||
<h1 class="h1" id="rupee_balance"></h1>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<button class="wallet-action" onclick="walletAction('deposit')">
|
||||
<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="walletAction('deposit')">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px"
|
||||
viewBox="0 0 24 24" width="24px" fill="#000000">
|
||||
<g>
|
||||
<rect fill="none" height="24" width="24" />
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect 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>
|
||||
</g>
|
||||
</svg>
|
||||
Transfer to bank
|
||||
</button>
|
||||
</div>
|
||||
<div id="wallet_history_wrapper" class="grid gap-0-5">
|
||||
<h4>Wallet history</h4>
|
||||
<ul id="wallet_history" class="observe-empty-state"></ul>
|
||||
<div class=" empty-state gap-1 justify-center text-center">
|
||||
<h4>No transactions</h4>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="settings" class="inner-page hide">
|
||||
<h4>Settings</h4>
|
||||
<section class="grid gap-1">
|
||||
<div class="grid">
|
||||
@ -359,7 +346,73 @@
|
||||
</sm-form>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
<nav id="main_navbar">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#/home" class="nav-item interact">
|
||||
<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="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
||||
</svg>
|
||||
<span class="nav-item__title">Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/history" class="nav-item interact" title='View payment requests'>
|
||||
<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.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>
|
||||
<span class="nav-item__title">History</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/requests" class="nav-item interact" title='View payment requests'>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
|
||||
width="24px" fill="#000000">
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||||
</svg>
|
||||
<span class="nav-item__title">Requests</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/wallet" class="nav-item interact" title='View payment requests'>
|
||||
<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>
|
||||
<span class="nav-item__title">Wallet</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#/settings" class="nav-item interact">
|
||||
<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>
|
||||
<path d="M0,0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="nav-item__title">Settings</span>
|
||||
</button>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<!-- Popups -->
|
||||
<sm-popup id="save_id_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
@ -452,6 +505,24 @@
|
||||
</sm-form>
|
||||
</section>
|
||||
</sm-popup>
|
||||
<sm-popup id="wallet_popup">
|
||||
<header slot="header" class="popup__header">
|
||||
<button class="popup__header__close justify-self-start" onclick="hidePopup()">
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"
|
||||
fill="#000000">
|
||||
<path d="M0 0h24v24H0V0z" fill="none" />
|
||||
<path
|
||||
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
|
||||
</svg>
|
||||
</button>
|
||||
<h4 id="wallet_popup__title"></h4>
|
||||
</header>
|
||||
<sm-form>
|
||||
<sm-input id="request_cashier_amount" type="number" name="amount" placeholder="Amount" animate>
|
||||
</sm-input>
|
||||
<button id="wallet_popup__cta" class="button button--primary cta" type="submit">Save</button>
|
||||
</sm-form>
|
||||
</sm-popup>
|
||||
|
||||
<!-- templates -->
|
||||
<template id="saved_id_template">
|
||||
@ -510,6 +581,12 @@
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<template id="transaction_message_template">
|
||||
<li class="transaction-message grid">
|
||||
<h3 class="transaction-message__amount"></h3>
|
||||
<time class="transaction-message__time"></time>
|
||||
</li>
|
||||
</template>
|
||||
<script src="scripts/components.js"></script>
|
||||
<script src="scripts/std_ui.js"></script>
|
||||
<script src="scripts/std_op.js"></script>
|
||||
@ -517,6 +594,7 @@
|
||||
<script src="scripts/fn_ui.js"></script>
|
||||
<script id="onLoadStartUp">
|
||||
function onLoadStartUp() {
|
||||
showPage('loading')
|
||||
console.log("Starting the app! Please Wait!")
|
||||
floDapps.setCustomPrivKeyInput(getSignedIn)
|
||||
floDapps.setAppObjectStores({ savedIds: {} })
|
||||
|
||||
@ -940,7 +940,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
|
||||
opacity: '1'
|
||||
},
|
||||
{
|
||||
transform: `translateX(calc(${sign}${this.currentX}px ${sign} 1rem))`,
|
||||
transform: `translateX(calc(${sign}${Math.abs(this.currentX)}px ${sign} 1rem))`,
|
||||
opacity: '0'
|
||||
}
|
||||
], this.animationOptions).onfinish = () => {
|
||||
|
||||
@ -1,39 +1,46 @@
|
||||
/*jshint esversion: 8 */
|
||||
/**
|
||||
* @yaireo/relative-time - javascript function to transform timestamp or date to local relative-time
|
||||
*
|
||||
* @version v1.0.0
|
||||
* @homepage https://github.com/yairEO/relative-time
|
||||
*/
|
||||
|
||||
!function (e, t) { var o = o || {}; "function" == typeof o && o.amd ? o([], t) : "object" == typeof exports && "object" == typeof module ? module.exports = t() : "object" == typeof exports ? exports.RelativeTime = t() : e.RelativeTime = t() }(this, (function () { const e = { year: 31536e6, month: 2628e6, day: 864e5, hour: 36e5, minute: 6e4, second: 1e3 }, t = "en", o = { numeric: "auto" }; function n(e) { e = { locale: (e = e || {}).locale || t, options: { ...o, ...e.options } }, this.rtf = new Intl.RelativeTimeFormat(e.locale, e.options) } return n.prototype = { from(t, o) { const n = t - (o || new Date); for (let t in e) if (Math.abs(n) > e[t] || "second" == t) return this.rtf.format(Math.round(n / e[t]), t) } }, n }));
|
||||
|
||||
const relativeTime = new RelativeTime({ style: 'narrow' });
|
||||
const userUI = {};
|
||||
let paymentsHistoryLoader
|
||||
let walletHistoryLoader
|
||||
|
||||
userUI.requestTokenFromCashier = function () {
|
||||
let cashier = User.findCashier();
|
||||
if (!cashier)
|
||||
return notify("No cashier online", 'error');
|
||||
getRef('wallet_popup__cta').addEventListener('click', function () {
|
||||
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
|
||||
//get UPI txid from user
|
||||
let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
|
||||
if (!upiTxID)
|
||||
return alert("Cancelled");
|
||||
User.cashToToken(cashier, amount, upiTxID).then(result => {
|
||||
console.log(result);
|
||||
alert("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
|
||||
userUI.withdrawCashFromCashier = function () {
|
||||
let cashier = User.findCashier();
|
||||
if (!cashier)
|
||||
return notify("No cashier online", 'error');
|
||||
let amount = parseFloat(getRef('request_cashier_amount').value.trim());
|
||||
//get confirmation from user
|
||||
let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
|
||||
if (!upiID)
|
||||
return alert("Cancelled");
|
||||
User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
|
||||
console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
|
||||
User.tokenToCash(cashier, amount, txid, upiID).then(result => {
|
||||
if (walletAction === 'deposit') {
|
||||
//get UPI txid from user
|
||||
let upiTxID = prompt(`Send Rs. ${amount} to ${cashierUPI[cashier]} and enter UPI txid`);
|
||||
if (!upiTxID)
|
||||
return alert("Cancelled");
|
||||
User.cashToToken(cashier, amount, upiTxID).then(result => {
|
||||
console.log(result);
|
||||
alert("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
}).catch(error => console.error(error))
|
||||
} else {
|
||||
//get confirmation from user
|
||||
let upiID = prompt(`${amount} ${floGlobals.currency}# will be sent to ${cashier}. Enter UPI ID`);
|
||||
if (!upiID)
|
||||
return alert("Cancelled");
|
||||
User.sendToken(cashier, amount, 'for token-to-cash').then(txid => {
|
||||
console.warn(`Withdraw ${amount} from cashier ${cashier}`, txid);
|
||||
User.tokenToCash(cashier, amount, txid, upiID).then(result => {
|
||||
console.log(result);
|
||||
alert("Requested cashier. please wait!");
|
||||
}).catch(error => console.error(error))
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
})
|
||||
function walletAction(type) {
|
||||
let cashier = User.findCashier();
|
||||
if (!cashier)
|
||||
return notify("No cashier online. Please try again in a while.", 'error');
|
||||
showPopup('wallet_popup')
|
||||
}
|
||||
|
||||
userUI.sendMoneyToUser = function (floID, amount, remark) {
|
||||
@ -333,13 +340,18 @@ const render = {
|
||||
<button class="button" onclick="userUI.declineRequest('${vectorClock}')">Decline</button>`;
|
||||
|
||||
return clone;
|
||||
},
|
||||
transactionMessage(details) {
|
||||
const { tokenAmount, time, sender, receiver } = tokenAPI.util.parseTxData(details)
|
||||
let messageType = sender === receiver ? 'self' : sender === myFloID ? 'sent' : 'received';
|
||||
const clone = getRef('transaction_message_template').content.cloneNode(true).firstElementChild;
|
||||
clone.classList.add(messageType);
|
||||
clone.querySelector('.transaction-message__amount').textContent = formatAmount(tokenAmount);
|
||||
clone.querySelector('.transaction-message__time').textContent = getFormattedTime(time * 1000);
|
||||
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;
|
||||
@ -352,7 +364,7 @@ function showTokenTransfer(type) {
|
||||
showPopup('token_transfer_popup');
|
||||
}
|
||||
|
||||
saveId = async function () {
|
||||
async function saveId() {
|
||||
const floID = getRef('flo_id_to_save').value.trim();
|
||||
const title = getRef('flo_id_title_to_save').value.trim();
|
||||
floGlobals.savedIds[floID] = { title }
|
||||
|
||||
@ -2,6 +2,9 @@
|
||||
// Global variables
|
||||
const domRefs = {};
|
||||
const currentYear = new Date().getFullYear();
|
||||
let paymentsHistoryLoader = null;
|
||||
let walletHistoryLoader = null;
|
||||
let contactHistoryLoader = null;
|
||||
|
||||
//Checks for internet connection status
|
||||
if (!navigator.onLine)
|
||||
@ -309,67 +312,169 @@ async function showPage(targetPage, options = {}) {
|
||||
break;
|
||||
case 'contact':
|
||||
getRef('contact__title').textContent = getFloIdTitle(params.floId)
|
||||
Promise.all([
|
||||
tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${myFloID}&destFloAddress=${params.floId}`),
|
||||
tokenAPI.fetch_api(`api/v1.0/getTokenTransactions?token=rupee&senderFloAddress=${params.floId}&destFloAddress=${myFloID}`)])
|
||||
.then(([sentTransactions, receivedTransactions]) => {
|
||||
const allTransactions = Object.values({ ...sentTransactions.transactions, ...receivedTransactions.transactions }).sort((a, b) => b.transactionDetails.time - a.transactionDetails.time)
|
||||
if (contactHistoryLoader) {
|
||||
contactHistoryLoader.update(allTransactions)
|
||||
} else {
|
||||
contactHistoryLoader = new LazyLoader('#contact__transactions', allTransactions, render.transactionMessage, { bottomFirst: true });
|
||||
}
|
||||
contactHistoryLoader.init()
|
||||
}).catch(err => {
|
||||
console.error(err)
|
||||
})
|
||||
break;
|
||||
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)
|
||||
const paymentTransactions = []
|
||||
if (paymentsHistoryLoader)
|
||||
paymentsHistoryLoader.clear()
|
||||
getRef('payments_history').innerHTML = '<sm-spinner></sm-spinner>'
|
||||
tokenAPI.getAllTxs(myFloID).then(({ transactions }) => {
|
||||
for (const transactionId in transactions) {
|
||||
paymentTransactions.push({
|
||||
...tokenAPI.util.parseTxData(transactions[transactionId]),
|
||||
txid: transactionId
|
||||
})
|
||||
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);
|
||||
}
|
||||
walletHistoryLoader.init()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (paymentsHistoryLoader) {
|
||||
paymentsHistoryLoader.update(paymentTransactions)
|
||||
} else {
|
||||
paymentsHistoryLoader = new LazyLoader('#payments_history', paymentTransactions, render.transactionCard);
|
||||
}
|
||||
paymentsHistoryLoader.init()
|
||||
}).catch(e => {
|
||||
console.error(e)
|
||||
})
|
||||
break;
|
||||
case 'wallet':
|
||||
const walletTransactions = []
|
||||
if (walletHistoryLoader)
|
||||
walletHistoryLoader.clear()
|
||||
getRef('wallet_history').innerHTML = '<sm-spinner></sm-spinner>'
|
||||
const requests = User.cashierRequests;
|
||||
for (const transactionId in requests) {
|
||||
walletTransactions.push(User.cashierRequests[transactionId])
|
||||
}
|
||||
getRef('history_type_selector').value = params.type
|
||||
if (walletHistoryLoader) {
|
||||
walletHistoryLoader.update(walletTransactions)
|
||||
} else {
|
||||
walletHistoryLoader = new LazyLoader('#wallet_history', walletTransactions, render.walletRequestCard);
|
||||
}
|
||||
walletHistoryLoader.init()
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
if (pageId !== 'history') {
|
||||
if (paymentsHistoryLoader)
|
||||
paymentsHistoryLoader.clear()
|
||||
}
|
||||
if (pageId !== 'contact') {
|
||||
if (contactHistoryLoader)
|
||||
contactHistoryLoader.clear()
|
||||
}
|
||||
if (pageId !== 'wallet') {
|
||||
if (walletHistoryLoader)
|
||||
walletHistoryLoader.clear()
|
||||
}
|
||||
|
||||
if (pagesData.lastPage !== pageId) {
|
||||
const animOptions = {
|
||||
duration: 100,
|
||||
fill: 'forwards',
|
||||
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
|
||||
}
|
||||
let previousActiveElement = getRef('main_navbar').querySelector('.nav-item--active')
|
||||
const currentActiveElement = document.querySelector(`.nav-item[href="#/${pageId}"]`)
|
||||
if (currentActiveElement) {
|
||||
if (getRef('main_navbar').classList.contains('hide')) {
|
||||
getRef('main_card').classList.remove('nav-hidden')
|
||||
getRef('main_navbar').classList.remove('hide-away')
|
||||
getRef('main_navbar').classList.remove('hide')
|
||||
getRef('main_navbar').animate([
|
||||
{
|
||||
transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform: `none`,
|
||||
opacity: 1,
|
||||
},
|
||||
], { ...animOptions, easing: 'ease-in' })
|
||||
}
|
||||
getRef('main_header').classList.remove('hide')
|
||||
const previousActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(previousActiveElement)
|
||||
const currentActiveElementIndex = [...getRef('main_navbar').querySelectorAll('.nav-item')].indexOf(currentActiveElement)
|
||||
const isOnTop = previousActiveElementIndex < currentActiveElementIndex
|
||||
const currentIndicator = createElement('div', { className: 'nav-item__indicator' });
|
||||
let previousIndicator = getRef('main_navbar').querySelector('.nav-item__indicator')
|
||||
if (!previousIndicator) {
|
||||
previousIndicator = currentIndicator.cloneNode(true)
|
||||
previousActiveElement = currentActiveElement
|
||||
previousActiveElement.append(previousIndicator)
|
||||
} else if (currentActiveElementIndex !== previousActiveElementIndex) {
|
||||
const indicatorDimensions = previousIndicator.getBoundingClientRect()
|
||||
const currentActiveElementDimensions = currentActiveElement.getBoundingClientRect()
|
||||
let moveBy
|
||||
if (isMobileView) {
|
||||
moveBy = ((currentActiveElementDimensions.width - indicatorDimensions.width) / 2) + indicatorDimensions.width
|
||||
} else {
|
||||
moveBy = ((currentActiveElementDimensions.height - indicatorDimensions.height) / 2) + indicatorDimensions.height
|
||||
}
|
||||
indicatorObserver.observe(previousIndicator)
|
||||
previousIndicator.animate([
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `${moveBy}px` : `-${moveBy}px`})`,
|
||||
opacity: 0,
|
||||
},
|
||||
], { ...animOptions, easing: 'ease-in' }).onfinish = () => {
|
||||
previousIndicator.remove()
|
||||
}
|
||||
tempData = {
|
||||
currentActiveElement,
|
||||
currentIndicator,
|
||||
isOnTop,
|
||||
animOptions,
|
||||
moveBy
|
||||
}
|
||||
}
|
||||
previousActiveElement.classList.remove('nav-item--active');
|
||||
currentActiveElement.classList.add('nav-item--active')
|
||||
} else {
|
||||
if (!getRef('main_navbar').classList.contains('hide')) {
|
||||
getRef('main_card').classList.add('nav-hidden')
|
||||
getRef('main_navbar').classList.add('hide-away')
|
||||
getRef('main_navbar').animate([
|
||||
{
|
||||
transform: `none`,
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
transform: isMobileView ? `translateY(100%)` : `translateX(-100%)`,
|
||||
opacity: 0,
|
||||
},
|
||||
], {
|
||||
duration: 200,
|
||||
fill: 'forwards',
|
||||
easing: 'ease'
|
||||
}).onfinish = () => {
|
||||
getRef('main_navbar').classList.add('hide')
|
||||
}
|
||||
getRef('main_header').classList.add('hide')
|
||||
}
|
||||
}
|
||||
document.querySelectorAll('.page').forEach(page => page.classList.add('hide'))
|
||||
getRef(pageId).closest('.page').classList.remove('hide')
|
||||
document.querySelectorAll('.inner-page').forEach(page => page.classList.add('hide'))
|
||||
getRef(pageId).classList.remove('hide')
|
||||
getRef('pages_container').style.overflowY = "hidden";
|
||||
getRef('main_card').style.overflowY = "hidden";
|
||||
getRef(pageId).animate([
|
||||
{
|
||||
opacity: 0,
|
||||
@ -384,7 +489,7 @@ async function showPage(targetPage, options = {}) {
|
||||
duration: 300,
|
||||
easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)'
|
||||
}).onfinish = () => {
|
||||
getRef('pages_container').style.overflowY = "";
|
||||
getRef('main_card').style.overflowY = "";
|
||||
}
|
||||
pagesData.lastPage = pageId
|
||||
}
|
||||
@ -393,11 +498,31 @@ async function showPage(targetPage, options = {}) {
|
||||
pagesData.openedPages.add(pageId)
|
||||
|
||||
}
|
||||
const indicatorObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (!entry.isIntersecting) {
|
||||
const { currentActiveElement, currentIndicator, isOnTop, animOptions, moveBy } = tempData
|
||||
currentActiveElement.append(currentIndicator)
|
||||
currentIndicator.animate([
|
||||
{
|
||||
transform: `translate${isMobileView ? 'X' : 'Y'}(${isOnTop ? `-${moveBy}px` : `${moveBy}px`})`,
|
||||
opacity: 0,
|
||||
},
|
||||
{
|
||||
transform: 'none',
|
||||
opacity: 1
|
||||
},
|
||||
], { ...animOptions, easing: 'ease-out' })
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 1
|
||||
})
|
||||
|
||||
// class based lazy loading
|
||||
class LazyLoader {
|
||||
constructor(container, elementsToRender, renderFn, options = {}) {
|
||||
const { batchSize = 10, freshRender } = options
|
||||
const { batchSize = 10, freshRender, bottomFirst = false } = options
|
||||
|
||||
this.elementsToRender = elementsToRender
|
||||
this.arrayOfElements = (typeof elementsToRender === 'function') ? this.elementsToRender() : elementsToRender || []
|
||||
@ -406,6 +531,7 @@ class LazyLoader {
|
||||
|
||||
this.batchSize = batchSize
|
||||
this.freshRender = freshRender
|
||||
this.bottomFirst = bottomFirst
|
||||
|
||||
this.lazyContainer = document.querySelector(container)
|
||||
|
||||
@ -429,7 +555,11 @@ class LazyLoader {
|
||||
mutationList.forEach(mutation => {
|
||||
if (mutation.type === 'childList') {
|
||||
if (mutation.addedNodes.length) {
|
||||
this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
|
||||
if (this.bottomFirst)
|
||||
this.intersectionObserver.observe(this.lazyContainer.firstElementChild)
|
||||
else
|
||||
this.intersectionObserver.observe(this.lazyContainer.lastElementChild)
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -454,10 +584,21 @@ class LazyLoader {
|
||||
this.updateStartIndex = 0
|
||||
this.updateEndIndex = this.arrayOfElements.length > this.batchSize ? this.batchSize : this.arrayOfElements.length
|
||||
}
|
||||
for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
|
||||
frag.append(this.renderFn(this.arrayOfElements[index]))
|
||||
if (this.bottomFirst) {
|
||||
for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
|
||||
frag.prepend(this.renderFn(this.arrayOfElements[index]))
|
||||
}
|
||||
this.lazyContainer.prepend(frag)
|
||||
} else {
|
||||
for (let index = this.updateStartIndex; index < this.updateEndIndex; index++) {
|
||||
frag.append(this.renderFn(this.arrayOfElements[index]))
|
||||
}
|
||||
this.lazyContainer.append(frag)
|
||||
}
|
||||
this.lazyContainer.append(frag)
|
||||
if (!lazyLoad && this.bottomFirst)
|
||||
this.lazyContainer.scrollTo({
|
||||
top: this.lazyContainer.scrollHeight,
|
||||
})
|
||||
// Callback to be called if elements are updated or rendered for first time
|
||||
if (!lazyLoad && this.freshRender)
|
||||
this.freshRender()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user