More refactoring and fixing a bug on spa-router

21 files changed, 395 insertions, 395 deletions

diff --git a/src/js/arching-kaos-spa-router.js b/src/js/arching-kaos-spa-router.js
index 162a316..d1cf2a4 100644
--- a/src/js/arching-kaos-spa-router.js
+++ b/src/js/arching-kaos-spa-router.js
@@ -48,19 +48,27 @@ export function locationHashOnChange()
     route.menuid = '#'+route.args[1];
     route.subcommand = route.args[2];
     menuinit();
-    if ( (locationHashGetter() !== 'undefined') && (locationHashGetter() === '') ){
-        getWelcomeSection.hidden=false;
+    if ( (locationHashGetter() !== 'undefined') && (locationHashGetter() === '') )
+    {
+        getWelcomeSection().hidden=false;
     }
-    else if ( route.args[1] == "route" ) {
-        getWelcomeSection.hidden=false;
-        if ( route.args.length === 4 ) {
-            if ( route.args[2] === "zblock" ) {
+    else if ( route.args[1] == "route" )
+    {
+        getWelcomeSection().hidden=false;
+        if ( route.args.length === 4 )
+        {
+            if ( route.args[2] === "zblock" )
+            {
                 seekZblock(route.args[3], ['search', false]);
             }
         }
-    } else if ( (locationHashGetter() !== 'undefined') && ( menuids().includes(route.menuid))){
+    }
+    else if ( (locationHashGetter() !== 'undefined') && ( menuids().includes(route.menuid)))
+    {
         document.querySelector(route.menuid).hidden=false;
-    } else {
+    }
+    else
+    {
         getSoftError().hidden=false;
     }
 }
diff --git a/src/js/arching-kaos-web-ui-settings.js b/src/js/arching-kaos-web-ui-settings.js
index c6a5399..c940f31 100644
--- a/src/js/arching-kaos-web-ui-settings.js
+++ b/src/js/arching-kaos-web-ui-settings.js
@@ -23,7 +23,7 @@
  *
  */
 import { makeElement } from "./arching-kaos-generator.js";
-import { settingsPage } from "./ui/sections/settingsSection.js";
+import { getSettingsPage } from "./ui/sections/settingsSection.js";
 
 var default_settings = {
     ipfs: {
@@ -96,12 +96,8 @@ var default_settings = {
 //
 // All comments above are replaced by temporary initializing without saving
 // anything in the localStorage
-export function getSettings()
-{
-    return default_settings;
-}
 
-export var settings = default_settings;
+var settings = default_settings;
 
 // Also, remove any settings stored from previous runs
 window.localStorage.removeItem("ak-settings");
@@ -206,21 +202,26 @@ function settingPlaceToDOM(key, value){
         console.log(`Settings value: ${value}, type: ${typeof(value)}`);
 //        container.innerText = value;
     }
-    settingsPage().appendChild(container);
+    getSettingsPage().appendChild(container);
 }
 
-settingsKeys.forEach(
-    (value) => {
-        settingPlaceToDOM(value, settings[value]);
-    }
-);
+// settingsKeys.forEach(
+//     (value) => {
+//         settingPlaceToDOM(value, settings[value]);
+//     }
+// );
 
 /* Small dump as pre text */
-var predump = document.createElement('pre');
-predump.innerText = JSON.stringify(settings, null, 2);
-settingsPage().appendChild(predump);
+// var predump = document.createElement('pre');
+// predump.innerText = JSON.stringify(settings, null, 2);
+// getSettingsPage().appendChild(predump);
 /* END of: Small dump as pre text */
 
+export function getSettings()
+{
+    return default_settings;
+}
+
 // console.log(settings.ipfsGatewayAddress[settings.ipfsSelectedGatewayAddress]);
 
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
index 623166f..a24d77e 100644
--- a/src/js/ui/main.js
+++ b/src/js/ui/main.js
@@ -1,97 +1,38 @@
-import { makeElement } from "../arching-kaos-generator.js";
+import { aboutSection } from "./sections/aboutSection.js";
+import { akNodeInfoSection } from "./sections/akNodeInfoSection.js";
+import { chatSection } from "./sections/chatSection.js";
+import { commentsSection } from "./sections/commentsSection.js";
+import { filesSection } from "./sections/filesSection.js";
+import { mixtapesSection } from "./sections/mixtapesSection.js";
+import { newsSection } from "./sections/newsSection.js";
+import { myPageSection } from "./sections/myPageSection.js";
+import { notFoundSection } from "./sections/notFoundSection.js";
+import { radioSection } from "./sections/radioSection.js";
+import { settingsSection } from "./sections/settingsSection.js";
+import { statsSection } from "./sections/statsSection.js";
+import { stellarBalancesSection } from "./sections/stellarBalancesSection.js";
+import { stellarDataConfigSection } from "./sections/stellarDataConfigSection.js";
+import { stellarSection } from "./sections/stellarSection.js";
+import { welcomeSection } from "./sections/welcomeSection.js";
+import { zchainDataSection } from "./sections/zchainDataSection.js";
 
 export function mainSpawn()
 {
-    var scripts = [
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/aboutSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/akNodeInfoSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/chatSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/commentsSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/filesSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/mixtapesSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/myPageSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/newsSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/notFoundSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/radioSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/settingsSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/statsSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/stellarBalancesSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/stellarDataConfigSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/stellarSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/welcomeSection.js"
-        },
-        {
-            element:"script",
-            type:"module",
-            src:"./js/ui/sections/zchainDataSection.js"
-        }
-    ];
-
-    for ( var i = 0; i < scripts.length; i++ )
-    {
-        makeElement(scripts[i], document.querySelector('body'));
-    }
+    aboutSection();
+    akNodeInfoSection();
+    chatSection();
+    commentsSection();
+    filesSection();
+    mixtapesSection();
+    newsSection();
+    myPageSection();
+    notFoundSection();
+    radioSection();
+    settingsSection();
+    statsSection();
+    stellarBalancesSection();
+    stellarDataConfigSection();
+    stellarSection();
+    welcomeSection();
+    zchainDataSection();
 }
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
index 5c0e0bf..66f1d25 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -1,4 +1,3 @@
-import { makeElement } from "../arching-kaos-generator.js";
 import { headerSpawn } from "./header.js";
 import { menuSpawn } from "./menu.js";
 import { mainSpawn } from "./main.js";
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";