From 79739dc1b384538a10a9fcf68e2084542f725760 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maxi=20Quo=C3=9F?= Date: Fri, 14 Jan 2022 18:20:28 +0100 Subject: [PATCH] settings: make devices editable #5 --- app/wol/static/js/settings.js | 107 +++++++++++++++++++++------- app/wol/templates/wol/settings.html | 62 +++++++++++++--- app/wol/urls.py | 2 +- app/wol/views.py | 2 +- 4 files changed, 134 insertions(+), 39 deletions(-) diff --git a/app/wol/static/js/settings.js b/app/wol/static/js/settings.js index 0c7daa12..72e1c735 100644 --- a/app/wol/static/js/settings.js +++ b/app/wol/static/js/settings.js @@ -5,11 +5,68 @@ window.onload = () => { document.getElementById("scan-button").addEventListener("click", scan); - var deleteButtons = document.querySelectorAll('[id=delete-button]'); + // save device buttons + const saveButtons = document.querySelectorAll('[id=save-button]'); + for (let index = 0; index < saveButtons.length; index++) { + const element = saveButtons[index]; + element.addEventListener('click', () => { + const devNameLabelContainer = document.querySelector(`[id=dev-name-label-container][data-id="${element.dataset.id}"]`) + const devNameInputContainer = document.querySelector(`[id=dev-name-input-container][data-id="${element.dataset.id}"]`) + const devNameInput = document.querySelector(`[id=dev-name-input][data-id="${element.dataset.id}"]`) + + const devIpLabelContainer = document.querySelector(`[id=dev-ip-label-container][data-id="${element.dataset.id}"]`) + const devIpInputContainer = document.querySelector(`[id=dev-ip-input-container][data-id="${element.dataset.id}"]`) + const devIpInput = document.querySelector(`[id=dev-ip-input][data-id="${element.dataset.id}"]`) + + const devMacLabel = document.querySelector(`[id=dev-mac][data-id="${element.dataset.id}"]`) + + devNameLabelContainer.innerText = devNameInput.value; + devNameInputContainer.classList.toggle("is-hidden"); + devNameLabelContainer.classList.toggle("is-hidden"); + + devIpLabelContainer.innerText = devIpInput.value; + devIpInputContainer.classList.toggle("is-hidden"); + devIpLabelContainer.classList.toggle("is-hidden"); + + post_settings("/settings/update/", JSON.stringify({ + "name": devNameInput.value, + "ip": devIpInput.value, + "mac": devMacLabel.innerText + })); + element.classList.toggle("is-hidden"); + const editButton = document.querySelector(`[id="edit-button"][data-id="${element.dataset.id}"]`) + editButton.classList.toggle("is-hidden"); + }); + } + + // edit device buttons + const editButtons = document.querySelectorAll('[id=edit-button]'); + for (let index = 0; index < editButtons.length; index++) { + const element = editButtons[index]; + element.addEventListener('click', () => { + element.classList.toggle("is-hidden"); + const saveButton = document.querySelector(`[id="save-button"][data-id="${element.dataset.id}"]`) + saveButton.classList.toggle("is-hidden"); + + // Swap table cells with input fields + const devNameLabelContainer = document.querySelector(`[id=dev-name-label-container][data-id="${element.dataset.id}"]`) + devNameLabelContainer.classList.toggle("is-hidden"); + const devNameInputContainer = document.querySelector(`[id=dev-name-input-container][data-id="${element.dataset.id}"]`) + devNameInputContainer.classList.toggle("is-hidden"); + + const devIpLabelContainer = document.querySelector(`[id=dev-ip-label-container][data-id="${element.dataset.id}"]`) + devIpLabelContainer.classList.toggle("is-hidden"); + const devIpInputContainer = document.querySelector(`[id=dev-ip-input-container][data-id="${element.dataset.id}"]`) + devIpInputContainer.classList.toggle("is-hidden"); + }); + } + + // delete device buttons + const deleteButtons = document.querySelectorAll('[id=delete-button]'); for (let index = 0; index < deleteButtons.length; index++) { const element = deleteButtons[index]; element.addEventListener('click', () => { - del_device(element.dataset.id); + post_settings("/settings/del/", element.dataset.id); element.disabled = true; element.innerText = "Deleted"; }); @@ -37,24 +94,23 @@ async function scan() { for (let index = 0; index < data.devices.length; index++) { const device = data.devices[index]; - var row = table.insertRow(); - var td1 = row.insertCell(); - var td2 = row.insertCell(); - var td3 = row.insertCell(); - var td4 = row.insertCell(); - if (device.name == "") { - var deviceName = "Unknown"; - } else { - var deviceName = device.name; + const row = table.insertRow(); + const td1 = row.insertCell(); + const td2 = row.insertCell(); + const td3 = row.insertCell(); + const td4 = row.insertCell(); + const deviceName = "Unknown"; + if (device.name != "") { + deviceName = device.name; } td1.appendChild(document.createTextNode(deviceName)); td2.appendChild(document.createTextNode(device.ip)); td3.appendChild(document.createTextNode(device.mac)); - var button = document.createElement("button"); + const button = document.createElement("button"); button.classList.add("button", "is-primary", "is-small"); button.innerText = "Add"; button.addEventListener("click", function (event) { - add_device(JSON.stringify(device)); + update_device(JSON.stringify(device)); event.target.disabled = true; event.target.innerText = "Added"; }); @@ -64,18 +120,15 @@ async function scan() { tableContainer.classList.remove("is-hidden"); } -function add_device(data) { - var xhr = new XMLHttpRequest(); - var url = "/settings/scan_add/"; - xhr.open("POST", url, true); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.send(data); +async function post_settings(url, data) { + await fetch(url, { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: data + }) + .catch((error) => { + console.error(error); + }) } - -function del_device(devId) { - var xhr = new XMLHttpRequest(); - var url = "/settings/del/"; - xhr.open("POST", url, true); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.send(devId); -} \ No newline at end of file diff --git a/app/wol/templates/wol/settings.html b/app/wol/templates/wol/settings.html index 5f171d7b..64ef8563 100644 --- a/app/wol/templates/wol/settings.html +++ b/app/wol/templates/wol/settings.html @@ -107,7 +107,14 @@

