Skip to content

Commit

Permalink
settings: make devices editable #5
Browse files Browse the repository at this point in the history
  • Loading branch information
@seriousm4x
seriousm4x committed Jan 14, 2022
1 parent c1b6f6b commit 79739dc
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 39 deletions.
107 changes: 80 additions & 27 deletions app/wol/static/js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
});
Expand Down Expand Up @@ -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";
});
Expand All @@ -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);
}
62 changes: 52 additions & 10 deletions app/wol/templates/wol/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,14 @@ <h2 class="title is-size-3 my-5">General</h2>
<input id="ip-range" class="input" type="text" placeholder="192.168.1.0/24" name="ip_range" value="{% if settings.scan_address %}{{ settings.scan_address }}{% endif %}" pattern="^([01]?\d\d?|2[0-4]\d|25[0-5])(?:\.(?:[01]?\d\d?|2[0-4]\d|25[0-5])){2}(?:\.(?:0))(?:/[0-2]\d|/3[0-2])$">
</div>
</div>
<button class="button is-primary" type="submit" value="Submit">Save</button>
<button class="button is-primary" type="submit" value="Submit">
<span class="icon is-small">
<i class="fas fa-save"></i>
</span>
<span>
Save
</span>
</button>
</div>
</form>
</section>
Expand All @@ -130,7 +137,14 @@ <h3 class="title is-size-4 mb-5">Scan network</h3>
Please enter the network address above and save to use this feature. Network address should look like "192.168.1.0/24".
</div>
</article>
<button id="scan-button" class="button is-primary" disabled>Scan network</button>
<button id="scan-button" class="button is-primary" disabled>
<span class="icon is-small">
<i class="fas fa-network-wired"></i>
</span>
<span>
Scan
</span>
</button>
{% endif %}
<h3 class="title is-size-4 my-5">Add custom</h3>
<form action="/settings/custom_add/" method="post">
Expand Down Expand Up @@ -163,9 +177,9 @@ <h3 class="title is-size-4 my-5">Add custom</h3>
<tbody></tbody>
</table>
</div>
<h3 class="title is-size-4 my-5">Delete devices</h3>
<div id="delete-table-container" class="table-container">
<table id="delete-table" class="table is-fullwidth">
<h3 class="title is-size-4 my-5">Edit devices</h3>
<div class="table-container">
<table class="table is-fullwidth">
<thead>
<th>Name</th>
<th>IP</th>
Expand All @@ -175,10 +189,38 @@ <h3 class="title is-size-4 my-5">Delete devices</h3>
<tbody>
{% for dev in devices %}
<tr>
<td>{{ dev.name }}</td>
<td>{{ dev.ip }}</td>
<td>{{ dev.mac }}</td>
<td><button id="delete-button" class="button is-danger is-small" data-id="{{ dev.id }}">Delete</button></td>
<td id="dev-name" data-id="{{ dev.id }}">
<div id="dev-name-label-container" data-id="{{ dev.id }}">
{{ dev.name }}
</div>
<div id="dev-name-input-container" data-id="{{ dev.id }}" class="is-hidden">
<input id="dev-name-input" data-id="{{ dev.id }}" type="text" class="input" value="{{ dev.name }}">
</div>
</td>
<td id="dev-ip" data-id="{{ dev.id }}">
<div id="dev-ip-label-container" data-id="{{ dev.id }}">
{{ dev.ip }}
</div>
<div id="dev-ip-input-container" data-id="{{ dev.id }}" class="is-hidden">
<input id="dev-ip-input" data-id="{{ dev.id }}" type="text" class="input" value="{{ dev.ip }}">
</div>
</td>
<td id="dev-mac" data-id="{{ dev.id }}">
{{ dev.mac }}
</td>
<td>
<div class="buttons">
<button id="save-button" class="button is-primary is-small is-hidden" data-id="{{ dev.id }}">
Save
</button>
<button id="edit-button" class="button is-warning is-small" data-id="{{ dev.id }}">
Edit
</button>
<button id="delete-button" class="button is-danger is-small" data-id="{{ dev.id }}">
Delete
</button>
</div>
</td>
</tr>
{% endfor %}
</tbody>
Expand Down Expand Up @@ -316,4 +358,4 @@ <h3 class="title is-size-4 mb-5">System</h3>
<script src="{% static 'js/settings.js' %}"></script>
</footer>

</html>
</html>
2 changes: 1 addition & 1 deletion app/wol/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand Down
2 changes: 1 addition & 1 deletion app/wol/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"))
Expand Down

0 comments on commit 79739dc

Please sign in to comment.