Visual improvements

17 files changed, 468 insertions, 0 deletions

diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js
new file mode 100644
index 0000000..933b6aa
--- /dev/null
+++ b/src/js/ui/sections/aboutSection.js
@@ -0,0 +1,29 @@
+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>
+                `
+};
+
+makeElement(aboutSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js
new file mode 100644
index 0000000..42223bd
--- /dev/null
+++ b/src/js/ui/sections/akNodeInfoSection.js
@@ -0,0 +1,12 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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'));
diff --git a/src/js/ui/sections/chatSection.js b/src/js/ui/sections/chatSection.js
new file mode 100644
index 0000000..e9edd29
--- /dev/null
+++ b/src/js/ui/sections/chatSection.js
@@ -0,0 +1,23 @@
+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%;"
+        }
+    ]
+};
+
+makeElement(chatSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js
new file mode 100644
index 0000000..7209079
--- /dev/null
+++ b/src/js/ui/sections/commentsSection.js
@@ -0,0 +1,12 @@
+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?)!"}
+    ]
+};
+
+makeElement(commentsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js
new file mode 100644
index 0000000..726fa5a
--- /dev/null
+++ b/src/js/ui/sections/filesSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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>
+            <h2>Modules</h2>
+            <span>&gt;</span>
+            <h2>Files</h2>
+        </div>
+        <em id="files-sec-not-found">No data found (yet?)!</em>
+                `
+};
+
+makeElement(filesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js
new file mode 100644
index 0000000..64280e4
--- /dev/null
+++ b/src/js/ui/sections/mixtapesSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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>
+            <h2>Modules</h2>
+            <span>&gt;</span>
+            <h2>Mixtapes</h2>
+        </div>
+        <em id="mixtapes-sec-not-found">No data found (yet?)!</em>
+                `
+};
+
+makeElement(mixtapesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js
new file mode 100644
index 0000000..0c79f06
--- /dev/null
+++ b/src/js/ui/sections/myPageSection.js
@@ -0,0 +1,24 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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">
+            <h3>My news</h3>
+            <em id="my-news-sec-not-found">No data found (yet?)!</em>
+        </div>
+        <div id="my-mixtapes">
+            <h3>My mixtapes</h3>
+            <em id="my-mixtapes-sec-not-found">No data found (yet?)!</em>
+        </div>
+        <div id="my-zchain">
+            <h3>My zchain</h3>
+            <em id="my-zchain-sec-not-found">No data found (yet?)!</em>
+        </div>
+    `
+};
+
+makeElement(myPageSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js
new file mode 100644
index 0000000..3b89cef
--- /dev/null
+++ b/src/js/ui/sections/newsSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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?)!"}
+    ]
+};
+
+makeElement(newsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js
new file mode 100644
index 0000000..0731101
--- /dev/null
+++ b/src/js/ui/sections/notFoundSection.js
@@ -0,0 +1,23 @@
+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'
+        }
+    ]
+};
+
+makeElement(notFoundSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js
new file mode 100644
index 0000000..5aaacc3
--- /dev/null
+++ b/src/js/ui/sections/radioSection.js
@@ -0,0 +1,23 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var radioSection = {
+    element: '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'));
diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js
new file mode 100644
index 0000000..febd094
--- /dev/null
+++ b/src/js/ui/sections/settingsSection.js
@@ -0,0 +1,44 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+import { settings } from "../../arching-kaos-web-ui-settings.js";
+
+var settingsSection = {
+    element: 'div',
+    id: "settings-section",
+    innerHTML: `
+        <div class="where-am-i">
+            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+            <span>&gt;</span>
+            <h2>🔧 Settings</h2>
+        </div>
+                `
+}
+
+makeElement(settingsSection, document.querySelector('.main'));
+
+var settingsPage = document.querySelector('#settings-section');
+
+// var scripts = [
+//     {
+//         element:"script",
+//         type: "module",
+//         src:"./js/arching-kaos-web-ui-settings.js"
+//     }
+// ];
+// 
+// for ( var i = 0; i < scripts.length; i++ )
+// {
+//     makeElement(scripts[i], document.querySelector('body'));
+// }
+
+var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true});
+
+if ( settings.stellar.scan )
+{
+    scanStellarNetworkForPeers();
+}
+
+if ( settings.ak.scan )
+{
+    ringlocalbell();
+    setInterval(ringlocalbell, 10*60*1000);
+}
diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js
new file mode 100644
index 0000000..1f2ede2
--- /dev/null
+++ b/src/js/ui/sections/statsSection.js
@@ -0,0 +1,29 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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: `
+            <h3>Networks</h3>
+            <details class="stellar-network">
+                <summary>Stellar</summary>
+            </details>
+            <details class="aknet-network">
+                <summary>Arching Kaos Experimental Instance</summary>
+            </details>
+            <details class="aknet-sblocks">
+                <summary>Arching Kaos SBlocks</summary>
+            </details>
+        `}
+    ]
+};
+
+makeElement(statsSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js
new file mode 100644
index 0000000..906a064
--- /dev/null
+++ b/src/js/ui/sections/stellarBalancesSection.js
@@ -0,0 +1,19 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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>
+            <h2>Stellar</h2>
+            <span>&gt;</span>
+            <h2>Balances</h2>
+        </div>
+        <em id="stellar-balances-not-found">No data found (yet?)!</em>
+        <table id="stellar-balances-table"></table>
+        `
+};
+
+makeElement(stellarBalancesSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js
new file mode 100644
index 0000000..f0690b3
--- /dev/null
+++ b/src/js/ui/sections/stellarDataConfigSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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>
+            <h2>Stellar</h2>
+            <span>&gt;</span>
+            <h2>Data</h2>
+        </div>
+        <em id="stellar-data-config-not-found">No data found (yet?)!</em>
+        `
+};
+
+makeElement(stellarDataConfigSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/stellarSection.js b/src/js/ui/sections/stellarSection.js
new file mode 100644
index 0000000..0a5341d
--- /dev/null
+++ b/src/js/ui/sections/stellarSection.js
@@ -0,0 +1,20 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var stellarSection = {
+    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'));
diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js
new file mode 100644
index 0000000..7b4d6be
--- /dev/null
+++ b/src/js/ui/sections/welcomeSection.js
@@ -0,0 +1,120 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+var welcomeSection = {
+    element: "div",
+    id: "welcome-section",
+    innerHTML: [
+        {
+            element : "div",
+            className:"where-am-i",
+            innerHTML: `
+
+            <img src="./img/logo.png" onclick="menusel({id:'#/welcome-section'})"/>
+            <span>&gt;</span>
+            <h2>Home</h2>
+        `
+        },
+        {
+            element: "p",
+            innerText: "Welcome to Arching Kaos project."
+        },
+        {
+            element: "div",
+            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>
+                <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)" style="background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;"></button>
+                <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
+            `
+        },
+        {
+            element : "h3",
+            innerText: "Render explicit zblock"
+        },
+        {
+            element: "div",
+            style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;",
+            innerHTML: `
+            <input id="search-field" type="text" name="search" placeholder="Enter a zblock hash"/>
+            <button onclick="seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])">Render</button>
+            `
+        },
+        {
+            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"
+                }
+            ]
+        }
+    ]
+};
+
+makeElement(welcomeSection, document.querySelector('.main'));
diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js
new file mode 100644
index 0000000..ba4bfde
--- /dev/null
+++ b/src/js/ui/sections/zchainDataSection.js
@@ -0,0 +1,18 @@
+import { makeElement } from "../../arching-kaos-generator.js";
+
+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>
+                        <h2>Explore</h2>
+                        <span>&gt;</span>
+                        <h2>zchains</h2>
+                    </div>
+                    <em id="zchain-data-sec-not-found">No data found (yet?)!</em>
+                    `
+};
+
+makeElement(zchainDataSection, document.querySelector('.main'));