save connections and apply inverse connections

connection-edit.js

@@ -72,10 +72,6 @@ export class ConnectionEdit extends HTMLElement {
     this.shadowRoot.append(style)
   }
 
-  display() {
-    
-  }
-
   get data() {
     return {
       networkAccess: this.netSelect.value,
@@ -85,7 +81,6 @@ export class ConnectionEdit extends HTMLElement {
   set data(value) {
     this.netText.innerText = JSON.stringify(value)
     this.netSelect.value = value.networkAccess ?? 'local'
-    this.display()
   }
 
   set error(error) {

connections.js

@@ -1,12 +1,24 @@
 export class Connections extends HTMLElement {
+  icons = {
+    del: `
+      <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+  <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
+</svg>
+    `
+  }
+
   textEn = {
     add: 'Add connection',
     cancel: 'Cancel',
+    read: 'read',
+    readWrite: 'read and write',
   }
 
   textEs = {
     add: 'Añadir conexión',
     cancel: 'Cancelar',
+    read: 'leer',
+    readWrite: 'leer y escribir',
   }
 
   constructor() {
@@ -38,6 +50,27 @@ export class Connections extends HTMLElement {
       m-dialog::part(footer) {
         padding-top: 15px;
       }
+      button.icon {
+        border: none;
+        background: inherit;
+        color: #555;
+      }
+      button.icon svg {
+        width: 12px;
+        height: 12px;
+      }
+      .connection {
+        display: flex;
+        flex-direction: row;
+        gap: 8px;
+        align-items: center;
+      }
+      .access {
+        font-size: 80%;
+        background: #ccc;
+        border-radius: 3px;
+        padding: 5px;
+      }
     `
     this.shadowRoot.append(style)
   }
@@ -81,10 +114,25 @@ export class Connections extends HTMLElement {
   }
 
   display() {
-    const entries = Object.entries(this.data)
+    const entries = Object.entries(this.data).filter(
+      ([k, v]) => v !== undefined
+    )
     const content = entries.map(([path, access]) => {
       const el = document.createElement('div')
-      el.innerText = `${path}: ${access}`
+      el.classList.add('connection')
+      const pathEl = document.createElement('span')
+      pathEl.innerText = path
+      el.append(pathEl)
+      const accessEl = document.createElement('span')
+      accessEl.innerText = this.text[access]
+      accessEl.classList.add('access')
+      const delBtn = document.createElement('button')
+      delBtn.classList.add('delete', 'icon')
+      delBtn.innerHTML = this.icons.del
+      delBtn.addEventListener('click', () => {
+        this.data = {...this.data, [path]: undefined}
+      })
+      el.append(accessEl, delBtn)
       return el
     })
     this.content.replaceChildren(...content)

page-settings.js

@@ -75,8 +75,10 @@ export class PageSettings extends HTMLElement {
   get data() {
     return {
       ...this.network.data,
-      outbound: this.outbound.data,
-      inbound: this.inbound.data,
+      connections: {
+        outbound: this.outbound.data,
+        inbound: this.inbound.data,
+      },
     }
   }