Modularize code

Split JS into per-class files
Cut parts of trweb class out
Move init code from event handler to constructor
This commit is contained in:
2025-10-08 14:30:54 +02:00
parent 7877d657fc
commit 9d13a71dc1
4 changed files with 112 additions and 50 deletions

View File

@@ -20,6 +20,8 @@
<link rel="stylesheet" href="style/trweb.css" /> <link rel="stylesheet" href="style/trweb.css" />
<script type="text/javascript" src="js/helpers.js"></script> <script type="text/javascript" src="js/helpers.js"></script>
<script type="text/javascript" src="js/trserver.js"></script> <script type="text/javascript" src="js/trserver.js"></script>
<script type="text/javascript" src="js/trdom_menubar.js"></script>
<script type="text/javascript" src="js/trdom_servermanager.js"></script>
<script type="text/javascript" src="js/trweb.js"></script> <script type="text/javascript" src="js/trweb.js"></script>
</head> </head>
<body> <body>

19
js/trdom_menubar.js Normal file
View File

@@ -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');
}
}

60
js/trdom_servermanager.js Normal file
View File

@@ -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();
}
}

View File

@@ -1,7 +1,6 @@
"use strict"; "use strict";
class trweb { class trweb {
#servers = {};
#knownTorrents = {}; #knownTorrents = {};
#needsSort = false; #needsSort = false;
@@ -14,10 +13,12 @@ class trweb {
#container; #container;
#guiHeader;
#torrentListView; #torrentListView;
#guiFooter; #guiFooter;
#dom_menubar = new trdom_menubar();
#dom_servermanager;
constructor (container, loadcb, savecb, logger) { constructor (container, loadcb, savecb, logger) {
this.#container = container; this.#container = container;
if (loadcb != null) { if (loadcb != null) {
@@ -28,6 +29,14 @@ class trweb {
this.#logger = logger; 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') { if (document.readyState === 'complete' || document.readyState === 'interactive') {
this.#logger('Document already loaded, jumpstarting'); this.#logger('Document already loaded, jumpstarting');
this.#handler({'type': 'DOMContentLoaded'}); this.#handler({'type': 'DOMContentLoaded'});
@@ -50,34 +59,10 @@ class trweb {
this.#updateTorrentDisplay(mergedTorrentInfo); this.#updateTorrentDisplay(mergedTorrentInfo);
}; };
let newserver = new trserver(initdata, function(msg) {this.#logger(`[Server: ${name}]: ${msg}`);}.bind(this), torrentCallback.bind(this)); 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(); 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) { #createTorrentEntry(hash) {
let entry = { let entry = {
'element': document.createElement('div'), 'element': document.createElement('div'),
@@ -98,7 +83,7 @@ class trweb {
entry.element_name.classList.add('trweb_torrentlistname', 'col'); entry.element_name.classList.add('trweb_torrentlistname', 'col');
entry.element_name.setAttributeNS('trweb', 'fieldid', 'displayname'); entry.element_name.setAttributeNS('trweb', 'fieldid', 'displayname');
entry.element.appendChild(entry.element_name); 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); this.#createServerEntryForTorrent(hash, srv);
} }
@@ -188,7 +173,7 @@ class trweb {
nukeChildren(txt_name); nukeChildren(txt_name);
txt_name.appendChild(document.createTextNode(torrent.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 server = torrent.element_server[srv];
let status = server.element_status; let status = server.element_status;
@@ -208,7 +193,7 @@ class trweb {
let statustext = 'Nothing to see here'; let statustext = 'Nothing to see here';
let statusclass = 'trweb_status_asdf' let statusclass = 'trweb_status_asdf'
let barwidth = 50; let barwidth = 50;
if (!this.#servers[srv].isOnline()) { if (!this.#dom_servermanager.getServers()[srv].isOnline()) {
statustext = "Server offline"; statustext = "Server offline";
statusclass = 'trweb_status_offline'; statusclass = 'trweb_status_offline';
barwidth = 0; barwidth = 0;
@@ -267,12 +252,12 @@ class trweb {
break; break;
case 'start': case 'start':
hash = e.currentTarget.getAttributeNS('trweb', 'torrent'); 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(); e.stopPropagation();
break; break;
case 'pause': case 'pause':
hash = e.currentTarget.getAttributeNS('trweb', 'torrent'); 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(); e.stopPropagation();
break; break;
case 'magnet': case 'magnet':
@@ -285,7 +270,7 @@ class trweb {
} }
} }
if (magneturl != null) { 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 { else {
this.#logger(`Couldn't find magnet link! ${JSON.stringify(this.#knownTorrents[hash].servers)}`); this.#logger(`Couldn't find magnet link! ${JSON.stringify(this.#knownTorrents[hash].servers)}`);
@@ -300,27 +285,23 @@ class trweb {
} }
break; break;
case 'DOMContentLoaded': case 'DOMContentLoaded':
this.#logger('Starting TRWEB instance'); this.#logger('Activating TRWEB instance');
this.#container = document.getElementById(this.#container); this.#container = document.getElementById(this.#container);
this.#container.classList.add('trweb_container'); this.#container.classList.add('trweb_container');
this.#guiHeader = document.createElement('div'); this.#container.appendChild(this.#dom_menubar.getElement());
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.#torrentListView); this.#container.appendChild(this.#torrentListView);
this.#guiFooter = document.createElement('div');
this.#guiFooter.classList.add('trweb_footer');
this.#container.appendChild(this.#guiFooter); this.#container.appendChild(this.#guiFooter);
this.#loadServers();
this.#saveServers(); this.#dom_servermanager.loadServers();
this.#dom_servermanager.saveServers();
this.setTimer(); this.setTimer();
break; break;
} }
} }
refresh() { refresh() {
for (const [key, value] of Object.entries(this.#servers)) { for (const [key, value] of Object.entries(this.#dom_servermanager.getServers())) {
//value.refreshSession(); //value.refreshSession();
value.refreshTorrentList(); value.refreshTorrentList();
} }
@@ -353,11 +334,11 @@ class trweb {
} }
save() { save() {
this.#saveServers(); this.#dom_servermanager.saveServers();
} }
rpc(server, method, args) { 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) { addServer(name, url, user, pass) {
@@ -367,10 +348,10 @@ class trweb {
this.#createServerEntryForTorrent(hash, name); this.#createServerEntryForTorrent(hash, name);
} }
this.#saveServers(); this.#dom_servermanager.saveServers();
} }
removeServer(name) { /*removeServer(name) {
delete this.#servers[name]; delete this.#servers[name];
for (const [hash, entry] of Object.entries(this.#knownTorrents)) { for (const [hash, entry] of Object.entries(this.#knownTorrents)) {
@@ -379,8 +360,8 @@ class trweb {
delete entry.element_server[name] delete entry.element_server[name]
} }
this.#saveServers(); this.#dom_servermanager.saveServers();
} }*/
} }
var trinstance = new trweb('trcontainer', null, null, function(msg) {console.info(`TRWEB: ${msg}`)}); var trinstance = new trweb('trcontainer', null, null, function(msg) {console.info(`TRWEB: ${msg}`)});