Graham McIntire
7ffc4ebd2b
DeviceListReorder, SortableList, MikrotikPortSync are each used on a single page (devices index, escalation/schedule show, device edit form respectively) — push them out of app.js into their own chunks via lazyHook. Also extract MikrotikPortSync into its own file under hooks/ for consistency. Compress CopyToClipboard's flash feedback by collapsing the duplicated success/error inline-SVG/setTimeout blocks into one helper, drop the debug console.logs, and remove the bulk Phoenix-template boilerplate comment block that was just generated noise. After-bundle (minified): app.js 287.6 KB (-2 KB on top of prior split) device_list_reorder 4.6 KB loaded on /devices only sortable_list 3.1 KB loaded on escalation+schedule pages mikrotik_port_sync 1.3 KB loaded on device edit form only
49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
// Auto-switches the MikroTik API port between 8728 (plain) and 8729
|
|
// (TLS) when the SSL checkbox is toggled, but only when the port input
|
|
// is empty or already at one of those defaults.
|
|
|
|
export const MikrotikPortSync = {
|
|
handleSslChange: null as ((e: Event) => void) | null,
|
|
sslCheckbox: null as HTMLInputElement | null,
|
|
|
|
setupListener(this: any) {
|
|
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.checked
|
|
const currentPort = portInput.value.trim()
|
|
|
|
if (currentPort === '' || currentPort === '8729' || currentPort === '8728') {
|
|
portInput.value = isChecked ? '8729' : '8728'
|
|
portInput.dispatchEvent(new Event('input', { bubbles: true }))
|
|
}
|
|
}
|
|
|
|
sslCheckbox.addEventListener('change', this.handleSslChange)
|
|
},
|
|
|
|
mounted(this: any) {
|
|
this.setupListener()
|
|
},
|
|
|
|
updated(this: any) {
|
|
this.setupListener()
|
|
},
|
|
|
|
destroyed(this: any) {
|
|
if (this.sslCheckbox && this.handleSslChange) {
|
|
this.sslCheckbox.removeEventListener('change', this.handleSslChange)
|
|
this.handleSslChange = null
|
|
this.sslCheckbox = null
|
|
}
|
|
}
|
|
}
|