Delete servers using console

Only removing is supported for now

js/trdom_servermanager.js

@@ -14,9 +14,33 @@ class trdom_servermanager extends EventTarget {
         return this.#servers;
     }
 
-    #registerServer = function(name, initdata) {
+    #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', {
@@ -29,11 +53,21 @@ class trdom_servermanager extends EventTarget {
         server.refreshTorrentList();
     }
 
-    addServer(name, url, user, pass) {
-        this.#registerServer(name, {'rpcurl': url, 'auth': `Basic ${btoa(`${user}:${pass}`)}`});
+    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() {
         let serverjson = this.#loadcb('servers');
@@ -71,11 +105,100 @@ class trdom_servermanager extends EventTarget {
         this.#loadcb = loadcb;
         this.#savecb = savecb;
         this.#logcb = logcb
+
+        this.menuentry.appendChild(document.createTextNode('[Servers]'));
+        this.menuentry.setAttributeNS('trweb', 'servermanagerbutton', 'manager');
+        this.menuentry.addEventListener('click', this);
+
+        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;

js/trdom_torrentcontrol.js

@@ -137,8 +137,10 @@ class trdom_torrentcontrol extends EventTarget {
             break;
         case 'torrent-deleted':
             this.#log(6, 'we be delet');
-            this.#data = null;
+            if (this.exists) {
+                delete this.#data.name;
                 this.updateDOM();
+            }
             break;
         case 'torrent-updated':
             if (e.detail.torrentHash == this.#hash) {

js/trserver.js

@@ -17,6 +17,30 @@ class trserver extends EventTarget {
     #sessionHeader;
     #requests = [];
 
+    #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;
@@ -50,6 +74,12 @@ class trserver extends EventTarget {
         this.#rpcurl = initdata.rpcurl;
         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) {
@@ -243,8 +273,9 @@ class trserver extends EventTarget {
 
     getInstanceData() {
         return {
-            'rpcurl': this.#rpcurl,
-            'auth': this.#authHeader
+            type: 'transmission',
+            rpcurl: this.#rpcurl,
+            auth: this.#authHeader
         };
     }
 

js/trweb.js

@@ -44,6 +44,8 @@ class trweb {
         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');
 
@@ -111,17 +113,9 @@ class trweb {
         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]
+    removeServer(name) {
+        this.#dom_servermanager.removeServer(name);
     }
-
-        this.#dom_servermanager.saveServers();
-    }*/
 }
 
 var trinstance = new trweb('trcontainer', null, null, function(msg) {console.info(`TRWEB: ${msg}`)});

style/trweb.css

@@ -95,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;
+}