General

- + @@ -130,7 +137,14 @@

Scan network

Please enter the network address above and save to use this feature. Network address should look like "192.168.1.0/24". - + {% endif %}

Add custom

@@ -163,9 +177,9 @@

Add custom

-

Delete devices

-
- +

Edit devices

+
+
@@ -175,10 +189,38 @@

Delete devices

{% for dev in devices %} - - - - + + + + {% endfor %} @@ -316,4 +358,4 @@

System

- \ No newline at end of file + diff --git a/app/wol/urls.py b/app/wol/urls.py index c6f24950..2bedd391 100644 --- a/app/wol/urls.py +++ b/app/wol/urls.py @@ -7,7 +7,7 @@ path("settings/", views.settings, name="settings"), path("settings/save/", views.settings_save, name="settings_save"), path("settings/scan/", views.settings_scan, name="settings_scan"), - path("settings/scan_add/", views.settings_scan_add, name="settings_scan_add"), + path("settings/update/", views.settings_update, name="settings_update"), path("settings/custom_add/", views.settings_custom_add, name="settings_custom_add"), path("settings/del/", views.settings_del, name="settings_del"), path("settings/export/", views.settings_export, name="settings_export"), diff --git a/app/wol/views.py b/app/wol/views.py index 6d9ef764..4bd0fb6a 100644 --- a/app/wol/views.py +++ b/app/wol/views.py @@ -123,7 +123,7 @@ def settings_custom_add(request): @method_decorator(csrf_exempt, name="dispatch") -def settings_scan_add(request): +def settings_update(request): data = {} if request.method == "POST": post_body = json.loads(request.body.decode("utf-8"))
Name IP
{{ dev.name }}{{ dev.ip }}{{ dev.mac }} +
+ {{ dev.name }} +
+ + 		+
+ {{ dev.ip }} +
+ + 		+ {{ dev.mac }} + +
+ + + +
+