From deb8d4969e30f9c54deadf52dc87fcc5982bc076 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Sat, 30 Nov 2024 16:45:38 +0200 Subject: Refactoring final --- src/js/ui/sections/aboutSection.js | 45 ++++++++------- src/js/ui/sections/commentsSection.js | 1 - src/js/ui/sections/filesSection.js | 25 +++++---- src/js/ui/sections/mixtapesSection.js | 24 ++++---- src/js/ui/sections/newsSection.js | 20 ++++--- src/js/ui/sections/statsSection.js | 44 ++++++++------- src/js/ui/sections/stellarDataConfigSection.js | 26 +++++---- src/js/ui/sections/welcomeSection.js | 78 +++++++++++++++++++------- src/js/ui/sections/zchainDataSection.js | 26 +++++---- 9 files changed, 177 insertions(+), 112 deletions(-) (limited to 'src/js/ui') diff --git a/src/js/ui/sections/aboutSection.js b/src/js/ui/sections/aboutSection.js index 3ab4d1e..902783d 100644 --- a/src/js/ui/sections/aboutSection.js +++ b/src/js/ui/sections/aboutSection.js @@ -9,30 +9,35 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function aboutSection() { + 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:"About"} + ] + }; 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.

- ` + 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"'}, + { element: "p", innerText:"Note that to participate you will need to set up your Arching Kaos set, which is not so convinient yet but possible."}, + { element: "p", innerText:"Furthermore, if you are using Freighter extension you can additionally see:"}, + { element: "ol", innerHTML: [ + { element:"li", innerText:"Your balances on your wallet"}, + { element:"li", innerText:"Your configuration IPNS address (if any)"}, + { element:"li", innerText:"Your Arching Kaos configuration (if any)"}, + { element:"li", innerText:"Your zchain (...)"}, + { 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."} + ] }; makeElement(aboutSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/commentsSection.js b/src/js/ui/sections/commentsSection.js index 00ec8fe..ba190ac 100644 --- a/src/js/ui/sections/commentsSection.js +++ b/src/js/ui/sections/commentsSection.js @@ -26,7 +26,6 @@ export function commentsSection() { element: "em", id:"comments-sec-not-found", innerText: "No data found (yet?)!"} ] }; - makeElement(commentsSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/filesSection.js b/src/js/ui/sections/filesSection.js index 7a65187..994c37e 100644 --- a/src/js/ui/sections/filesSection.js +++ b/src/js/ui/sections/filesSection.js @@ -9,19 +9,24 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function filesSection() { + 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:"Modules"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"Files"} + ] + }; var filesSection = { element: 'div', id: "files-section", - innerHTML: ` -
- - > -

Modules

- > -

Files

-
- No data found (yet?)! - ` + innerHTML: [ + whereAmI, + { element: "em", id:"files-sec-not-found", innerText: "No data found (yet?)!"} + ] }; makeElement(filesSection, document.querySelector('.main')); diff --git a/src/js/ui/sections/mixtapesSection.js b/src/js/ui/sections/mixtapesSection.js index 6710c11..a450914 100644 --- a/src/js/ui/sections/mixtapesSection.js +++ b/src/js/ui/sections/mixtapesSection.js @@ -9,21 +9,23 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function mixtapesSection() { + 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:"Mixtapes"} + ] + }; var mixtapesSection = { element: "div", id: "mixtapes-section", - innerHTML: ` -
- - > -

Modules

- > -

Mixtapes

-
- No data found (yet?)! - ` + innerHTML: [ + whereAmI, + { element: "em", id:"mixtapes-sec-not-found", innerText:"No data found (yet?)!"} + ] }; - makeElement(mixtapesSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/newsSection.js b/src/js/ui/sections/newsSection.js index 51cb0de..6875dd6 100644 --- a/src/js/ui/sections/newsSection.js +++ b/src/js/ui/sections/newsSection.js @@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function newsSection() { + 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:"Modules"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"News"} + ] + }; var newsSection = { element: 'div', id: 'news-section', innerHTML: [ - { element: "div", className: "where-am-i", innerHTML: ` - - > -

Modules

- > -

News

- ` }, + whereAmI, { element: "em", id:"news-sec-not-found", innerText: "No data found (yet?)!"} ] }; - makeElement(newsSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/statsSection.js b/src/js/ui/sections/statsSection.js index 8d99448..115cd68 100644 --- a/src/js/ui/sections/statsSection.js +++ b/src/js/ui/sections/statsSection.js @@ -9,32 +9,36 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function statsSection() { + 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:"Explore"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"Stats"} + ] + }; var statsSection = { element: 'div', id: "stats-section", innerHTML: [ - { element: "div", className: "where-am-i", innerHTML: ` - - > -

Explore

