azcomputerguru/guru-connect
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

Add clickable Online/Offline filters in sidebar

Browse Source
This commit is contained in:
Mike Swanson
2025-12-28 18:44:34 -07:00
parent d01fb4173f
commit f3b76b7b62
1 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
server/static/dashboard.html
View File

@@ -642,6 +642,18 @@
// Load connected machines (Access tab) // Load connected machines (Access tab)
let machines = []; let machines = [];
let selectedMachine = null; let selectedMachine = null;
let currentFilter = 'all'; // 'all', 'online', 'offline'
// Setup filter click handlers
document.querySelectorAll('.sidebar-item[data-filter]').forEach(item => {
item.addEventListener('click', () => {
currentFilter = item.dataset.filter;
// Update active state
document.querySelectorAll('.sidebar-item[data-filter]').forEach(i => i.classList.remove('active'));
item.classList.add('active');
renderMachinesList();
});
});
async function loadMachines() { async function loadMachines() {
try { try {
@@ -664,12 +676,23 @@
function renderMachinesList() { function renderMachinesList() {
const container = document.getElementById("machinesList"); const container = document.getElementById("machinesList");
if (machines.length === 0) { // Filter machines based on current filter
container.innerHTML = '<div class="empty-state"><h3>No machines</h3><p>Install the agent on a machine to see it here</p></div>'; let filteredMachines = machines;
if (currentFilter === 'online') {
filteredMachines = machines.filter(m => m.is_online);
} else if (currentFilter === 'offline') {
filteredMachines = machines.filter(m => !m.is_online);
}
if (filteredMachines.length === 0) {
const msg = currentFilter === 'all' ? 'Install the agent on a machine to see it here' :
currentFilter === 'online' ? 'No machines are currently online' :
'No machines are currently offline';
container.innerHTML = '<div class="empty-state"><h3>No machines</h3><p>' + msg + '</p></div>';
return; return;
} }
container.innerHTML = '<div style="padding: 12px;">' + machines.map(m => { container.innerHTML = '<div style="padding: 12px;">' + filteredMachines.map(m => {
const started = new Date(m.started_at).toLocaleString(); const started = new Date(m.started_at).toLocaleString();
const isSelected = selectedMachine?.id === m.id; const isSelected = selectedMachine?.id === m.id;
const statusColor = m.is_online ? 'hsl(142, 76%, 50%)' : 'hsl(0, 0%, 50%)'; const statusColor = m.is_online ? 'hsl(142, 76%, 50%)' : 'hsl(0, 0%, 50%)';