dev #1
@@ -1,55 +1,195 @@
|
|||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<h2>Switch-Verwaltung</h2>
|
<h2>Devices</h2>
|
||||||
|
|
||||||
<!-- Hinzufügen -->
|
{% if current_user.is_admin %}
|
||||||
<form method="post" class="mb-3">
|
<!-- Neues Gerät hinzufügen -->
|
||||||
<input type="hidden" name="add_switch" value="1">
|
<button class="btn btn-success mb-3" data-bs-toggle="modal" data-bs-target="#deviceModal" onclick="openDeviceModal()">Neues Gerät</button>
|
||||||
<div class="row g-2">
|
{% endif %}
|
||||||
<div class="col"><input class="form-control" name="hostname" placeholder="Hostname" required></div>
|
|
||||||
<div class="col"><input class="form-control" name="ip" placeholder="IP-Adresse" required></div>
|
|
||||||
<div class="col"><input class="form-control" name="username" placeholder="Benutzername" required></div>
|
|
||||||
<div class="col"><input class="form-control" name="password" type="password" placeholder="Passwort" required></div>
|
|
||||||
<div class="col-auto">
|
|
||||||
<button class="btn btn-primary">Hinzufügen</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<!-- Switch-Liste -->
|
<table class="table table-bordered">
|
||||||
<table class="table table-striped table-hover align-middle">
|
<thead>
|
||||||
<thead>
|
<tr>
|
||||||
<tr>
|
<th>Hostname</th>
|
||||||
<th>Hostname</th>
|
<th>IP-Adresse</th>
|
||||||
<th>IP-Adresse</th>
|
<th>MAC-Adresse</th>
|
||||||
<th>Benutzername</th>
|
<th>Port</th>
|
||||||
<th>Aktionen</th>
|
<th>Switch</th>
|
||||||
</tr>
|
<th>Status</th>
|
||||||
</thead>
|
{% if current_user.is_admin %}<th>Aktionen</th>{% endif %}
|
||||||
<tbody>
|
</tr>
|
||||||
{% for s in switches %}
|
</thead>
|
||||||
<tr>
|
<tbody>
|
||||||
<form method="post">
|
{% for d in devices %}
|
||||||
<input type="hidden" name="edit_switch" value="1">
|
<tr>
|
||||||
<input type="hidden" name="old_hostname" value="{{ s['hostname'] }}">
|
<td>{{ d['name'] }}</td>
|
||||||
<td><input class="form-control form-control-sm" name="hostname" value="{{ s['hostname'] }}"></td>
|
<td>{{ d['rpi_ip'] }}</td>
|
||||||
<td><input class="form-control form-control-sm" name="ip" value="{{ s['ip'] }}"></td>
|
<td>{{ d['mac'] }}</td>
|
||||||
<td><input class="form-control form-control-sm" name="username" value="{{ s['username'] }}"></td>
|
<td>{{ d['port'] }}</td>
|
||||||
<td>
|
<td>{{ d['switch_hostname'] or '-' }}</td>
|
||||||
<div class="d-flex gap-1">
|
<td>
|
||||||
<input type="password" class="form-control form-control-sm" name="password" placeholder="Neues Passwort">
|
<form method="post" action="{{ url_for('toggle_device', mac=d['mac']) }}" style="display:inline;">
|
||||||
<button class="btn btn-sm btn-success">Speichern</button>
|
<button class="btn btn-sm {% if d['is_active'] %}btn-success{% else %}btn-secondary{% endif %}" type="submit">
|
||||||
</div>
|
{% if d['is_active'] %}Deaktivieren{% else %}Aktivieren{% endif %}
|
||||||
</form>
|
</button>
|
||||||
<form method="post" style="display:inline;">
|
</form>
|
||||||
<input type="hidden" name="delete_switch" value="{{ s['hostname'] }}">
|
</td>
|
||||||
<button class="btn btn-sm btn-danger ms-1">Löschen</button>
|
{% if current_user.is_admin %}
|
||||||
</form>
|
<td>
|
||||||
</td>
|
<!-- Bearbeiten Modal -->
|
||||||
</tr>
|
<button class="btn btn-secondary btn-sm button login white" data-bs-toggle="modal" data-bs-target="#editDeviceModal"
|
||||||
{% endfor %}
|
onclick="openEditDeviceModal('{{ d['mac'] }}','{{ d['name'] }}','{{ d['rpi_ip'] }}','{{ d['port'] }}')">
|
||||||
</tbody>
|
Bearbeiten
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Switch ändern Modal -->
|
||||||
|
<button class="btn btn-secondary btn-sm button login white" data-bs-toggle="modal" data-bs-target="#switchModal"
|
||||||
|
onclick="openSwitchModal('{{ d['mac'] }}','{{ d['switch_hostname'] }}')">
|
||||||
|
Switch ändern
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Löschen -->
|
||||||
|
<form method="post" style="display:inline;">
|
||||||
|
<input type="hidden" name="delete_device" value="{{ d['mac'] }}">
|
||||||
|
<button class="btn btn-danger btn-sm" onclick="return confirm('Willst du das Gerät wirklich löschen?');">
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</td>
|
||||||
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
<!-- Modal: Neues Gerät -->
|
||||||
|
<div class="modal fade" id="deviceModal" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form method="post">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title black">Neues Gerät hinzufügen</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<input type="hidden" name="add_device" value="1">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>Hostname</label>
|
||||||
|
<input type="text" name="name" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>IP-Adresse</label>
|
||||||
|
<input type="text" name="rpi_ip" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>MAC-Adresse</label>
|
||||||
|
<input type="text" name="mac" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>Port</label>
|
||||||
|
<input type="text" name="port" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>Switch</label>
|
||||||
|
<select name="switch_hostname" class="form-select" required>
|
||||||
|
{% for sw in switches %}
|
||||||
|
<option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-success button login" type="submit">Hinzufügen</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal: Bearbeiten -->
|
||||||
|
<div class="modal fade" id="editDeviceModal" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form method="post">
|
||||||
|
<input type="hidden" name="edit_device" value="1">
|
||||||
|
<input type="hidden" name="old_mac" id="edit_old_mac">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title black">Gerät bearbeiten</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>Hostname</label>
|
||||||
|
<input type="text" name="name" id="edit_name" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>IP-Adresse</label>
|
||||||
|
<input type="text" name="rpi_ip" id="edit_ip" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>MAC-Adresse</label>
|
||||||
|
<input type="text" name="mac" id="edit_mac" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label>Port</label>
|
||||||
|
<input type="text" name="port" id="edit_port" class="form-control" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-primary button login" type="submit">Speichern</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Modal: Switch ändern -->
|
||||||
|
<div class="modal fade" id="switchModal" tabindex="-1" aria-hidden="true">
|
||||||
|
<div class="modal-dialog">
|
||||||
|
<div class="modal-content">
|
||||||
|
<form method="post">
|
||||||
|
<input type="hidden" name="edit_device" value="1">
|
||||||
|
<input type="hidden" name="old_mac" id="switch_mac">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title black">Switch ändern</h5>
|
||||||
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<select name="switch_hostname" id="switch_select" class="form-select" required>
|
||||||
|
{% for sw in switches %}
|
||||||
|
<option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button class="btn btn-primarybutton login" type="submit">Speichern</button>
|
||||||
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function openDeviceModal() {
|
||||||
|
document.querySelector("#deviceModal form").reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
function openEditDeviceModal(mac, name, ip, port) {
|
||||||
|
document.getElementById("edit_old_mac").value = mac;
|
||||||
|
document.getElementById("edit_name").value = name;
|
||||||
|
document.getElementById("edit_ip").value = ip;
|
||||||
|
document.getElementById("edit_mac").value = mac;
|
||||||
|
document.getElementById("edit_port").value = port;
|
||||||
|
}
|
||||||
|
|
||||||
|
function openSwitchModal(mac, switch_hostname) {
|
||||||
|
document.getElementById("switch_mac").value = mac;
|
||||||
|
document.getElementById("switch_select").value = switch_hostname;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user