starred/UpSnap
1
0
Fork 0
mirror of https://github.com/seriousm4x/UpSnap.git synced 2026-07-31 01:28:22 -04:00
Code Issues Packages Projects Releases Wiki Activity

add delete function

Browse Source
This commit is contained in:
Maxi Quoß
2021-09-30 14:34:55 +02:00
parent baea7dcc80
commit 5376bbf4a3
4 changed files with 200 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
app/wol/static/js/scan.js → app/wol/static/js/settings.js
View File

@@ -1,5 +1,14 @@
document.getElementById("scan-button").addEventListener("click", scan)
var deleteButtons = document.querySelectorAll('[id*=-delete-button]');
for (let index = 0; index < deleteButtons.length; index++) {
const element = deleteButtons[index];
element.addEventListener('click', () => {
element.disabled = true;
element.innerText = "Deleted";
});
}
async function scan() {
const table = document.getElementById("scan-table").getElementsByTagName('tbody')[0];
table.innerHTML = "";
@@ -7,7 +16,7 @@ async function scan() {
tableContainer.classList.add("is-hidden");
document.getElementById("scan-button").classList.add("is-loading");
const response = await fetch("/scan");
const response = await fetch("/settings/scan");
const data = await response.json();
if (data.devices.length == 0) {
@@ -36,6 +45,7 @@ async function scan() {
button.addEventListener("click", function (event) {
add_device(JSON.stringify(device));
event.target.disabled = true;
event.target.innerText = "Added";
});
td4.appendChild(button);
}
@@ -45,8 +55,16 @@ async function scan() {
function add_device(data) {
var xhr = new XMLHttpRequest();
var url = "/add-device/";
var url = "/settings/add/";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(data);
}
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);
}

271
app/wol/templates/wol/settings.html
View File

@@ -48,15 +48,15 @@
</p>
</section>
<section class="section pt-4 pb-3">
<form action="/save-settings/" method="post">
<form action="/settings/save/" method="post">
{% csrf_token %}
<div class="box no-flex">
<h2 class="title is-size-3 mb-4">General</h2>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<div class="columns">
<div class="column is-one-quarter">
<span class="mr-2"><strong>Notifications:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<div class="column is-one-quarter">
<div class="control">
<label class="radio">
<input id="noti-on" type="radio" name="notifications" value="on" {% if settings.enable_notifications %}checked{% endif %}>
@@ -69,11 +69,11 @@
</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<div class="columns">
<div class="column is-one-quarter">
<span class="mr-2"><strong>Console logging:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<div class="column is-one-quarter">
<div class="control">
<label class="radio">
<input id="console-on" type="radio" name="console" value="on" {% if settings.enable_console_logging %}checked{% endif %}>
@@ -86,11 +86,11 @@
</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<div class="columns">
<div class="column is-one-quarter">
<span class="mr-2"><strong>Sort devices by:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<div class="column is-one-quarter">
<div class="control">
<label class="radio">
<input id="sort-name" type="radio" name="sort" value="name" {% if settings.sort_by == "name" %}checked{% endif %}>
@@ -103,11 +103,11 @@
</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<div class="columns">
<div class="column is-one-quarter">
<label class="mr-2" for="ip-range"><strong>Network address for discovering devices:</strong></label>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen is-narrow">
<div class="column is-one-quarter is-narrow">
<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>
@@ -116,117 +116,150 @@
</form>
</section>
<section class="section py-3">
<div class="box no-flex">
<h2 class="title is-size-3 mb-4">Add devices</h2>
{% if settings.scan_address %}
<button id="scan-button" class="button is-primary">Scan network</button>
{% else %}
<article class="message is-danger">
<div class="message-body">
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>
{% endif %}
<div id="scan-table-container" class="table-container py-3 is-hidden">
<table id="scan-table" class="table is-fullwidth">
<thead>
<th>Name</th>
<th>IP</th>
<th>MAC</th>
<th>Action</th>
</thead>
<tbody></tbody>
</table>
<div class="columns is-multiline is-mobile">
<div class="column is-full-mobile is-full-tablet is-full-desktop is-full-widescreen is-half-fullhd">
<div class="box no-flex">
<h2 class="title is-size-3 mb-4">Add devices</h2>
{% if settings.scan_address %}
<button id="scan-button" class="button is-primary">Scan network</button>
{% else %}
<article class="message is-danger">
<div class="message-body">
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>
{% endif %}
<div id="scan-table-container" class="table-container py-3 is-hidden">
<table id="scan-table" class="table is-fullwidth">
<thead>
<th>Name</th>
<th>IP</th>
<th>MAC</th>
<th>Action</th>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<div class="column is-full-mobile is-full-tablet is-full-desktop is-full-widescreen is-half-fullhd">
<div class="box no-flex">
<h2 class="title is-size-3 mb-4">Delete devices</h2>
<div id="delete-table-container" class="table-container py-3">
<table id="delete-table" class="table is-fullwidth">
<thead>
<th>Name</th>
<th>IP</th>
<th>MAC</th>
<th>Action</th>
</thead>
<tbody>
{% for dev in devices %}
<tr>
<td>{{ dev.name }}</td>
<td>{{ dev.ip }}</td>
<td>{{ dev.mac }}</td>
<td><button id="{{ dev.id }}-delete-button" class="button is-danger is-small" onclick="del_device({{ dev.id }})">Delete</button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="section py-3">
<div class="box">
<h2 class="title is-size-3 mb-4">App info</h2>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>App version:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ app_version }}</p>
<div class="columns">
<div class="column">
<div class="box">
<h2 class="title is-size-3 mb-4">App info</h2>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>App version:</strong></span>
</div>
<div class="column">
<p>{{ app_version }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Ping interval:</strong></span>
</div>
<div class="column">
<p>{{ ping_interval }} seconds</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Devices in database:</strong></span>
</div>
<div class="column">
<p>{{ devices|length }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Current visitors:</strong></span>
</div>
<div class="column">
<p>{{ visitors }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Debug mode:</strong></span>
</div>
<div class="column">
<p>{{ debug }}</p>
</div>
</div>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Ping interval:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ ping_interval }} seconds</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Devices in database:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ devices_count }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Current visitors:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ visitors }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Debug mode:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ debug }}</p>
</div>
</div>
</div>
</section>
<section class="section py-3">
<div class="box">
<h2 class="title is-size-3 mb-4">System info</h2>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>System:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ platform.system }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Node:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ platform.node }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Release:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ platform.release }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Version:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ platform.version }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column is-half-mobile is-one-thirds-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<span class="mr-2"><strong>Machine:</strong></span>
</div>
<div class="column is-half-mobile is-two-thirds-tablet is-three-quarters-desktop is-four-fifths-widescreen">
<p>{{ platform.machine }}</p>
<div class="column">
<div class="box">
<h2 class="title is-size-3 mb-4">System info</h2>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>System:</strong></span>
</div>
<div class="column">
<p>{{ platform.system }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Node:</strong></span>
</div>
<div class="column">
<p>{{ platform.node }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Release:</strong></span>
</div>
<div class="column">
<p>{{ platform.release }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Version:</strong></span>
</div>
<div class="column">
<p>{{ platform.version }}</p>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<span class="mr-2"><strong>Machine:</strong></span>
</div>
<div class="column">
<p>{{ platform.machine }}</p>
</div>
</div>
</div>
</div>
</div>
@@ -236,7 +269,7 @@
<footer>
<script src="{% static 'js/bulma.js' %}"></script>
<script src="{% static 'js/scan.js' %}"></script>
<script src="{% static 'js/settings.js' %}"></script>
</footer>
</html>

7
app/wol/urls.py
View File

@@ -5,7 +5,8 @@ from wol import views
urlpatterns = [
path("", views.index, name="index"),
path("settings/", views.settings, name="settings"),
path("save-settings/", views.save_settings, name="save_settings"),
path("scan/", views.scan, name="scan"),
path("add-device/", views.add_device, name="add_device")
path("settings/save/", views.settings_save, name="settings_save"),
path("settings/scan/", views.settings_scan, name="settings_scan"),
path("settings/add/", views.settings_add, name="settings_add"),
path("settings/del/", views.settings_del, name="settings_del")
]

30
app/wol/views.py
View File

@@ -32,13 +32,13 @@ def index(request):
def settings(request):
conf = Settings.objects.first()
devices_count = Device.objects.all().count()
devices = Device.objects.all()
visitors = Websocket.objects.first().visitors
context = {
"settings": conf,
"ping_interval": os.getenv("PING_INTERVAL"),
"devices_count": devices_count,
"devices": devices,
"platform": platform.uname(),
"app_version": app_version,
"debug": os.getenv("DJANGO_DEBUG"),
@@ -48,7 +48,7 @@ def settings(request):
return render(request, "wol/settings.html", context)
def save_settings(request):
def settings_save(request):
if request.method == "POST":
form = SettingsForm(request.POST)
if form.is_valid():
@@ -64,7 +64,7 @@ def save_settings(request):
return HttpResponseRedirect('/settings/')
def scan(request):
def settings_scan(request):
data = {
"devices": []
}
@@ -74,7 +74,7 @@ def scan(request):
if not conf.scan_address:
return JsonResponse(data=data)
p = subprocess.Popen(["nmap", "-sP", conf.scan_address], stdout=subprocess.PIPE)
p = subprocess.Popen(["sudo", "nmap", "-sP", conf.scan_address], stdout=subprocess.PIPE)
out = p.communicate()[0].decode("utf-8")
ip_line = "Nmap scan report for"
mac_line = "MAC Address:"
@@ -104,7 +104,7 @@ def scan(request):
@method_decorator(csrf_exempt, name="dispatch")
def add_device(request):
def settings_add(request):
data = {}
if request.method == "POST":
post_body = json.loads(request.body.decode('utf-8'))
@@ -130,3 +130,21 @@ def add_device(request):
})})
return JsonResponse(data=data)
@method_decorator(csrf_exempt, name="dispatch")
def settings_del(request):
data = {}
if request.method == "POST":
dev_id = int(request.body.decode('utf-8'))
Device.objects.get(id=dev_id).delete()
data["status"] = 200
else:
data["status"] = 500
channel_layer = get_channel_layer()
async_to_sync(channel_layer.group_send)(
"wol", {"type": "send_status", "status": json.dumps({
"reload": True
})})
return JsonResponse(data=data)