From ad0f59fbc2dea546d1e33e2f4ee515827e698eed Mon Sep 17 00:00:00 2001 From: kaotisk Date: Tue, 3 Dec 2024 12:15:31 +0200 Subject: Separating content from layout --- src/js/ui/sections/aboutSection.js | 19 ++- src/js/ui/sections/akNodeInfoSection.js | 9 +- src/js/ui/sections/commentsSection.js | 9 +- src/js/ui/sections/filesSection.js | 9 +- src/js/ui/sections/mixtapesSection.js | 9 +- src/js/ui/sections/myPageSection.js | 13 +- src/js/ui/sections/newsSection.js | 9 +- src/js/ui/sections/notFoundSection.js | 29 +++-- src/js/ui/sections/settingsSection.js | 18 +-- src/js/ui/sections/statsSection.js | 15 ++- src/js/ui/sections/stellarBalancesSection.js | 11 +- src/js/ui/sections/stellarDataConfigSection.js | 9 +- src/js/ui/sections/welcomeSection.js | 160 +++++++++++++------------ src/js/ui/sections/zchainDataSection.js | 9 +- 14 files changed, 215 insertions(+), 113 deletions(-) (limited to 'src/js/ui/sections') diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js index 902783d..6a01c44 100644 --- a/src/js/ui/sections/aboutSection.js +++ b/src/js/ui/sections/aboutSection.js @@ -18,12 +18,11 @@ export function aboutSection() { element: "h2", innerText:"About"} ] }; - var aboutSection = { + + var content = { element: "div", - hidden: true, - id:"about-section", + className: "content", innerHTML: [ - whereAmI, { element: "p", innerText:"Arching Kaos is a project about radio, music, communications and decentralization."}, { element: "p", innerText:'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).'}, { element: "p", innerText:'You can see the zchains appearing in "zchain" and logs of the process on "Logs"'}, @@ -37,7 +36,17 @@ export function aboutSection() { element:"li", innerText:"Your posted newsfeed (...)"} ]}, { element:"p", innerText:"Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin."} - ] + ] + }; + + var aboutSection = { + element: "div", + hidden: true, + id:"about-section", + innerHTML: [ + whereAmI, + content + ] }; makeElement(aboutSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/akNodeInfoSection.js b/src/js/ui/sections/akNodeInfoSection.js index df28d6a..63f2a0a 100644 --- a/src/js/ui/sections/akNodeInfoSection.js +++ b/src/js/ui/sections/akNodeInfoSection.js @@ -20,12 +20,19 @@ export function akNodeInfoSection() { element: "h2", innerText:"Node Info" } ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"} + ] + }; var akNodeInfoSection = { element: "div", id: "arching-kaos-node-info", innerHTML: [ whereAmI, - { element: "em", id:"node-info-not-found", innerText:"No data found (yet?)!"} + content ] }; makeElement(akNodeInfoSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js index ba190ac..a0ee7ad 100644 --- a/src/js/ui/sections/commentsSection.js +++ b/src/js/ui/sections/commentsSection.js @@ -18,12 +18,19 @@ export function commentsSection() { element: "h2", innerText:"Comments"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; var commentsSection = { element: 'div', id: 'comments-section', innerHTML: [ whereAmI, - { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} + content ] }; makeElement(commentsSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js index 994c37e..a8147dc 100644 --- a/src/js/ui/sections/filesSection.js +++ b/src/js/ui/sections/filesSection.js @@ -20,12 +20,19 @@ export function filesSection() { element: "h2", innerText:"Files"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; var filesSection = { element: 'div', id: "files-section", innerHTML: [ whereAmI, - { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"} + content ] }; diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js index a450914..4848f78 100644 --- a/src/js/ui/sections/mixtapesSection.js +++ b/src/js/ui/sections/mixtapesSection.js @@ -18,12 +18,19 @@ export function mixtapesSection() { element: "h2", innerText:"Mixtapes"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"} + ] + }; var mixtapesSection = { element: "div", id: "mixtapes-section", innerHTML: [ whereAmI, - { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"} + content ] }; makeElement(mixtapesSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/myPageSection.js b/src/js/ui/sections/myPageSection.js index 4976691..5dbd2ab 100644 --- a/src/js/ui/sections/myPageSection.js +++ b/src/js/ui/sections/myPageSection.js @@ -20,11 +20,10 @@ export function myPageSection() { element: "h2", innerText: "My Page" } ] }; - var myPageSection = { + var content = { element: "div", - id: "mypage-section", + className: "content", innerHTML: [ - whereAmI, { element: "h2", innerText: "My page" }, { element: "button", id: "stellar-freigher-connect-address-button", onclick:"connect()", innerText:"Connect with Freighter wallet" }, { element: "div", id:"my-news", innerHTML:[ @@ -41,6 +40,14 @@ export function myPageSection() ]} ] }; + var myPageSection = { + element: "div", + id: "mypage-section", + innerHTML: [ + whereAmI, + content + ] + }; makeElement(myPageSection, document.querySelector('.main')); } diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js index 6875dd6..983a031 100644 --- a/src/js/ui/sections/newsSection.js +++ b/src/js/ui/sections/newsSection.js @@ -20,12 +20,19 @@ export function newsSection() { element: "h2", innerText:"News"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} + ] + }; var newsSection = { element: 'div', id: 'news-section', innerHTML: [ whereAmI, - { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} + content ] }; makeElement(newsSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/notFoundSection.js b/src/js/ui/sections/notFoundSection.js index 3e3d000..46fc421 100644 --- a/src/js/ui/sections/notFoundSection.js +++ b/src/js/ui/sections/notFoundSection.js @@ -9,15 +9,19 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function notFoundSection() { - var notFoundSection = { - element: 'div', - id: 'not-found-section', - hidden: true, + var whereAmI = { + element: "div", + className: "where-am-i", + innerHTML: [ + { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"Not found"} + ] + }; + var content = { + element: "div", + className: "content", innerHTML: [ - { - element: 'h2', - innerText: 'Not found' - }, { element: 'p', innerText: 'Soft 404' @@ -28,6 +32,15 @@ export function notFoundSection() } ] }; + var notFoundSection = { + element: 'div', + id: 'not-found-section', + hidden: true, + innerHTML: [ + whereAmI, + content + ] + }; makeElement(notFoundSection, document.querySelector('.main')); } diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js index e2e2fe3..8d8be0f 100644 --- a/src/js/ui/sections/settingsSection.js +++ b/src/js/ui/sections/settingsSection.js @@ -14,18 +14,20 @@ debugLog(settings); export function settingsSection() { + var whereAmI = { + 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"} + ] + }; 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"} - ] - } + whereAmI ] }; diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js index 115cd68..c88bfe5 100644 --- a/src/js/ui/sections/statsSection.js +++ b/src/js/ui/sections/statsSection.js @@ -20,11 +20,10 @@ export function statsSection() { element: "h2", innerText:"Stats"} ] }; - var statsSection = { - element: 'div', - id: "stats-section", + var content = { + element : "div", + className: "content", innerHTML: [ - whereAmI, { element: "div", className: "available-networks", innerHTML: [ { element: "h3", innerText: "Networks" }, { element: "details", className: "stellar-network", innerHTML:[ @@ -39,6 +38,14 @@ export function statsSection() ]} ] }; + var statsSection = { + element: 'div', + id: "stats-section", + innerHTML: [ + whereAmI, + content + ] + }; makeElement(statsSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/stellarBalancesSection.js b/src/js/ui/sections/stellarBalancesSection.js index 9b68b5a..fd07dde 100644 --- a/src/js/ui/sections/stellarBalancesSection.js +++ b/src/js/ui/sections/stellarBalancesSection.js @@ -20,13 +20,20 @@ export function stellarBalancesSection() { element: "h2", innerText: "Balances" } ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id: "stellar-balances-not-found", innerText: "No data found (yet?)!" }, + { element: "table", id:"stellar-balances-table" } + ] + }; var stellarBalancesSection = { element: "div", id: "stellar-balances", innerHTML: [ whereAmI, - { element: "em", id: "stellar-balances-not-found", innerText: "No data found (yet?)!" }, - { element: "table", id:"stellar-balances-table" } + content ] }; makeElement(stellarBalancesSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js index 268051f..a7816a1 100644 --- a/src/js/ui/sections/stellarDataConfigSection.js +++ b/src/js/ui/sections/stellarDataConfigSection.js @@ -20,12 +20,19 @@ export function stellarDataConfigSection() { element: "h2", innerText:"Data"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" } + ] + }; var stellarDataConfigSection = { element: "div", id: "stellar-data-config", innerHTML: [ whereAmI, - { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" } + content ] }; makeElement(stellarDataConfigSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js index 0a97616..31f7d4b 100644 --- a/src/js/ui/sections/welcomeSection.js +++ b/src/js/ui/sections/welcomeSection.js @@ -88,6 +88,89 @@ var renderForm = { ] }; +var content = { + element : "div", + className: "content", + innerHTML: [ + 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" + } + ] + } + ] +}; + export function welcomeSection() { var welcomeSection = { @@ -95,82 +178,7 @@ export function welcomeSection() 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" - } - ] - } + content ] }; diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js index 7bedffa..37ef98e 100644 --- a/src/js/ui/sections/zchainDataSection.js +++ b/src/js/ui/sections/zchainDataSection.js @@ -20,12 +20,19 @@ export function zchainDataSection() { element: "h2", innerText:"zchains"} ] }; + var content = { + element: "div", + className: "content", + innerHTML: [ + { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" } + ] + }; var zchainDataSection = { element: "div", id:"zchain-data-section", innerHTML: [ whereAmI, - { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" } + content ] }; makeElement(zchainDataSection, document.querySelector('.main')); -- cgit v1.2.3