More refactoring and fixing a bug on spa-router

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>&gt;</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>&gt;</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>&gt;</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>&gt;</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>&gt;</span>
             <h2>Modules</h2>
             <span>&gt;</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>&gt;</span>
             <h2>Explore</h2>
             <span>&gt;</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>&gt;</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>&gt;</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>&gt;</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'));
+}