From dcc6f35266de1f56d7e9536311f0ff56b57c0fdc Mon Sep 17 00:00:00 2001 From: kaotisk Date: Sat, 30 Nov 2024 00:33:20 +0200 Subject: More refactoring and fixing a bug on spa-router --- src/js/arching-kaos-spa-router.js | 24 ++-- src/js/arching-kaos-web-ui-settings.js | 31 ++--- src/js/ui/main.js | 127 +++++------------- src/js/ui/mainLayout.js | 1 - src/js/ui/sections/aboutSection.js | 55 ++++---- src/js/ui/sections/akNodeInfoSection.js | 15 ++- src/js/ui/sections/chatSection.js | 43 +++--- src/js/ui/sections/commentsSection.js | 21 +-- src/js/ui/sections/filesSection.js | 15 ++- src/js/ui/sections/mixtapesSection.js | 15 ++- src/js/ui/sections/myPageSection.js | 15 ++- src/js/ui/sections/newsSection.js | 21 +-- src/js/ui/sections/notFoundSection.js | 43 +++--- src/js/ui/sections/radioSection.js | 45 ++++--- src/js/ui/sections/settingsSection.js | 39 +++--- src/js/ui/sections/statsSection.js | 21 +-- src/js/ui/sections/stellarBalancesSection.js | 15 ++- src/js/ui/sections/stellarDataConfigSection.js | 15 ++- src/js/ui/sections/stellarSection.js | 39 +++--- src/js/ui/sections/welcomeSection.js | 175 +++++++++++++------------ src/js/ui/sections/zchainDataSection.js | 15 ++- 21 files changed, 395 insertions(+), 395 deletions(-) (limited to 'src') 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: ` -
- - > -

About

-
-

Arching Kaos is a project about radio, music, communications and decentralization.

-

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).

-

You can see the zchains appearing in "zchain" and logs of the process on "Logs"

-

Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.

-

Furthermore, if you are using Freighter extension you can additionally see:

-
    -
  1. Your balances on your wallet
    2. -
  2. Your configuration IPNS address (if any)
    3. -
  3. Your Arching Kaos configuration (if any)
    4. -
  4. Your zchain (...)
    5. -
  5. Your posted newsfeed (...)
    6. -
-

Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.

- ` -}; +export function aboutSection() +{ + var aboutSection = { + element: "div", + hidden: true, + id:"about-section", + innerHTML: ` +
+ + > +

About

+
+

Arching Kaos is a project about radio, music, communications and decentralization.

+

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).

+

You can see the zchains appearing in "zchain" and logs of the process on "Logs"

+

Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible.

+

Furthermore, if you are using Freighter extension you can additionally see:

+
    +
  1. Your balances on your wallet
    2. +
  2. Your configuration IPNS address (if any)
    3. +
  3. Your Arching Kaos configuration (if any)
    4. +
  4. Your zchain (...)
    5. +
  5. Your posted newsfeed (...)
    6. +
+

Finally, on the stats page you can find people that are participating over the Stellar Network, using the ARCHINGKAOS token/asset/coin.

+ ` + }; -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: `

Node Info

No data found (yet?)! ` -}; + }; -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: `
> @@ -13,6 +15,7 @@ var filesSection = {
No data found (yet?)! ` -}; + }; -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: `
> @@ -13,6 +15,7 @@ var mixtapesSection = {
No data found (yet?)! ` -}; + }; -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: `

My page

@@ -19,6 +21,7 @@ var myPageSection = { No data found (yet?)!
` -}; + }; -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: ` >

Modules

>

News

` }, - { 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: ` >

Explore

>

Stats

`}, - { element: "div", className: "available-networks", innerHTML: ` + { element: "div", className: "available-networks", innerHTML: `

Networks

Stellar @@ -23,7 +25,8 @@ var statsSection = { Arching Kaos SBlocks
`} - ] -}; + ] + }; -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: `
> @@ -14,6 +16,7 @@ var stellarBalancesSection = { No data found (yet?)!
` -}; + }; -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: `
> @@ -13,6 +15,7 @@ var stellarDataConfigSection = {
No data found (yet?)! ` -}; + }; -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: ` @@ -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: `
> @@ -13,6 +15,7 @@ var zchainDataSection = {
No data found (yet?)! ` -}; + }; -makeElement(zchainDataSection, document.querySelector('.main')); + makeElement(zchainDataSection, document.querySelector('.main')); +} -- cgit v1.2.3