From b27d27c65bff2d870238f948eae9231da0c5fe8f Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 14 May 2020 20:00:09 +0530
Subject: [PATCH] v1.0.2

Replacing static HTML redering with dynamic JS rendering for better performance
---
 index.html | 316 +++++++++++++++++++++++++++++------------------------
 1 file changed, 175 insertions(+), 141 deletions(-)
diff --git a/index.html b/index.html
index 86cbd6a..baccd49 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,38 @@
 </head>
 <body data-theme='dark'>
     <main>
-        <div id="homepage" class="page hide-completely">
-            <section id="first_section">
+        <div id="page_container" class="margin">
+            <header id="page_header" class="flex">
+                <svg class="icon" onclick="render('homepage')" id="back_btn" viewBox="0 0 32.5 64">
+                    <title>Back Button</title>
+                    <polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
+                </svg>
+                <h3 id="page_title">Block</h3>
+                <svg class="icon search margin-left-auto" viewBox="0 0 64 64">
+                    <title>search icon</title>
+                    <circle cx="25.34" cy="25.34" r="24.84"/>
+                    <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
+                </svg>
+            </header>
+            <div id="all_transations" class="">
+
+            </div>
+            <div id="all_blocks" class="">
+
+            </div>
+        </div>        
+    </main>
+    <script>
+        
+        let frag = document.createDocumentFragment();
+        const create = {
+            homepage: function(obj){
+                let {topToken, totalTransactions, walletAddresses, topContract} = obj,
+                    page = document.createElement('div');
+                page.classList.add('page')
+                page.id = 'homepage'
+                page.innerHTML = ` 
+                <section id="first_section">
                 <header class="header">
                     <div id="logo">
                         <svg id="main_logo" viewBox="0 0 27.25 32">
@@ -55,19 +85,19 @@
             <div id="highlights">
                 <div class="highlight-item">
                     <h4 class="label">top token</h4>
-                    <h1>RMT</h1>
+                    <h1>${topToken}</h1>
                 </div>
                 <div class="highlight-item">
                     <h4 class="label">total transactions</h4>
-                    <h1>88</h1>
+                    <h1>${totalTransactions}</h1>
                 </div>
                 <div class="highlight-item">
                     <h4 class="label">Wallet addresses</h4>
-                    <h1>48</h1>
+                    <h1>${walletAddresses}</h1>
                 </div>
                 <div class="highlight-item">
                     <h4 class="label">top contract</h4>
-                    <h1>India elections 2019</h1>
+                    <h1>${topContract}</h1>
                 </div>
             </div>
         </section>
@@ -95,62 +125,39 @@
                 </div>
             </div>
         </section>
-        </div>
-        <div id="page_container" class="margin">
-            <header id="page_header" class="flex">
-                <svg class="icon" onclick="showPage('homepage')" id="back_btn" viewBox="0 0 32.5 64">
-                    <title>Back Button</title>
-                    <polyline points="32.15 0.35 0.7 31.8 32.15 63.72"/>
-                </svg>
-                <h3 id="page_title">Block</h3>
-                <svg class="icon search margin-left-auto" viewBox="0 0 64 64">
-                    <title>search icon</title>
-                    <circle cx="25.34" cy="25.34" r="24.84"/>
-                    <line x1="63.65" y1="63.65" x2="42.91" y2="42.91"/>
-                </svg>
-            </header>
-            <div id="all_transations" class="">
-
-            </div>
-            <div id="all_blocks" class="">
-
-            </div>
-            <div id="block_page" class="page hide-completely">
+                `
+                return page;
+            },
+            blockPage: function(obj){
+                let {blockHeight, size, transactions, reward, hash, difficulty, nonce} = obj,
+                    page = document.createElement('div');
+                page.classList.add('page')
+                page.id = 'block_page'
+                page.innerHTML = `    
                 <h5 class="label">Block Height</h5>
-                <h2 class="block">4008986</h2>
+                <h2 class="block">${blockHeight}</h2>
                 <div class="card">
-                    <h4>1 Transction</h4>
-                    <h5 class="label">57465724.625 bytes</h5>
+                    <h4>1 Transaction</h4>
+                    <h5 class="label">${size}</h5>
                     <h5 class="label">Reward</h5>
-                    <h4>3.1253FLO</h4>
+                    <h4>${reward}</h4>
                     <h5 class="label">Hash</h5>
-                    <h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
+                    <h4 class="breakable hash">${hash}</h4>
                     <h5 class="label">Difficulty</h5>
-                    <h4>681</h4>
+                    <h4>${difficulty}</h4>
                     <h5 class="label">Nonce</h5>
-                    <h4>29294481394</h4>
+                    <h4>${nonce}</h4>
                 </div>
                 <h3 class="heading">Transactions</h3>
                 <div id="block_transaction_container" class="top-bottom-padding">
-                    <div class="transaction">
-                        <div class="transaction-header grid grid-2">
-                            <div>
-                                <h5>Token transfer</h5>
-                                <h2>Rupee</h2>
-                            </div>
-                            <svg class="icon margin-left-auto" viewBox="0 0 64 64">
-                                <title>More infomation icon</title>
-                                <path d="M32,0A32,32,0,1,0,64,32,32,32,0,0,0,32,0Zm3.07,47.91a3.1,3.1,0,0,1-6.19,0V26.55a3.1,3.1,0,0,1,6.19,0Zm-.49-29.27a3.46,3.46,0,0,1-2.59.93,3.46,3.46,0,0,1-2.59-.93,3.22,3.22,0,0,1-.9-2.33,3.3,3.3,0,0,1,.9-2.37A3.43,3.43,0,0,1,32,13a3.43,3.43,0,0,1,2.59.94,3.27,3.27,0,0,1,.92,2.37A3.2,3.2,0,0,1,34.58,18.64Z"/>
-                            </svg>
-                        </div>
-                        <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
-                        <h5>to</h5>
-                        <h4 class="breakable address">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</h4>
-                        <h3>₹0.000000007</h3>
-                    </div>
-                </div>
-            </div>
-            <div id="address_page" class="page hide-completely">
+                </div>`
+                return page;
+            },
+            addressPage: function(balance, address){
+                let page = document.createElement('div')
+                page.classList.add('page')
+                page.id = 'address_page'
+                page.innerHTML = `                
                 <div class="balance-card">
                     <svg class="flo-logo" viewBox="0 0 48 48">
                         <path d="M34.2,32.4c0,0,3.75-0.18,7.41-3.86c2.96-2.98,3.65-6.66,3.99-8.52c-11.04-0.63-12.36,0.99-13.71,1.68
@@ -167,19 +174,24 @@
                         c-0.95-1.37-1.47-2.13-1.47-4.26c0-2.4,1.12-4.61,1.47-5.14c0.35,0.52,1.47,2.74,1.47,5.14C24.27,40.92,23.75,41.69,22.8,43.06z"/>
                     </svg>
                     <h5 class="label">Balance</h5>
-                    <h2>1.0006</h2><h4>FLO</h4>
-                    <p class="breakable">FDhQizsksSHs4dyJBeLqGcbyuEg163jhXi</p>
+                    <h2>${balance}</h2><h4>FLO</h4>
+                    <p class="breakable">${address}</p>
                 </div>
                 <h3 class="heading">Transactions</h3>
                 <div id="address_transaction_container" class="top-bottom-padding">
-
-                </div>
-            </div>
-            <div id="transaction_page" class="page hide-completely">
+                </div>`;
+                return page;
+            },
+            transactionPage: function(obj){
+                let {type, name, blockHeight, amount, sender, reciever, floData, hash, confirmations} = obj,
+                    page = document.createElement('div')
+                page.classList.add('page')
+                page.id = 'transaction_page'
+                page.innerHTML = `  
                 <div class="grid grid-2">
                     <div>
-                        <h5 class="label">Token Transfer</h5>
-                        <h2 class="token">RUPEE </h2>
+                        <h5 class="label">${type}</h5>
+                        <h2 class="token">${name}</h2>
                     </div>
                     <div class="status done">
                         <svg class="icon" viewBox="0 0 64 42">
@@ -191,30 +203,36 @@
                 </div>
                 <div class="card">
                     <h4>Block</h4>
-                    <h5 class="label block">#40008986</h5>
+                    <h5 class="label block">${blockHeight}}</h5>
                     <h5 class="label">Amount</h5>
-                    <h4>3.1253FLO</h4>
+                    <h4>${amount}</h4>
                     <h5 class="label">Sender</h5>
-                    <h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
+                    <h4 class="breakable address">${sender}</h4>
                     <h5 class="label">Reciever</h5>
-                    <h4 class="breakable address">F7HEAV9226tqXtRk34XrA9nZCb8ZcbVJt1</h4>
+                    <h4 class="breakable address">${reciever}</h4>
                 </div>
                 <div class="card">
                     <h5 class="label">FLO Data</h5>
-                    <p>transfer 40000 rupee# to FJyz51JTnPuB3AMRjyYe3rbuLmnq4qErcc</p>
+                    <p>${floData}</p>
                     <h5 class="label">Hash</h5>
-                    <h4 class="breakable hash">17779bedfe0c174eea678318adf30ff33f74c575ce7238efe339927832632fe1</h4>
+                    <h4 class="breakable hash">${hash}</h4>
                     <h5 class="label">Block Confirmations</h5>
-                    <h4>2527</h4>
+                    <h4>${confirmations}</h4>
                 </div>
-            </div>
-            <div id="token_page" class="page hide-completely">
-                  <h2>RMT</h2>
+                `;
+                return page;
+            },
+            tokenPage: function(token, supply, incAddress){
+                let page = document.createElement('div')
+                page.classList.add('page')
+                page.id = 'token_page'
+                page.innerHTML = ` 
+                <h2 class="capitalise">${token}</h2>
                   <div class="card">
                     <h5 class="label">Supply</h5>
-                    <h4>21,000,000</h4>
+                    <h4>${supply}</h4>
                     <h5 class="label">Incorporation Address</h5>
-                    <h4 class="breakable">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
+                    <h4 class="breakable">${incAddress}</h4>
                   </div> 
                   <div class="tabs">
                       <h4 class="tab active" data-target="token_balance_container">Top Balances</h4>
@@ -237,19 +255,28 @@
                           <h4>0.0000023333 RMT</h4>
                       </li>
                   </ul>
-            </div> 
-            <div id="contract_page" class="page">
+                `
+                return page;
+            },
+            contractPage: function(obj){
+                let {contract, contractType, incAddress, expiration,token, participationFees} = obj,
+                    page = document.createElement('div')
+                page.classList.add('page')
+                page.id = 'contract_page'
+                page.innerHTML = ` 
                 <div class="status closed">Closed</div>
-                <h2 class="uppercase">India ELections 2019</h2>
+                <h2 class="uppercase">${contract}</h2>
                 <div class="card">
                     <h5 class="label">Contract Type</h5>
-                    <h4 class="breakable address">F6EMAHjivqrcrdAHNABq2R1FLNkx8xfEaT</h4>
+                    <h4>${contractType}</h4>
+                    <h5 class="label">Incorporation Address</h5>
+                    <h4 class="breakable address">${incAddress}</h4>
                     <h5 class="label">Expiration</h5>
-                    <h4>wed may 22 2019 21:00:00 gmt+05:30</h4>
+                    <h4>${expiration}</h4>
                     <h5 class="label">Token Used</h5>
-                    <h4>RMT</h4>
+                    <h4>${token}</h4>
                     <h5 class="label">Participation Amount</h5>
-                    <h4>0.001 RMT</h4>
+                    <h4>${participationFees}</h4>
                 </div>
                 <h3 class="heading">User Choices</h3>
                 <ul class="card" type='circle'>
@@ -279,61 +306,10 @@
                         <h4>0.0000023333 RMT</h4>
                     </li>
                 </ul>
-            </div>
-        </div>        
-    </main>
-    <script>
-        let themeToggler = document.getElementById('theme_toggle'),
-            body = document.querySelector('body');
-        if(localStorage.theme === 'dark'){
-            nightlight();
-            themeToggler.checked = true
-        }
-        else{
-            daylight()
-            themeToggler.checked = false
-        }
-        themeToggler.addEventListener('change', () => {
-            transition()
-            if(themeToggler.checked){
-                nightlight();
-                localStorage.setItem('theme', 'dark')
-            }
-            else{
-                daylight();
-                localStorage.setItem('theme', 'light')
-            }
-        })
-        function daylight(){
-            body.setAttribute("data-theme", 'light');
-        }
-        function nightlight(){
-            body.setAttribute('data-theme', 'dark');
-        }
-        function transition(){
-            body.classList.add('transition')
-            setTimeout(() => {
-                body.classList.remove('transition')
-            }, 700)
-        }
-
-        const   allPages = document.querySelectorAll('.page'),
-                pageTitle = document.getElementById('page_title'),
-                pageContainer = document.getElementById('page_container');
-        function showPage(pageId){
-            let thisPage = document.getElementById(pageId);
-            allPages.forEach(page => {
-                page.classList.add('hide-completely')
-            })
-            thisPage.classList.remove('hide-completely')
-            if(pageId === 'homepage')
-                pageContainer.classList.add('hide-completely')
-            else
-                pageContainer.classList.remove('hide-completely')
-        }
-
-        const create = {
-            transaction: function(block, type, name, sender, reciever, amount){
+                `
+                return page;
+            },
+            transactionCard: function(block, type, name, sender, reciever, amount){
                 let card = document.createElement('div');
                 card.classList.add('transaction')
                 card.id = block;
@@ -354,27 +330,85 @@
                 return card;
             }
         }
