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

UI update

Browse Source 
Added toggle for adding investors in existing funds and new funds
This commit is contained in:
sairaj mote 2021-05-06 00:19:08 +05:30
parent 016ce576f7
commit 55854daabc
4 changed files with 211 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/main.css
View File

@ -10,7 +10,7 @@
} }
body { body {
--accent-color: #3320b1; --accent-color: #2353FF;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
@ -23,7 +23,7 @@ body {
} }
body[data-theme=dark] { body[data-theme=dark] {
--accent-color: #230eb1; --accent-color: #2353FF;
--green: #13ff5a; --green: #13ff5a;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
@ -34,6 +34,9 @@ body[data-theme=dark] {
body[data-theme=dark] ::-webkit-calendar-picker-indicator { body[data-theme=dark] ::-webkit-calendar-picker-indicator {
filter: invert(1); filter: invert(1);
} }
body[data-theme=dark] sm-input.outlined {
--active-placeholder-color: rgba(var(--text-color), 1);
}
.full-bleed { .full-bleed {
grid-column: 1/4 !important; grid-column: 1/4 !important;
@ -438,11 +441,9 @@ sm-option {
.dropdown__panel { .dropdown__panel {
position: absolute; position: absolute;
display: grid; display: grid;
gap: 2rem;
left: 0; left: 0;
right: 0; right: 0;
top: 100%; top: 100%;
padding: 1rem;
margin: 0 1rem; margin: 0 1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -453,6 +454,9 @@ sm-option {
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 2rem 2rem -0.5rem rgba(0, 0, 0, 0.16); box-shadow: 0 2rem 2rem -0.5rem rgba(0, 0, 0, 0.16);
} }
.dropdown__panel li {
padding: 1rem;
}
#profile_button { #profile_button {
align-items: center; align-items: center;
@ -593,10 +597,11 @@ form {
form input { form input {
display: inline-flex; display: inline-flex;
color: inherit; color: inherit;
font-family: inherit;
padding: 0.6rem; padding: 0.6rem;
border: none; border: none;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6); box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.06);
flex: 1; flex: 1;
} }
form select option { form select option {
@ -604,6 +609,14 @@ form select option {
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.1);
} }
.investor-input {
gap: 0.5rem;
}
.remove-investor {
grid-area: close;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.h1 { .h1 {
font-size: 2rem; font-size: 2rem;
@ -641,6 +654,11 @@ form select option {
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: ". ." "search search"; grid-template-areas: ". ." "search search";
} }
.investor-input {
grid-template-columns: 1fr auto;
grid-template-areas: ". close" ". close";
}
} }
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
#main_header { #main_header {
@ -671,11 +689,20 @@ form select option {
.fund-block__details { .fund-block__details {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.investor-input {
grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: ". . close";
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.page-layout { .page-layout {
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.multi-form {
grid-template-columns: 1fr 1fr;
}
} }
@media (any-hover: hover) { @media (any-hover: hover) {
::-webkit-scrollbar { ::-webkit-scrollbar {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

35
css/main.scss
View File

@ -8,7 +8,7 @@
font-size: clamp(1rem, 1.2vmax, 3rem); font-size: clamp(1rem, 1.2vmax, 3rem);
} }
body { body {
--accent-color: #3320b1; --accent-color: #2353FF;
--light-shade: rgba(var(--text-color), 0.06); --light-shade: rgba(var(--text-color), 0.06);
--text-color: 17, 17, 17; --text-color: 17, 17, 17;
--text-color-light: 100, 100, 100; --text-color-light: 100, 100, 100;
@ -20,7 +20,7 @@ body {
background: var(--background-color); background: var(--background-color);
} }
body[data-theme='dark']{ body[data-theme='dark']{
--accent-color: #230eb1; --accent-color: #2353FF;
--green: #13ff5a; --green: #13ff5a;
--text-color: 240, 240, 240; --text-color: 240, 240, 240;
--text-color-light: 170, 170, 170; --text-color-light: 170, 170, 170;
@ -30,6 +30,9 @@ body[data-theme='dark']{
::-webkit-calendar-picker-indicator { ::-webkit-calendar-picker-indicator {
filter: invert(1); filter: invert(1);
} }
sm-input.outlined{
--active-placeholder-color: rgba(var(--text-color), 1);
}
} }
.full-bleed{ .full-bleed{
@ -366,11 +369,9 @@ sm-option{
.dropdown__panel{ .dropdown__panel{
position: absolute; position: absolute;
display: grid; display: grid;
gap: 2rem;
left: 0; left: 0;
right: 0; right: 0;
top: 100%; top: 100%;
padding: 1rem;
margin: 0 1rem; margin: 0 1rem;
margin-top: 0.5rem; margin-top: 0.5rem;
border-radius: 0.3rem; border-radius: 0.3rem;
@ -380,6 +381,9 @@ sm-option{
width: min(24rem, calc(100vw - 2rem)); width: min(24rem, calc(100vw - 2rem));
background-color: rgba(var(--foreground-color), 1); background-color: rgba(var(--foreground-color), 1);
box-shadow: 0 2rem 2rem -0.5rem rgba($color: #000000, $alpha: 0.16); box-shadow: 0 2rem 2rem -0.5rem rgba($color: #000000, $alpha: 0.16);
li{
padding: 1rem;
}
} }
#profile_button{ #profile_button{
@ -522,10 +526,11 @@ form{
input{ input{
display: inline-flex; display: inline-flex;
color: inherit; color: inherit;
font-family: inherit;
padding: 0.6rem; padding: 0.6rem;
border: none; border: none;
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.6); box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
background-color: rgba(var(--text-color), 0.1); background-color: rgba(var(--text-color), 0.06);
flex: 1; flex: 1;
} }
select option{ select option{
@ -534,6 +539,13 @@ form{
} }
} }
.investor-input{
gap: 0.5rem;
}
.remove-investor{
grid-area: close;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
.h1{ .h1{
@ -565,6 +577,10 @@ form{
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-areas: '. .' 'search search'; grid-template-areas: '. .' 'search search';
} }
.investor-input{
grid-template-columns: 1fr auto;
grid-template-areas: '. close' '. close';
}
} }
@ -592,11 +608,18 @@ form{
.fund-block__details{ .fund-block__details{
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.investor-input{
grid-template-columns: 1.5fr 1fr auto;
grid-template-areas: '. . close';
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
.page-layout{ .page-layout{
grid-template-columns: 1fr 90vw 1fr; grid-template-columns: 1fr 90vw 1fr;
} }
.multi-form{
grid-template-columns: 1fr 1fr;
}
} }
@media (any-hover: hover){ @media (any-hover: hover){
::-webkit-scrollbar{ ::-webkit-scrollbar{

217
index.html
View File

@ -42,8 +42,7 @@
</div> </div>
</div> </div>
<div id="current_price" class="grid gap-1 flow-column align-center"> <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-usd-rate" class="weight-700"></span>
<span id="btc-inr-rate" class="weight-700"></span>
<span id="usd-rate" class="weight-700"></span> <span id="usd-rate" class="weight-700"></span>
</div> </div>
<div class="dropdown"> <div class="dropdown">
@ -70,7 +69,7 @@
</ul> </ul>
</div> </div>
</header> </header>
<main id="home_page" class="page page-layout"> <main id="home_page" class="page page-layout hide-completely">
<section id="homepage__hero-section" class="full-bleed page-layout"> <section id="homepage__hero-section" class="full-bleed page-layout">
<h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund<br>on FLO Blockchain</h2> <h2 class="h2 weight-700 margin-bottom-1r">Bob's Fund<br>on FLO Blockchain</h2>
<p>Bob's fund is 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they must hold for 20 years.</p> <p>Bob's fund is 20 year long term Bitcoin price linked product. Investors are entitled to 100% of Bitcoin price gains, but they must hold for 20 years.</p>
@ -88,7 +87,7 @@
<h4>No bonds found</h4> <h4>No bonds found</h4>
</div> </div>
</main> </main>
<article id="add_bond_page" class="page page-layout hide-completely"> <article id="add_bond_page" class="page page-layout">
<header class="flex margin-top-1-5 align-center margin-bottom-1-5r"> <header class="flex margin-top-1-5 align-center margin-bottom-1-5r">
<button onclick="showPage('home_page')"> <button onclick="showPage('home_page')">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z"/></svg>
@ -98,26 +97,49 @@
<sm-tab-header target="admin_options" variant="tab"> <sm-tab-header target="admin_options" variant="tab">
<sm-tab>Create Fund</sm-tab> <sm-tab>Create Fund</sm-tab>
<sm-tab>Create Term</sm-tab> <sm-tab>Create Term</sm-tab>
<sm-tab>Add investors</sm-tab>
</sm-tab-header> </sm-tab-header>
<sm-tab-panels id="admin_options"> <sm-tab-panels id="admin_options">
<form id="create_fund_fomr" class="grid gap-1-5"> <form id="create_fund_form" class="grid gap-1-5" onsubmit="return false">
<label class="grid gap-0-5"> <sm-switch id="fund_creation_toggle">
Fund start date <div class="flex" slot="left">
<input type="date" name="start_date"> Add investors to existing fund
</label> </div>
<label class="grid gap-0-5"> </sm-switch>
Base BTC value ($) <section id="fund_details_form" class="grid gap-1-5 margin-bottom-0-5r">
<input type="number" step="0.00000001" name="base" pattern="^[\d,]+.?\d$"> <label class="grid gap-0-5">
</label> Fund start date
<label class="grid gap-0-5"> <input type="date" name="start_date">
Base USD rate (₹) </label>
<input type="number" name="usd_rate" step="0.01"> <label class="grid gap-0-5">
</label> Base BTC value ($)
<div class="grid flow-column align-center gap-1 justify-start"> <input type="number" step="0.00000001" name="base" pattern="^[\d,]+.?\d$">
<button type="submit" class="button--primary">Create Fund</button> </label>
<button type="reset">Clear</button> <label class="grid gap-0-5">
Base USD rate (₹)
<input type="number" name="usd_rate" step="0.01">
</label>
</section>
<h4>Add Investors</h4>
<div id="fund_selector_container" class="grid margin-bottom-0-5r hide-completely">
<span class="margin-bottom-0-5r">Select Fund</span>
<sm-select id="fund_selector"></sm-select>
</div> </div>
<ul id="investors_input_list" class="grid gap-1">
<li class="investor-input grid">
<sm-input placeholder="FLO ID" class="outlined" animate></sm-input>
<sm-input placeholder="Amount(₹)" class="outlined" animate></sm-input>
<button class="remove-investor">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
</li>
</ul>
<button class="margin-bottom-1r justify-self-start" style="margin-top: -1rem;" onclick="renderInvestor()">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2z"/></svg>
Add new
</button>
<button id="add_investors_button" type="submit" class="button--primary justify-self-start hide-completely">Add Investors</button>
<button id="create_fund_button" type="submit" class="button--primary justify-self-start">Create Fund</button>
</form> </form>
<form id="create_term_form" class="grid gap-1-5"> <form id="create_term_form" class="grid gap-1-5">
<label class="grid gap-0-5"> <label class="grid gap-0-5">
@ -125,10 +147,10 @@
<input type="text" name="floid" pattern="[0-9a-zA-Z]{34}"> <input type="text" name="floid" pattern="[0-9a-zA-Z]{34}">
</label> </label>
<label class="grid gap-0-5"> <label class="grid gap-0-5">
Tapout window Maximum Duration
<div class="flex"> <div class="flex">
<input type="number" name="gi_pv"> <input type="number" name="gi_pv">
<sm-select id="gi_pt" align-select="right"> <sm-select id="" align-select="right">
<sm-option value="year(s)" selected>year(s)</sm-option> <sm-option value="year(s)" selected>year(s)</sm-option>
<sm-option value="month(s)">month(s)</sm-option> <sm-option value="month(s)">month(s)</sm-option>
<sm-option value="week(s)">week(s)</sm-option> <sm-option value="week(s)">week(s)</sm-option>
@ -137,10 +159,22 @@
</div> </div>
</label> </label>
<label class="grid gap-0-5"> <label class="grid gap-0-5">
Maximum Duration Tapout window
<div class="flex"> <div class="flex">
<input type="number" name="gi_pv"> <input type="number" name="gi_pv">
<sm-select id="gi_pt" align-select="right"> <sm-select id="" align-select="right">
<sm-option value="year(s)" selected>year(s)</sm-option>
<sm-option value="month(s)">month(s)</sm-option>
<sm-option value="week(s)">week(s)</sm-option>
<sm-option value="day(s)">day(s)</sm-option>
</sm-select>
</div>
</label>
<label class="grid gap-0-5">
Tapout interval(Use comma serated values. e.g. 10, 15...)
<div class="flex">
<input type="text" name="tapout-interval">
<sm-select id="" align-select="right">
<sm-option value="year(s)" selected>year(s)</sm-option> <sm-option value="year(s)" selected>year(s)</sm-option>
<sm-option value="month(s)">month(s)</sm-option> <sm-option value="month(s)">month(s)</sm-option>
<sm-option value="week(s)">week(s)</sm-option> <sm-option value="week(s)">week(s)</sm-option>
@ -157,20 +191,6 @@
<button type="reset">Clear</button> <button type="reset">Clear</button>
</div> </div>
</form> </form>
<form id="add-bond-form" class="grid gap-1-5">
<label class="grid gap-0-5">
FLO ID
<input type="text" name="floid" pattern="[0-9a-zA-Z]{34}">
</label>
<label class="grid gap-0-5">
Amount (₹)
<input type="text" name="amount" pattern="\d.+">
</label>
<div class="grid flow-column align-center gap-1 justify-start">
<button type="submit" class="button--primary">Add Bond</button>
<button type="reset">Clear</button>
</div>
</form>
</sm-tab-panels> </sm-tab-panels>
</article> </article>
@ -8229,7 +8249,7 @@ Bitcoin.Util = {
</div> </div>
<div class="grid flow-column gap-1-5 space-between"> <div class="grid flow-column gap-1-5 space-between">
<div class="transaction-column"> <div class="transaction-column">
<span class="label">Amount intvested</span> <span class="label">Intvested</span>
<span class="value amount-invested"></span> <span class="value amount-invested"></span>
</div> </div>
<div class="transaction-column"> <div class="transaction-column">
@ -8323,6 +8343,7 @@ Bitcoin.Util = {
--border-radius: 0.3rem; --border-radius: 0.3rem;
--padding: 0.7rem 1rem; --padding: 0.7rem 1rem;
--background: rgba(var(--text-color), 0.06); --background: rgba(var(--text-color), 0.06);
--active-placeholder-color: var(--accent-color);
} }
.hide{ .hide{
opacity: 0 !important; opacity: 0 !important;
@ -8451,14 +8472,14 @@ Bitcoin.Util = {
padding: 0 0.5rem; padding: 0 0.5rem;
} }
:host(.outlined) .animate-label .label { :host(.outlined) .animate-label .label {
-webkit-transform: translate(0.1rem, -1.5rem) scale(0.8); -webkit-transform: translate(0.1rem, -1.3rem) scale(0.8);
-ms-transform: translate(0.1rem, -1.5rem) scale(0.8); -ms-transform: translate(0.1rem, -1.3rem) scale(0.8);
transform: translate(0.1rem, -1.5rem) scale(0.8); transform: translate(0.1rem, -1.3rem) scale(0.8);
opacity: 1; opacity: 1;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
} }
.animate-label:focus-within:not(.readonly) .label{ .animate-label:focus-within:not(.readonly) .label{
color: var(--accent-color) color: var(--active-placeholder-color);
} }
.feedback-text{ .feedback-text{
font-size: 0.9rem; font-size: 0.9rem;
@ -8925,6 +8946,7 @@ Bitcoin.Util = {
this.availableOptions.forEach(option => { this.availableOptions.forEach(option => {
if(option.hasAttribute('selected')){ if(option.hasAttribute('selected')){
this.optionText.textContent = option.textContent this.optionText.textContent = option.textContent
this.setAttribute('value', option.getAttribute('value'))
option.classList.add('check-selected') option.classList.add('check-selected')
previousOption = option previousOption = option
} }
@ -9231,7 +9253,11 @@ Bitcoin.Util = {
dispatch = () => { dispatch = () => {
this.dispatchEvent(new CustomEvent('change', { this.dispatchEvent(new CustomEvent('change', {
bubbles: true, bubbles: true,
composed: true composed: true,
detail: {
value: this.isChecked,
checked: this.isChecked
}
})) }))
} }
@ -10098,6 +10124,18 @@ Bitcoin.Util = {
} }
fundBlock.querySelector('.tapout-list').append(tapoutsFrag) fundBlock.querySelector('.tapout-list').append(tapoutsFrag)
return fundBlock; return fundBlock;
},
investorInput(){
const investorInput = document.createElement('li')
investorInput.classList.add('investor-input', 'grid')
investorInput.innerHTML = `
<sm-input placeholder="FLO ID" class="outlined" animate></sm-input>
<sm-input placeholder="Amount(₹)" class="outlined" animate></sm-input>
<button class="remove-investor" title="Remove this investor">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</button>
`
return investorInput
} }
} }
@ -10244,47 +10282,27 @@ Bitcoin.Util = {
} }
let preferredCurrency let preferredCurrency
const currencySymbols = { const currencySymbols = {
usd: '$', usd: '$',
inr: '₹' inr: '₹'
} }
if(localStorage.getItem('preferred-currency')){ if(localStorage.getItem('preferred-currency')){
if(localStorage.getItem('preferred-currency') === 'inr')
{
showCurrentPrices()
}
else{
showCurrentPrices()
}
preferredCurrency = localStorage.getItem('preferred-currency') preferredCurrency = localStorage.getItem('preferred-currency')
document.querySelector(`sm-option[value="${localStorage.getItem('preferred-currency')}"]`).setAttribute('selected', '') document.querySelector(`sm-option[value="${localStorage.getItem('preferred-currency')}"]`).setAttribute('selected', '')
} }
else{ else{
preferredCurrency = 'inr'
localStorage.setItem('preferred-currency', 'inr') localStorage.setItem('preferred-currency', 'inr')
getRef('currency_selector').value = 'INR' getRef('currency_selector').value = 'INR'
document.querySelector(`sm-option[value="inr"]`).setAttribute('selected', '')
} }
getRef('currency_selector').addEventListener('change', e => { getRef('currency_selector').addEventListener('change', e => {
preferredCurrency = e.detail.value preferredCurrency = e.detail.value
localStorage.setItem('preferred-currency', e.detail.value) localStorage.setItem('preferred-currency', e.detail.value)
document.querySelectorAll('fund-investor').forEach(bond => bond.toggleCurrency()) document.querySelectorAll('fund-investor').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 let isDropdownOpen = false
@ -10341,6 +10359,9 @@ Bitcoin.Util = {
function showPage(target){ function showPage(target){
document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely')) document.querySelectorAll('.page').forEach(page => page.classList.add('hide-completely'))
getRef(target).classList.remove('hide-completely') getRef(target).classList.remove('hide-completely')
if(target === 'home_page'){
clearAddedInvestors()
}
} }
let allInvestors let allInvestors
@ -10367,6 +10388,49 @@ Bitcoin.Util = {
}, 100) }, 100)
}) })
getRef('investors_input_list').addEventListener('click', e => {
if(e.target.closest('.remove-investor')){
e.target.closest('.investor-input').remove()
}
})
function renderInvestor(){
getRef('investors_input_list').append(render.investorInput())
getRef('investors_input_list').lastElementChild.scrollIntoView()
getRef('investors_input_list').lastElementChild.children[0].focusIn()
}
function clearAddedInvestors(){
getRef('investors_input_list').innerHTML = ``
getRef('investors_input_list').append(render.investorInput())
}
function getAddedInvestors(){
const allInvestorsInput = getRef('investors_input_list').querySelectorAll('.investor-input')
const addedInvestors = {}
allInvestorsInput.forEach(investor => {
const floId = investor.children[0].value
const amount = investor.children[1].value
addedInvestors[floId] = amount
})
return addedInvestors
}
getRef('fund_creation_toggle').addEventListener('change', e => {
if(e.detail.checked){
getRef('fund_details_form').classList.add('hide-completely')
getRef('create_fund_button').classList.add('hide-completely')
getRef('add_investors_button').classList.remove('hide-completely')
getRef('fund_selector_container').classList.remove('hide-completely')
}
else{
getRef('fund_details_form').classList.remove('hide-completely')
getRef('create_fund_button').classList.remove('hide-completely')
getRef('add_investors_button').classList.add('hide-completely')
getRef('fund_selector_container').classList.add('hide-completely')
}
})
</script> </script>
<script> <script>
function onLoadStartUp() { function onLoadStartUp() {
@ -10386,7 +10450,6 @@ Bitcoin.Util = {
console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`); console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
getRef("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`; getRef("usd-rate").textContent = `USD: ₹${rates.USD_INR.toFixed(2)}`;
getRef("btc-usd-rate").textContent = `BTC: $${rates.BTC_USD.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('fund_list').innerHTML = ''; getRef('fund_list').innerHTML = '';
compactIDB.readAllData("terms").then(terms => { compactIDB.readAllData("terms").then(terms => {
for (let floID in terms) { for (let floID in terms) {
@ -10565,6 +10628,8 @@ Bitcoin.Util = {
} }
console.info(term); console.info(term);
const fundsFrag = document.createDocumentFragment()
for (let k in funds) { for (let k in funds) {
let f = parseFunds(funds[k]); let f = parseFunds(funds[k]);
console.info(f); console.info(f);
@ -10585,10 +10650,22 @@ Bitcoin.Util = {
tapouts tapouts
} }
// Creating fund selection options
const smOption = document.createElement('sm-option')
smOption.innerHTML = `
<div class="grid gap-0-5">
<span>Start date: ${fundObj.startDate}</span>
<span>Base BTC: $${fundObj.baseBtc} | Base USD: ₹${fundObj.baseUsd}</span>
</div>
`
smOption.setAttribute('value', funds[k][0].txid)
fundsFrag.append(smOption)
const fundBlock = render.fundBlock(fundObj).firstElementChild const fundBlock = render.fundBlock(fundObj).firstElementChild
const fundList = fundBlock.querySelector('.investors-list') const fundList = fundBlock.querySelector('.investors-list')
const investorsFrag = document.createDocumentFragment() const investorsFrag = document.createDocumentFragment()
f.amounts.forEach(a => { f.amounts.forEach(a => {
let investor = a[0], let investor = a[0],
amount = a[1], amount = a[1],
@ -10619,6 +10696,8 @@ Bitcoin.Util = {
getRef('fund_list').append(fundBlock); getRef('fund_list').append(fundBlock);
} }
allInvestors = document.querySelectorAll('fund-investor') allInvestors = document.querySelectorAll('fund-investor')
getRef('fund_selector').innerHTML = ''
getRef('fund_selector').append(fundsFrag)
} }
function parseFunds(data) { function parseFunds(data) {