- > -

Stats

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

Networks

-
- Stellar -
-
- Arching Kaos Experimental Instance -
-
- Arching Kaos SBlocks -
- `} + whereAmI, + { element: "div", className: "available-networks", innerHTML: [ + { element: "h3", innerText: "Networks" }, + { element: "details", className: "stellar-network", innerHTML:[ + { element:"summary", innerText:"Stellar"} + ]}, + { element: "details", className: "aknet-network", innerHTML:[ + { element:"summary", innerText:"Arching Kaos Experimental Instance"} + ]}, + { element: "details", className: "aknet-sblocks", innerHTML:[ + { element:"summary", innerText:"Arching Kaos SBlocks"} + ]} + ]} ] }; - makeElement(statsSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/stellarDataConfigSection.js b/src/js/ui/sections/stellarDataConfigSection.js index 8deff87..268051f 100644 --- a/src/js/ui/sections/stellarDataConfigSection.js +++ b/src/js/ui/sections/stellarDataConfigSection.js @@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function stellarDataConfigSection() { + 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:"Stellar"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"Data"} + ] + }; var stellarDataConfigSection = { element: "div", id: "stellar-data-config", - innerHTML: ` -
- - > -

Stellar

- > -

Data

-
- No data found (yet?)! - ` + innerHTML: [ + whereAmI, + { element: "em", id:"stellar-data-config-not-found", innerText:"No data found (yet?)!" } + ] }; - makeElement(stellarDataConfigSection, document.querySelector('.main')); } // @license-end diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js index c382050..0a97616 100644 --- a/src/js/ui/sections/welcomeSection.js +++ b/src/js/ui/sections/welcomeSection.js @@ -8,14 +8,13 @@ import { makeElement } from "../../arching-kaos-generator.js"; var whereAmI = { - element : "div", - className:"where-am-i", - innerHTML: ` - - - > -

Home

- ` + element: "div", + className: "where-am-i", + innerHTML: [ + { element: "img", src:"./img/logo.png", onclick:"menusel({id:'#/welcome-section'})"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"Home"} + ] }; var greeting = { @@ -26,13 +25,43 @@ var greeting = { var homeGrid = { element: "div", id: "home-grid", - innerHTML: ` - - - - - - ` + innerHTML: [ + { + element:"button", + className:"menu-clickable", + id:"#/mixtapes-section", + onclick:"menusel(this)", + style:"background-image: url(img/mixtapes-logo.png); background-repeat: round;" + }, + { + element:"button", + className:"menu-clickable", + id:"#/news-section", + onclick:"menusel(this)", + style:"background-image: url(img/news-logo.png); background-repeat: round;" + }, + { + element:"button", + className:"menu-clickable", + id:"#/chat-section", + onclick:"menusel(this)", + style:"background-image: url(img/chat-logo.png); background-repeat: round;" + }, + { + element:"button", + className:"menu-clickable", + id:"#/radio-section", + onclick:"menusel(this)", + style:"background-image: url(img/radio-logo.png); background-repeat: round; background-size: cover;" + }, + { + element:"button", + className:"menu-clickable", + id:"#/stats-section", + onclick:"menusel(this)", + innerText:"Stats" + } + ] }; var renderTitle = { @@ -43,10 +72,20 @@ var renderTitle = { var renderForm = { element: "div", style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;", - innerHTML: ` - - - ` + innerHTML: [ + { + element: "input", + id:"search-field", + type:"text", + name:"search", + placeholder:"Enter a zblock hash" + }, + { + element:"button", + onclick:"seekZblock(this.parentElement.querySelector('#search-field').value, ['search', false])", + innerText:"Render" + } + ] }; export function welcomeSection() @@ -118,7 +157,6 @@ export function welcomeSection() } ] }, - { element: "details", id: "logs-area", diff --git a/src/js/ui/sections/zchainDataSection.js b/src/js/ui/sections/zchainDataSection.js index 95f8518..7bedffa 100644 --- a/src/js/ui/sections/zchainDataSection.js +++ b/src/js/ui/sections/zchainDataSection.js @@ -9,21 +9,25 @@ import { makeElement } from "../../arching-kaos-generator.js"; export function zchainDataSection() { + 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:"Explore"}, + { element: "span", innerText:">"}, + { element: "h2", innerText:"zchains"} + ] + }; var zchainDataSection = { element: "div", id:"zchain-data-section", - innerHTML: ` -
- - > -

Explore

- > -

zchains

-
- No data found (yet?)! - ` + innerHTML: [ + whereAmI, + { element: "em", id:"zchain-data-sec-not-found", innerText:"No data found (yet?)!" } + ] }; - makeElement(zchainDataSection, document.querySelector('.main')); } // @license-end -- cgit v1.2.3