This commit is contained in:
sairaj mote 2020-09-20 03:39:48 +05:30
parent 08a16aabcc
commit 1364bcb8b8
6 changed files with 192 additions and 97 deletions

View File

@ -210,14 +210,13 @@ border: none;
padding: 0.7em 1em;
border-radius: 0.3em;
transition: opacity 0.3s;
background: rgba(var(--text-color), 0.1);
background: rgba(var(--text-color), 0.06);
box-shadow: 0 0 0 0.1em rgba(var(--text-color), 0.2) inset;
font-family: var(--font-family);
width: 100%
outline: none;
min-width: 0;
}
input:focus{
caret-color: var(--accent-color);
}
@ -2024,11 +2023,12 @@ smCarousel.innerHTML = `
scroll-snap-type: x mandatory;
}
.indicators{
display: flex;
display: grid;
grid-auto-flow: column;
justify-content: center;
position: absolute;
bottom: -1rem;
gap: 1rem;
gap: 0.5rem;
width: 100%;
}
.dot{

View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><defs><style>.a{fill:url(#a);}.b{fill:#ead9c5;}.c{fill:#d6b799;}</style><radialGradient id="a" cx="-21.79" cy="-46.86" r="476.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#68bbea"/><stop offset="1" stop-color="#ade4f7"/></radialGradient></defs><title>card-back</title><path class="a" d="M-107.16,293.52C45.19,273,156.39,282.59,232,296.31c18,3.27,67,12.77,130.64,5.53C397,297.93,509.84,285,538.18,216c6-14.53,4.59-37,1.58-81.25-1.53-22.54-7-103.17-17.28-132.84C483.09-111.8,116.85-217.84-46.68-32.64-152.11,86.76-113.71,265.09-107.16,293.52Z"/><path class="b" d="M261.88,223.61c78.38,54.16,155.44,51.73,155.12,63.07-.26,9-48.57,14.57-71.38,17.21-51.93,6-79.16,4.29-126.62,5.83-68.51,2.23-141.69,10-141.84,18.48C77.08,332.63,97,335,96.6,338.52c-.94,7.9-99.11,17.06-122.64,25-.16.06-8.08,5.28-8.4,5.28-1.21,0-2.28-2.28-3.33-6.15L49.08,193.13,70.32,170l25.14-49.93a14.19,14.19,0,0,1,8.19,2.15l139,87.18C246.45,211.85,252.1,216.84,261.88,223.61Z"/><path class="c" d="M95.46,120.11,70.32,170,49.08,193.13-37.77,362.61C-44.5,337.73-50.1,245.78-82.25,245.55c-14.7-.1-19.62-19.7-6.71-26.73l178.25-97A14,14,0,0,1,95.46,120.11Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512" viewBox="0 0 512 512"><defs><style>.a{fill:url(#a);}.b{fill:#e6e6e6;}.c{fill:#ccc;}</style><radialGradient id="a" cx="348.29" cy="74.1" fx="157.24155640757456" fy="29.04343660679026" r="476.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4a9ac6"/><stop offset="1" stop-color="#f2f2f2"/></radialGradient></defs><title>card-back</title><path class="a" d="M-107.16,293.52C45.19,273,156.39,282.59,232,296.31c18,3.27,67,12.77,130.64,5.53C397,297.93,509.84,285,538.18,216c6-14.53,4.59-37,1.58-81.25-1.53-22.54-7-103.17-17.28-132.84C483.09-111.8,116.85-217.84-46.68-32.64-152.11,86.76-113.71,265.09-107.16,293.52Z"/><path class="b" d="M261.88,223.61C314.62,260.23,369,281.1,417.63,293.05c-16.36,3.16-41.33,7.51-72,10.84-49.24,5.34-68.61,3.94-126.62,5.83-68.51,2.23-141.69,10-141.84,18.48C77.08,332.63,97,335,96.6,338.52c-.94,7.9-99.11,17.06-122.64,25-.16.06-8.08,5.28-8.4,5.28-1.21,0-2.28-2.28-3.33-6.15L49.08,193.13,70.32,170l25.14-49.93a14.19,14.19,0,0,1,8.19,2.15l139,87.18Q251.87,216.63,261.88,223.61Z"/><path class="c" d="M95.46,120.11,70.32,170,49.08,193.13-37.77,362.61C-44.5,337.73-50.1,245.78-82.25,245.55c-14.7-.1-19.62-19.7-6.71-26.73l178.25-97A14,14,0,0,1,95.46,120.11Z"/></svg>

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -400,19 +400,10 @@ textarea {
font-weight: 500;
margin-bottom: 1.5rem;
}
#confirmation .btns,
#prompt .btns {
display: flex;
justify-content: right;
width: 100%;
}
#confirmation .btns button,
#prompt .btns button {
background: none;
}
#confirmation .btns button:first-of-type,
#prompt .btns button:first-of-type {
#confirmation .flex sm-button:first-of-type,
#prompt .flex sm-button:first-of-type {
margin-right: 0.6em;
margin-left: auto;
}
.refresh {
@ -790,7 +781,7 @@ sm-panel {
.page {
padding: 1rem 1.5rem;
padding-bottom: 4rem;
padding-bottom: 5rem;
}
.page .container-header {
display: grid;
@ -986,13 +977,22 @@ sm-panel {
#transaction_result::part(popup) {
background-image: url(card-back.svg);
background-size: cover;
background-position-y: -4rem;
background-position-y: -3rem;
background-repeat: no-repeat;
}
#transaction_result .copy-row {
grid-template-areas: "label label" ". .";
margin-top: 1rem;
gap: 0 1rem;
}
#transaction_result h4, #transaction_result p {
#transaction_result .copy-row h4 {
font-weight: 500;
}
#transaction_result h5 {
grid-area: label;
color: rgba(var(--text-color), 0.7);
}
#transaction_result h4, #transaction_result h5, #transaction_result p {
text-align: center;
}
#transaction_result > h4 {
@ -1008,7 +1008,7 @@ sm-panel {
align-self: center;
stroke: none;
stroke-dasharray: 50;
fill: rgba(var(--foreground-color), 0.8);
fill: rgba(var(--foreground-color), 1);
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@ -1031,6 +1031,37 @@ sm-panel {
margin-bottom: 1rem;
}
.activity {
display: grid;
background: rgba(var(--text-color), 0.06);
border-radius: 0.6rem;
padding: 1rem 1.2rem;
gap: 0 1rem;
grid-template-columns: auto 1fr auto;
grid-template-areas: "icon type amount" "icon time time";
}
.activity .icon {
grid-area: icon;
height: 3rem;
width: 3rem;
padding: 0.8rem;
background: rgba(var(--text-color), 0.06);
border-radius: 2rem;
}
.activity .activity-type {
grid-area: type;
}
.activity .activity-amount {
text-align: right;
grid-area: amount;
}
.activity .activity-time {
text-align: right;
grid-area: time;
color: rgba(var(--text-color), 0.7);
font-weight: 500;
}
@media only screen and (max-width: 640px) {
#home_page, #deposit {
display: grid;
@ -1099,7 +1130,7 @@ sm-panel {
}
.page {
padding-bottom: 2em;
padding-bottom: 2rem;
}
#sign_in_popup {

2
css/main.min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -408,7 +408,6 @@ textarea {
#confirmation,
#prompt {
flex-direction: column;
p {
margin: 1rem;
}
@ -418,17 +417,10 @@ textarea {
margin-bottom: 1.5rem;
}
.btns {
display: flex;
justify-content: right;
width: 100%;
button {
background: none;
}
button:first-of-type {
.flex {
sm-button:first-of-type {
margin-right: 0.6em;
margin-left: auto;
}
}
}
@ -832,7 +824,7 @@ sm-panel{
.page {
padding: 1rem 1.5rem;
padding-bottom: 4rem;
padding-bottom: 5rem;
.container-header {
display: grid;
@ -1054,13 +1046,22 @@ sm-panel{
&::part(popup){
background-image: url(card-back.svg);
background-size: cover;
background-position-y: -4rem;
background-position-y: -3rem;
background-repeat: no-repeat;
}
.copy-row{
grid-template-areas: 'label label' '. .';
margin-top: 1rem;
gap: 0 1rem;
h4{
font-weight: 500;
}
}
h4, p{
h5{
grid-area: label;
color: rgba(var(--text-color), 0.7);
}
h4, h5, p{
text-align: center;
}
& > h4{
@ -1076,7 +1077,7 @@ sm-panel{
align-self: center;
stroke: none;
stroke-dasharray: 50;
fill: rgba(var(--foreground-color), 0.8);
fill: rgba(var(--foreground-color), 1);
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@ -1104,6 +1105,37 @@ sm-panel{
}
}
.activity{
display: grid;
background: rgba(var(--text-color), 0.06);
border-radius: 0.6rem;
padding: 1rem 1.2rem;
gap: 0 1rem;
grid-template-columns: auto 1fr auto;
grid-template-areas: 'icon type amount' 'icon time time';
.icon{
grid-area: icon;
height: 3rem;
width: 3rem;
padding: 0.8rem;
background: rgba(var(--text-color), 0.06);
border-radius: 2rem;
}
.activity-type{
grid-area: type;
}
.activity-amount{
text-align: right;
grid-area: amount;
}
.activity-time{
text-align: right;
grid-area: time;
color: rgba(var(--text-color), 0.7);
font-weight: 500;
}
}
@media only screen and (max-width: 640px) {
#home_page, #deposit{
display: grid;
@ -1171,7 +1203,7 @@ sm-panel{
}
.page {
padding-bottom: 2em;
padding-bottom: 2rem;
}
#sign_in_popup {

View File

@ -18,9 +18,9 @@
</audio>
<sm-popup id="confirmation">
<p id="confirm_message"></p>
<div class="btns">
<button class="hover cancel-btn">Cancel</button>
<button class="hover submit-btn">OK</button>
<div class="flex align-center">
<sm-button variant="no-outline" class="cancel-btn">Cancel</sm-button>
<sm-button variant="no-outline" class="submit-btn">OK</button>
</div>
</sm-popup>
<sm-popup id="prompt">
@ -108,8 +108,7 @@
<p>
Add money through UPI.
</p>
<sm-button onclick="showPopup('transaction_result')">show</sm-button>
<p id="send_amount_to_deposit">Pay ₹0 to UPI Id below.</p>
<p id="send_amount_to_deposit">Pay <b>₹0</b> to UPI Id below.</p>
<div class="copy-row">
<h4 id="send_cash_to_deposit" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
@ -274,7 +273,8 @@
</section>
<h4 id="transaction_heading"></h4>
<p id="transaction_message"></p>
<div class="copy-row">
<div class="copy-row grid hide-completely">
<h5>Transaction ID</h5>
<h4 id="successful_transaction_id" class="copy"></h4>
<svg class="icon" onclick="copyToClipboard(this.parentNode)" viewBox="0 0 64 64">
<title>Copy</title>
@ -469,7 +469,7 @@
<div class="left">
<h3>Transaction Requests</h3>
<sm-tab-header target="requests_to_cashier">
<sm-tab></sm-tab>
<sm-tab>Deposits</sm-tab>
<sm-tab>Withdrawals</sm-tab>
<sm-tab>Pay Through Cashier</sm-tab>
</sm-tab-header>
@ -710,12 +710,17 @@
<p class="bottom-margin">*If your request isn't completed in 12hrs, use <strong>REPORT</strong> to get
assistance from our helpline.</p>
<sm-tab-header target="user_activities">
<sm-tab>Sent</sm-tab>
<sm-tab>Deposits</sm-tab>
<sm-tab>Withdrawals</sm-tab>
<sm-tab>Pay through cashier</sm-tab>
<sm-tab>System Notifications</sm-tab>
</sm-tab-header>
<sm-tab-panels id="user_activities">
<sm-panel>
<div id="sent_activity_container" class="container activity-container"></div>
<h4 class="empty-state">You haven't sent any rupee yet.</h4>
</sm-panel>
<sm-panel>
<div id="deposit_activity_container" class="container activity-container"></div>
<h4 class="empty-state">You haven't deposited rupee yet.</h4>
@ -825,7 +830,6 @@
currentTimeout,
notificationSound = document.getElementById('notification_sound');
const render = {
// returns an order element;
depositRequest(txid, floId) {
let card = document.createElement('div');
card.classList.add('request')
@ -881,6 +885,63 @@
</button>`;
return card;
},
activityCard(type, amount, timesStamp){
let card = document.createElement('div'),
composition = ``,
icon,
sign
card.classList.add('activity')
switch(type){
case 'sent':
icon = `
<svg class="icon" viewBox="0 0 64 64">
<path
d="M47.28,16.8,29.6,34.64a3.3,3.3,0,0,1-3.59.71L2.5,25.42a3.28,3.28,0,0,1,.26-6.13L59.21.87A3.28,3.28,0,0,1,63.32,5l-18.93,56a3.26,3.26,0,0,1-6.12.18l-6.4-15.68" />
</svg>
`
sign = '-'
break;
case 'deposit':
icon = `
<svg class="icon" viewBox="0 0 64 64">
<title>deposit</title>
<path d="M29.58,35.76V60.47H5.13A4.63,4.63,0,0,1,.5,55.83V9.63" />
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H42.16" />
<path
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
<path
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
<polyline points="38.61 44.12 29.54 35.05 20.39 44.2" />
</svg>
`
sign = '+'
break;
case 'withdraw':
icon = `
<svg class="icon" viewBox="0 0 64 64">
<title>withdraw</title>
<path d="M15.18,60.47h-10A4.63,4.63,0,0,1,.5,55.83V9.63" />
<line x1="29.42" y1="59.04" x2="29.42" y2="34.34" />
<path d="M59.5,47v8.85a4.63,4.63,0,0,1-4.63,4.64H43.62" />
<path
d="M49.44,3.53H6.09A5.59,5.59,0,0,0,.5,9.12h0a5.59,5.59,0,0,0,5.59,5.59H38.91l14.38,0a6,6,0,0,1,6.21,6V32" />
<path
d="M54.39,32h6.08a3,3,0,0,1,3,3V44a3,3,0,0,1-3,3H54.39a7.49,7.49,0,0,1-7.49-7.49v0A7.49,7.49,0,0,1,54.39,32Z" />
<polyline points="20.39 50.69 29.45 59.76 38.61 50.6" />
</svg>
`
sign = '-'
break;
}
composition = `
${icon}
<h4 class="activity-type">${type}</h4>
<h4 class="activity-amount">${sign} ₹${amount}</h4>
<h5 class="activity-time">${formatedTime(timesStamp)}</h5>
`
card.innerHTML = composition;
return card;
},
depositActivity(vectorClock, txid, amount) {
let card = document.createElement('div'),
time = parseInt(vectorClock.split('_')[0])
@ -1341,11 +1402,14 @@
tokenAmount.disabled = false
break;
case 'transaction_result' :
setTimeout(() => {
transactionHeading.textContent = ''
transactionMessage.innerHTML = ''
transactionSuccessId.textContent = ''
transactionSuccessId.parentNode.classList.add('hide-completely')
transactionSuccessSection.classList.add('hide-completely')
transactionFailedSection.classList.add('hide-completely')
}, 300);
break;
case 'prompt':
if (thisPopup.querySelector('sm-input').value == '')
@ -1457,6 +1521,7 @@
})
}
const currentYear = new Date().getFullYear()
function formatedTime(time) {
try {
let timeFrag = new Date(parseInt(time)).toString().split(' '),
@ -1476,7 +1541,10 @@
finalHours = `${hours}:${minutes}`
finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`
return `${finalHours} ${month} ${date} ${year}`;
if(year == currentYear)
return `${finalHours} ${month} ${date}`;
else
return `${finalHours} ${month} ${date} ${year}`;
} catch (e) {
console.error(e);
return time;
@ -1667,12 +1735,14 @@
transactionHeading.textContent = heading
transactionMessage.innerHTML = message
transactionSuccessId.textContent = transactionId
if(transactionId)
transactionSuccessId.parentNode.classList.remove('hide-completely')
else
transactionSuccessId.parentNode.classList.add('hide-completely')
if(status === 'success'){
transactionSuccessSection.classList.remove('hide-completely')
transactionFailedSection.classList.add('hide-completely')
}
else{
transactionSuccessSection.classList.add('hide-completely')
transactionFailedSection.classList.remove('hide-completely')
}
showPopup('transaction_result')
@ -11354,8 +11424,6 @@
await this.retrieveLatestContent();
request_rupee_token();
withdraw_token_to_get_cash();
transferTokensManually();
@ -11760,11 +11828,11 @@
flo_comment)
console.log(flo_txid);
if (typeof flo_txid !== "string") {
notify(`Transaction unsuccessful.`);
showTrasactionStatus('failure', `Transaction failed.`);
hidePopup()
return false;
} else {
notify(`Transaction successful: ${flo_txid}`, 'success', true, true);
showTrasactionStatus('success', 'Rupee Sent', 'It may take upto 48 working hours for transaction to be completed.', flo_txid);
if (payingRequested === true) {
const all_reqs = floDapps.getNextGeneralData(token_app.master_configurations
.TYPE_REQUEST_PAYMENT, "0").reverse();
@ -12082,7 +12150,6 @@
.TYPE_DEPOSITS, {
receiverID: cashier
}).then(result => {
console.log(result);
hidePopup()
showTrasactionStatus('success', 'Deposit request sent.', 'It may take upto 48 hours for deposited amount to be reflected in your account.')
btnLoading('request_tokens_btn', 'stop')
@ -12103,20 +12170,8 @@
const cashier = randomNoRepeats(Object.keys(token_app.master_configurations.cashiers))();
withdraw_cash_btn.onclick = async function () {
btnLoading('withdraw_cash_btn', 'start')
if (typeof myFloID !== "string" || myFloID.length < 1) {
notify(`Your Flo Id is invalid.`, 'error');
return;
}
const withdraw_cash_amount = Number(document.getElementById('withdraw_cash_amount').value);
const user_withdraw_upi = String(document.getElementById('user_withdraw_upi').value);
if (withdraw_cash_amount < 1) {
notify(`Invalid amount. Please provide a number above 0.`, 'error');
return false;
}
if (!user_withdraw_upi.includes('@')) {
notify(`Please enter a valid UPI id.`, 'error');
return false;
}
const token_balance_url =
`https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=${myFloID}`;
const user_token_balance_object = await ajaxGet(token_balance_url);
@ -12129,9 +12184,8 @@
}
const current_balance = Number(user_token_balance_object.balance);
if (current_balance < withdraw_cash_amount) {
notify(`You have unsufficient balance to withdraw. You can withdraw only ₹${user_token_balance_object.balance}`,
'error', true, true);
hidePopup()
showTrasactionStatus('failure', 'Insufficient Balance', `You have only ₹${user_token_balance_object.balance} balance`)
return;
}
@ -12140,8 +12194,8 @@
flo_comment)
console.log(flo_txid);
if (typeof flo_txid !== "string") {
notify(`Transaction unsuccessful.`, 'error');
hidePopup()
showTrasactionStatus('failure', 'Withdrawal failed')
return false;
}
// TODO: Validate https://ranchimallflo.duckdns.org/api/v1.0/getTransactionDetails/${flo_txid}
@ -12159,16 +12213,13 @@
.TYPE_WITHDRAWS, {
receiverID: cashier
});
notify('Withdraw request sent successfully.');
hidePopup()
showTrasactionStatus('success', 'Withdraw request sent.', 'It may take upto 48 working hours to process your withdrawal request.')
return true;
}
notify('Failed to send withdraw request to cashier.', 'error');
showTrasactionStatus('failure', 'Failed to send withdraw request.');
return true;
}
const user_withdraw_upi = document.getElementById('user_withdraw_upi');
//user_withdraw_upi.value = get_user_payment_details();
} catch (error) {
throw new Error(error)
@ -12244,7 +12295,7 @@
upi_txid,
deposit_amount
} = usr_deposits.message;
frag.append(render.depositActivity(usr_deposits.vectorClock, upi_txid, deposit_amount))
frag.append(render.activityCard('deposit', deposit_amount, usr_deposits.vectorClock, upi_txid))
}
depositActivityContainer.innerHTML = ``;
@ -12256,8 +12307,7 @@
withdrawer_upi,
withdraw_amount
} = usr_withdraws.message;
frag.append(render.withdrawActivity(usr_withdraws.vectorClock, token_txid, withdrawer_upi,
withdraw_amount))
frag.append(render.activityCard('withdraw', withdraw_amount, usr_withdraws.vectorClock, token_txid, withdrawer_upi))
}
withdrawActivityContainer.innerHTML = ``;
withdrawActivityContainer.append(frag)
@ -12507,13 +12557,12 @@
async function get_sent_rupee_list() {
try {
let senderIDs = [myFloID];
let receiverID = myFloID;
floGlobals.appObjects[token_app.master_configurations.TYPE_SENT_TOKENS][flo_txid] = {
token_sender, token_receiver, token_amount, token_name_radio,
flo_txid, "datetime": + new Date()
};
await floCloudAPI.requestObjectData(token_app.master_configurations.TYPE_SENT_TOKENS,
options = { receiverID, senderIDs });
options = { myFloID, senderIDs });
const sent_tokens_list = Object.keys(floGlobals.appObjects
[token_app.master_configurations.TYPE_SENT_TOKENS]);
@ -12526,29 +12575,12 @@
}
}
function get_user_payment_details() {
try {
const pay_key = `pay_key_${myFloID}`;
var pay_id = localStorage.getItem(pay_key);
if(typeof pay_id !=='string' || pay_id.length<1) throw new Error('Invalid payment id.');
return pay_id;
} catch(error) {
notify('Please update your UPI or payment details in settings.', 'error', '', true);
throw new Error(error)
}
}
async function update_my_payment_details(userUpi='') {
try {
compactIDB.writeData('userUpis', userUpi, userUpi)
console.log(await compactIDB.readAllData('userUpis'))
// todo: validate upi_id
/*const pay_key = `pay_key_${myFloID}`;
localStorage.setItem(pay_key, payment_id);*/
notify('Your payment details updated successfully.')