more changes
This commit is contained in:
@@ -1,152 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}RadMac{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
:root {
|
||||
--bg: #121212;
|
||||
--fg: #f0f0f0;
|
||||
--accent: #4caf50;
|
||||
--cell-bg: #1e1e1e;
|
||||
--card-bg: #2c2c2c;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #f8f9fa;
|
||||
--fg: #212529;
|
||||
--accent: #28a745;
|
||||
--cell-bg: #ffffff;
|
||||
--card-bg: #e9ecef;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
margin: 0;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: var(--card-bg);
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav .links a {
|
||||
margin-right: 1rem;
|
||||
color: var(--fg);
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
nav .links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
nav .right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button#theme-toggle {
|
||||
background: none;
|
||||
border: 1px solid var(--fg);
|
||||
padding: 4px 8px;
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background-color: var(--accent);
|
||||
color: white;
|
||||
padding: 10px 16px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
table.styled-table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin-top: 1rem;
|
||||
background-color: var(--cell-bg);
|
||||
}
|
||||
|
||||
.styled-table th, .styled-table td {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #555;
|
||||
}
|
||||
|
||||
.styled-table th {
|
||||
background-color: var(--card-bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
</style>
|
||||
<meta charset="UTF-8" />
|
||||
<title>{% block title %}RadMac{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<div class="links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/user_list">Users</a>
|
||||
<a href="/group">Groups</a>
|
||||
<a href="/stats">Stats</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button id="theme-toggle">🌓 Theme</button>
|
||||
</div>
|
||||
</nav>
|
||||
<nav>
|
||||
<div class="links">
|
||||
<a href="{{ url_for('index_redirect') }}">Home</a>
|
||||
<a href="{{ url_for('user.user_list') }}">Users</a>
|
||||
<a href="{{ url_for('group.group_list') }}">Groups</a>
|
||||
<a href="{{ url_for('stats') }}">Stats</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button id="theme-toggle">🌓 Theme</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<div id="toast" class="toast"></div>
|
||||
<div id="toast" class="toast"></div>
|
||||
<button id="scrollTopBtn" title="Back to top">⬆</button>
|
||||
|
||||
<script>
|
||||
// Theme toggle logic
|
||||
const toggleBtn = document.getElementById('theme-toggle');
|
||||
const userPref = localStorage.getItem('theme');
|
||||
<script>
|
||||
// Theme toggle
|
||||
const toggleBtn = document.getElementById('theme-toggle');
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
if (savedTheme) document.documentElement.setAttribute('data-theme', savedTheme);
|
||||
|
||||
if (userPref) {
|
||||
document.documentElement.setAttribute('data-theme', userPref);
|
||||
}
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme') || 'dark';
|
||||
const next = current === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
});
|
||||
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme');
|
||||
const next = current === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', next);
|
||||
localStorage.setItem('theme', next);
|
||||
});
|
||||
// Toast function
|
||||
window.showToast = function (msg, duration = 3000) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = msg;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => toast.classList.remove('show'), duration);
|
||||
};
|
||||
|
||||
// Toast display function
|
||||
function showToast(message, duration = 3000) {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.textContent = message;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => toast.classList.remove('show'), duration);
|
||||
}
|
||||
// Scroll-to-top button
|
||||
const scrollBtn = document.getElementById('scrollTopBtn');
|
||||
window.onscroll = () => {
|
||||
scrollBtn.style.display = window.scrollY > 150 ? 'block' : 'none';
|
||||
};
|
||||
scrollBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
|
||||
// Make toast function globally available
|
||||
window.showToast = showToast;
|
||||
</script>
|
||||
// Preserve scroll position
|
||||
window.addEventListener('beforeunload', () => {
|
||||
sessionStorage.setItem('scrollTop', window.scrollY);
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const scrollTop = sessionStorage.getItem('scrollTop');
|
||||
if (scrollTop !== null) {
|
||||
window.scrollTo(0, parseInt(scrollTop));
|
||||
sessionStorage.removeItem('scrollTop');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -24,15 +24,19 @@
|
||||
<tr>
|
||||
<td>{{ group.vlan_id }}</td>
|
||||
<td>
|
||||
<form method="POST" action="{{ url_for('group.update_description_route') }}" class="inline-form">
|
||||
<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 '' }}">
|
||||
<button type="submit" title="Save">💾</button>
|
||||
<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.delete_group_route') }}" onsubmit="return confirm('Delete this group?');">
|
||||
<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') }}" class="preserve-scroll" style="display:inline;" onsubmit="return confirm('Delete this group?');">
|
||||
<input type="hidden" name="group_id" value="{{ group.vlan_id }}">
|
||||
<button type="submit">❌</button>
|
||||
</form>
|
||||
@@ -42,11 +46,18 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<style>
|
||||
form.inline-form {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<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');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -45,79 +45,29 @@
|
||||
<button type="submit">🔍 Lookup</button>
|
||||
</form>
|
||||
|
||||
<pre id="mac-result" class="debug-output" style="margin-top: 1em;"></pre>
|
||||
<pre id="mac-result" class="debug-output"></pre>
|
||||
|
||||
<script>
|
||||
document.getElementById('mac-lookup-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const data = new URLSearchParams(new FormData(form));
|
||||
const resultBox = document.getElementById('mac-result');
|
||||
resultBox.textContent = "Querying...";
|
||||
document.getElementById('mac-lookup-form').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const data = new URLSearchParams(new FormData(form));
|
||||
const resultBox = document.getElementById('mac-result');
|
||||
resultBox.textContent = "Querying...";
|
||||
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
resultBox.textContent = JSON.stringify(data, null, 2);
|
||||
})
|
||||
.catch(err => {
|
||||
resultBox.textContent = `Error: ${err}`;
|
||||
});
|
||||
});
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: data,
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
// Update: Use 'output' from the API response
|
||||
resultBox.textContent = data.output || "No data returned.";
|
||||
})
|
||||
.catch(err => {
|
||||
resultBox.textContent = `Error: ${err}`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page-title {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--fg);
|
||||
}
|
||||
.stats-cards {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card {
|
||||
background: var(--cell-bg);
|
||||
border: 1px solid #666;
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.card.neutral {
|
||||
background-color: #444;
|
||||
}
|
||||
.event-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.event-list li {
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px dashed #666;
|
||||
}
|
||||
.event-list.green li { color: #4caf50; }
|
||||
.event-list.red li { color: #ff4d4d; }
|
||||
#mac-lookup-form input {
|
||||
padding: 6px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #999;
|
||||
width: 250px;
|
||||
}
|
||||
#mac-lookup-form button {
|
||||
padding: 6px 12px;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.debug-output {
|
||||
background-color: #222;
|
||||
color: #b6fcd5;
|
||||
border: 1px solid #333;
|
||||
padding: 1em;
|
||||
font-size: 0.9rem;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
<h1 class="page-title">MAC Address List</h1>
|
||||
|
||||
<form id="add-user-form" method="POST" action="{{ url_for('user.add') }}">
|
||||
<input type="text" name="mac_address" placeholder="MAC address (12 hex characters)" required maxlength="12">
|
||||
<input type="text" name="mac_address" placeholder="MAC address (12 hex)" required maxlength="12">
|
||||
<input type="text" name="description" placeholder="Description (optional)">
|
||||
<select name="group_id" required>
|
||||
<option value="">Assign to VLAN</option>
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.id }}">VLAN {{ group.vlan_id }}</option>
|
||||
<option value="{{ group.vlan_id }}">VLAN {{ group.vlan_id }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit">➕ Add</button>
|
||||
@@ -30,30 +30,37 @@
|
||||
{% for entry in users %}
|
||||
<tr>
|
||||
<td>{{ entry.mac_address }}</td>
|
||||
|
||||
<td>
|
||||
<form method="POST" action="{{ url_for('user.update_description_route') }}" class="inline-form">
|
||||
<form method="POST" action="{{ url_for('user.update_description_route') }}">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<input type="text" name="description" value="{{ entry.description or '' }}">
|
||||
<button type="submit" title="Save">💾</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>{% if entry.vendor_name %}
|
||||
{{ entry.vendor_name }}
|
||||
{% else %}
|
||||
<em>Unknown</em>
|
||||
{% endif %}</td>
|
||||
|
||||
<td>{{ entry.vendor or "..." }}</td>
|
||||
|
||||
<td>
|
||||
<form method="POST" action="{{ url_for('user.update_vlan_route') }}" class="inline-form">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<select name="group_id" onchange="this.form.submit()">
|
||||
{% for group in groups %}
|
||||
<option value="{{ group.id }}" {% if group.vlan_id == entry.vlan_id %}selected{% endif %}>VLAN {{ group.vlan_id }}</option>
|
||||
<option value="{{ group.vlan_id }}" {% if group.vlan_id == entry.vlan_id %}selected{% endif %}>
|
||||
VLAN {{ group.vlan_id }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</form>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<form method="POST" action="{{ url_for('user.delete') }}">
|
||||
<form method="POST" action="{{ url_for('user.update_description_route') }}" style="display:inline;">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<input type="hidden" name="description" value="{{ entry.description }}">
|
||||
<button type="submit" title="Save">💾</button>
|
||||
</form>
|
||||
|
||||
<form method="POST" action="{{ url_for('user.delete') }}" style="display:inline;">
|
||||
<input type="hidden" name="mac_address" value="{{ entry.mac_address }}">
|
||||
<button type="submit" onclick="return confirm('Delete this MAC address?')">❌</button>
|
||||
</form>
|
||||
@@ -64,22 +71,14 @@
|
||||
</table>
|
||||
|
||||
<script>
|
||||
document.getElementById('refresh-vendors').addEventListener('click', function () {
|
||||
fetch("{{ url_for('user.refresh') }}", { method: "POST" })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
alert("Vendor refresh complete.");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(err => alert("Error: " + err));
|
||||
});
|
||||
document.getElementById('refresh-vendors').addEventListener('click', function () {
|
||||
fetch("{{ url_for('user.refresh') }}", { method: "POST" })
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
window.showToast("Vendor refresh complete.");
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(err => alert("Error: " + err));
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
form.inline-form {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user