Add server manager

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', {
@@ -34,6 +58,12 @@ class trdom_servermanager extends EventTarget {
         this.#saveServers();
     }
 
+    deleteServer(name) {
+        delete this.#servers[name];
+        this.saveServers();
+        window.location.reload();
+    }
+
     #loadcb;
     #loadServers() {
         let serverjson = this.#loadcb('servers');
@@ -71,11 +101,64 @@ 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();
+                    window.alert('Server add form isn\'t implemented');
+                    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/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]);
+            this.#elements.serverlist.buttons[name] = null;
+        }
+    }
+
     #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) {

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

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;
+}