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

Merge branch 'master' of https://github.com/ranchimall/rupee-token

Browse Source
This commit is contained in:
Abhishek Sinha 2020-08-14 12:12:26 +05:30
commit 8ad6ef33d5
1 changed files with 80 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

149
index.html
View File

@ -304,7 +304,7 @@
<div id="display_balance"> <div id="display_balance">
<h5>Rupee Balance</h5> <h5>Rupee Balance</h5>
<h3 id="token_balance">0</h3> <h3 id="token_balance">0</h3>
<svg class="icon" onclick="refresh_balance()" viewBox="0 0 64 64"> <svg class="icon" onclick="refresh_balance(this)" viewBox="0 0 64 64">
<title>refresh balance</title> <title>refresh balance</title>
<path d="M60.94,43.13A30.87,30.87,0,1,1,59,17.93" /> <path d="M60.94,43.13A30.87,30.87,0,1,1,59,17.93" />
<polyline points="63.09 0.1 59.3 18.87 40.49 15.08" /> <polyline points="63.09 0.1 59.3 18.87 40.49 15.08" />
@ -2090,8 +2090,8 @@ slot[name="tab"]::slotted(.active){
}) })
// sm-select // sm-select
const smStripSelect = document.createElement('template') const smStripSelect = document.createElement('template')
smStripSelect.innerHTML = ` smStripSelect.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
@ -2121,56 +2121,57 @@ slot[name="tab"]::slotted(.active){
} }
slot::slotted(.active){ slot::slotted(.active){
border-radius: 2rem; border-radius: 2rem;
opacity: 1;
background-color: rgba(var(--text), .16); background-color: rgba(var(--text), .16);
} }
</style> </style>
<div class="sm-select"> <div class="sm-select">
<slot></slot> <slot></slot>
</div>`; </div>`;
customElements.define('sm-strip-select', class extends HTMLElement { customElements.define('sm-strip-select', class extends HTMLElement {
constructor() { constructor() {
super() super()
this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true)) this.attachShadow({ mode: 'open' }).append(smStripSelect.content.cloneNode(true))
} }
static get observedAttributes() { static get observedAttributes() {
return ['value'] return ['value']
} }
get value() { get value() {
return this.getAttribute('value') return this.getAttribute('value')
} }
set value(val) { set value(val) {
this.setAttribute('value', val) this.setAttribute('value', val)
} }
connectedCallback() { connectedCallback() {
let previousOption, let previousOption,
slot = this.shadowRoot.querySelector('slot'); slot = this.shadowRoot.querySelector('slot');
this.addEventListener('optionSelected', e => { this.addEventListener('optionSelected', e => {
if (previousOption === e.target) return; if (previousOption === e.target) return;
if (previousOption) if (previousOption)
previousOption.classList.remove('active') previousOption.classList.remove('active')
e.target.classList.add('active') e.target.classList.add('active')
e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' }) e.target.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
this.setAttribute('value', e.detail.value) this.setAttribute('value', e.detail.value)
this.dispatchEvent(new CustomEvent('change', { this.dispatchEvent(new CustomEvent('change', {
bubbles: true, bubbles: true,
composed: true composed: true
})) }))
previousOption = e.target; previousOption = e.target;
}) })
slot.addEventListener('slotchange', e => { slot.addEventListener('slotchange', e => {
if (slot.assignedElements()[0]) { if (slot.assignedElements()[0]) {
let firstElement = slot.assignedElements()[0]; let firstElement = slot.assignedElements()[0];
this.setAttribute('value', firstElement.getAttribute('value')) this.setAttribute('value', firstElement.getAttribute('value'))
firstElement.classList.add('active') firstElement.classList.add('active')
previousOption = firstElement; previousOption = firstElement;
} }
}); });
} }
}) })
// sm-option // sm-option
const smStripOption = document.createElement('template') const smStripOption = document.createElement('template')
smStripOption.innerHTML = ` smStripOption.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
@ -2187,6 +2188,8 @@ slot[name="tab"]::slotted(.active){
outline: none; outline: none;
border-radius: 2rem; border-radius: 2rem;
text-transform: capitalize; text-transform: capitalize;
border: solid 1px rgba(var(--text), .16);
opacity: 0.9;
} }
.sm-option:hover{ .sm-option:hover{
background: rgba(var(--text), 0.1); background: rgba(var(--text), 0.1);
@ -2195,13 +2198,25 @@ slot[name="tab"]::slotted(.active){
<div class="sm-option" tabindex="0"> <div class="sm-option" tabindex="0">
<slot></slot> <slot></slot>
</div>`; </div>`;
customElements.define('sm-strip-option', class extends HTMLElement { customElements.define('sm-strip-option', class extends HTMLElement {
constructor() { constructor() {
super() super()
this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true)) this.attachShadow({ mode: 'open' }).append(smStripOption.content.cloneNode(true))
} }
connectedCallback() { connectedCallback() {
this.addEventListener('click', e => { this.addEventListener('click', e => {
let optionSelected = new CustomEvent('optionSelected', {
bubbles: true,
composed: true,
detail: {
text: this.textContent,
value: this.getAttribute('value')
}
})
this.dispatchEvent(optionSelected)
})
if (this.hasAttribute('default')) {
setTimeout(() => {
let optionSelected = new CustomEvent('optionSelected', { let optionSelected = new CustomEvent('optionSelected', {
bubbles: true, bubbles: true,
composed: true, composed: true,
@ -2211,22 +2226,10 @@ slot[name="tab"]::slotted(.active){
} }
}) })
this.dispatchEvent(optionSelected) this.dispatchEvent(optionSelected)
}) }, 0);
if (this.hasAttribute('default')) {
setTimeout(() => {
let optionSelected = new CustomEvent('optionSelected', {
bubbles: true,
composed: true,
detail: {
text: this.textContent,
value: this.getAttribute('value')
}
})
this.dispatchEvent(optionSelected)
}, 0);
}
} }
}) }
})
</script> </script>
<script id="init_lib"> <script id="init_lib">
@ -11961,8 +11964,12 @@ slot[name="tab"]::slotted(.active){
} }
} }
async function refresh_balance() { async function refresh_balance(refreshButton) {
try { try {
if(refreshButton){
notify('Updating Balance')
refreshButton.classList.add('animate-loader')
}
const current_token_balance = document.getElementById('token_balance').textContent; const current_token_balance = document.getElementById('token_balance').textContent;
if (typeof current_token_balance == "string") { if (typeof current_token_balance == "string") {
const get_user_balance = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' + myFloID) const get_user_balance = await ajaxGet('https://ranchimallflo.duckdns.org/api/v1.0/getFloAddressBalance?token=rupee&floAddress=' + myFloID)
@ -11973,6 +11980,10 @@ slot[name="tab"]::slotted(.active){
= get_user_balance.balance; = get_user_balance.balance;
} }
} }
if (refreshButton) {
notify('Balance Updated')
refreshButton.classList.remove('animate-loader')
}
return true; return true;
} catch (error) { } catch (error) {
throw new Error(error); throw new Error(error);