122 lines
4.4 KiB
HTML
122 lines
4.4 KiB
HTML
{% extends 'base.html' %}
|
||
{% block title %}VLAN Groups{% endblock %}
|
||
|
||
{% block content %}
|
||
<h1 class="page-title">VLAN Groups</h1>
|
||
|
||
<form method="POST" action="{{ url_for('group.add_group_route') }}" style="margin-bottom: 1rem;">
|
||
<input type="text" name="vlan_id" placeholder="VLAN ID" required pattern="[0-9]+" style="width: 80px;">
|
||
<input type="text" name="description" placeholder="Group Description">
|
||
<button type="submit">➕ Add Group</button>
|
||
</form>
|
||
|
||
<table class="styled-table">
|
||
<thead>
|
||
<tr>
|
||
<th>VLAN ID</th>
|
||
<th>Description</th>
|
||
<th>User Count</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for group in available_groups %}
|
||
<tr>
|
||
<td>{{ group.vlan_id }}</td>
|
||
<td>
|
||
<form method="POST" action="{{ url_for('group.update_description_route') }}" class="preserve-scroll">
|
||
<input type="hidden" name="group_id" value="{{ group.vlan_id }}">
|
||
<input type="text" name="description" value="{{ group.description or '' }}" class="description-input">
|
||
</form>
|
||
</td>
|
||
<td>{{ group.user_count }}</td>
|
||
<td>
|
||
<form method="POST" action="{{ url_for('group.update_description_route') }}" class="preserve-scroll" style="display:inline;">
|
||
<input type="hidden" name="group_id" value="{{ group.vlan_id }}">
|
||
<input type="hidden" name="description" value="{{ group.description }}">
|
||
<button type="submit" title="Save">💾</button>
|
||
</form>
|
||
<form method="POST" action="{{ url_for('group.delete_group_route_handler') }}" class="preserve-scroll delete-group-form" data-user-count="{{ group.user_count }}" style="display:inline;">
|
||
<input type="hidden" name="group_id" value="{{ group.vlan_id }}">
|
||
<button type="submit">❌</button>
|
||
</form>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- Modal for confirm delete -->
|
||
<div id="confirmModal" class="modal" style="display: none;">
|
||
<div class="modal-content">
|
||
<p>This group has users assigned. What would you like to do?</p>
|
||
<div id="userList" class="user-list"></div>
|
||
<div class="modal-actions">
|
||
<button onclick="closeModal()">Cancel</button>
|
||
<form id="confirmDeleteForm" method="POST" action="{{ url_for('group.delete_group_route_handler') }}">
|
||
<input type="hidden" name="group_id" id="modalGroupId">
|
||
<input type="hidden" name="force_delete" value="true">
|
||
<button type="submit" class="danger">Delete Group and Users</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
document.querySelectorAll('form.preserve-scroll').forEach(form => {
|
||
form.addEventListener('submit', () => {
|
||
localStorage.setItem('scrollY', window.scrollY);
|
||
});
|
||
});
|
||
window.addEventListener('load', () => {
|
||
const scrollY = localStorage.getItem('scrollY');
|
||
if (scrollY) {
|
||
window.scrollTo(0, parseInt(scrollY));
|
||
localStorage.removeItem('scrollY');
|
||
}
|
||
});
|
||
|
||
document.querySelectorAll('.delete-group-form').forEach(form => {
|
||
form.addEventListener('submit', function (e) {
|
||
const userCount = parseInt(this.dataset.userCount);
|
||
const groupId = this.querySelector('[name="group_id"]').value;
|
||
|
||
if (userCount > 0) {
|
||
e.preventDefault();
|
||
fetch('{{ url_for("group.get_users_for_group") }}', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||
body: new URLSearchParams({ vlan_id: groupId })
|
||
})
|
||
.then(resp => resp.json())
|
||
.then(users => {
|
||
const userListDiv = document.getElementById('userList');
|
||
userListDiv.innerHTML = '';
|
||
|
||
if (users.length > 0) {
|
||
const list = document.createElement('ul');
|
||
users.forEach(user => {
|
||
const item = document.createElement('li');
|
||
item.textContent = `${user.mac_address} — ${user.description || 'No description'}`;
|
||
list.appendChild(item);
|
||
});
|
||
userListDiv.appendChild(list);
|
||
} else {
|
||
userListDiv.textContent = 'No users found in this group.';
|
||
}
|
||
|
||
document.getElementById('modalGroupId').value = groupId;
|
||
document.getElementById('confirmModal').style.display = 'flex';
|
||
});
|
||
} else {
|
||
if (!confirm('Delete this group?')) e.preventDefault();
|
||
}
|
||
});
|
||
});
|
||
|
||
function closeModal() {
|
||
document.getElementById('confirmModal').style.display = 'none';
|
||
}
|
||
</script>
|
||
{% endblock %}
|