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

Added account in dashboard

Browse Source
This commit is contained in:
sairaj mote 2021-09-02 16:56:43 +05:30
parent fe5244dab8
commit 7e7032e7cd
4 changed files with 156 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
css/main.css
View File

@ -555,7 +555,7 @@ details[open] > summary .icon {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto auto;
}
#subpage_container {
@ -622,7 +622,6 @@ details[open] > summary .icon {
-ms-flex-align: start;
align-items: flex-start;
color: inherit;
cursor: pointer;
grid-template-columns: auto minmax(0, 1fr) auto;
}
.activity-card__icon {
@ -636,12 +635,12 @@ details[open] > summary .icon {
justify-content: center;
padding: 0.5rem;
border-radius: 0.8rem;
background-color: rgba(var(--text-color), 0.06);
background-color: var(--accent-color--light);
}
.activity-card__icon .icon {
height: 1.3rem;
width: 1.3rem;
fill: rgba(var(--text-color), 0.8);
fill: var(--accent-color);
}
.activity-card__title {
font-size: 0.95rem;
@ -664,6 +663,40 @@ details[open] > summary .icon {
padding: 1rem 1.5rem;
}
#user_accounts {
margin-top: 1.5rem;
display: grid;
gap: 1rem;
padding-bottom: 5rem;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.activity-card--account {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
gap: 1.5rem;
padding: 1.5rem;
background-color: var(--foreground-color);
border: solid thin rgba(var(--text-color), 0.2);
grid-template-columns: minmax(0, 1fr);
}
.activity-card--account .activity-card__icon {
padding: 0;
margin-bottom: 0.5rem;
background-color: transparent;
}
.activity-card--account .activity-card__type {
font-size: 0.9rem;
color: rgba(var(--text-color), 0.6);
font-weight: 500;
}
.activity-card--account .activity-card__amount {
margin-top: 0.3rem;
font-size: 1.3rem;
}
.activity-card--request {
grid-template-areas: "icon . amount" "icon time .";
}
@ -687,7 +720,7 @@ details[open] > summary .icon {
font-weight: 500;
color: rgba(0, 0, 0, 0.7);
}
.status-tag:not(:empty).success {
.status-tag:not(:empty).success, .status-tag:not(:empty).active {
color: var(--green);
background-color: rgba(0, 230, 118, 0.1);
}
@ -699,6 +732,10 @@ details[open] > summary .icon {
color: var(--yellow);
background-color: rgba(255, 252, 75, 0.1);
}
.status-tag:not(:empty).closed {
color: rgba(var(--text-color), 0.7);
background-color: rgba(var(--text-color), 0.06);
}
.activity-card--response {
grid-template-areas: "icon . time" "icon description description";
@ -751,8 +788,8 @@ details[open] > summary .icon {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 1.5rem;
height: 15rem;
padding-bottom: 3rem;
margin: 1.5rem 0;
}
@ -768,7 +805,7 @@ details[open] > summary .icon {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.legend {
@ -785,15 +822,15 @@ details[open] > summary .icon {
.legend::before {
content: "";
margin-right: 0.5rem;
width: 1.5rem;
height: 0.5rem;
border-radius: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 25%;
}
.legend:nth-of-type(1)::before {
background-color: var(--green);
}
.legend:nth-of-type(2)::before {
background-color: var(--yellow);
background-color: #ffbb61;
}
.balance-card {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

55
css/main.scss
View File

@ -497,7 +497,7 @@ details {
display: grid;
gap: 1rem;
align-items: center;
grid-template-columns: 1fr auto;
grid-template-columns: 1fr auto auto;
}
#subpage_container{
grid-area: subpages;
@ -546,7 +546,6 @@ details {
border-radius: 0.5rem;
align-items: flex-start;
color: inherit;
cursor: pointer;
grid-template-columns: auto minmax(0, 1fr) auto;
&__icon{
display: flex;
@ -554,11 +553,11 @@ details {
justify-content: center;
padding: 0.5rem;
border-radius: 0.8rem;
background-color: rgba(var(--text-color), 0.06);
background-color: var(--accent-color--light);
.icon{
height: 1.3rem;
width: 1.3rem;
fill: rgba(var(--text-color), 0.8);
fill: var(--accent-color);
}
}
&__title{
@ -580,6 +579,35 @@ details {
padding: 1rem 1.5rem;
}
}
#user_accounts{
margin-top: 1.5rem;
display: grid;
gap: 1rem;
padding-bottom: 5rem;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.activity-card--account{
user-select: none;
gap: 1.5rem;
padding: 1.5rem;
background-color: var(--foreground-color);
border: solid thin rgba(var(--text-color), 0.2);
grid-template-columns: minmax(0, 1fr);
.activity-card__icon{
padding: 0;
margin-bottom: 0.5rem;
background-color: transparent;
}
.activity-card__type{
font-size: 0.9rem;
color: rgba(var(--text-color), 0.6);
font-weight: 500;
}
.activity-card__amount{
margin-top: 0.3rem;
font-size: 1.3rem;
}
}
.activity-card--request{
grid-template-areas: 'icon . amount' 'icon time .';
.activity-card__icon{
@ -601,7 +629,8 @@ details {
padding: 0.3rem 0.4rem;
font-weight: 500;
color: rgba($color: #000000, $alpha: 0.7);
&.success{
&.success,
&.active{
color: var(--green);
background-color: rgb(0, 230, 118, 0.1);
}
@ -613,6 +642,10 @@ details {
color: var(--yellow);
background-color: rgba(255, 252, 75, 0.1);
}
&.closed{
color: rgba(var(--text-color), 0.7);
background-color: rgba(var(--text-color), 0.06);
}
}
.activity-card--response{
grid-template-areas: 'icon . time' 'icon description description';
@ -658,8 +691,8 @@ details {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
height: 15rem;
padding-bottom: 3rem;
margin: 1.5rem 0;
}
#chart_legend {
@ -667,7 +700,7 @@ details {
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.legend {
@ -679,9 +712,9 @@ details {
&::before {
content: '';
margin-right: 0.5rem;
width: 1.5rem;
height: 0.5rem;
border-radius: 0.5rem;
width: 1rem;
height: 1rem;
border-radius: 25%;
}
&:nth-of-type(1){
&::before{
@ -690,7 +723,7 @@ details {
}
&:nth-of-type(2){
&::before{
background-color: var(--yellow);
background-color: rgb(255, 187, 97);
}
}
}

78
index.html
View File

@ -111,6 +111,11 @@
</div>
</div>
<theme-toggle></theme-toggle>
<button class="icon-button">
<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
</svg>
</button>
</header>
<nav id="main_nav">
<a href="#/homepage/dashboard" class="nav-item nav-item--active">
@ -176,12 +181,11 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon button__icon--left" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd" />
</svg>
Recent transactions
Accounts
</h4>
<a href="#/homepage/transactions" class="button">See all</a>
</div>
<div id="recent_transactions_container" class="observe-empty-state"></div>
<p class="empty-state">No transactions so far. Confirmed transactions will be shown here.</p>
<div id="user_accounts" class="observe-empty-state"></div>
<p class="empty-state">No accounts so far.</p>
</section>
</div>
<div id="notifications" class="sub-page hide-completely">
@ -209,11 +213,11 @@
</button>
</h4>
<div id="account_chart_container">
<canvas id="account_summary_chart"></canvas>
<div id="chart_legend">
<div class="legend">Deposit</div>
<div class="legend">Loan</div>
</div>
<canvas id="account_summary_chart"></canvas>
</div>
<div class="balance-card">
<div class="balance-card__icon">
@ -287,13 +291,26 @@
</a>
</template>
<template id="response_template">
<a class="activity-card activity-card--response interact">
<a class="activity-card activity-card--response">
<div class="activity-card__icon"></div>
<div class="activity-card__title"></div>
<p class="activity-card__description"></p>
<time class="activity-card__time"></time>
</a>
</template>
<template id="account_template">
<a class="activity-card activity-card--account interact">
<div class="flex align-start space-between">
<div class="activity-card__icon"></div>
<span class="activity-card__status status-tag"></span>
</div>
<div class="grid">
<div class="activity-card__type"></div>
<h4 class="activity-card__amount"></h4>
</div>
<time class="activity-card__time"></time>
</a>
</template>
<script id="ui_utils">
// Global variables
const appPages = ['sign_in', 'sign_up', 'homepage', 'transaction'];
@ -562,6 +579,7 @@
let responseLoader
let requestLoader
let accountLoader
let accountChart
async function showPage(targetPage, options = {}) {
const { firstLoad, hashChange } = options
@ -626,9 +644,17 @@
})
}
if(subPageId){
getRef('all_responses_list').innerHTML = ''
getRef('all_requests_list').innerHTML = ''
switch (subPageId) {
case 'dashboard':
renderRecentTransactions()
// renderRecentTransactions()
if(pagesData.openedSubPages.includes(subPageId)){
accountLoader.reset()
}else{
accountLoader = new LazyLoader('#user_accounts', bank_app.accounts.reverse(), render.accountCard, {batchSize: 10})
accountLoader.init()
}
refreshBalance()
break;
case 'notifications':
@ -823,13 +849,36 @@
</svg>
`
}
// card.setAttribute('href', `#/transaction?requestID=${requestID}`)
card.querySelector('.activity-card__icon').innerHTML = icon
card.querySelector('.activity-card__icon').classList.add(status)
card.querySelector('.activity-card__title').textContent = `${action} ${status === 'success' ? 'approved': 'failed'}`
card.querySelector('.activity-card__description').textContent = `Your request for ${action} of ${amount} was ${status === 'success' ? 'successful': 'rejected'}`
card.querySelector('.activity-card__time').textContent = getFormatedTime(timestamp, true)
return card
},
accountCard(accountDetails = {}){
const {type, status, openTime, closeTime = 0, amount, netAmt} = accountDetails
const card = getRef('account_template').content.cloneNode(true).firstElementChild
let icon
switch(type){
case 'deposit':
icon = `
<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"><rect fill="none" height="24" width="24"/><g><path d="M19.83,7.5l-2.27-2.27c0.07-0.42,0.18-0.81,0.32-1.15C17.96,3.9,18,3.71,18,3.5C18,2.67,17.33,2,16.5,2 c-1.64,0-3.09,0.79-4,2l-5,0C4.46,4,2,6.46,2,9.5S4.5,21,4.5,21l5.5,0v-2h2v2l5.5,0l1.68-5.59L22,14.47V7.5H19.83z M13,9H8V7h5V9z M16,11c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C17,10.55,16.55,11,16,11z"/></g></svg>
`
break
case 'loan':
icon = `
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.65,8.5H10.42a5.18,5.18,0,0,0-4,1.95L3.75,13.74a5,5,0,0,0-.68,5.31l0,0h0a5.07,5.07,0,0,0,4.5,2.73h7.88A5.08,5.08,0,0,0,20,19.05h0a5.39,5.39,0,0,0,.43-1.2,4.91,4.91,0,0,0-1-4.06l-2.66-3.34A5.17,5.17,0,0,0,12.65,8.5Z"/><path d="M9.71,6.59h3.94A2.94,2.94,0,0,0,16,5.39h0a1.13,1.13,0,0,0-.23-1.57,1.11,1.11,0,0,0-.95-.18h0a1.2,1.2,0,0,1-.92-.18l-.28-.21a3.64,3.64,0,0,0-4.22,0h0a1.18,1.18,0,0,1-1,.16L8.2,3.35a1.13,1.13,0,0,0-1.36.84A1.17,1.17,0,0,0,7,5H7A3.18,3.18,0,0,0,9.71,6.59Z"/></svg>
`
break
}
card.querySelector('.activity-card__icon').innerHTML = icon
card.querySelector('.activity-card__type').textContent = type
card.querySelector('.activity-card__time').textContent = getFormatedTime(parseInt(openTime))
card.querySelector('.activity-card__amount').textContent = `₹${amount}`
card.querySelector('.activity-card__status').classList.add(status)
card.querySelector('.activity-card__status').textContent = status
return card
}
}
function getSignedIn(){
@ -985,9 +1034,10 @@
}
document.querySelector('theme-toggle').addEventListener('themechange', e => {
selectGraphColors()
accountChart.data.datasets[0].backgroundColor = selectGraphColors()
accountChart.update()
if(accountChart){
accountChart.data.datasets[0].backgroundColor = selectGraphColors()
accountChart.update()
}
})
function renderChart(params) {
@ -1001,8 +1051,7 @@
label: 'Account summary',
data: [depositTotal, loanTotal],
backgroundColor: selectGraphColors(),
hoverOffset: 4,
borderWidth: 0
borderWidth: 0,
}]
},
options: {
@ -1039,7 +1088,7 @@
<script id="onLoadStartUp">
const requestResponsePairs = {}
function onLoadStartUp() {
//floDapps.addStartUpFunction('Sample', Promised Function)
//floDapps.setAppObjectStores({sampleObs1:{}, sampleObs2:{options{autoIncrement:true, keyPath:'SampleKey'}, Indexes:{sampleIndex:{}}}})
floDapps.setCustomPrivKeyInput(getSignedIn)
@ -1070,7 +1119,6 @@
}else{
showPage(window.location.hash)
}
})
.catch(error => console.error(error))
}).catch(error => console.error(error));