UI update
--Added total net fun value -- converted fund block to a component
This commit is contained in:
parent
bb8155940d
commit
e873f0147c
65
css/main.css
65
css/main.css
@ -400,7 +400,8 @@ ul {
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#loading_page {
|
||||
#loading_page,
|
||||
#error_page {
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
@ -408,7 +409,13 @@ ul {
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
#loading_page__footer {
|
||||
.sad-face {
|
||||
height: 6rem;
|
||||
margin: 1rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
|
||||
.page__footer {
|
||||
position: absolute;
|
||||
padding: 3rem;
|
||||
bottom: 0;
|
||||
@ -631,52 +638,6 @@ sm-option {
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.fund-block {
|
||||
border-radius: 0.3rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.investor-group {
|
||||
display: grid;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1.8rem;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
|
||||
}
|
||||
.investor-group header {
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.investor-group header > * {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.investor-group header h4 {
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.investors-group-list {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.investor-group__list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.fund-block__details {
|
||||
gap: 2rem;
|
||||
}
|
||||
.fund-block__details > .grid:nth-of-type(1), .fund-block__details > .grid:nth-of-type(2) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fund-block__details > .grid:nth-of-type(3), .fund-block__details > .flex {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
}
|
||||
@ -830,14 +791,6 @@ form select option {
|
||||
grid-template-areas: ". search .";
|
||||
}
|
||||
|
||||
.fund-block__details {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.investor-group {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.investor-input {
|
||||
grid-template-columns: 1.5fr 1fr auto;
|
||||
grid-template-areas: ". . close";
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -332,14 +332,20 @@ ul{
|
||||
fill: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#loading_page{
|
||||
#loading_page,
|
||||
#error_page{
|
||||
position: relative;
|
||||
display: grid;
|
||||
height: 100%;
|
||||
place-content: center;
|
||||
justify-items: center;
|
||||
}
|
||||
#loading_page__footer{
|
||||
.sad-face{
|
||||
height: 6rem;
|
||||
margin: 1rem;
|
||||
fill: rgba(var(--text-color), 1);
|
||||
}
|
||||
.page__footer{
|
||||
position: absolute;
|
||||
padding: 3rem;
|
||||
bottom: 0;
|
||||
@ -554,51 +560,7 @@ sm-option{
|
||||
justify-self: center;
|
||||
}
|
||||
}
|
||||
.fund-block{
|
||||
border-radius: 0.3rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
|
||||
}
|
||||
|
||||
.investor-group{
|
||||
display: grid;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1.8rem;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
|
||||
header{
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
& > * {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
h4{
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.investors-group-list{
|
||||
display: grid;
|
||||
}
|
||||
.investor-group__list{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.fund-block__details{
|
||||
gap: 2rem;
|
||||
& > .grid:nth-of-type(1),
|
||||
& > .grid:nth-of-type(2){
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
& > .grid:nth-of-type(3),
|
||||
& > .flex{
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
.flex-grid{
|
||||
grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
|
||||
}
|
||||
@ -741,12 +703,6 @@ form{
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: '. search .';
|
||||
}
|
||||
.fund-block__details{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.investor-group{
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.investor-input{
|
||||
grid-template-columns: 1.5fr 1fr auto;
|
||||
grid-template-areas: '. . close';
|
||||
|
||||
274
index.html
274
index.html
@ -37,7 +37,16 @@
|
||||
<h2 class="h2">Bob's Fund</h2>
|
||||
<svg id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><polygon points="17.76 23.78 17.76 40.22 32 48.44 46.24 40.22 46.24 23.78 32 15.56 17.76 23.78"/><polyline points="17.76 23.78 32 32 46.24 23.78"/><line x1="32" y1="48.44" x2="32" y2="32"/><polyline points="32 2 6.02 17 6.02 47"/><polyline points="57.98 47 57.98 17 32 2"/><polyline points="6.02 47 32 62 57.98 47"/></svg>
|
||||
<h4>Loading data from blockchain</h4>
|
||||
<footer id="loading_page__footer" class="flex align-center">
|
||||
<footer class="page__footer flex align-center">
|
||||
<svg id="rm_logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
||||
<h4 class="h4 color-0-8 weight-500">RanchiMall</h4>
|
||||
</footer>
|
||||
</article>
|
||||
<article id="error_page" class="page hide-completely">
|
||||
<h2 class="h2">Bob's Fund</h2>
|
||||
<svg class="sad-face" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><circle cx="187.52" cy="249.17" r="13.42"/><circle cx="312.48" cy="249.17" r="13.42"/><path d="M288,349.35a6.07,6.07,0,0,1-3.81-1.34c-.09-.07-12.31-9.4-34.14-9.4S216,347.94,215.83,348a6.1,6.1,0,0,1-7.59-9.55c.61-.5,15.4-12.08,41.76-12.08s41.15,11.58,41.76,12.08A6.1,6.1,0,0,1,288,349.35Z"/><path d="M344.21,237.41a52,52,0,0,1-23.45-6c-15.91-8.09-21.28-19.61-21.5-20.1a4.07,4.07,0,0,1,7.41-3.36c0,.08,4.56,9.49,17.77,16.21S347.93,229,348,229a4.07,4.07,0,0,1,1.63,8A29.26,29.26,0,0,1,344.21,237.41Z"/><path d="M155.79,237.41a29.26,29.26,0,0,1-5.45-.43,4.07,4.07,0,0,1,1.63-8c.2,0,10.43,1.87,23.59-4.81s17.73-16.13,17.78-16.23a4.07,4.07,0,0,1,7.4,3.38c-.22.49-5.59,12-21.5,20.1A52,52,0,0,1,155.79,237.41Z"/><path d="M450.16,220.16A200.16,200.16,0,0,0,108.46,78.63,200.69,200.69,0,0,0,57.61,275.68V407.4a10.17,10.17,0,1,0,20.33,0V322.6a201.91,201.91,0,0,0,99.41,84.19v52.27l-11.45.62a10.17,10.17,0,0,0,.54,20.32H167l30.69-1.66V413.45a202.3,202.3,0,0,0,104.62,0v64.88L333,480h.56a10.17,10.17,0,0,0,.54-20.32l-11.45-.62V406.79a201.91,201.91,0,0,0,99.41-84.19v84.8a10.17,10.17,0,1,0,20.33,0V275.68A200.81,200.81,0,0,0,450.16,220.16ZM250,400c-99.16,0-179.83-80.67-179.83-179.83S150.84,40.34,250,40.34,429.83,121,429.83,220.16,349.16,400,250,400Z"/></svg>
|
||||
<h4>Failed to get data from blockchain</h4>
|
||||
<footer class="page__footer flex align-center">
|
||||
<svg id="rm_logo" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.46,21.32C20,19.78,18.6,18.59,15.3,17a12.67,12.67,0,0,1-2.64-1.56,4.27,4.27,0,0,1-.79-1,2.6,2.6,0,0,1,0-1.41c.24-.68.49-1,2.43-2.85a7.18,7.18,0,0,0,2.09-2.92,4.25,4.25,0,0,0,0-1.77,6.52,6.52,0,0,0-2.85-3.11c-.56-.36-.81-.4-.81-.15a2.33,2.33,0,0,1-.18.45L12.4,3l-.53-.36c-.28-.21-.64-.41-.77-.49s-.46-.11-.46,0a6.21,6.21,0,0,1-.37.83s-.08,0-.17-.08c-1.15-.83-1.64-1-1.64-.73A7.33,7.33,0,0,1,7.7,3.65C6.48,5.68,5.24,6.7,4,6.7c-.56,0-.54,0-.37.64s.2.58.68.43a3.37,3.37,0,0,0,1.09-.54.86.86,0,0,1,.3-.17,1.34,1.34,0,0,1,.13.39.79.79,0,0,0,.17.4A3.5,3.5,0,0,0,7.37,7.3L7.8,7l.09.34c.12.45.19.51.62.39a4.25,4.25,0,0,0,2.17-1.54l.38-.45,0,.39A5.92,5.92,0,0,1,8.89,9.54L7.67,10.71c-2,1.93-1.89,3.51.37,5a27.41,27.41,0,0,0,2.89,1.51c.17.07.62.32,1,.54C14,19,15,20.23,15,21.48a2,2,0,0,0,0,.49h0c0,.05,0,.05.56-.1a1.89,1.89,0,0,0,.53-.21,2.41,2.41,0,0,0-.34-1.15,7.05,7.05,0,0,0-1.68-1.77,21.91,21.91,0,0,0-3.2-1.83A9.53,9.53,0,0,1,8.16,15.2a2.18,2.18,0,0,1-.74-1.55C7.42,12.79,7.86,12,9,11c1.77-1.64,2.45-2.45,2.92-3.55a2.28,2.28,0,0,0,.26-1.26A2,2,0,0,0,12,5.06l-.2-.45L12,4.3l.28-.49.09-.18L12.6,4a3.69,3.69,0,0,1,.61,1.76A3.47,3.47,0,0,1,12.94,7l-.09.25s-.21.37-.41.69A17.78,17.78,0,0,1,9.91,10.6c-1.07,1-1.43,1.62-1.47,2.47a2.05,2.05,0,0,0,.7,1.73,10.47,10.47,0,0,0,3.28,2.08c2.28,1.13,3.26,1.81,4,2.73a2.94,2.94,0,0,1,.74,1.75,1.26,1.26,0,0,0,.09.57.48.48,0,0,0,.26,0l.51-.13.29-.08,0-.28c-.13-1-1-2-2.47-3a25.52,25.52,0,0,0-3.26-1.77,8.59,8.59,0,0,1-2.23-1.43,2.09,2.09,0,0,1-.5-2.62c.26-.53.5-.83,2.35-2.6,1.51-1.45,2.15-2.58,2.15-3.79A3.67,3.67,0,0,0,13,3.48a3,3,0,0,1-.4-.42A1.85,1.85,0,0,1,13,2.33a6.74,6.74,0,0,1,1.83,1.73,2.62,2.62,0,0,1,.47,1.68,3,3,0,0,1-.55,1.84c-.45.78-.79,1.14-2.67,2.93a5.56,5.56,0,0,0-1.3,1.64,1.77,1.77,0,0,0-.21,1,1.76,1.76,0,0,0,.19.92,6.28,6.28,0,0,0,2.9,2.34,21.6,21.6,0,0,1,3.66,2c1.35,1,2,2,2,3a1.06,1.06,0,0,0,.05.47,2.83,2.83,0,0,0,1-.24C20.56,21.68,20.56,21.66,20.46,21.32ZM7.29,6.4h0a2.23,2.23,0,0,1-.9.28L6,6.72l.43-.53a15.22,15.22,0,0,0,1.89-3,3.52,3.52,0,0,1,.38-.67c.07-.08.49.2,1,.64l.39.35L9.66,4A6.7,6.7,0,0,1,7.29,6.4Zm3.58-1.11A5.8,5.8,0,0,1,9.25,6.51h0a3.3,3.3,0,0,1-.74.17l-.35,0,.39-.49a15.64,15.64,0,0,0,1.32-2,4.63,4.63,0,0,1,.28-.49c.06-.08.33.26.57.77l.28.57Zm1-1.4a1.63,1.63,0,0,1-.28.4A6.63,6.63,0,0,1,11,3.72l-.53-.56.12-.29c.2-.49.24-.51.64-.19a5.57,5.57,0,0,1,.85.78A2.78,2.78,0,0,1,11.87,3.89Z"/></svg>
|
||||
<h4 class="h4 color-0-8 weight-500">RanchiMall</h4>
|
||||
</footer>
|
||||
@ -10104,8 +10113,148 @@ Bitcoin.Util = {
|
||||
|
||||
const fundBlockTemplate = document.createElement('template')
|
||||
fundBlockTemplate.innerHTML = `
|
||||
<style>
|
||||
*{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
ul{
|
||||
list-style: none;
|
||||
}
|
||||
a:any-link,
|
||||
button{
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.4rem 0.6rem;
|
||||
align-self: flex-start;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
border: 1px solid rgba(var(--text-color), 0.8);
|
||||
}
|
||||
a:any-link:focus-visible,
|
||||
button:focus-visible{
|
||||
outline: rgba(var(--text-color), 1) 0.1rem solid;
|
||||
}
|
||||
.flex{
|
||||
display: flex;
|
||||
}
|
||||
.grid{
|
||||
display: grid;
|
||||
}
|
||||
.gap-1{
|
||||
gap: 1rem;
|
||||
}
|
||||
.gap-1-5{
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.flow-column{
|
||||
grid-auto-flow: column;
|
||||
}
|
||||
.justify-start{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.justify-end{
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-right{
|
||||
margin-left: auto;
|
||||
}
|
||||
.margin-bottom-0-5r{
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.margin-bottom-1-5r{
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.margin-bottom-3r{
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.fund-block{
|
||||
border-radius: 0.3rem;
|
||||
padding: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
box-shadow: 0 1rem 2rem -1rem rgba($color: #000000, $alpha: 0.16);
|
||||
}
|
||||
.fund-block__details {
|
||||
gap: 2rem;
|
||||
}
|
||||
.fund-block__details > .grid:nth-of-type(1), .fund-block__details > .grid:nth-of-type(2) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.fund-block__details > .grid:nth-of-type(3), .fund-block__details > .grid:nth-of-type(4) {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.investor-group{
|
||||
display: grid;
|
||||
padding: 0.5rem;
|
||||
margin-top: 1.8rem;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: 0 0 0 1px rgba(var(--text-color), 0.3);
|
||||
}
|
||||
.investor-group header{
|
||||
margin-top: -1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
.investor-group > * {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.investor-group h4{
|
||||
padding: 0 0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
}
|
||||
|
||||
.investor-group__list{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.transaction-column{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.label{
|
||||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.value{
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
@media only screen and (min-width: 640px) {
|
||||
.fund-block__details{
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
.investor-group{
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
.justify-self-end{
|
||||
justify-self: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<li class="fund-block">
|
||||
<div class="fund-block__details grid margin-bottom-1-5r">
|
||||
<div class="fund-block__details grid margin-bottom-3r">
|
||||
<div class="grid flow-column gap-1">
|
||||
<div class="grid">
|
||||
<span class="label">Start date</span>
|
||||
@ -10130,23 +10279,36 @@ Bitcoin.Util = {
|
||||
<span class="value margin-bottom-0-5r">Tapouts</span>
|
||||
<ul class="tapout-list flex gap-1-5"></ul>
|
||||
</div>
|
||||
<div class="flex align-center space-between">
|
||||
<div class="grid flow-column gap-1">
|
||||
<div class="grid">
|
||||
<span class="label">Total investment</span>
|
||||
<span class="value total-investment"></span>
|
||||
</div>
|
||||
<a class="term-link" target="_blank">See terms</a>
|
||||
<div class="grid">
|
||||
<span class="label">Total net value</span>
|
||||
<span class="value net-value" style="color: var(--green)"></span>
|
||||
</div>
|
||||
<a class="term-link justify-right" target="_blank">See terms</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid margin-top-1-5">
|
||||
<div class="grid">
|
||||
<h4>Investors</h4>
|
||||
<ul class="investors-group-list"></ul>
|
||||
<ul class="investors-group-list grid"></ul>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
|
||||
const render = {
|
||||
fundBlock(obj){
|
||||
customElements.define('fund-block', class extends HTMLElement {
|
||||
constructor() {
|
||||
super()
|
||||
this.shadow = this.attachShadow({
|
||||
mode: 'open'
|
||||
})
|
||||
this.shadow.append(fundBlockTemplate.content.cloneNode(true))
|
||||
this.totalInvestement = {}
|
||||
this.totalNet = {}
|
||||
}
|
||||
set data(obj){
|
||||
const {
|
||||
termTxHref,
|
||||
fundTxHref,
|
||||
@ -10155,18 +10317,25 @@ Bitcoin.Util = {
|
||||
baseUsd,
|
||||
baseBtc,
|
||||
tapouts,
|
||||
totalInvestment
|
||||
totalInvestment,
|
||||
totalNet,
|
||||
investorsFrag
|
||||
} = obj
|
||||
const fundBlock = fundBlockTemplate.content.cloneNode(true)
|
||||
fundBlock.querySelector('.term-link').href = termTxHref
|
||||
fundBlock.querySelector('.start-date').textContent = startDate
|
||||
fundBlock.querySelector('.end-date').textContent = endDate
|
||||
fundBlock.querySelector('.base-usd').textContent = `₹${baseUsd}`
|
||||
fundBlock.querySelector('.base-btc').textContent = `$${baseBtc}`
|
||||
fundBlock.querySelector('.total-investment').textContent = `₹${totalInvestment}`
|
||||
|
||||
this.totalInvestment = totalInvestment
|
||||
this.totalNet = totalNet
|
||||
|
||||
this.shadow.querySelector('.term-link').href = termTxHref
|
||||
this.shadow.querySelector('.start-date').textContent = startDate
|
||||
this.shadow.querySelector('.end-date').textContent = endDate
|
||||
this.shadow.querySelector('.base-usd').textContent = `₹${baseUsd}`
|
||||
this.shadow.querySelector('.base-btc').textContent = `$${baseBtc}`
|
||||
this.shadow.querySelector('.investors-group-list').append(investorsFrag)
|
||||
|
||||
this.toggleCurrency()
|
||||
|
||||
const tapoutsFrag = document.createDocumentFragment()
|
||||
for(tapout in tapouts){
|
||||
for(let tapout in tapouts){
|
||||
const tapoutPoint = document.createElement('li')
|
||||
tapoutPoint.classList.add('grid')
|
||||
tapoutPoint.innerHTML = `
|
||||
@ -10175,9 +10344,17 @@ Bitcoin.Util = {
|
||||
`
|
||||
tapoutsFrag.append(tapoutPoint)
|
||||
}
|
||||
fundBlock.querySelector('.tapout-list').append(tapoutsFrag)
|
||||
return fundBlock;
|
||||
},
|
||||
this.shadow.querySelector('.tapout-list').append(tapoutsFrag)
|
||||
}
|
||||
|
||||
toggleCurrency = () => {
|
||||
this.shadow.querySelector('.total-investment').textContent = `${currencySymbols[preferredCurrency]}${this.totalInvestment[preferredCurrency]}`
|
||||
this.shadow.querySelector('.net-value').textContent = `${currencySymbols[preferredCurrency]}${this.totalNet[preferredCurrency]}`
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const render = {
|
||||
investorInput(){
|
||||
const investorInput = document.createElement('li')
|
||||
investorInput.classList.add('investor-input', 'grid')
|
||||
@ -10372,7 +10549,8 @@ Bitcoin.Util = {
|
||||
getRef('currency_selector').addEventListener('change', e => {
|
||||
preferredCurrency = e.detail.value
|
||||
localStorage.setItem('preferred-currency', e.detail.value)
|
||||
document.querySelectorAll('fund-investor').forEach(bond => bond.toggleCurrency())
|
||||
document.querySelectorAll('fund-investor').forEach(investor => investor.toggleCurrency())
|
||||
document.querySelectorAll('fund-block').forEach(fund => fund.toggleCurrency())
|
||||
})
|
||||
|
||||
let isDropdownOpen = false
|
||||
@ -10441,7 +10619,7 @@ Bitcoin.Util = {
|
||||
getRef("create_term_form").reset()
|
||||
getRef("create_fund_form").reset()
|
||||
}
|
||||
if(target === 'loading_page'){
|
||||
if(target === 'loading_page' || target === 'error_page'){
|
||||
getRef('main_header').classList.add('hide-completely')
|
||||
}
|
||||
else{
|
||||
@ -10508,14 +10686,14 @@ Bitcoin.Util = {
|
||||
getRef('fund_selector_container').classList.add('hide-completely')
|
||||
}
|
||||
})
|
||||
function renderfundPlaceholder(){
|
||||
/* function renderfundPlaceholder(){
|
||||
getRef('fund_list').innerHTML = ``
|
||||
const frag = document.createDocumentFragment()
|
||||
for (let index = 0; index < 4; index++) {
|
||||
frag.append(render.fundPlaceholder())
|
||||
}
|
||||
getRef('fund_list').append(frag)
|
||||
}
|
||||
} */
|
||||
|
||||
getRef('term_selector').addEventListener('change', e => {
|
||||
const floID = e.detail.value
|
||||
@ -10530,13 +10708,16 @@ Bitcoin.Util = {
|
||||
terms: {},
|
||||
funds: {},
|
||||
appendix: {}
|
||||
}).then(result => getRef('refresh_button').click())
|
||||
}).then(result => refresh())
|
||||
.catch(error => console.error(error))
|
||||
}
|
||||
|
||||
getRef('refresh_button').addEventListener("click", evt => {
|
||||
showPage('loading_page')
|
||||
getCurrentRates().then(rates => {
|
||||
getRef('refresh_button').addEventListener("click", refresh);
|
||||
|
||||
function refresh(showLoader = true){
|
||||
if(showLoader)
|
||||
showPage('loading_page')
|
||||
getCurrentRates().then(async (rates) => {
|
||||
USD_current = rates.USD_INR;
|
||||
BTC_current = rates.BTC_USD;
|
||||
console.log(`USD rate: ${USD_current} INR\nBTC rate: ${BTC_current} USD`);
|
||||
@ -10570,24 +10751,27 @@ Bitcoin.Util = {
|
||||
.then(funds => renderFunds(term, funds))
|
||||
.catch(error => console.error(error))
|
||||
getFundsFromBlockchain(floID)
|
||||
.then(funds => {
|
||||
renderFunds(term, funds)
|
||||
showPage('home_page')
|
||||
}).catch(error => console.error(error))
|
||||
.then(funds => {
|
||||
renderFunds(term, funds)
|
||||
showPage('home_page')
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
}).catch(error => console.error(error));
|
||||
getTermsFromBlockchain().then(terms => {
|
||||
try{
|
||||
const terms = await getTermsFromBlockchain()
|
||||
for (let floID in terms) {
|
||||
let term = parseTerm(terms[floID])
|
||||
getFundsFromBlockchain(floID)
|
||||
.then(funds => {
|
||||
renderFunds(term, funds)
|
||||
showPage('home_page')
|
||||
}).catch(error => console.error(error))
|
||||
const funds = await getFundsFromBlockchain(floID)
|
||||
renderFunds(term, funds)
|
||||
showPage('home_page')
|
||||
}
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
catch(err){
|
||||
console.error(err)
|
||||
showPage('error_page')
|
||||
}
|
||||
}).catch(error => console.error(error))
|
||||
});
|
||||
}
|
||||
|
||||
function getTermsFromBlockchain() {
|
||||
return new Promise((resolve, reject) => {
|
||||
@ -10817,9 +11001,9 @@ Bitcoin.Util = {
|
||||
inr: total_net.toFixed(2),
|
||||
usd: (total_net / USD_current).toFixed(2)
|
||||
}
|
||||
const fundBlock = render.fundBlock(fundObj).firstElementChild
|
||||
const fundList = fundBlock.querySelector('.investors-group-list')
|
||||
fundList.append(investorsFrag)
|
||||
fundObj.investorsFrag = investorsFrag
|
||||
const fundBlock = document.createElement('fund-block')
|
||||
fundBlock.data = fundObj
|
||||
removeElementIfExist(k);
|
||||
fundBlock.id = k;
|
||||
//add link to view term tx in blockchain [1. term txn(variable = term.txid)];
|
||||
@ -10981,7 +11165,7 @@ Bitcoin.Util = {
|
||||
showPage('admin_page')
|
||||
notify("Term added in blockchain", 'success');
|
||||
getRef("create_term_form").reset()
|
||||
getRef('refresh_button').click()
|
||||
refresh(false)
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
})
|
||||
@ -11022,7 +11206,7 @@ Bitcoin.Util = {
|
||||
notify(createMod ? "New Fund created" : "Invesments added to fund", 'success');
|
||||
getRef("create_fund_form").reset()
|
||||
clearAddedInvestors()
|
||||
getRef('refresh_button').click()
|
||||
refresh(false)
|
||||
}).catch(error => console.error(error))
|
||||
}
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user