From 9d13a71dc1b3d0bd85a2d73c2d15166e8b322cc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Feh=C3=A9r=20Roland?= Date: Wed, 8 Oct 2025 14:30:54 +0200 Subject: [PATCH] Modularize code Split JS into per-class files Cut parts of trweb class out Move init code from event handler to constructor --- index.html | 2 + js/trdom_menubar.js | 19 +++++++++ js/trdom_servermanager.js | 60 +++++++++++++++++++++++++++++ js/trweb.js | 81 +++++++++++++++------------------------ 4 files changed, 112 insertions(+), 50 deletions(-) create mode 100644 js/trdom_menubar.js create mode 100644 js/trdom_servermanager.js diff --git a/index.html b/index.html index c526782..4b41945 100644 --- a/index.html +++ b/index.html @@ -20,6 +20,8 @@ + + diff --git a/js/trdom_menubar.js b/js/trdom_menubar.js new file mode 100644 index 0000000..0afb637 --- /dev/null +++ b/js/trdom_menubar.js @@ -0,0 +1,19 @@ +"use strict"; + +class trdom_menubar { + #element = document.createElement('div'); + getElement() { + return this.#element; + } + + #menuNodes = {}; + addMenuNode(name, element, after = null) { + //TODO: add ID checks and after support + this.#menuNodes[name] = element; + this.#element.appendChild(element); + } + + constructor () { + this.#element.classList.add('trweb_header'); + } +} diff --git a/js/trdom_servermanager.js b/js/trdom_servermanager.js new file mode 100644 index 0000000..e2eddd6 --- /dev/null +++ b/js/trdom_servermanager.js @@ -0,0 +1,60 @@ +"use strict"; + +class trdom_servermanager { + + #logcb; + #log(loglevel, msg) { + if (this.#logcb !== null) { + this.#logcb('trdom_servermanager', loglevel, msg); + } + } + + #servers = {}; + getServers() { + return this.#servers; + } + + #registerServer; + + #loadcb; + #loadServers() { + let serverjson = this.#loadcb('servers'); + this.#servers = {}; + if (serverjson == null) { + this.#log(4, 'No saved server data found'); + } + else { + let serverdata = JSON.parse(serverjson); + for (const [key, value] of Object.entries(serverdata)) { + this.#registerServer(key, value); + } + this.#log(5, `Loaded ${Object.keys(this.#servers).length} servers`); + } + } + loadServers() { + this.#loadServers(); + } + + #savecb; + #saveServers() { + let serverdata = {}; + for (const [key, value] of Object.entries(this.#servers)) { + serverdata[key] = value.getInstanceData(); + } + this.#log(5, `Saving ${Object.keys(serverdata).length} servers`); + this.#savecb('servers', JSON.stringify(serverdata)); + } + saveServers() { + this.#saveServers(); + } + + constructor (loadcb = null, savecb = null, logcb = null, registerServer = null) { + this.#loadcb = loadcb; + this.#savecb = savecb; + this.#logcb = logcb + + this.#registerServer = registerServer; + + //this.#servers = this.#loadServers(); + } +} diff --git a/js/trweb.js b/js/trweb.js index 3b589be..cd2351d 100644 --- a/js/trweb.js +++ b/js/trweb.js @@ -1,7 +1,6 @@ "use strict"; class trweb { - #servers = {}; #knownTorrents = {}; #needsSort = false; @@ -14,10 +13,12 @@ class trweb { #container; - #guiHeader; #torrentListView; #guiFooter; + #dom_menubar = new trdom_menubar(); + #dom_servermanager; + constructor (container, loadcb, savecb, logger) { this.#container = container; if (loadcb != null) { @@ -28,6 +29,14 @@ class trweb { this.#logger = logger; } + this.#dom_servermanager = new trdom_servermanager(this.#loadcb, this.#savecb, function(module, loglevel, msg) {this.#logger(`${module}: ${msg}`)}.bind(this), this.#registerServer.bind(this)) + + this.#torrentListView = document.createElement('div'); + this.#torrentListView.classList.add('trweb_torrentlistview', 'container-fluid'); + + this.#guiFooter = document.createElement('div'); + this.#guiFooter.classList.add('trweb_footer'); + if (document.readyState === 'complete' || document.readyState === 'interactive') { this.#logger('Document already loaded, jumpstarting'); this.#handler({'type': 'DOMContentLoaded'}); @@ -50,34 +59,10 @@ class trweb { this.#updateTorrentDisplay(mergedTorrentInfo); }; let newserver = new trserver(initdata, function(msg) {this.#logger(`[Server: ${name}]: ${msg}`);}.bind(this), torrentCallback.bind(this)); - this.#servers[name] = newserver; + this.#dom_servermanager.getServers()[name] = newserver; newserver.refreshTorrentList(); } - #loadServers() { - let serverjson = this.#loadcb('servers'); - this.#servers = {}; - if (serverjson == null) { - this.#logger('No saved server data found'); - } - else { - let serverdata = JSON.parse(serverjson); - for (const [key, value] of Object.entries(serverdata)) { - this.#registerServer(key, value); - } - this.#logger(`Loaded ${Object.keys(this.#servers).length} servers`); - } - } - - #saveServers() { - let serverdata = {}; - for (const [key, value] of Object.entries(this.#servers)) { - serverdata[key] = value.getInstanceData(); - } - this.#logger(`Saving ${Object.keys(serverdata).length} servers`); - this.#savecb('servers', JSON.stringify(serverdata)); - } - #createTorrentEntry(hash) { let entry = { 'element': document.createElement('div'), @@ -98,7 +83,7 @@ class trweb { entry.element_name.classList.add('trweb_torrentlistname', 'col'); entry.element_name.setAttributeNS('trweb', 'fieldid', 'displayname'); entry.element.appendChild(entry.element_name); - for (const srv of Object.keys(this.#servers)) { + for (const srv of Object.keys(this.#dom_servermanager.getServers())) { this.#createServerEntryForTorrent(hash, srv); } @@ -188,7 +173,7 @@ class trweb { nukeChildren(txt_name); txt_name.appendChild(document.createTextNode(torrent.name)); - for (const srv of Object.keys(this.#servers)) { + for (const srv of Object.keys(this.#dom_servermanager.getServers())) { let server = torrent.element_server[srv]; let status = server.element_status; @@ -208,7 +193,7 @@ class trweb { let statustext = 'Nothing to see here'; let statusclass = 'trweb_status_asdf' let barwidth = 50; - if (!this.#servers[srv].isOnline()) { + if (!this.#dom_servermanager.getServers()[srv].isOnline()) { statustext = "Server offline"; statusclass = 'trweb_status_offline'; barwidth = 0; @@ -267,12 +252,12 @@ class trweb { break; case 'start': hash = e.currentTarget.getAttributeNS('trweb', 'torrent'); - this.#servers[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_start(hash); + this.#dom_servermanager.getServers()[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_start(hash); e.stopPropagation(); break; case 'pause': hash = e.currentTarget.getAttributeNS('trweb', 'torrent'); - this.#servers[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_pause(hash); + this.#dom_servermanager.getServers()[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_pause(hash); e.stopPropagation(); break; case 'magnet': @@ -285,7 +270,7 @@ class trweb { } } if (magneturl != null) { - this.#servers[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_add_url(magneturl, false, null); + this.#dom_servermanager.getServers()[e.currentTarget.getAttributeNS('trweb', 'server')].torrent_add_url(magneturl, false, null); } else { this.#logger(`Couldn't find magnet link! ${JSON.stringify(this.#knownTorrents[hash].servers)}`); @@ -300,27 +285,23 @@ class trweb { } break; case 'DOMContentLoaded': - this.#logger('Starting TRWEB instance'); + this.#logger('Activating TRWEB instance'); + this.#container = document.getElementById(this.#container); this.#container.classList.add('trweb_container'); - this.#guiHeader = document.createElement('div'); - this.#guiHeader.classList.add('trweb_header'); - this.#container.appendChild(this.#guiHeader); - this.#torrentListView = document.createElement('div'); - this.#torrentListView.classList.add('trweb_torrentlistview', 'container-fluid'); + this.#container.appendChild(this.#dom_menubar.getElement()); this.#container.appendChild(this.#torrentListView); - this.#guiFooter = document.createElement('div'); - this.#guiFooter.classList.add('trweb_footer'); this.#container.appendChild(this.#guiFooter); - this.#loadServers(); - this.#saveServers(); + + this.#dom_servermanager.loadServers(); + this.#dom_servermanager.saveServers(); this.setTimer(); break; } } refresh() { - for (const [key, value] of Object.entries(this.#servers)) { + for (const [key, value] of Object.entries(this.#dom_servermanager.getServers())) { //value.refreshSession(); value.refreshTorrentList(); } @@ -353,11 +334,11 @@ class trweb { } save() { - this.#saveServers(); + this.#dom_servermanager.saveServers(); } rpc(server, method, args) { - this.#servers[server].rpccall_debug(method, args); + this.#dom_servermanager.getServers()[server].rpccall_debug(method, args); } addServer(name, url, user, pass) { @@ -367,10 +348,10 @@ class trweb { this.#createServerEntryForTorrent(hash, name); } - this.#saveServers(); + this.#dom_servermanager.saveServers(); } - removeServer(name) { + /*removeServer(name) { delete this.#servers[name]; for (const [hash, entry] of Object.entries(this.#knownTorrents)) { @@ -379,8 +360,8 @@ class trweb { delete entry.element_server[name] } - this.#saveServers(); - } + this.#dom_servermanager.saveServers(); + }*/ } var trinstance = new trweb('trcontainer', null, null, function(msg) {console.info(`TRWEB: ${msg}`)});