+        
+        const   pageTitle = document.getElementById('page_title'),
+                pageContainer = document.getElementById('page_container'),
+                pageHeader = document.getElementById('page_header');
+        let currentPage = 'homepage'
+        function removePage(page){
+            document.getElementById(page).remove()
+        }
+
+        function render(pageId){
+            if(currentPage !== pageId)
+                removePage(currentPage)
+            if(pageId === 'address_page'){
+                pageContainer.append(create.addressPage('0.0001', 'F91a5151a651d1adv56151avdadlkn'))
+                pageTitle.textContent = 'Address'
+            }
+            if(pageId === 'homepage'){
+                pageHeader.classList.add('hide-completely')
+                pageContainer.append(create.homepage({topToken: 'RMT', totalTransactions: '88', walletAddresses: '44', topContract: 'India Election 2019'}))
+                let themeToggler = document.getElementById('theme_toggle'),
+                body = document.querySelector('body');
+            if(localStorage.theme === 'dark'){
+                nightlight();
+                themeToggler.checked = true
+            }
+            else{
+                daylight()
+                themeToggler.checked = false
+            }
+            themeToggler.addEventListener('change', () => {
+                transition()
+                if(themeToggler.checked){
+                    nightlight();
+                    localStorage.setItem('theme', 'dark')
+                }
+                else{
+                    daylight();
+                    localStorage.setItem('theme', 'light')
+                }
+            })
+            function daylight(){
+                body.setAttribute("data-theme", 'light');
+            }
+            function nightlight(){
+                body.setAttribute('data-theme', 'dark');
+            }
+            function transition(){
+                body.classList.add('transition')
+                setTimeout(() => {
+                    body.classList.remove('transition')
+                }, 700)
+            }
+            }
+            else
+                pageHeader.classList.remove('hide-completely')
+            currentPage = pageId;
+        }
 
         window.addEventListener('load', () => {
+            render('homepage')
+        
             document.querySelector('main').addEventListener('click', e => {
                 if(e.target.closest('.address')){
-                    showPage("address_page")
-                    pageTitle.textContent = 'Address'
+                    render("address_page")
                 }
                 if(e.target.closest('.token')){
-                    showPage("token_page")
+                    render("token_page")
                     pageTitle.textContent = 'Token'
                 }
                 if(e.target.closest('.hash')){
-                    showPage("transaction_page")
+                    render("transaction_page")
                     pageTitle.textContent = 'Transaction'
                 }
                 if(e.target.closest('.block')){
-                    showPage("block_page")
+                    render("block_page")
                     pageTitle.textContent = 'Block'
                 }
                 if(e.target.closest('.block')){
-                    showPage("contract_page")
+                    render("contract_page")
                     pageTitle.textContent = 'Contract  '
                 }
                 if(e.target.closest('.tab')){
