Style update, refactoring with generator usage, bugfixes

7 files changed, 152 insertions, 110 deletions

diff --git a/src/js/app.js b/src/js/app.js
index f8fca5a..06ba891 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -36,12 +36,12 @@ progressPlaceholder.value = '0';
 
 progressPlaceholder.max++;
 
-if ( activeSettings.stellar.scan )
+if ( settings.stellar.scan )
 {
     scanStellarNetworkForPeers();
 }
 
-if ( activeSettings.ak.scan )
+if ( settings.ak.scan )
 {
     ringlocalbell();
     setInterval(ringlocalbell, 10*60*1000);
@@ -50,5 +50,34 @@ if ( activeSettings.ak.scan )
 //scanStellarNetworkForPeers();
 // setInterval(scanStellarNetworkForPeers, 60000);
 
+var root = {
+    head: document.querySelector('head'),
+    body: document.querySelector('body'),
+    html: document.querySelector('html')
+};
+
+var scripts = [
+    {
+        element:"script",
+        src:"./js/ui/mainLayout.js"
+    },
+    {
+        element:"script",
+        src:"./js/page-navigation.js"
+    },
+    {
+        element:"script",
+        src:"./js/page-projects.js"
+    },
+    {
+        element:"script",
+        src:"./js/menu.js"
+    }
+];
+
+for ( var i = 0; i < scripts.length; i++ )
+{
+    makeElement(scripts[i], root.body);
+}
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/arching-kaos-stellar-network.js b/src/js/arching-kaos-stellar-network.js
index b05770b..ca4d586 100644
--- a/src/js/arching-kaos-stellar-network.js
+++ b/src/js/arching-kaos-stellar-network.js
@@ -86,11 +86,11 @@ function getHolders(a=0){
 }
 
 function getStellarConfigurationVariableURL(stellarAddress){
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'accounts/'+
         stellarAddress+
         '/data/'+
-        activeSettings.stellar.variableNames.list[activeSettings.stellar.variableNames.active];
+        settings.stellar.variableNames.list[settings.stellar.variableNames.active];
 }
 
 function checkAddressForConfigurationVariable(stellarAddress) {
@@ -99,13 +99,28 @@ function checkAddressForConfigurationVariable(stellarAddress) {
     progressPlaceholder.value++;
 }
 
-var server = new StellarSdk.Server(activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active], {allowHttp:true});
+var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
 
-function steptwo(r){
-    const L = r;
-    putit(L);
+function steptwo(i){
+    var ta=document.querySelector("#stellar-balances-table");
+    for (b in i.balances) {
+        x = i.balances[b];
+        var amount = {
+            element:"tr",
+            innerHTML:[
+                { element:"td", innerText: x.balance },
+                { element:"td", innerText: ( x.asset_code && x.asset_code != "undefined" ? x.asset_code : 'XLM')}
+            ]
+        }
+        makeElement(amount, ta);
+        progressPlaceholder.max++;
+        progressPlaceholder.value++;
+        if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true;
+    }
 }
+
 function letme(a){
+    console.log("HERE WE GO");
     server.accounts()
     .accountId(a)
     .call()
@@ -114,24 +129,6 @@ function letme(a){
     );
 }
 
-function putit(i){
-    var ta=document.querySelector("#stellar-balances-table");
-    for (b in i.balances) {
-        var row = document.createElement("tr");
-        x = i.balances[b];
-        var amount = document.createElement("td");
-        var assetCode = document.createElement("td");
-        amount.innerText = x.balance;
-        assetCode.innerText = ( x.asset_code && x.asset_code != "undefined" ? x.asset_code : 'XLM');
-        row.appendChild(assetCode);
-        row.appendChild(amount);
-        ta.appendChild(row);
-        progressPlaceholder.max++;
-        progressPlaceholder.value++;
-        if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true;
-    }
-}
-
 async function fetchNodeInfoFromClientWallet(stellarAddress){
     archingKaosLog("Loading your profile...");
     fetch(getStellarConfigurationVariableURL(stellarAddress), {
@@ -142,56 +139,35 @@ async function fetchNodeInfoFromClientWallet(stellarAddress){
     }).then(response=>{
         if(response.ok){
             response.json().then(json=>{
-                var cnf = document.createElement("p");
-                cnf.innerText = atob(json.value);
-                document.querySelector('#stellar-data-config').appendChild(cnf);
+                var cnf = {
+                    element:"p",
+                    innerText:atob(json.value)
+                };
+                makeElement(cnf, document.querySelector('#stellar-data-config'));
                 progressPlaceholder.max++;
                 progressPlaceholder.value++;
                 getConfiguration(atob(json.value),stellarAddress);
-            })
+            });
         }
-    })
+    });
 }
 
 function putKeyToField(k){
-    let base = document.querySelector("#stellar-freigher-connect-address-button");
+    const address = k;
+    var base = document.querySelector("#stellar-freigher-connect-address-button");
+    base.innerText=address;
+    base.onclick='';
     stellar_connection_status = 1;
     checkAddressForConfigurationVariable(k);
-    base.innerText=k;
-    base.onclick='';
 }
 
