Bug fix and UI changes
Fixed -- Select default value being undefined UI -- Added secondary currency in details part of bond transaction
This commit is contained in:
sairaj mote
parent
f58e86607e
commit
9115ec71e1
@ -406,11 +406,9 @@ sm-option {
|
||||
.dropdown__panel {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 1rem;
|
||||
margin: 0 1rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -421,6 +419,9 @@ sm-option {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 2rem 2rem -0.5rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
.dropdown__panel li {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#profile_button {
|
||||
align-items: center;
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -335,11 +335,9 @@ sm-option{
|
||||
.dropdown__panel{
|
||||
position: absolute;
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 1rem;
|
||||
margin: 0 1rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -349,6 +347,9 @@ sm-option{
|
||||
width: min(24rem, calc(100vw - 2rem));
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 2rem 2rem -0.5rem rgba($color: #000000, $alpha: 0.16);
|
||||
li{
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
#profile_button{
|
||||
|
||||
48
index.html
48
index.html
@ -39,8 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div id="current_price" class="grid gap-1 flow-column align-center">
|
||||
<span id="btc-usd-rate" class="weight-700 hide-completely"></span>
|
||||
<span id="btc-inr-rate" class="weight-700"></span>
|
||||
<span id="btc-usd-rate" class="weight-700"></span>
|
||||
<span id="usd-rate" class="weight-700"></span>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
@ -8232,7 +8231,7 @@ Bitcoin.Util = {
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Net bond value</span>
|
||||
<span class="value net-value" style="color: var(--green)"></span>
|
||||
<span class="value net-value-primary" style="color: var(--green)"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label">Guaranteed interest</span>
|
||||
@ -8264,6 +8263,10 @@ Bitcoin.Util = {
|
||||
<span class="label">USD rate</span>
|
||||
<span class="value usd-rate"></span>
|
||||
</div>
|
||||
<div class="transaction-column">
|
||||
<span class="label"></span>
|
||||
<span class="value net-value-sec" style="color: var(--green)"></span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
@ -8274,8 +8277,8 @@ Bitcoin.Util = {
|
||||
mode: 'open'
|
||||
})
|
||||
this.shadow.append(bondTemplate.content.cloneNode(true))
|
||||
this.amountInvested
|
||||
this.netValue
|
||||
this.amountInvested = {}
|
||||
this.netValue = {}
|
||||
this.moreDetailsButton = this.shadow.querySelector('button')
|
||||
this.moreDetails = this.shadow.querySelector('.more-details')
|
||||
this.areDetailsOpen = false
|
||||
@ -8296,26 +8299,29 @@ Bitcoin.Util = {
|
||||
usdRate
|
||||
} = obj
|
||||
|
||||
|
||||
this.amountInvested = amountInvested
|
||||
this.netValue = netValue
|
||||
|
||||
|
||||
this.dataset.floId = floId
|
||||
this.shadow.querySelector('.link').href = href
|
||||
this.shadow.querySelector('.flo-id').textContent = floId
|
||||
this.shadow.querySelector('.bond-start-date').textContent = bondStartDate
|
||||
this.shadow.querySelector('.bond-end-date').textContent = lockinEnd
|
||||
this.shadow.querySelector('.amount-invested').textContent = `${currencySymbols[preferredCurrency]}${this.amountInvested[preferredCurrency]}`
|
||||
this.shadow.querySelector('.net-value').textContent = `${currencySymbols[preferredCurrency]}${this.netValue[preferredCurrency]}`
|
||||
this.shadow.querySelector('.guaranteed-interest').textContent = `${guaranteedInterest} P.A for ${guaranteedInterestDuration}`
|
||||
this.shadow.querySelector('.gain-share').textContent = gainShare
|
||||
this.shadow.querySelector('.lock-in-period').textContent = lockinPeriod
|
||||
this.shadow.querySelector('.base-btc-rate').textContent = `$${baseBtcRate}`
|
||||
this.shadow.querySelector('.usd-rate').textContent = `₹${usdRate}`
|
||||
this.toggleCurrency()
|
||||
}
|
||||
|
||||
toggleCurrency = () => {
|
||||
const secCurrency = preferredCurrency === 'usd' ? 'inr' : 'usd'
|
||||
this.shadow.querySelector('.amount-invested').textContent = `${currencySymbols[preferredCurrency]}${this.amountInvested[preferredCurrency]}`
|
||||
this.shadow.querySelector('.net-value').textContent = `${currencySymbols[preferredCurrency]}${this.netValue[preferredCurrency]}`
|
||||
this.shadow.querySelector('.net-value-primary').textContent = `${currencySymbols[preferredCurrency]}${this.netValue[preferredCurrency]}`
|
||||
this.shadow.querySelector('.net-value-sec').textContent = `${currencySymbols[secCurrency]}${this.netValue[secCurrency]}`
|
||||
this.shadow.querySelector('.net-value-sec').previousElementSibling.textContent = `Net bond value(${secCurrency.toUpperCase()})`
|
||||
}
|
||||
|
||||
toggleDetails = () => {
|
||||
@ -8986,6 +8992,7 @@ Bitcoin.Util = {
|
||||
this.availableOptions.forEach(option => {
|
||||
if(option.hasAttribute('selected')){
|
||||
this.optionText.textContent = option.textContent
|
||||
this.setAttribute('value', option.getAttribute('value'))
|
||||
option.classList.add('check-selected')
|
||||
previousOption = option
|
||||
}
|
||||
@ -9837,19 +9844,14 @@ Bitcoin.Util = {
|
||||
inr: '₹'
|
||||
}
|
||||
if(localStorage.getItem('preferred-currency')){
|
||||
if(localStorage.getItem('preferred-currency') === 'inr')
|
||||
{
|
||||
showCurrentPrices()
|
||||
}
|
||||
else{
|
||||
showCurrentPrices()
|
||||
}
|
||||
preferredCurrency = localStorage.getItem('preferred-currency')
|
||||
document.querySelector(`sm-option[value="${localStorage.getItem('preferred-currency')}"]`).setAttribute('selected', '')
|
||||
}
|
||||
else{
|
||||
preferredCurrency = inr
|
||||
localStorage.setItem('preferred-currency', 'inr')
|
||||
getRef('currency_selector').value = 'INR'
|
||||
document.querySelector(`sm-option[value="inr"]`).setAttribute('selected', '')
|
||||
}
|
||||
|
||||
|
||||
@ -9857,21 +9859,8 @@ Bitcoin.Util = {
|
||||
preferredCurrency = e.detail.value
|
||||
localStorage.setItem('preferred-currency', e.detail.value)
|
||||
document.querySelectorAll('bond-transaction').forEach(bond => bond.toggleCurrency())
|
||||
showCurrentPrices()
|
||||
})
|
||||
|
||||
function showCurrentPrices(){
|
||||
if(preferredCurrency === 'inr'){
|
||||
getRef('usd-rate').classList.remove('hide-completely')
|
||||
getRef('btc-usd-rate').classList.add('hide-completely')
|
||||
getRef('btc-inr-rate').classList.remove('hide-completely')
|
||||
}
|
||||
else if(preferredCurrency === 'usd'){
|
||||
getRef('usd-rate').classList.add('hide-completely')
|
||||
getRef('btc-usd-rate').classList.remove('hide-completely')
|
||||
getRef('btc-inr-rate').classList.add('hide-completely')
|
||||
}
|
||||
}
|
||||
|
||||
let isDropdownOpen = false
|
||||
|
||||
@ -10135,7 +10124,6 @@ Bitcoin.Util = {
|
||||
console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
|
||||
getRef("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`;
|
||||
getRef("btc-usd-rate").textContent = `BTC: $${rates.BTC_USD.toFixed(2)}`;
|
||||
getRef("btc-inr-rate").textContent = `BTC: ₹${rates.BTC_INR.toFixed(2)}`;
|
||||
getRef("bond_list").innerHTML = '';
|
||||
compactIDB.readAllData("bonds")
|
||||
.then(result => renderData(result))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user