Add configuration, utilities, and update server with enhanced monitoring features
- Add config.py for environment configuration management - Add utils.py with utility functions - Add .env.example for environment variable reference - Add routes_example.py as route reference - Add login.html template for authentication - Update server.py with enhancements - Update all dashboard and log templates - Move documentation to 'explanations and old code' directory - Update database schema
This commit is contained in:
Developer
@@ -15,6 +15,102 @@
|
||||
text-align: center;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
/* Sidebar Styles */
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 56px; /* Height of navbar */
|
||||
width: 250px;
|
||||
height: calc(100vh - 56px);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s ease;
|
||||
z-index: 999;
|
||||
overflow-y: auto;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sidebar-menu a,
|
||||
.sidebar-menu button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s;
|
||||
text-align: left;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.sidebar-menu a:hover,
|
||||
.sidebar-menu button:hover {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
border-color: rgba(255, 255, 255, 0.6);
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.sidebar-menu i {
|
||||
margin-right: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.toggle-sidebar {
|
||||
position: fixed;
|
||||
left: 10px;
|
||||
top: 70px;
|
||||
z-index: 1000;
|
||||
background: #667eea;
|
||||
border: none;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.toggle-sidebar:hover {
|
||||
background: #764ba2;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-left: 0;
|
||||
transition: margin-left 0.3s ease;
|
||||
}
|
||||
|
||||
.main-content.sidebar-open {
|
||||
margin-left: 250px;
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
@@ -23,27 +119,27 @@
|
||||
}
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
table-layout: fixed; /* Ensures consistent column widths */
|
||||
width: 100%; /* Makes the table take up the full container width */
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
.table th, .table td {
|
||||
text-align: center;
|
||||
word-wrap: break-word; /* Ensures long text wraps within the cell */
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.table th:nth-child(1), .table td:nth-child(1) {
|
||||
width: 20%; /* Hostname column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(2), .table td:nth-child(2) {
|
||||
width: 20%; /* Device IP column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(3), .table td:nth-child(3) {
|
||||
width: 20%; /* Nume Masa column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(4), .table td:nth-child(4) {
|
||||
width: 20%; /* Timestamp column */
|
||||
width: 20%;
|
||||
}
|
||||
.table th:nth-child(5), .table td:nth-child(5) {
|
||||
width: 20%; /* Event Description column */
|
||||
width: 20%;
|
||||
}
|
||||
.refresh-timer {
|
||||
text-align: center;
|
||||
@@ -53,6 +149,31 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// Sidebar toggle
|
||||
function toggleSidebar() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const mainContent = document.getElementById('main-content');
|
||||
const toggleBtn = document.getElementById('toggle-btn');
|
||||
|
||||
sidebar.classList.toggle('open');
|
||||
mainContent.classList.toggle('sidebar-open');
|
||||
|
||||
// Rotate arrow
|
||||
toggleBtn.style.transform = sidebar.classList.contains('open') ? 'rotate(180deg)' : 'rotate(0deg)';
|
||||
}
|
||||
|
||||
// Close sidebar when clicking on a link
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const sidebarLinks = document.querySelectorAll('.sidebar-menu a, .sidebar-menu button');
|
||||
sidebarLinks.forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
document.getElementById('sidebar').classList.remove('open');
|
||||
document.getElementById('main-content').classList.remove('sidebar-open');
|
||||
document.getElementById('toggle-btn').style.transform = 'rotate(0deg)';
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Countdown timer for refresh
|
||||
let countdown = 30; // 30 seconds
|
||||
function updateTimer() {
|
||||
@@ -167,23 +288,53 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Logs Dashboard</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="refresh-timer">
|
||||
Time until refresh: <span id="refresh-timer">30</span> seconds
|
||||
</div>
|
||||
<div>
|
||||
<a href="/unique_devices" class="btn btn-secondary">View Unique Devices</a>
|
||||
<a href="/device_management" class="btn btn-primary">Device Management</a>
|
||||
<a href="/server_logs" class="btn btn-info" title="View server operations and system logs">
|
||||
<i class="fas fa-server"></i> Server Logs
|
||||
</a>
|
||||
<button class="btn btn-danger" onclick="resetDatabase(event)" title="Clear all logs and reset database">
|
||||
<i class="fas fa-trash-alt"></i> Clear Database
|
||||
</button>
|
||||
<!-- User Header -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<span class="navbar-brand">🖥️ Server Monitoring</span>
|
||||
<div class="ms-auto d-flex align-items-center gap-3">
|
||||
<span class="text-white">Welcome, <strong>{{ current_user.username }}</strong></span>
|
||||
<a href="/logout" class="btn btn-sm btn-danger">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar Toggle Button -->
|
||||
<button class="toggle-sidebar" id="toggle-btn" onclick="toggleSidebar()" title="Toggle Menu">
|
||||
<i class="fas fa-chevron-right" style="font-size: 20px; transition: transform 0.3s;"></i>
|
||||
</button>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-title">
|
||||
<span>Quick Actions</span>
|
||||
<i class="fas fa-times" onclick="toggleSidebar()" style="cursor: pointer; font-size: 20px;"></i>
|
||||
</div>
|
||||
<div class="sidebar-menu">
|
||||
<a href="/unique_devices" class="btn btn-link">
|
||||
<i class="fas fa-microchip"></i> Unique Devices
|
||||
</a>
|
||||
<a href="/device_management" class="btn btn-link">
|
||||
<i class="fas fa-cogs"></i> Device Management
|
||||
</a>
|
||||
<a href="/server_logs" class="btn btn-link" title="View server operations and system logs">
|
||||
<i class="fas fa-server"></i> Server Logs
|
||||
</a>
|
||||
<button class="btn btn-link" onclick="resetDatabase(event)" title="Clear all logs and reset database">
|
||||
<i class="fas fa-trash-alt"></i> Clear Database
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content" id="main-content">
|
||||
<div class="container mt-5">
|
||||
<h1 class="mb-4">Device Logs Dashboard</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<div class="refresh-timer">
|
||||
Time until refresh: <span id="refresh-timer">30</span> seconds
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
<table class="table table-striped table-bordered">
|
||||
<thead class="table-dark">
|
||||
|
||||
Reference in New Issue
Block a user