device edit refactor

CLAUDE.md

@@ -939,4 +939,5 @@ When writing new LiveView code or JavaScript hooks:
 - Take another snapshot
 - Compare - memory should not continuously grow
 - assets are rebuilt automatically on filesystem change
-- never try to run npm, it's not included in phoenix
+- never try to run npm, it's not included in phoenix
+- assets build themselves on file change, you do not need to ever run mix assets.build

assets/js/app.ts

@@ -822,15 +822,23 @@ const NetworkMap = {
 // MikroTik Port Sync - automatically switches port when SSL checkbox is toggled
 const MikrotikPortSync = {
   handleSslChange: null as ((e: Event) => void) | null,
+  sslCheckbox: null as HTMLInputElement | null,
 
-  mounted(this: any) {
-    const sslCheckbox = this.el.querySelector('[name="device[mikrotik_use_ssl]"]')
+  setupListener(this: any) {
+    // Clean up existing listener first
+    if (this.sslCheckbox && this.handleSslChange) {
+      this.sslCheckbox.removeEventListener('change', this.handleSslChange)
+    }
+
+    const sslCheckbox = this.el.querySelector('[name="device[mikrotik_use_ssl]"]') as HTMLInputElement
     const portInput = this.el.querySelector('[name="device[mikrotik_port]"]') as HTMLInputElement
 
     if (!sslCheckbox || !portInput) return
 
+    this.sslCheckbox = sslCheckbox
+
     this.handleSslChange = () => {
-      const isChecked = (sslCheckbox as HTMLInputElement).checked
+      const isChecked = sslCheckbox.checked
       const currentPort = portInput.value.trim()
 
       // Only update port if it's empty or set to one of the default values
@@ -844,11 +852,20 @@ const MikrotikPortSync = {
     sslCheckbox.addEventListener('change', this.handleSslChange)
   },
 
+  mounted(this: any) {
+    this.setupListener()
+  },
+
+  updated(this: any) {
+    // Re-attach listener when LiveView updates the DOM (e.g., when mikrotik_enabled changes)
+    this.setupListener()
+  },
+
   destroyed(this: any) {
-    const sslCheckbox = this.el.querySelector('[name="device[mikrotik_use_ssl]"]')
-    if (sslCheckbox && this.handleSslChange) {
-      sslCheckbox.removeEventListener('change', this.handleSslChange)
+    if (this.sslCheckbox && this.handleSslChange) {
+      this.sslCheckbox.removeEventListener('change', this.handleSslChange)
       this.handleSslChange = null
+      this.sslCheckbox = null
     }
   }
 }