diff options
Diffstat (limited to 'src/js/ui/sections')
| -rw-r--r-- | src/js/ui/sections/aboutSection.js | 55 | ||||
| -rw-r--r-- | src/js/ui/sections/akNodeInfoSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/chatSection.js | 43 | ||||
| -rw-r--r-- | src/js/ui/sections/commentsSection.js | 21 | ||||
| -rw-r--r-- | src/js/ui/sections/filesSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/mixtapesSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/myPageSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/newsSection.js | 21 | ||||
| -rw-r--r-- | src/js/ui/sections/notFoundSection.js | 43 | ||||
| -rw-r--r-- | src/js/ui/sections/radioSection.js | 45 | ||||
| -rw-r--r-- | src/js/ui/sections/settingsSection.js | 39 | ||||
| -rw-r--r-- | src/js/ui/sections/statsSection.js | 21 | ||||
| -rw-r--r-- | src/js/ui/sections/stellarBalancesSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/stellarDataConfigSection.js | 15 | ||||
| -rw-r--r-- | src/js/ui/sections/stellarSection.js | 39 | ||||
| -rw-r--r-- | src/js/ui/sections/welcomeSection.js | 175 | ||||
| -rw-r--r-- | src/js/ui/sections/zchainDataSection.js | 15 | 
17 files changed, 329 insertions, 278 deletions
diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js index 933b6aa..3a11a43 100644 --- a/src/js/ui/sections/aboutSection.js +++ b/src/js/ui/sections/aboutSection.js @@ -1,29 +1,32 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var aboutSection = { -    element: "div", -    hidden: true, -    id:"about-section", -    innerHTML: ` -        <div class="where-am-i"> -            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/> -            <span>></span> -            <h2>About</h2> -        </div> -        <p>Arching Kaos is a project about radio, music, communications and decentralization.</p> -        <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p> -        <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p> -        <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p> -        <p>Furthermore, if you are using Freighter extension you can additionally see:</p> -        <ol> -            <li>Your balances on your wallet</li> -            <li>Your configuration IPNS address (if any)</li> -            <li>Your Arching Kaos configuration (if any)</li> -            <li>Your zchain (...)</li> -            <li>Your posted newsfeed (...)</li> -        </ol> -        <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p> -                ` -}; +export function aboutSection() +{ +    var aboutSection = { +        element: "div", +        hidden: true, +        id:"about-section", +        innerHTML: ` +            <div class="where-am-i"> +                <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/> +                <span>></span> +                <h2>About</h2> +            </div> +            <p>Arching Kaos is a project about radio, music, communications and decentralization.</p> +            <p>On site, you can listen to the latest mixes of music (menu entry "Mixtapes"), read latest news ("News") of the network and chat (you guessed it, "Chat" menu entry).</p> +            <p>You can see the zchains appearing in "zchain" and logs of the process on "Logs"</p> +            <p>Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.</p> +            <p>Furthermore, if you are using Freighter extension you can additionally see:</p> +            <ol> +                <li>Your balances on your wallet</li> +                <li>Your configuration IPNS address (if any)</li> +                <li>Your Arching Kaos configuration (if any)</li> +                <li>Your zchain (...)</li> +                <li>Your posted newsfeed (...)</li> +            </ol> +            <p>Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.</p> +                    ` +    }; -makeElement(aboutSection, document.querySelector('.main')); +    makeElement(aboutSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js index 42223bd..38ad961 100644 --- a/src/js/ui/sections/akNodeInfoSection.js +++ b/src/js/ui/sections/akNodeInfoSection.js @@ -1,12 +1,15 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var akNodeInfoSection = { -    element: "div", -    id: "arching-kaos-node-info", -    innerHTML: ` +export function akNodeInfoSection() +{ +    var akNodeInfoSection = { +        element: "div", +        id: "arching-kaos-node-info", +        innerHTML: `          <h2>Node Info</h2>          <em id="node-info-not-found">No data found (yet?)!</em>      ` -}; +    }; -makeElement(akNodeInfoSection, document.querySelector('.main')); +    makeElement(akNodeInfoSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/chatSection.js b/src/js/ui/sections/chatSection.js index e9edd29..36348b3 100644 --- a/src/js/ui/sections/chatSection.js +++ b/src/js/ui/sections/chatSection.js @@ -1,23 +1,26 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var chatSection = { -    element: 'div', -    id:"chat-section", -    style:"height: 100%;", -    innerHTML: [ -        { -            element: 'button', -            style:"position: fixed;", -            onclick:"refreshChat()", -            innerText:"Refresh" -        }, -        { -            element: 'iframe', -            id: "chat-iframe", -            src: "https://irc.arching-kaos.net", -            style: "width: 100%; height: 100%;" -        } -    ] -}; +export function chatSection() +{ +    var chatSection = { +        element: 'div', +        id:"chat-section", +        style:"height: 100%;", +        innerHTML: [ +            { +                element: 'button', +                style:"position: fixed;", +                onclick:"refreshChat()", +                innerText:"Refresh" +            }, +            { +                element: 'iframe', +                id: "chat-iframe", +                src: "https://irc.arching-kaos.net", +                style: "width: 100%; height: 100%;" +            } +        ] +    }; -makeElement(chatSection, document.querySelector('.main')); +    makeElement(chatSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js index 7209079..1519ad9 100644 --- a/src/js/ui/sections/commentsSection.js +++ b/src/js/ui/sections/commentsSection.js @@ -1,12 +1,15 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var commentsSection = { -    element: 'div', -    id: 'comments-section', -    innerHTML: [ -        { element: "h2", innerText: "Comments" }, -        { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} -    ] -}; +export function commentsSection() +{ +    var commentsSection = { +        element: 'div', +        id: 'comments-section', +        innerHTML: [ +            { element: "h2", innerText: "Comments" }, +            { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} +        ] +    }; -makeElement(commentsSection, document.querySelector('.main')); +    makeElement(commentsSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js index 726fa5a..06ae29a 100644 --- a/src/js/ui/sections/filesSection.js +++ b/src/js/ui/sections/filesSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var filesSection = { -    element: 'div', -    id: "files-section", -    innerHTML: ` +export function filesSection() +{ +    var filesSection = { +        element: 'div', +        id: "files-section", +        innerHTML: `          <div class="where-am-i">              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span> @@ -13,6 +15,7 @@ var filesSection = {          </div>          <em id="files-sec-not-found">No data found (yet?)!</em>                  ` -}; +    }; -makeElement(filesSection, document.querySelector('.main')); +    makeElement(filesSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js index 64280e4..34bf1b6 100644 --- a/src/js/ui/sections/mixtapesSection.js +++ b/src/js/ui/sections/mixtapesSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var mixtapesSection = { -    element: "div", -    id: "mixtapes-section", -    innerHTML: ` +export function mixtapesSection() +{ +    var mixtapesSection = { +        element: "div", +        id: "mixtapes-section", +        innerHTML: `          <div class="where-am-i">              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span> @@ -13,6 +15,7 @@ var mixtapesSection = {          </div>          <em id="mixtapes-sec-not-found">No data found (yet?)!</em>                  ` -}; +    }; -makeElement(mixtapesSection, document.querySelector('.main')); +    makeElement(mixtapesSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js index 0c79f06..9926141 100644 --- a/src/js/ui/sections/myPageSection.js +++ b/src/js/ui/sections/myPageSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var myPageSection = { -    element: "div", -    id: "mypage-section", -    innerHTML: ` +export function myPageSection() +{ +    var myPageSection = { +        element: "div", +        id: "mypage-section", +        innerHTML: `          <h2>My page</h2>          <button id="stellar-freigher-connect-address-button" onclick="connect()">Connect with Freighter wallet</button>          <div id="my-news"> @@ -19,6 +21,7 @@ var myPageSection = {              <em id="my-zchain-sec-not-found">No data found (yet?)!</em>          </div>      ` -}; +    }; -makeElement(myPageSection, document.querySelector('.main')); +    makeElement(myPageSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js index 3b89cef..b983b48 100644 --- a/src/js/ui/sections/newsSection.js +++ b/src/js/ui/sections/newsSection.js @@ -1,18 +1,21 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var newsSection = { -    element: 'div', -    id: 'news-section', -    innerHTML: [ -        { element: "div", className: "where-am-i", innerHTML: ` +export function newsSection() +{ +    var newsSection = { +        element: 'div', +        id: 'news-section', +        innerHTML: [ +            { element: "div", className: "where-am-i", innerHTML: `              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span>              <h2>Modules</h2>              <span>></span>              <h2>News</h2>              ` }, -        { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} -    ] -}; +            { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} +        ] +    }; -makeElement(newsSection, document.querySelector('.main')); +    makeElement(newsSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js index 0731101..a400d6a 100644 --- a/src/js/ui/sections/notFoundSection.js +++ b/src/js/ui/sections/notFoundSection.js @@ -1,23 +1,26 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var notFoundSection = { -    element: 'div', -    id: 'not-found-section', -    hidden: true, -    innerHTML: [ -        { -            element: 'h2', -            innerText: 'Not found' -        }, -        { -            element: 'p', -            innerText: 'Soft 404' -        }, -        { -            element: 'p', -            innerText: 'Please select an entry from the menu' -        } -    ] -}; +export function notFoundSection() +{ +    var notFoundSection = { +        element: 'div', +        id: 'not-found-section', +        hidden: true, +        innerHTML: [ +            { +                element: 'h2', +                innerText: 'Not found' +            }, +            { +                element: 'p', +                innerText: 'Soft 404' +            }, +            { +                element: 'p', +                innerText: 'Please select an entry from the menu' +            } +        ] +    }; -makeElement(notFoundSection, document.querySelector('.main')); +    makeElement(notFoundSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js index 9c98ac0..f430023 100644 --- a/src/js/ui/sections/radioSection.js +++ b/src/js/ui/sections/radioSection.js @@ -1,24 +1,27 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var radioSection = { -    element: "div", -    id: 'radio-section', -    hidden: true, -    style: 'height: 100%;', -    innerHTML: [ -        { -            element: 'button', -            style:"position: fixed;", -            onclick:"refreshRadio()", -            innerText:'Refresh' -        }, -        { -            element: 'iframe', -            id:"radio-iframe", -            src:"https://radio.arching-kaos.com", -            style:"width: 100%; height: 100%;" -        } -    ] -}; +export function radioSection() +{ +    var radioSection = { +        element: "div", +        id: 'radio-section', +        hidden: true, +        style: 'height: 100%;', +        innerHTML: [ +            { +                element: 'button', +                style:"position: fixed;", +                onclick:"refreshRadio()", +                innerText:'Refresh' +            }, +            { +                element: 'iframe', +                id:"radio-iframe", +                src:"https://radio.arching-kaos.com", +                style:"width: 100%; height: 100%;" +            } +        ] +    }; -makeElement(radioSection, document.querySelector('.main')); +    makeElement(radioSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js index 6f26393..e6768df 100644 --- a/src/js/ui/sections/settingsSection.js +++ b/src/js/ui/sections/settingsSection.js @@ -1,27 +1,30 @@  import { makeElement } from "../../arching-kaos-generator.js"; -import { getSettings, settings } from "../../arching-kaos-web-ui-settings.js"; +import { getSettings } from "../../arching-kaos-web-ui-settings.js"; -// var settings = getSettings(); +var settings = getSettings();  console.log(settings); -var settingsSection = { -    element: 'div', -    id: "settings-section", -    innerHTML: [ -        {element: "div", -            className:"where-am-i", -            innerHTML:[ -                {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"}, -                {element: "span", innerText:">"}, -                {element: "h2", innerText:"🔧 Settings"} -            ] -        } -    ] -}; +export function settingsSection() +{ +    var settingsSection = { +        element: 'div', +        id: "settings-section", +        innerHTML: [ +            {element: "div", +                className:"where-am-i", +                innerHTML:[ +                    {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"}, +                    {element: "span", innerText:">"}, +                    {element: "h2", innerText:"🔧 Settings"} +                ] +            } +        ] +    }; -makeElement(settingsSection, document.querySelector('.main')); +    makeElement(settingsSection, document.querySelector('.main')); +} -export function settingsPage() +export function getSettingsPage()  {      return document.querySelector('#settings-section');  } diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js index 1f2ede2..d54962a 100644 --- a/src/js/ui/sections/statsSection.js +++ b/src/js/ui/sections/statsSection.js @@ -1,17 +1,19 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var statsSection = { -    element: 'div', -    id: "stats-section", -    innerHTML: [ -        { element: "div", className: "where-am-i", innerHTML: ` +export function statsSection() +{ +    var statsSection = { +        element: 'div', +        id: "stats-section", +        innerHTML: [ +            { element: "div", className: "where-am-i", innerHTML: `              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span>              <h2>Explore</h2>              <span>></span>              <h2>Stats</h2>          `}, -        { element: "div", className: "available-networks", innerHTML: ` +            { element: "div", className: "available-networks", innerHTML: `              <h3>Networks</h3>              <details class="stellar-network">                  <summary>Stellar</summary> @@ -23,7 +25,8 @@ var statsSection = {                  <summary>Arching Kaos SBlocks</summary>              </details>          `} -    ] -}; +        ] +    }; -makeElement(statsSection, document.querySelector('.main')); +    makeElement(statsSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js index 906a064..21ffaa7 100644 --- a/src/js/ui/sections/stellarBalancesSection.js +++ b/src/js/ui/sections/stellarBalancesSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var stellarBalancesSection = { -    element: "div", -    id: "stellar-balances", -    innerHTML: ` +export function stellarBalancesSection() +{ +    var stellarBalancesSection = { +        element: "div", +        id: "stellar-balances", +        innerHTML: `          <div class="where-am-i">              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span> @@ -14,6 +16,7 @@ var stellarBalancesSection = {          <em id="stellar-balances-not-found">No data found (yet?)!</em>          <table id="stellar-balances-table"></table>          ` -}; +    }; -makeElement(stellarBalancesSection, document.querySelector('.main')); +    makeElement(stellarBalancesSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js index f0690b3..509ae57 100644 --- a/src/js/ui/sections/stellarDataConfigSection.js +++ b/src/js/ui/sections/stellarDataConfigSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var stellarDataConfigSection = { -    element: "div", -    id: "stellar-data-config", -    innerHTML: ` +export function stellarDataConfigSection() +{ +    var stellarDataConfigSection = { +        element: "div", +        id: "stellar-data-config", +        innerHTML: `          <div class="where-am-i">              <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>              <span>></span> @@ -13,6 +15,7 @@ var stellarDataConfigSection = {          </div>          <em id="stellar-data-config-not-found">No data found (yet?)!</em>          ` -}; +    }; -makeElement(stellarDataConfigSection, document.querySelector('.main')); +    makeElement(stellarDataConfigSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/stellarSection.js b/src/js/ui/sections/stellarSection.js index decc588..ddc5b91 100644 --- a/src/js/ui/sections/stellarSection.js +++ b/src/js/ui/sections/stellarSection.js @@ -1,21 +1,24 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var stellarSection = { -    element: 'div', -    id: "stellar-section", -    innerHTML: [ -        { -            element: "h2", -            innerText: "Stellar dashboard" -        }, -        { -            element: "button", -            className: "sub-input", -            id:"stellar-freigher-connect-address-button", -            onclick:"connect()", -            innerText:"Connect with Stellar address" -        } -    ] -}; +export function stellarSection() +{ +    var stellarSection = { +        element: 'div', +        id: "stellar-section", +        innerHTML: [ +            { +                element: "h2", +                innerText: "Stellar dashboard" +            }, +            { +                element: "button", +                className: "sub-input", +                id:"stellar-freigher-connect-address-button", +                onclick:"connect()", +                innerText:"Connect with Stellar address" +            } +        ] +    }; -makeElement(stellarSection, document.querySelector('.main')); +    makeElement(stellarSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js index 5636233..025b1e8 100644 --- a/src/js/ui/sections/welcomeSection.js +++ b/src/js/ui/sections/welcomeSection.js @@ -18,8 +18,8 @@ var greeting = {  var homeGrid = {      element: "div", -        id: "home-grid", -        innerHTML: ` +    id: "home-grid", +    innerHTML: `                  <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)" style="background-image: url(img/mixtapes-logo.png); background-repeat: round;"></button>                  <button class="menu-clickable" id="#/news-section" onclick="menusel(this)" style="background-image: url(img/news-logo.png); background-repeat: round;"></button>                  <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)" style="background-image: url(img/chat-logo.png); background-repeat: round;"></button> @@ -42,89 +42,92 @@ var renderForm = {      `  }; -var welcomeSection = { -    element: "div", -    id: "welcome-section", -    innerHTML: [ -        whereAmI, -        greeting, -        homeGrid, -        renderTitle, -        renderForm, -        { -            element: "div", -            className: "results-area", -            innerHTML: [ -                { -                    elements: "h3", -                    innerText: "Results" -                } -            ] -        }, -        { -            element: "h3", -            innerText: "Manual scan" -        }, -        { -            element: "div", -            id: "manual-scan-section", -            innerHTML: [ -                { -                    element: "div", -                    className: "manual-scan", -                    innerHTML: [ -                        { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"}, -                        { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"}, -                        { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"}, -                        { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"} -                    ] -                } -            ] -        }, -        { -            element: "div", -            className: "preview" -        }, -        { -            element: "div", -            className: "dialog", -            innerHTML: [ -                { -                    element: "h3", -                    innerText: "Progress" -                }, -                { -                    element: "progress", -                    id: "total-progress", -                    value: 0 -                }, -                { -                    element: "progress", -                    id: "http-progress", -                    value: 0 -                }, -                { -                    element: "pre", -                    id: "current-log-message" -                } -            ] -        }, +export function welcomeSection() +{ +    var welcomeSection = { +        element: "div", +        id: "welcome-section", +        innerHTML: [ +            whereAmI, +            greeting, +            homeGrid, +            renderTitle, +            renderForm, +            { +                element: "div", +                className: "results-area", +                innerHTML: [ +                    { +                        elements: "h3", +                        innerText: "Results" +                    } +                ] +            }, +            { +                element: "h3", +                innerText: "Manual scan" +            }, +            { +                element: "div", +                id: "manual-scan-section", +                innerHTML: [ +                    { +                        element: "div", +                        className: "manual-scan", +                        innerHTML: [ +                            { element:"button", onclick:"scanStellarNetworkForPeers()", innerText:"Check Stellar Network"}, +                            { element:"button", onclick:"checkLocalNodeInfo()", innerText:"Check local Node"}, +                            { element:"button", onclick:"checkLocalPeers()", innerText:"Check local Peers"}, +                            { element:"button", onclick:"checkLocalSchain()", innerText:"Check Local Schain"} +                        ] +                    } +                ] +            }, +            { +                element: "div", +                className: "preview" +            }, +            { +                element: "div", +                className: "dialog", +                innerHTML: [ +                    { +                        element: "h3", +                        innerText: "Progress" +                    }, +                    { +                        element: "progress", +                        id: "total-progress", +                        value: 0 +                    }, +                    { +                        element: "progress", +                        id: "http-progress", +                        value: 0 +                    }, +                    { +                        element: "pre", +                        id: "current-log-message" +                    } +                ] +            }, -        { -            element: "details", -            id: "logs-area", -            innerHTML: [ -                { -                    element: "summary", -                    innerText: "Logs (click to expand)" -                }, -                { -                    element: "div", -                    id: "logs-area-element" -                } -            ] -        } -    ] -}; +            { +                element: "details", +                id: "logs-area", +                innerHTML: [ +                    { +                        element: "summary", +                        innerText: "Logs (click to expand)" +                    }, +                    { +                        element: "div", +                        id: "logs-area-element" +                    } +                ] +            } +        ] +    }; -makeElement(welcomeSection, document.querySelector('.main')); +    makeElement(welcomeSection, document.querySelector('.main')); +} diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js index ba4bfde..0549249 100644 --- a/src/js/ui/sections/zchainDataSection.js +++ b/src/js/ui/sections/zchainDataSection.js @@ -1,9 +1,11 @@  import { makeElement } from "../../arching-kaos-generator.js"; -var zchainDataSection = { -    element: "div", -    id:"zchain-data-section", -    innerHTML: ` +export function zchainDataSection() +{ +    var zchainDataSection = { +        element: "div", +        id:"zchain-data-section", +        innerHTML: `                      <div class="where-am-i">                          <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>                          <span>></span> @@ -13,6 +15,7 @@ var zchainDataSection = {                      </div>                      <em id="zchain-data-sec-not-found">No data found (yet?)!</em>                      ` -}; +    }; -makeElement(zchainDataSection, document.querySelector('.main')); +    makeElement(zchainDataSection, document.querySelector('.main')); +}  | 
