Delete servers using console

Only removing is supported for now

js/trdom_menubar.js

@@ -2,7 +2,7 @@
 
 class trdom_menubar {
     #element = document.createElement('div');
-    getElement() {
+    get element() {
         return this.#element;
     }
 

js/trdom_servermanager.js

@@ -1,6 +1,6 @@
 "use strict";
 
-class trdom_servermanager {
+class trdom_servermanager extends EventTarget {
 
     #logcb;
     #log(loglevel, msg) {
@@ -14,7 +14,59 @@ class trdom_servermanager {
         return this.#servers;
     }
 
-    #registerServer;
+    #elements = {
+        menuentry: document.createElement('div'),
+        serverlist: {
+            shade: document.createElement('div'),
+            form: document.createElement('div'),
+            header: {
+                container: document.createElement('div'),
+                addbutton: document.createElement('div')
+            },
+            list: document.createElement('div')
+        }
+    };
+
+    get menuentry() {
+        return this.#elements.menuentry;
+    }
+
+    #registerServer(name, initdata) {
+        let server = new trserver(name, initdata, this.#logcb);
+        this.#servers[name] = server;
+        this.#elements.serverlist.list.appendChild(server.element);
+        let button = document.createElement('div');
+        server.addServerListButton('deleteserver', button);
+        button.setAttributeNS('trweb', 'servermanagerbutton', 'delete');
+        button.setAttribute('server', name);
+        button.appendChild(document.createTextNode('[Delete]'));
+        button.addEventListener('click', this);
+        //server.addEventListener('torrent-updated', this);
+        server.addEventListener('torrent-initialize', this);
+        let e = new CustomEvent('torrentserver-added', {
+            detail: {
+                serverName: name,
+                serverObject: server
+            }
+        });
+        this.dispatchEvent(e);
+        server.refreshTorrentList();
+    }
+
+    addServer(name, url, user = null, pass = '') {
+        let initdata = {rpcurl: url};
+        if (user != null) {
+            initdata.auth = `Basic ${btoa(`${user}:${pass}`)}`
+        }
+        this.#registerServer(name, initdata);
+        this.#saveServers();
+    }
+
+    deleteServer(name) {
+        delete this.#servers[name];
+        this.saveServers();
+        window.location.reload();
+    }
 
     #loadcb;
     #loadServers() {
@@ -48,13 +100,126 @@ class trdom_servermanager {
         this.#saveServers();
     }
 
-    constructor (loadcb = null, savecb = null, logcb = null, registerServer = null) {
+    constructor (loadcb = null, savecb = null, logcb = null) {
+        super();
         this.#loadcb = loadcb;
         this.#savecb = savecb;
         this.#logcb = logcb
 
-        this.#registerServer = registerServer;
+        this.menuentry.appendChild(document.createTextNode('[Servers]'));
+        this.menuentry.setAttributeNS('trweb', 'servermanagerbutton', 'manager');
+        this.menuentry.addEventListener('click', this);
 
-        //this.#servers = this.#loadServers();
+        this.#elements.serverlist.shade.classList.add('trweb_formshade', 'd-flex', 'justify-content-center', 'align-items-center');
+        this.#elements.serverlist.shade.setAttributeNS('trweb', 'servermanagerbutton', 'hide');
+        this.#elements.serverlist.shade.addEventListener('click', this);
+        this.#elements.serverlist.shade.appendChild(this.#elements.serverlist.form);
+
+        this.#elements.serverlist.form.classList.add('trweb_form', 'd-flex', 'flex-column');
+        this.#elements.serverlist.form.setAttributeNS('trweb', 'servermanagerbutton', 'block');
+        this.#elements.serverlist.form.addEventListener('click', this);
+        this.#elements.serverlist.form.style.backgroundColor = 'cyan';
+        this.#elements.serverlist.form.appendChild(this.#elements.serverlist.header.container);
+        this.#elements.serverlist.form.appendChild(this.#elements.serverlist.list);
+
+        this.#elements.serverlist.header.container.classList.add('d-flex', 'flex-row');
+        this.#elements.serverlist.header.container.appendChild(this.#elements.serverlist.header.addbutton);
+
+        this.#elements.serverlist.header.addbutton.appendChild(document.createTextNode('[Add server]'));
+        this.#elements.serverlist.header.addbutton.setAttributeNS('trweb', 'servermanagerbutton', 'add');
+        this.#elements.serverlist.header.addbutton.addEventListener('click', this);
+
+        this.#elements.serverlist.list.classList.add('d-flex', 'flex-column');
+    }
+
+    handleEvent(e) {
+        this.#log(6, `Handling event of type ${e.type}`);
+        switch (e.type) {
+        case 'click':
+            if (e.currentTarget.hasAttributeNS('trweb', 'servermanagerbutton')) {
+                switch (e.currentTarget.getAttributeNS('trweb', 'servermanagerbutton')) {
+                case 'add':
+                    e.stopPropagation();
+                    let addName = window.prompt('Enter name for the new server');
+                    if (addName != null) {
+                        if (addName == '') {
+                            window.alert('No name was provided, aborting');
+                        }
+                        else {
+                            if (this.#servers[addName] != null) {
+                                window.alert('Server with the provided name already exists, aborting');
+                            }
+                            else {
+                                let addUrl = window.prompt('Enter server URL', 'http://localhost:9091/transmission/rpc');
+                                if (addUrl != null) {
+                                    if (addUrl == '') {
+                                        window.alert('No URL provided, aborting');
+                                    }
+                                    else {
+                                        let addUser;
+                                        let addPass;
+                                        addUser = window.prompt('Enter username, leave empty of not required');
+                                        if (addUser == null) {
+                                            return;
+                                        }
+                                        if (addUser == '') {
+                                            addUser = null;
+                                        }
+                                        else {
+                                            addPass = window.prompt(`Enter password for user ${addUser}`);
+                                            if (addPass == null) {
+                                                return;
+                                            }
+                                        }
+                                        this.addServer(addName, addUrl, addUser, addPass); 
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    break;
+                case 'block':
+                    e.stopPropagation();
+                    break;
+                case 'delete':
+                    e.stopPropagation();
+                    let deleteSrv = e.currentTarget.getAttribute('server');
+                    if (window.confirm(`Are you sure you want to delete server ${deleteSrv}?`)) {
+                        this.deleteServer(deleteSrv);
+                    }
+                    break;
+                case 'hide':
+                    e.stopPropagation();
+                    document.body.removeChild(this.#elements.serverlist.shade);
+                    break;
+                case 'manager':
+                    e.stopPropagation();
+                    document.body.appendChild(this.#elements.serverlist.shade);
+                    break;
+                }
+            }
+            break;
+        case 'torrent-initialize':
+            let initControls = {};
+            let initHash = e.detail.torrentHash;
+            for (const [srv, server] of Object.entries(this.#servers)) {
+                let control = server == e.detail.serverObject ? e.detail.torrentControl : new trdom_torrentcontrol(initHash, server, {magnetLink: e.detail.torrentControl.magnet}, this.#logcb);
+                //server.addControl(control);
+                initControls[srv] = control;
+            }
+            let initEvent = new CustomEvent('torrent-created', {
+                detail: {
+                    torrentHash: initHash,
+                    torrentControls: initControls,
+                    torrentName: e.detail.torrentControl.name,
+                    magnetLink: e.detail.torrentControl.magnet
+                }
+            });
+            this.dispatchEvent(initEvent);
+            break;
+        default:
+            this.#log(5, `Event type ${e.type} not supported`);
+            break;
+        }
     }
 }

js/trdom_torrentcontrol.js

@@ -1,25 +1,111 @@
 "use strict";
 
-class trdom_torrentcontrol {
+class trdom_torrentcontrol extends EventTarget {
     #logcb;
     #log(loglevel, msg) {
         if (this.#logcb !== null) {
-            this.#logcb('trdom_servermanager', loglevel, msg);
+            this.#logcb(`server:${this.#server.name}:${this.#hash}`, loglevel, msg);
         }
     }
 
     #element = document.createElement('div');
-    getElement() {
+    get element() {
         return this.#element;
     }
 
     #hash;
     #server;
 
-    //TODO: remove
-    #getKnownTorrents;
+    #data;
+    get exists() {
+        return this.#data != null && this.#data.name != null;
+    }
+    get name() {
+        return this.exists ? this.#data.name : this.#hash;
+    }
+    get magnet() {
+        return this.#data != null ? this.#data.magnetLink : null;
+    }
+    set magnet(value) {
+        if (this.#data == null) {
+            this.#data = {};
+        }
+        this.#data.magnetLink = value;
+        this.updateDOM();
+    }
+
+    updateDOM() {
+        let control_element = this.#element;
+        let status = control_element.element_status;
+
+        control_element.classList.remove(
+            'trweb_status_asdf',
+            'trweb_status_offline',
+            'trweb_status_nonexistent',
+            'trweb_status_paused',
+            'trweb_status_verifqueued',
+            'trweb_status_verifying',
+            'trweb_status_downloading',
+            'trweb_status_seeding'
+        );
+
+        nukeChildren(status);
+
+        let statustext = 'Nothing to see here';
+        let statusclass = 'trweb_status_asdf'
+        let barwidth = 50;
+        if (!this.#server.isOnline()) {
+            statustext = "Server offline";
+            statusclass = 'trweb_status_offline';
+            barwidth = 0;
+        }
+        else {
+            if (!this.exists) {
+                //this.#log(5, JSON.stringify(this.#data));
+                statustext = "Not available";
+                statusclass = 'trweb_status_nonexistent';
+                barwidth = 0;
+            }
+            else {
+                let server_status = this.#data;
+                statustext = `${server_status.status}`;
+                barwidth = server_status.percentDone;
+                switch (server_status.status) {
+                    case 0:
+                        statustext = 'Paused';
+                        statusclass = 'trweb_status_paused';
+                        break;
+                    case 1:
+                        statustext = 'Queued for verification';
+                        statusclass = 'trweb_status_verifqueued';
+                        break;
+                    case 2:
+                        statustext = 'Verifying';
+                        statusclass = 'trweb_status_verifying';
+                        break;
+                    case 3:
+                        statustext = 'Queued';
+                        break;
+                    case 4:
+                        statustext = 'Downloading';
+                        statusclass = 'trweb_status_downloading';
+                        break;
+                    case 6:
+                        statustext = 'Seeding';
+                        statusclass = 'trweb_status_seeding';
+                        break;
+                }
+
+                statustext = `[${this.#server.name}]: ${statustext} - ${server_status.percentDone}%`;
+            }
+        }
+        control_element.element_statusbar.style.width = `${barwidth}%`;
+        control_element.classList.add(statusclass);
+        status.appendChild(document.createTextNode(statustext));
+    }
 
     handleEvent(e) {
+        this.#log(6, `Handling event of type ${e.type}`);
         switch (e.type) {
         case 'click':
             if (e.currentTarget.hasAttributeNS('trweb', 'torrentlistfield')) {
@@ -33,20 +119,14 @@ class trdom_torrentcontrol {
                     e.stopPropagation();
                     break;
                 case 'magnet':
-                    let magneturl;
-                    for (const [srv, data] of Object.entries(this.#getKnownTorrents()[this.#hash].servers)) {
-                        if (data.magnetLink != null) {
-                            magneturl = data.magnetLink;
-                            break;
-                        }
-                    }
-                    if (magneturl != null) {
-                        this.#server.torrent_add_url(magneturl, false, null);
+                    e.stopPropagation();
+                    if (this.magnet != null) {
+                        this.#server.torrent_add_url(this.magnet, true, null);
                     }
                     else {
-                        this.#log(3, `Couldn't find magnet link! ${JSON.stringify(this.#getKnownTorrents()[this.#hash].servers)}`);
+                        this.#log(3, 'Couldn\'t find magnet link!');
+                        window.alert('Couldn\'t find magnet link!');
                     }
-                    e.stopPropagation();
                     break;
                 case 'download':
                     e.stopPropagation();
@@ -54,14 +134,29 @@ class trdom_torrentcontrol {
                     break;
                 }
             }
+            break;
+        case 'torrent-deleted':
+            this.#log(6, 'we be delet');
+            if (this.exists) {
+                delete this.#data.name;
+                this.updateDOM();
+            }
+            break;
+        case 'torrent-updated':
+            if (e.detail.torrentHash == this.#hash) {
+                this.#log(6, `Got data from server: ${JSON.stringify(e.detail.torrentInfo)}`);
+                this.#data = e.detail.torrentInfo;
+                this.updateDOM();
+            }
+            break;
         }
     }
 
-    constructor(hash, server, logcb, getKnownTorrents) {
+    constructor(hash, server, initdata = null, logcb = null) {
+        super();
         this.#hash = hash;
         this.#server = server;
         this.#logcb = logcb;
-        this.#getKnownTorrents = getKnownTorrents;
 
         let srv = server.name;
 
@@ -130,6 +225,16 @@ class trdom_torrentcontrol {
         this.#element.element_pause = element_pause;
         this.#element.element_magnet = element_magnet;
         this.#element.element_download = element_download;
+
+        this.#data = initdata;
+
+        this.updateDOM();
+
+        this.addEventListener('torrent-updated', this);
+
+        this.addEventListener('torrent-deleted', this);
+        
+        server.addControl(hash, this);
     }
 
 }

js/trdom_torrentmanager.js

@@ -1,12 +1,73 @@
 "use strict";
 
-class trdom_torrentmanager {
+class trdom_torrentmanager extends EventTarget {
+    #logcb;
+    #log(loglevel, msg) {
+        if (this.#logcb !== null) {
+            this.#logcb('trdom_torrentmanager', loglevel, msg);
+        }
+    }
+
     #element = document.createElement('div');
-    getElement() {
+    get element() {
         return this.#element;
     }
 
-    constructor() {
+    #torrentDB = {};
+    get torrents() {
+        return this.#torrentDB;
+    }
+
+    constructor(logcb = null) {
+        super();
+        this.#logcb = logcb;
         this.#element.classList.add('trweb_torrentlistview', 'container-fluid');
     }
+
+    #putToPlace(torrent) {
+        let sortedTorrents = Object.values(this.#torrentDB).sort((a, b) => a.name.localeCompare(b.name));
+        let previous = sortedTorrents.find((val, ind, arr) => val.name.localeCompare(torrent.name) > 0);
+        if (previous == undefined) {
+            this.element.appendChild(torrent.element);
+        }
+        else {
+            this.element.insertBefore(torrent.element, previous.element);
+        }
+    }
+
+    handleEvent(e) {
+        this.#log(6, `Handling event of type ${e.type}`);
+        switch (e.type) {
+        case 'torrent-created':
+            let initHash = e.detail.torrentHash;
+            if (this.#torrentDB[initHash] == null) {
+                let torrentCreated = new trtorrent(initHash, e.detail.magnetLink);
+                torrentCreated.name = e.detail.torrentName;
+                this.#torrentDB[initHash] = torrentCreated;
+                torrentCreated.addEventListener('torrent-renamed', this);
+                this.#putToPlace(torrentCreated);
+                //this.#element.appendChild(torrentCreated.element);
+                for (const [srv, control] of Object.entries(e.detail.torrentControls)) {
+                    torrentCreated.addControl(srv, control)
+                }
+            }
+            else {
+                this.#log(1, 'This event should never ever fire for a torrent that already exists');
+                window.alert('We be ded, check console');
+            }
+            break;
+        case 'torrent-renamed':
+            this.#putToPlace(e.target);
+            break;
+        case 'torrentserver-added':
+            let addedServer = e.detail.serverObject;
+            for (const [hash, torrent] of Object.entries(this.#torrentDB)) {
+                torrent.addControl(addedServer.name, new trdom_torrentcontrol(hash, addedServer, {magnetLink: torrent.magnet}, this.#logcb))
+            }
+            break;
+        default:
+            this.#log(5, `Event type ${e.type} not supported`);
+            break;
+        }
+    }
 }

js/trserver.js

@@ -1,26 +1,85 @@
 "use strict";
 
-class trserver {
+class trserver extends EventTarget {
+    #logcb;
+    #log(loglevel, msg) {
+        if (this.#logcb !== null) {
+            this.#logcb(`server:${this.name}`, loglevel, msg);
+        }
+    }
+
+    #name;
+    get name() {
+        return this.#name;
+    }
     #rpcurl;
     #authHeader;
     #sessionHeader;
     #requests = [];
-    #torrents = {};
+
+    #elements = {
+        serverlist: {
+            row: document.createElement('div'),
+            name: document.createElement('div'),
+            buttons: {}
+        }
+    };
+    get element() {
+        return this.#elements.serverlist.row;
+    }
+    addServerListButton(name, button) {
+        if (this.#elements.serverlist.buttons[name] != null) {
+            this.removeServerListButton(name);
+        }
+        this.#elements.serverlist.buttons[name] = button;
+        this.#elements.serverlist.row.appendChild(button);
+    }
+    removeServerListButton(name) {
+        if (this.#elements.serverlist.buttons[name] != null) {
+            this.#elements.serverlist.row.removeChild(this.#elements.serverlist.buttons[name]);
+            delete this.#elements.serverlist.buttons[name];
+        }
+    }
+
+    #torrentControls = {};
+    addControl(hash, control) {
+        this.#torrentControls[hash] = control;
+    }
+    getControl(hash) {
+        return this.#torrentControls[hash];
+    }
+
     #isOnline = false;
+    #setOnline(online) {
+        if (this.isOnline == online) {
+            return;
+        }
+        this.#isOnline = online;
+        let detail = {
+        };
+        let etype;
+        if (online) {
+            etype = 'torrentserver-online';
+        }
+        else {
+            etype = 'torrentserver-offline';
+        }
+        this.dispatchEvent(new CustomEvent(etype, detail));
+    }
 
-    #logger = function(msg) {};
-    #torrentCallback = function(hash, torrentInfo) {};
-
-    constructor (initdata, logger, tcb) {
+    constructor (name, initdata, logcb = null) {
+        super();
+        this.#logcb = logcb;
+        this.#name = name;
         this.#rpcurl = initdata.rpcurl;
-        if (logger != null) {
-            this.#logger = logger;
-        }
-        if (tcb != null) {
-            this.#torrentCallback = tcb;
-        }
         this.#authHeader = initdata.auth;
         this.#sessionHeader = null;
+
+        this.#elements.serverlist.row.classList.add('d-flex', 'flex-row');
+        this.#elements.serverlist.row.appendChild(this.#elements.serverlist.name);
+
+        this.#elements.serverlist.name.classList.add('flex-grow-1');
+        this.#elements.serverlist.name.appendChild(document.createTextNode(this.name));
     }
 
     #rpccall_prepare(method, args) {
@@ -54,7 +113,7 @@ class trserver {
         try {
             rpc.send(JSON.stringify(request.payload));
         } catch (error) {
-            this.#logger(error);
+            this.#log(2, error);
         }
     }
 
@@ -74,7 +133,7 @@ class trserver {
                     switch (e.target.status) {
                         case 200:
                             if (!this.#isOnline) {
-                                this.#logger('Server API connection estabilished');
+                                this.#log(4, 'Server API connection estabilished');
                                 this.#isOnline = true;
                                 this.#forceUpdateTorrents();
                             }
@@ -99,42 +158,35 @@ class trserver {
                 break;
             case 'timeout':
                 if (this.#isOnline) {
-                    this.#logger('Server API connection timed out');
+                    this.#log(3, 'Server API connection timed out');
                     this.#isOnline = false;
                     this.#forceUpdateTorrents();
                 }
                 break;
             case 'error':
                 if (this.#isOnline) {
-                    this.#logger('Server API refuses connection');
+                    this.#log(3, 'Server API refuses connection');
                     this.#isOnline = false;
                     this.#forceUpdateTorrents();
                 }
-                this.#logger(JSON.stringify(e));
+                this.#log(5, JSON.stringify(e));
                 break;
         }
     }
 
-    refreshSession (){
-        //let tag = this.#rpccall_prepare('session-get', null);
-        //this.#rpccall(tag);
+    #forceUpdateTorrents() {
+        for (const control of Object.values(this.#torrentControls)) {
+            control.updateDOM();
+        }
     }
 
     #parseTorrents(response) {
-        // mark everything as deleted but clean
-        for (const [key, value] of Object.entries(this.#torrents)) {
-            value.wasDeleted = value.deleted;
-            value.deleted = true;
-            value.dirty = false;
-        }
+        let updatedHashes = [];
         // Update torrent data
-        for (const torrent of response.torrents) {
-            let hash = torrent.hashString;
-            if (!(hash in this.#torrents)) {
-                this.#torrents[hash] = {'dirty': true};
-            }
-            let knownTorrent = this.#torrents[hash];
-            for (const [key, value] of Object.entries(torrent)) {
+        for (const fromserver of response.torrents) {
+            let hash = fromserver.hashString;
+            let initdata = {};
+            for (const [key, value] of Object.entries(fromserver)) {
                 let parsedValue = undefined;
                 switch (key) {
                     case 'hashString':
@@ -147,30 +199,51 @@ class trserver {
                         break;
                 }
                 
-                if (parsedValue != undefined && knownTorrent[key] !== parsedValue) {
-                    knownTorrent[key] = parsedValue;
-                    knownTorrent.dirty = true;
+                if (parsedValue != undefined) {
+                    initdata[key] = parsedValue;
                 }
             }
-            knownTorrent.deleted = false;
-        }
-        //check for changes
-        for (const [key, value] of Object.entries(this.#torrents)) {
-            if (value.deleted != value.wasDeleted || value.dirty) {
-                // call UI update
-                this.#torrentCallback(key, value);
-            }
-        }
-    }
 
-    #forceUpdateTorrents() {
-        for (const [key, value] of Object.entries(this.#torrents)) {
-            // call UI update
-            this.#torrentCallback(key, value);
+            let control;
+            if (!(hash in this.#torrentControls)) {
+                control = new trdom_torrentcontrol(hash, this, initdata, this.#logcb);
+                let createControls = new CustomEvent('torrent-initialize', {
+                    detail: {
+                        torrentHash: hash,
+                        torrentControl: control,
+                        serverObject: this
+                    }
+                });
+                this.dispatchEvent(createControls);
+            }
+            else {
+                control = this.getControl(hash);
+            }
+            
+            let e = new CustomEvent('torrent-updated', {
+                detail: {
+                    torrentHash: hash,
+                    torrentInfo: initdata
+                }
+            });
+            control.dispatchEvent(e);
+            updatedHashes.push(hash);
+        }
+
+        for (const [hash, control] of Object.entries(this.#torrentControls)) {
+            if (!updatedHashes.includes(hash) && (control.exists)) {
+                let e = new CustomEvent('torrent-deleted', {
+                    detail: {
+                        torrentHash: hash
+                    }
+                });
+                control.dispatchEvent(e);
+            }
         }
     }
 
     refreshTorrentList() {
+
         let tag = this.#rpccall_prepare('torrent-get', {'fields': ['id', 'hashString', 'name', 'status', 'percentDone', 'comment', 'magnetLink']});
         this.#requests[tag].success = this.#parseTorrents.bind(this);
         this.#rpccall(tag);
@@ -200,8 +273,9 @@ class trserver {
 
     getInstanceData() {
         return {
-            'rpcurl': this.#rpcurl,
-            'auth': this.#authHeader
+            type: 'transmission',
+            rpcurl: this.#rpcurl,
+            auth: this.#authHeader
         };
     }
 

js/trtorrent.js

@@ -1,21 +1,34 @@
 "use strict";
 
-class trtorrent {
+class trtorrent extends EventTarget {
     #element = document.createElement('div');
-    getElement() {
+    get element() {
         return this.#element;
     }
 
     #hash;
-    #name = '## NAME NOT SET ##';
+    #name;
+    get name() {
+        return this.#name == null ? this.#hash : this.#name;
+    }
+    set name(value) {
+        this.#name = value;
+        nukeChildren(this.element.element_name);
+        this.element.element_name.appendChild(document.createTextNode(this.name));
+    }
+    #magnetLink;
+    get magnet() {
+        return this.#magnetLink;
+    }
 
-    #element_server = {};
+    #serverControls = {};
     addControl(srv, control) {
-        this.#element_server[srv] = control;
-        this.#element.appendChild(control.getElement());
+        this.#serverControls[srv] = control;
+        this.#element.appendChild(control.element);
+        control.addEventListener('torrent-updated', this);
     }
     getControl(srv) {
-        return this.#element_server[srv];
+        return this.#serverControls[srv];
     }
 
     #servers = {};
@@ -38,11 +51,24 @@ class trtorrent {
                 }
             }
             break;
+        case 'torrent-updated':
+            if (this.#name == null) {
+                this.name = e.detail.torrentInfo.name;
+                let nameChangeEvent = new CustomEvent('torrent-renamed', {
+                    detail: {
+                        torrentHash: this.#hash
+                    }
+                });
+                this.dispatchEvent(nameChangeEvent);
+            }
+            break;
         }
     }
 
-    constructor(hash) {
+    constructor(hash, magnet = null) {
+        super();
         this.#hash = hash;
+        this.#magnetLink = magnet;
 
         // set up DOM structure
         let element_name = document.createElement('div');

js/trweb.js

@@ -1,14 +1,21 @@
 "use strict";
 
 class trweb {
-    #knownTorrents = {};
-
     #needsSort = false;
 
     #loadcb = function(key) {return localStorage.getItem(`trweb.${key}`)};
     #savecb = function(key, value) {localStorage.setItem(`trweb.${key}`, value)};
     #logger = function(msg) {};
-    #logcb = function(module, loglevel, msg) {this.#logger(`${module}: ${msg}`)}.bind(this);
+    #logcb = function(module, loglevel, msg) {
+        if (loglevel <= 5) {
+            this.#logger(`${module}: ${msg}`);
+        }
+    }.bind(this);
+    #log(loglevel, msg) {
+        if (this.#logcb !== null) {
+            this.#logcb('TRWEB', loglevel, msg);
+        }
+    }
 
     #timer;
 
@@ -18,7 +25,7 @@ class trweb {
 
     #dom_menubar = new trdom_menubar();
     #dom_servermanager;
-    #dom_torrentmanagger = new trdom_torrentmanager();
+    #dom_torrentmanagger;
 
     constructor (container, loadcb, savecb, logger) {
         this.#container = container;
@@ -30,7 +37,14 @@ class trweb {
             this.#logger = logger;
         }
 
-        this.#dom_servermanager = new trdom_servermanager(this.#loadcb, this.#savecb, this.#logcb, this.#registerServer)
+        this.#dom_servermanager = new trdom_servermanager(this.#loadcb, this.#savecb, this.#logcb);
+        this.#dom_torrentmanagger = new trdom_torrentmanager(this.#logcb);
+
+        /* trdom_torrentmanager uses this to add new server controls to existing torrents */
+        this.#dom_servermanager.addEventListener('torrentserver-added', this.#dom_torrentmanagger);
+        this.#dom_servermanager.addEventListener('torrent-created', this.#dom_torrentmanagger);
+
+        this.#dom_menubar.addMenuNode('servermanager', this.#dom_servermanager.menuentry);
 
         this.#guiFooter = document.createElement('div');
         this.#guiFooter.classList.add('trweb_footer');
@@ -46,163 +60,36 @@ class trweb {
         }
     }
 
-    #registerServer = function(name, initdata) {
-        let torrentCallback = function(hash, torrentInfo) {
-            let mergedTorrentInfo = this.#knownTorrents[hash];
-            if (mergedTorrentInfo == null) {
-                mergedTorrentInfo = this.#createTorrentEntry(hash);
-            }
-            mergedTorrentInfo.setStatus(name, torrentInfo);
-            mergedTorrentInfo.name = torrentInfo.name;
-
-            this.#updateTorrentDisplay(mergedTorrentInfo);
-        }.bind(this);
-        let newserver = new trserver(initdata, function(msg) {this.#logger(`[Server: ${name}]: ${msg}`);}.bind(this), torrentCallback);
-        this.#dom_servermanager.getServers()[name] = newserver;
-        newserver.refreshTorrentList();
-    }.bind(this);
-
-    #createTorrentEntry(hash) {
-        let torrent = new trtorrent(hash);
-
-        this.#knownTorrents[hash] = torrent;
-
-        for (const srv of Object.keys(this.#dom_servermanager.getServers())) {
-            this.#createServerEntryForTorrent(hash, srv);
-        }
-
-        this.#dom_torrentmanagger.getElement().appendChild(torrent.getElement());
-
-        this.#updateTorrentDisplay(torrent);
-
-        return torrent;
-    }
-
-    #createServerEntryForTorrent(hash, srv) {
-        this.#needsSort = true;
-        let control = new trdom_torrentcontrol(hash, this.#dom_servermanager.getServers()[srv], this.#logcb, function() {return this.#knownTorrents}.bind(this));
-
-        let torrent = this.#knownTorrents[hash];
-
-        torrent.addControl(srv, control);
-    }
-
-    #updateTorrentDisplay(torrent) {
-        let txt_name = torrent.getElement().element_name;
-        nukeChildren(txt_name);
-        txt_name.appendChild(document.createTextNode(torrent.name));
-
-        for (const srv of Object.keys(this.#dom_servermanager.getServers())) {
-            let control = torrent.getControl(srv);
-            let control_element = control.getElement();
-            let status = control_element.element_status;
-
-            control_element.classList.remove(
-                'trweb_status_asdf',
-                'trweb_status_offline',
-                'trweb_status_nonexistent',
-                'trweb_status_paused',
-                'trweb_status_verifqueued',
-                'trweb_status_verifying',
-                'trweb_status_downloading',
-                'trweb_status_seeding'
-            );
-
-            nukeChildren(status);
-
-            let statustext = 'Nothing to see here';
-            let statusclass = 'trweb_status_asdf'
-            let barwidth = 50;
-            if (!this.#dom_servermanager.getServers()[srv].isOnline()) {
-                statustext = "Server offline";
-                statusclass = 'trweb_status_offline';
-                barwidth = 0;
-            }
-            else {
-                let server_status = torrent.getStatus(srv);
-                if (server_status == undefined || server_status.deleted) {
-                    statustext = "Not available";
-                    statusclass = 'trweb_status_nonexistent';
-                    barwidth = 0;
-                }
-                else {
-                    statustext = `${server_status.status}`;
-                    barwidth = server_status.percentDone;
-                    switch (server_status.status) {
-                        case 0:
-                            statustext = 'Paused';
-                            statusclass = 'trweb_status_paused';
-                            break;
-                        case 1:
-                            statustext = 'Queued for verification';
-                            statusclass = 'trweb_status_verifqueued';
-                            break;
-                        case 2:
-                            statustext = 'Verifying';
-                            statusclass = 'trweb_status_verifying';
-                            break;
-                        case 3:
-                            statustext = 'Queued';
-                            break;
-                        case 4:
-                            statustext = 'Downloading';
-                            statusclass = 'trweb_status_downloading';
-                            break;
-                        case 6:
-                            statustext = 'Seeding';
-                            statusclass = 'trweb_status_seeding';
-                            break;
-                    }
-
-                    statustext = `[${srv}]: ${statustext} - ${server_status.percentDone}%`;
-                }
-            }
-            control_element.element_statusbar.style.width = `${barwidth}%`;
-            control_element.classList.add(statusclass);
-            status.appendChild(document.createTextNode(statustext));
-        }
-    }
-
     handleEvent(e) {
+        this.#log(6, `Handling event of type ${e.type}`);
         switch (e.type) {
-            case 'DOMContentLoaded':
-                this.#logger('Activating TRWEB instance');
-                
-                this.#container = document.getElementById(this.#container);
-                this.#container.classList.add('trweb_container');
-                this.#container.appendChild(this.#dom_menubar.getElement());
-                this.#container.appendChild(this.#dom_torrentmanagger.getElement());
-                this.#container.appendChild(this.#guiFooter);
-                
-                this.#dom_servermanager.loadServers();
-                this.#dom_servermanager.saveServers();
-                this.setTimer();
-                break;
+        case 'DOMContentLoaded':
+            this.#logger('Activating TRWEB instance');
+            
+            this.#container = document.getElementById(this.#container);
+            this.#container.classList.add('trweb_container', 'd-flex', 'flex-column', 'h-100');
+            this.#container.appendChild(this.#dom_menubar.element);
+            this.#container.appendChild(this.#dom_torrentmanagger.element);
+            this.#container.appendChild(this.#guiFooter);
+            
+            this.#dom_servermanager.loadServers();
+            this.setTimer();
+            break;
+        default:
+            this.#log(5, `Event type ${e.type} not supported`);
+            break;
         }
     }
 
     refresh() {
+        this.#log(6,'Refresh');
         for (const [key, value] of Object.entries(this.#dom_servermanager.getServers())) {
-            //value.refreshSession();
             value.refreshTorrentList();
         }
     }
 
-    sort() {
-        let list = Object.values(this.#knownTorrents);
-        list.sort((a, b) => a.name.localeCompare(b.name));
-
-        for (const torrent of list) {
-            this.#dom_torrentmanagger.getElement().appendChild(torrent.getElement());
-        }
-        return list;
-    }
-
     #timercb = function() {
-        if (this.#needsSort) {
-            this.#needsSort = false;
-            this.sort();
-        }
+        this.#log(6,'Timer tick');
         this.refresh();
     }.bind(this);
 
@@ -223,25 +110,11 @@ class trweb {
     }
 
     addServer(name, url, user, pass) {
-        this.#registerServer(name, {'rpcurl': url, 'auth': `Basic ${btoa(`${user}:${pass}`)}`});
-
-        for (const hash of Object.keys(this.#knownTorrents)) {
-            this.#createServerEntryForTorrent(hash, name);
-        }
-
-        this.#dom_servermanager.saveServers();
+        this.#dom_servermanager.addServer(name, url, user, pass);
     }
 
     removeServer(name) {
-        delete this.#dom_servermanager.getServers()[name];
-
-        for (const [hash, entry] of Object.entries(this.#knownTorrents)) {
-            entry.element.removeChild(entry.element_server[name]);
-            delete entry.servers[name];
-            delete entry.element_server[name]
-        }
-
-        this.#dom_servermanager.saveServers();
+        this.#dom_servermanager.removeServer(name);
     }
 }
 

style/trweb.css

@@ -1,5 +1,7 @@
 .trweb_torrentlistview {
     background-color: cadetblue;
+    overflow-x: clip;
+    overflow-y: auto;
 }
 .trweb_torrentlistentry:nth-child(3n-1) {
     background-color: darkcyan;
@@ -17,7 +19,7 @@
 }
 
 .trweb_torrentlistserver.trweb_status_offline {
-    display: none;
+    visibility: hidden;
 }
 
 .trweb_torrentlistserver > div > * {
@@ -93,3 +95,12 @@
     display: block;
 }
 
+.trweb_formshade {
+    background-color: rgba(0,0,0,0.75);
+    height: 100%;
+    position:absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 10;
+}