Feature: Add customisable icons in topology (#193)

* [up] add config for custom images, better js * [up] use bundler to bundle js * [fix] remove domcontentloaded since defer is used * [fix] formatting with black * [fix] images drf api * [up] add support for custom icons on additional roles: power panel, power feed, circuit * [up] optimize topology generation by using `_id` when trying to access pk of related object * [fix] kebab case instead of slugification * [fix] use empty queryset in api views & change coord save logic
2022-12-09 13:40:39 +01:00
parent 5c87694b87
commit 52c2611e9d
30 changed files with 1395 additions and 628 deletions
@@ -0,0 +1,41 @@
+import { getCookie } from './csrftoken.js'
+import { toast } from './toast.js'
+
+const mapping = {}
+const csrftoken = getCookie('csrftoken')
+
+document.querySelector('form#images').addEventListener('submit', async (e) => {
+    e.preventDefault()
+    try {
+        const res = await fetch('/api/plugins/netbox_topology_views/images/', {
+            method: 'POST',
+            body: JSON.stringify(mapping),
+            headers: {
+                'X-CSRFToken': csrftoken,
+                'Content-Type': 'application/json'
+            }
+        })
+
+        if (!res.ok) throw new Error(await res.text())
+        toast.success('Saved settings')
+    } catch (err) {
+        console.dir(err)
+        toast.error(err.message)
+    }
+})
+
+document.querySelectorAll('form#images .dropdown-menu img').forEach((el) => {
+    el.addEventListener('click', (e) => {
+        if (!(e.currentTarget instanceof HTMLElement)) return
+        const {
+            dataset: { role, image }
+        } = e.currentTarget
+
+        mapping[role] = image
+
+        const button = e.currentTarget
+            .closest('.dropdown')
+            ?.querySelector(`#dropdownMenuButton${role}`)
+        if (button) button.innerHTML = `<img src="${image}" />`
+    })
+})