diff options
Diffstat (limited to 'src/js')
22 files changed, 555 insertions, 21 deletions
diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js index a639d94..a611b59 100644 --- a/src/js/ui/footer.js +++ b/src/js/ui/footer.js @@ -1,3 +1,5 @@ +import { makeElement } from "../arching-kaos-generator.js"; + var footer = { element:"div", id:"footer", diff --git a/src/js/ui/header.js b/src/js/ui/header.js index 51d48f6..18d8c2e 100644 --- a/src/js/ui/header.js +++ b/src/js/ui/header.js @@ -1,3 +1,5 @@ +import { makeElement } from "../arching-kaos-generator.js"; + var header = { element: "div", id: 'header', @@ -7,13 +9,8 @@ var header = { {element: "img", src:"./img/header-logo.png" } ]}, { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"} - ] + ], + onclick: 'menusel({id:"#/welcome-section"});' } -function goHomeAction() -{ - menusel({id:"#/welcome-section"}); -} makeElement(header, document.querySelector('#logo-title-placeholder')); - -document.querySelector('#logo-button').addEventListener("click", goHomeAction); diff --git a/src/js/ui/main.js b/src/js/ui/main.js index e69de29..f57be59 100644 --- a/src/js/ui/main.js +++ b/src/js/ui/main.js @@ -0,0 +1,34 @@ +import { makeElement } from "../arching-kaos-generator.js"; + +var scripts = [ + { + element:"script", + type:"module", + src:"./js/ui/sections/welcomeSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/chatSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/notFoundSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/settingsSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/radioSection.js" + } +]; + +for ( var i = 0; i < scripts.length; i++ ) +{ + makeElement(scripts[i], document.querySelector('body')); +} diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js index 2c76177..6201e2b 100644 --- a/src/js/ui/mainLayout.js +++ b/src/js/ui/mainLayout.js @@ -1,22 +1,28 @@ +import { makeElement } from "../arching-kaos-generator.js"; + var scripts = [ { element:"script", + type: "module", src:"./js/ui/header.js" }, { element:"script", + type: "module", src:"./js/ui/menu.js" }, { element:"script", + type: "module", src:"./js/ui/main.js" }, { element:"script", + type: "module", src:"./js/ui/footer.js" } ] for ( var i = 0; i < scripts.length; i++ ) { - makeElement(scripts[i], root.body); + makeElement(scripts[i], document.querySelector('body')); } diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js index b9cafaa..5344966 100644 --- a/src/js/ui/menu.js +++ b/src/js/ui/menu.js @@ -5,6 +5,7 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { makeElement } from "../arching-kaos-generator.js"; var menuButton = { element: "button", @@ -77,7 +78,6 @@ var stellarSubmenuTemplate = { makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor')); - /* * Menu bar management * @@ -93,7 +93,7 @@ lowerFloor.style.display = 'none'; var modulesSubmenu = document.querySelector('#modules-submenu'); modulesSubmenu.style.display = 'none'; -function modulesSubToggle(){ +export function modulesSubToggle(){ modulesSubmenu.style.display = modulesSubmenu.style.display === 'none' ? 'flex' : 'none'; upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none'; lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none'; @@ -101,7 +101,7 @@ function modulesSubToggle(){ var exploreSubmenu = document.querySelector('#explore-submenu'); exploreSubmenu.style.display = 'none'; -function exploreSubToggle(){ +export function exploreSubToggle(){ exploreSubmenu.style.display = exploreSubmenu.style.display === 'none' ? 'flex' : 'none'; upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none'; lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none'; @@ -109,22 +109,54 @@ function exploreSubToggle(){ var stellarSubmenu = document.querySelector('#stellar-submenu'); stellarSubmenu.style.display = 'none'; -function stellarSubToggle(){ +export function stellarSubToggle(){ stellarSubmenu.style.display = stellarSubmenu.style.display === 'none' ? 'flex' : 'none'; upperFloor.style.display = upperFloor.style.display === 'none' ? 'flex' : 'none'; lowerFloor.style.display = lowerFloor.style.display === 'none' ? 'flex' : 'none'; } +/* + * Array of all the menu-panes IDs + */ +var menuids = [ + '#welcome-section', + '#about-section', + '#zchain-data-section', + '#news-section', + '#comments-section', + '#stats-section', + '#mixtapes-section', + '#chat-section', + '#radio-section', + '#mypage-section', + '#stellar-balances', + '#stellar-data-config', + '#arching-kaos-node-info', + '#files-section', + '#settings-section', + '#stellar-section', + '#not-found-section' +]; // Function to hide all the panes -function menuinit(){ - menuids.forEach(m=>document.querySelector(m).hidden=true); +export function menuinit(){ + for ( var i = 0; i < menuids.length; i++ ){ + var sec = document.querySelector(menuids[i]); + if ( sec !== null ) + { + sec.hidden = true; + } + else + { + console.log(`menuinit: ${menuids[i]} was not found`); + } + } } /* * Function called on clicks on the menu bar * Unhides the pane connected to the clicked menu entry */ -function menusel(m){ +export function menusel(m){ menuinit(); // document.querySelector(m.id.replace('/','')).hidden=false; locationHashSetter(m.id); @@ -135,14 +167,9 @@ function menusel(m){ } } -function toggleMenu(){ +export function toggleMenu(){ mainContainer.style.display = 'none'; doubleFloorMenu.style.display = 'flex'; } -// And call -menuinit(); -locationHashOnChange(); - -isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex'; // @license-end 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>></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>></span> + <h2>Modules</h2> + <span>></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>></span> + <h2>Modules</h2> + <span>></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>></span> + <h2>Modules</h2> + <span>></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>></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>></span> + <h2>Explore</h2> + <span>></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>></span> + <h2>Stellar</h2> + <span>></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>></span> + <h2>Stellar</h2> + <span>></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>></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>></span> + <h2>Explore</h2> + <span>></span> + <h2>zchains</h2> + </div> + <em id="zchain-data-sec-not-found">No data found (yet?)!</em> + ` +}; + +makeElement(zchainDataSection, document.querySelector('.main')); |