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

0.0.57

Browse Source
This commit is contained in:
sairaj mote 2020-10-04 12:26:39 +05:30
parent 1b98f4fffc
commit 2df7068cb5
4 changed files with 128 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
css/main.css
View File

@ -450,6 +450,26 @@ sm-popup h5:not(.tag) {
font-weight: 500;
}
#reader {
overflow: hidden;
}
#reader video {
object-fit: cover;
}
#qr_code_popup::part(popup) {
height: 80vh;
}
#qr_code_popup sm-tab-header {
width: max-content;
align-self: center;
margin-bottom: 2rem;
}
#qr_code_popup sm-panel {
display: flex;
justify-content: center;
}
.popup-header {
padding: 1.5rem;
padding-bottom: 0;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

21
css/main.scss
View File

@ -466,6 +466,27 @@ sm-popup{
}
}
#reader{
overflow: hidden;
video{
object-fit: cover;
}
}
#qr_code_popup{
&::part(popup){
height: 80vh;
}
sm-tab-header{
width: max-content;
align-self: center;
margin-bottom: 2rem;
}
sm-panel{
display: flex;
justify-content: center;
}
}
.popup-header{
padding: 1.5rem;
padding-bottom: 0;

95
index.html
View File

@ -54,6 +54,27 @@
Sign In
</button>
</sm-popup>
<sm-popup id="qr_code_popup">
<header class="popup-header" slot="header">
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
<title>close</title>
<line x1="64" y1="0" x2="0" y2="64" />
<line x1="64" y1="64" x2="0" y2="0" />
</svg>
</header>
<sm-tab-header variant="tab" class="round" target="qr_selector">
<sm-tab>Scan</sm-tab>
<sm-tab>My QR Code</sm-tab>
</sm-tab-header>
<sm-tab-panels id="qr_selector">
<sm-panel>
<div id="reader"></div>
</sm-panel>
<sm-panel>
<div id="my_qr_code"></div>
</sm-panel>
</sm-tab-panels>
</sm-popup>
<sm-popup id="send_rupee_popup">
<header class="popup-header" slot="header">
<svg class="icon" onclick="this.closest('sm-popup').hide()" viewBox="0 0 64 64">
@ -402,11 +423,10 @@
d="M46.73,14.81l7,7,7.65-7.6A7.15,7.15,0,0,0,61.39,4L60.11,2.77a7.23,7.23,0,0,0-10.19,0L3.87,48.57a5,5,0,0,0-1.39,2.6L.53,61.27a1.74,1.74,0,0,0,2,2l10.15-1.94A5.06,5.06,0,0,0,15.34,60L49.6,25.9" />
</svg>
<svg id="delete_person" onclick="deletePerson()" class="icon" viewBox="0 0 64 64" title="Remove">
<path
d="M47.15,63.5H16.85a3.56,3.56,0,0,1-3.3-3.58L11.27,20a2.06,2.06,0,0,1,2.05-2.18H50.68a2.06,2.06,0,0,1,2,2.18l-2.28,40A3.56,3.56,0,0,1,47.15,63.5Z" />
<path
d="M54.67,6.08a1.25,1.25,0,0,1,1.25,1.25v3.51a1.24,1.24,0,0,1-1.25,1.24H9.33a1.24,1.24,0,0,1-1.25-1.24V7.33A1.25,1.25,0,0,1,9.33,6.08H54.67m0-1H9.33A2.25,2.25,0,0,0,7.08,7.33v3.51a2.24,2.24,0,0,0,2.25,2.24H54.67a2.24,2.24,0,0,0,2.25-2.24V7.33a2.25,2.25,0,0,0-2.25-2.25Z" />
<path d="M30.48.5h3a3,3,0,0,1,3,3v2a0,0,0,0,1,0,0h-9a0,0,0,0,1,0,0v-2A3,3,0,0,1,30.48.5Z" />
<title>remove</title>
<line x1="10.5" y1="2.5" x2="53.5" y2="2.5"/>
<line x1="34" y1="0.5" x2="30" y2="0.5"/>
<path d="M53.5,16.5V59.42a4.08,4.08,0,0,1-4.08,4.08H14.58a4.08,4.08,0,0,1-4.08-4.08V16.5"/>
</svg>
</div>
</div>
@ -532,6 +552,17 @@
<div class="left">
<h4>Rupee actions</h4>
<section class="options-tab">
<div class="option" onclick="showPopup('qr_code_popup')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>scanner</title>
<path d="M24.5,63.5H5.58A5.08,5.08,0,0,1,.5,58.43V39.5"/>
<path d="M63.5,39.5V58.43a5.08,5.08,0,0,1-5.08,5.07H39.5"/>
<path d="M39.5.5H58.42A5.08,5.08,0,0,1,63.5,5.57V24.5"/>
<path d="M.5,24.5V5.57A5.08,5.08,0,0,1,5.58.5H24.5"/>
<line x1="10" y1="32.57" x2="54" y2="32.57"/>
</svg>
<h4>Scan QR</h4>
</div>
<div class="option" onclick="showPopup('send_rupee_popup')">
<svg class="icon" viewBox="0 0 64 64">
<path
@ -933,7 +964,6 @@
</section>
<section id="settings_page" class="page hide-completely">
<h3 class="bottom-margin">Settings<h3>
<div id="my_qr_code"></div>
<section>
<h4>My FLO address</h4>
<div class="copy-row">
@ -1008,6 +1038,7 @@
generalVC: {}
}
</script>
<script src="qrcode-scanner.min.js"></script>
<script id="onLoadStartUp">
const userFloIdContainers = document.querySelectorAll('.user-flo-id')
function onLoadStartUp() {
@ -1578,6 +1609,11 @@
popupStack.peek().popup.hide()
}
let personPopupOpen = false,
scannedFloId,
scannerOn = false
const qrScannerInstance = new Html5Qrcode("reader");;
document.addEventListener('popupopened', e => {
let thisPopup = e.detail.popup,
firstInput = thisPopup.querySelector('sm-input')
@ -1594,17 +1630,54 @@
if (personPopupOpen) {
tokenReceiver.value = person.dataset.floId
}
if (scannerOn) {
tokenReceiver.value = scannedFloId
}
break;
case 'request_rupee':
if (personPopupOpen) {
requestedAddress.value = person.dataset.floId
}
break;
case 'qr_code_popup':
Html5Qrcode.getCameras().then(devices => {
if (devices && devices.length) {
let cameraId = devices[0].id;
qrScannerInstance.start(
cameraId,
{
fps: 10,
qrbox: 200
},
qrCodeMessage => {
scannedFloId = qrCodeMessage
qrScannerInstance.stop().then(ignore => {
// QR Code scanning is stopped.
hidePopup()
showPopup('send_rupee_popup')
}).catch(err => {
console.log("Unable to stop scanning.");
});
},
errorMessage => {
})
.then(success => {
scannerOn = true
})
.catch(err => {
// Start failed, handle it. For example,
scannerOn = false
console.log(`Unable to start scanning, error: ${err}`);
});
}
}).catch(err => {
// handle err
});
break;
}
})
let personPopupOpen = false;
document.addEventListener('popupclosed', e => {
popupStack = e.detail.popupStack
let thisPopup = e.detail.popup,
@ -1629,6 +1702,7 @@
payingRequested = false;
tokenReceiver.readOnly = false
tokenAmount.readOnly = false
scannerOn = false
break;
case 'transaction_result':
setTimeout(() => {
@ -1647,6 +1721,10 @@
if (thisPopup.querySelector('sm-input').value == '')
thisPopup.querySelector('.cancel-btn').click()
break
case 'qr_code_popup':
if(scannerOn)
qrScannerInstance.stop()
break
}
})
@ -2385,7 +2463,6 @@
}
</script>
<script src="qrcode.min.js"></script>
<script src="qrcode-scanner.min.js"></script>
<script id="init_lib">
//All util libraries required for Standard operations (DO NOT EDIT ANY)