-// TODO: Clarify which parts of here will be needed
-//function showStellar(){
-//    if (stellar_connection_status === 1 ){
-//        document.querySelector("#stellar-balances-link").hidden=false;
-//        document.querySelector("#stellar-data-config-link").hidden=false;
-//        document.querySelector("#arching-kaos-node-info-link").hidden=false;
-//        document.querySelector("#mypage-section-link").hidden=false;
-//    }
-//}
-// TODO: (follow up) eg below
-// Hide stellar stuff if no freighter
-//if (!window.freighterApi.isConnected()) {
-//    document.querySelector("#stellar-freigher-connect-address-button").hidden=true;
-//}
-//
-//function hideStellar(){
-//    document.querySelector("#stellar-balances-link").hidden=true;
-//    document.querySelector("#stellar-data-config-link").hidden=true;
-//    document.querySelector("#arching-kaos-node-info-link").hidden=true;
-//    document.querySelector("#mypage-section-link").hidden=true;
-//}
-//
-//hideStellar();
-
 // That's how we get the publicKey
 const retrievePublicKey = async () => {
     let publicKey = "";
     let error = "";
     try {
         publicKey = await window.freighterApi.getPublicKey()
-        .then(publicKey => {putKeyToField(publicKey);letme(publicKey)});
+        .then((publicKey) => {putKeyToField(publicKey);letme(publicKey)});
     } catch (e) {
         error = e;
     }
diff --git a/src/js/arching-kaos-tools.js b/src/js/arching-kaos-tools.js
index 0e35c7f..0f62fd5 100644
--- a/src/js/arching-kaos-tools.js
+++ b/src/js/arching-kaos-tools.js
@@ -460,7 +460,7 @@ function crawlSchain(sblockHash){
         zchainLoadingStatus[sblockHash] = {loading : "started"};
         zchainsFound++;
         zchains[sblockHash] = [];
-        var url=activeSettings.localAPI+'/v0/sblock/'+sblockHash;
+        var url=settings.localAPI+'/v0/sblock/'+sblockHash;
         archingKaosLog("Fetching "+sblockHash+" sblock...");
         archingKaosFetchJSON(url, sblockExpanding, [sblockHash]);
         archingKaosLog("Fetching "+sblockHash+" sblock... Done!");
@@ -485,21 +485,21 @@ function checkPeers(json){
 
 function checkLocalPeers(){
     archingKaosLog("🔎 Querying for peers...");
-    var url=activeSettings.localAPI+'/v0/peers';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/peers';
     archingKaosFetchJSON(url, checkPeers);
     archingKaosLog("Querying for peers... Done!");
 }
 
 function checkLocalNodeInfo(){
     archingKaosLog("Ringing local bell...");
-    var url=activeSettings.localAPI+'/v0/node_info';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/node_info';
     archingKaosFetchJSON(url, checkIfZchainAndProceed, ["localnode"]);
     archingKaosLog("Ringing local bell... Done!");
 }
 
 function checkLocalSchain(){
     archingKaosLog("Querying for schain...");
-    var url=activeSettings.localAPI+'/v0/slatest';
+    var url=settings.ak.connect.list[settings.ak.connect.active]+'/v0/slatest';
     archingKaosFetchJSON(url, initCrawlSchain);
     archingKaosLog("Querying for schain... Done!");
 }
diff --git a/src/js/arching-kaos-web-ui-settings.js b/src/js/arching-kaos-web-ui-settings.js
index 802e770..e170f4e 100644
--- a/src/js/arching-kaos-web-ui-settings.js
+++ b/src/js/arching-kaos-web-ui-settings.js
@@ -62,7 +62,7 @@ var default_settings = {
             ],
             active: 0
         },
-        scan: true
+        scan: false
     },
     ak: {
         settings : {
@@ -74,7 +74,7 @@ var default_settings = {
                 'http://[fc59:6076:6299:6776:c13d:fbb2:1226:ead0]:8610',
                 'http://api.aknet.z.kaotisk-hund.com/'
             ],
-            active: 0
+            active: 1
         },
         scan: false
     }
@@ -89,11 +89,11 @@ var default_settings = {
 // if ( window.localStorage.getItem("ak-settings") === null ) {
 //    window.localStorage.setItem("ak-settings", JSON.stringify(default_settings));
 // }
-// var activeSettings = JSON.parse(window.localStorage.getItem("ak-settings"));
+// var settings = JSON.parse(window.localStorage.getItem("ak-settings"));
 //
 // All comments above are replaced by temporary initializing without saving
 // anything in the localStorage
-var activeSettings = default_settings;
+var settings = default_settings;
 
 // Also, remove any settings stored from previous runs
 window.localStorage.removeItem("ak-settings");
@@ -104,17 +104,17 @@ window.localStorage.removeItem("ak-settings");
 if (( location.origin === "http://z.kaotisk-hund.com") ||
     ( location.origin === "http://gw.ipfs.z.kaotisk-hund.com") ||
     ( location.origin === "http://[fc59:6076:6299:6776:c13d:fbb2:1226:ead0]")) {
-    activeSettings.ipfsSelectedGatewayAddress = 1;
-    activeSettings.horizonSelectedAddress = 1;
+    settings.ipfs.gateway.active = 1;
+    settings.stellar.horizon.active = 1;
 } else if ( location.origin === "http://localhost:3000" ) {
-    activeSettings.ipfsSelectedGatewayAddress = 2;
+    settings.ipfs.gateway.active = 2;
 } else {
-    activeSettings.ipfsSelectedGatewayAddress = 0;
+    settings.ipfs.gateway.active = 0;
 }
 
 var settingsPage = document.querySelector('#settings-section');
 
-var settingsKeys = Object.keys(activeSettings);
+var settingsKeys = Object.keys(settings);
 
 function renderCheck(container, value){
     var checkbox = document.createElement('input');
@@ -161,16 +161,10 @@ function settingPlaceToDOM(key, value){
         value.map((v)=>{
             if (v.constructor.name === "Object"){
                 Object.keys(v).forEach((value)=>{
-                    var li = document.createElement("option");
-                    li.innerText = value + ': ' + v[value];
-                    li.value = value;
-                    ul.appendChild(li);
+                    makeElement({element:"option", innerText:value + ': ' + v[value], value: value}, ul);
                 });
             } else {
-                var li = document.createElement("option");
-                li.innerText = v;
-                li.value = v;
-                ul.appendChild(li);
+                makeElement({element:"option", innerText:v, value: v}, ul);
             }
         });
         container.appendChild(ul);
@@ -178,37 +172,25 @@ function settingPlaceToDOM(key, value){
         console.log("KEY: "+key);
         switch (key){
             case 'ipfs':
-                var label = document.createElement('summary');
-                label.innerText = "Gateway";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"IPFS" }, container);
                 renderList(container, value.gateway);
 
                 break;
             case 'stellar':
-                var label = document.createElement('summary');
-                label.innerText = "Stellar";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Asset" }, container);
                 renderAssets(container, value.asset);
 
-                var label = document.createElement('summary');
-                label.innerText = "Variable Names";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Variable Names" }, container);
                 renderList(container, value.variableNames);
 
-                var label = document.createElement('summary');
-                label.innerText = "Horizon";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Horizon" }, container);
                 renderList(container, value.horizon);
 
-                var label = document.createElement('summary');
-                label.innerText = "Scan";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Scan" }, container);
                 renderCheck(container, value.scan);
                 break;
             case 'ak':
-                var label = document.createElement('summary');
-                label.innerText = "Connect";
-                container.appendChild(label);
+                makeElement({ element:"summary",innerText:"Connect" }, container);
                 renderList(container, value.connect);
                 break;
             default:
@@ -223,17 +205,17 @@ function settingPlaceToDOM(key, value){
 
 settingsKeys.forEach(
     (value) => {
-        settingPlaceToDOM(value, activeSettings[value]);
+        settingPlaceToDOM(value, settings[value]);
     }
 );
 
 /* Small dump as pre text */
 var predump = document.createElement('pre');
-predump.innerText = JSON.stringify(activeSettings, null, 2);
+predump.innerText = JSON.stringify(settings, null, 2);
 settingsPage.appendChild(predump);
 /* END of: Small dump as pre text */
 
-// console.log(activeSettings.ipfsGatewayAddress[activeSettings.ipfsSelectedGatewayAddress]);
+// console.log(settings.ipfsGatewayAddress[settings.ipfsSelectedGatewayAddress]);
 
 // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4
 // @license-end
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js
new file mode 100644
index 0000000..a639d94
--- /dev/null
+++ b/src/js/ui/footer.js
@@ -0,0 +1,41 @@
+var footer = {
+    element:"div",
+    id:"footer",
+    innerHTML:[
+        {
+            element:"div",
+            innerHTML:[
+                {element:"p", innerText:"Arching Kaos 2019-2024"},
+                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"},
+                {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"},
+                {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"},
+            ]
+        },
+        {
+            element:"span",
+            innerText:"::"
+        },
+
+        {
+            element:"div",
+            innerHTML:[
+                {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"},
+            ]
+        },
+        {
+            element:"span",
+            innerText:"::"
+        },
+        {
+            element:"div",
+            innerHTML:[
+                {
+                    element:"p",
+                    innerHTML:"Fra <a target=\"_blank\" href=\"https://www.kaotisk-hund.com\">Kaotisk Hund</a> med kjærlighet. <a href=\"bitcoin:BC1QYL9K5KDLSLJAED9PZCJJX0CPGZVY9LWY427SD4\">Donate</a>"
+                }
+            ]
+        }
+    ]
+};
+
+makeElement(footer, document.querySelector('.footer'));
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
new file mode 100644
index 0000000..f7adeae
--- /dev/null
+++ b/src/js/ui/mainLayout.js
@@ -0,0 +1,14 @@
+var scripts = [
+    {
+        element:"script",
+        src:"./js/ui/header.js"
+    },
+    {
+        element:"script",
+        src:"./js/ui/footer.js"
+    }
+]
+for ( var i = 0; i < scripts.length; i++ )
+{
+    makeElement(scripts[i], root.body);
+}
diff --git a/src/js/url-generators.js b/src/js/url-generators.js
index 6158b6f..d0739dc 100644
--- a/src/js/url-generators.js
+++ b/src/js/url-generators.js
@@ -9,33 +9,33 @@
  * URL generators
  *
  * This file contains functions that generate URL
- * based on the activeSettings.
+ * based on the settings.
  *
  * Apparently, we need `arching-kaos-web-ui-settings` to be loaded first
  *
  */
 
 function getIPNSURL(ipnsKey){
-    return activeSettings.ipfs.gateway.list[activeSettings.ipfs.gateway.active]+'ipns/'+ipnsKey;
+    return settings.ipfs.gateway.list[settings.ipfs.gateway.active]+'ipns/'+ipnsKey;
 }
 
 function getIPFSURL(ipfsHash){
-    return activeSettings.ipfs.gateway.list[activeSettings.ipfs.gateway.active]+'ipfs/'+ipfsHash;
+    return settings.ipfs.gateway.list[settings.ipfs.gateway.active]+'ipfs/'+ipfsHash;
 }
 
 function getHoldersOfActiveAssetURL(){
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'accounts?asset='+
-        activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].code+
+        settings.stellar.asset.list[settings.stellar.asset.active].code+
         ':'+
-        activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].issuer+
+        settings.stellar.asset.list[settings.stellar.asset.active].issuer+
         '&limit=200';
 }
 
 function getTrustlinesURL(code=null, issuer=null){
-    var code = (code === null)? activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].code : code;
-    var issuer = (issuer === null) ? activeSettings.stellar.asset.list[activeSettings.stellar.asset.active].issuer : issuer;
-    return activeSettings.stellar.horizon.list[activeSettings.stellar.horizon.active]+
+    var code = (code === null)? settings.stellar.asset.list[settings.stellar.asset.active].code : code;
+    var issuer = (issuer === null) ? settings.stellar.asset.list[settings.stellar.asset.active].issuer : issuer;
+    return settings.stellar.horizon.list[settings.stellar.horizon.active]+
         'assets?asset_code='+code+
         '&asset_issuer='+issuer;
 }