399 lines
14 KiB
HTML
399 lines
14 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Supervision - Utilisateurs{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="mb-0"><i class="bi bi-people"></i> Utilisateurs Amadea</h4>
|
|
<span id="last-update" class="text-muted small"></span>
|
|
</div>
|
|
|
|
<div id="alert-zone"></div>
|
|
|
|
<!-- Graphique d'activite horaire -->
|
|
<div class="card mb-3">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
<h6 class="mb-0"><i class="bi bi-bar-chart"></i> Utilisateurs actifs par heure</h6>
|
|
<select id="period-select" class="form-select form-select-sm" style="width: auto;">
|
|
<option value="today">Aujourd'hui</option>
|
|
<option value="7days">7 derniers jours</option>
|
|
</select>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="display: flex; gap: 6px;">
|
|
<div id="chart-yaxis"
|
|
style="display: flex; flex-direction: column; justify-content: space-between;
|
|
align-items: flex-end; width: 20px; height: 100px; flex-shrink: 0;">
|
|
</div>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<div id="chart-container"
|
|
style="height: 100px; display: flex; align-items: flex-end; gap: 3px;">
|
|
</div>
|
|
<div id="chart-labels" style="display: flex; gap: 3px; margin-top: 4px;"></div>
|
|
</div>
|
|
</div>
|
|
<div id="chart-hint" class="d-none mt-2">
|
|
<small class="text-muted"><i class="bi bi-hand-index"></i> Cliquez sur une barre pour voir les utilisateurs de ce jour.</small>
|
|
</div>
|
|
<div id="chart-unavailable" class="d-none">
|
|
<div class="alert alert-info mb-0">
|
|
<i class="bi bi-info-circle"></i>
|
|
Les donnees historiques des jours precedents ne sont pas disponibles (fichiers archives).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tableau utilisateurs -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0" id="table-title"><i class="bi bi-person-lines-fill"></i> Utilisateurs connectes aujourd'hui</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr id="table-headers">
|
|
<th>Utilisateur</th>
|
|
<th>Statut</th>
|
|
<th>Derniere action</th>
|
|
<th>Actions (24h)</th>
|
|
<th>Depuis</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
var STATUS_CONFIG = {
|
|
actif: { badge: 'bg-success', label: 'ACTIF' },
|
|
inactif: { badge: 'bg-warning text-dark', label: 'INACTIF' },
|
|
deconnecte: { badge: 'bg-secondary', label: 'DECONNECTE' },
|
|
};
|
|
|
|
var currentHourly = [];
|
|
var currentPeriod = 'today';
|
|
var selectedBarEl = null;
|
|
var lastTodayUsers = [];
|
|
|
|
/* --- Graphique CSS pur --- */
|
|
|
|
function renderYAxis(max) {
|
|
var yaxis = document.getElementById('chart-yaxis');
|
|
yaxis.textContent = '';
|
|
var values = [max, Math.round(max / 2), 0];
|
|
values.forEach(function(v) {
|
|
var lbl = document.createElement('div');
|
|
lbl.style.fontSize = '0.6rem';
|
|
lbl.style.color = '#6c757d';
|
|
lbl.style.lineHeight = '1';
|
|
lbl.textContent = v;
|
|
yaxis.appendChild(lbl);
|
|
});
|
|
}
|
|
|
|
function renderChart(data, options) {
|
|
var container = document.getElementById('chart-container');
|
|
var labelsEl = document.getElementById('chart-labels');
|
|
var unavail = document.getElementById('chart-unavailable');
|
|
|
|
container.style.display = 'flex';
|
|
labelsEl.style.display = 'flex';
|
|
unavail.classList.add('d-none');
|
|
container.textContent = '';
|
|
labelsEl.textContent = '';
|
|
selectedBarEl = null;
|
|
|
|
if (!data || data.length === 0) {
|
|
renderYAxis(0);
|
|
var msg = document.createElement('span');
|
|
msg.className = 'text-muted small';
|
|
msg.textContent = 'Aucune donnee disponible.';
|
|
container.appendChild(msg);
|
|
return;
|
|
}
|
|
|
|
var max = 1;
|
|
data.forEach(function(d) { if ((d.count || 0) > max) max = d.count; });
|
|
renderYAxis(max);
|
|
|
|
data.forEach(function(item) {
|
|
var count = item.count || 0;
|
|
var heightPct = count > 0 ? Math.max((count / max) * 100, 6) : 0;
|
|
|
|
var bar = document.createElement('div');
|
|
bar.style.flex = '1';
|
|
bar.style.minWidth = '14px';
|
|
bar.style.height = heightPct + '%';
|
|
bar.style.background = '#0d6efd';
|
|
bar.style.borderRadius = '3px 3px 0 0';
|
|
bar.style.opacity = count > 0 ? '1' : '0.15';
|
|
bar.style.transition = 'height 0.3s';
|
|
bar.title = item.hour !== undefined
|
|
? item.hour + 'h : ' + count + ' utilisateur(s)'
|
|
: item.date + ' : ' + count + ' utilisateur(s)';
|
|
|
|
if (options && options.onBarClick && item.date !== undefined) {
|
|
bar.style.cursor = 'pointer';
|
|
(function(capturedItem, capturedBar) {
|
|
capturedBar.addEventListener('click', function() {
|
|
if (selectedBarEl) {
|
|
selectedBarEl.style.background = '#0d6efd';
|
|
selectedBarEl.style.outline = '';
|
|
}
|
|
capturedBar.style.background = '#0a58ca';
|
|
capturedBar.style.outline = '2px solid #0a3fa8';
|
|
selectedBarEl = capturedBar;
|
|
options.onBarClick(capturedItem);
|
|
});
|
|
})(item, bar);
|
|
}
|
|
|
|
container.appendChild(bar);
|
|
|
|
var lbl = document.createElement('div');
|
|
lbl.style.flex = '1';
|
|
lbl.style.minWidth = '14px';
|
|
lbl.style.textAlign = 'center';
|
|
lbl.style.fontSize = '0.6rem';
|
|
lbl.style.color = '#6c757d';
|
|
lbl.style.overflow = 'hidden';
|
|
if (item.hour !== undefined) {
|
|
lbl.textContent = item.hour % 3 === 0 ? item.hour + 'h' : '';
|
|
} else {
|
|
var d = new Date(item.date);
|
|
lbl.textContent = d.getUTCDate() + '/' + (d.getUTCMonth() + 1);
|
|
}
|
|
labelsEl.appendChild(lbl);
|
|
});
|
|
}
|
|
|
|
function renderWeekly(weekly) {
|
|
var unavail = document.getElementById('chart-unavailable');
|
|
var container = document.getElementById('chart-container');
|
|
var labelsEl = document.getElementById('chart-labels');
|
|
var hint = document.getElementById('chart-hint');
|
|
|
|
var allNull = weekly.every(function(d) { return d.count === null; });
|
|
if (allNull) {
|
|
container.style.display = 'none';
|
|
labelsEl.style.display = 'none';
|
|
hint.classList.add('d-none');
|
|
document.getElementById('chart-yaxis').textContent = '';
|
|
unavail.classList.remove('d-none');
|
|
return;
|
|
}
|
|
|
|
hint.classList.remove('d-none');
|
|
renderChart(
|
|
weekly.map(function(d) {
|
|
return { date: d.date, count: d.count === null ? 0 : d.count };
|
|
}),
|
|
{
|
|
onBarClick: function(item) {
|
|
loadDayUsers(item.date);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
/* --- Tableau --- */
|
|
|
|
function setTableMode(mode, dateLabel) {
|
|
var title = document.getElementById('table-title');
|
|
var thead = document.getElementById('table-headers');
|
|
if (mode === 'today') {
|
|
title.innerHTML = '<i class="bi bi-person-lines-fill"></i> Utilisateurs connectes aujourd\'hui';
|
|
thead.innerHTML = '<th>Utilisateur</th><th>Statut</th><th>Derniere action</th><th>Actions (24h)</th><th>Depuis</th>';
|
|
} else {
|
|
title.innerHTML = '<i class="bi bi-person-lines-fill"></i> Utilisateurs — ' + (dateLabel || '');
|
|
thead.innerHTML = '<th>Utilisateur</th><th>Derniere utilisation</th><th>Actions (jour)</th><th>Duree de presence</th>';
|
|
}
|
|
}
|
|
|
|
function renderTable(users) {
|
|
var tbody = document.getElementById('users-tbody');
|
|
tbody.textContent = '';
|
|
|
|
if (!users || users.length === 0) {
|
|
var tr = document.createElement('tr');
|
|
var td = document.createElement('td');
|
|
td.colSpan = 5;
|
|
td.className = 'text-center text-muted py-3';
|
|
td.textContent = "Aucun utilisateur detecte aujourd'hui.";
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
return;
|
|
}
|
|
|
|
users.forEach(function(u) {
|
|
var sc = STATUS_CONFIG[u.status] || { badge: 'bg-secondary', label: (u.status || '').toUpperCase() };
|
|
var tr = document.createElement('tr');
|
|
|
|
var tdUser = document.createElement('td');
|
|
var strong = document.createElement('strong');
|
|
strong.textContent = u.login || '';
|
|
tdUser.appendChild(strong);
|
|
tr.appendChild(tdUser);
|
|
|
|
var tdStatus = document.createElement('td');
|
|
var badge = document.createElement('span');
|
|
badge.className = 'badge ' + sc.badge;
|
|
badge.textContent = sc.label;
|
|
tdStatus.appendChild(badge);
|
|
tr.appendChild(tdStatus);
|
|
|
|
var tdAction = document.createElement('td');
|
|
tdAction.textContent = u.last_action_time || '\u2014';
|
|
if (u.last_action_label) {
|
|
var small = document.createElement('small');
|
|
small.className = 'text-muted d-block';
|
|
small.textContent = u.last_action_label;
|
|
tdAction.appendChild(small);
|
|
}
|
|
tr.appendChild(tdAction);
|
|
|
|
var tdCount = document.createElement('td');
|
|
tdCount.textContent = String(u.action_count_24h || 0);
|
|
tr.appendChild(tdCount);
|
|
|
|
var tdSince = document.createElement('td');
|
|
tdSince.textContent = u.connected_since || '\u2014';
|
|
tr.appendChild(tdSince);
|
|
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function renderDayTable(users, dateStr) {
|
|
setTableMode('day', dateStr);
|
|
var tbody = document.getElementById('users-tbody');
|
|
tbody.textContent = '';
|
|
|
|
if (!users || users.length === 0) {
|
|
var tr = document.createElement('tr');
|
|
var td = document.createElement('td');
|
|
td.colSpan = 4;
|
|
td.className = 'text-center text-muted py-3';
|
|
td.textContent = 'Aucun utilisateur detecte ce jour.';
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
return;
|
|
}
|
|
|
|
users.forEach(function(u) {
|
|
var tr = document.createElement('tr');
|
|
|
|
var tdUser = document.createElement('td');
|
|
var strong = document.createElement('strong');
|
|
strong.textContent = u.login || '';
|
|
tdUser.appendChild(strong);
|
|
tr.appendChild(tdUser);
|
|
|
|
var tdAction = document.createElement('td');
|
|
tdAction.textContent = u.last_action_time || '\u2014';
|
|
if (u.last_action_label) {
|
|
var small = document.createElement('small');
|
|
small.className = 'text-muted d-block';
|
|
small.textContent = u.last_action_label;
|
|
tdAction.appendChild(small);
|
|
}
|
|
tr.appendChild(tdAction);
|
|
|
|
var tdCount = document.createElement('td');
|
|
tdCount.textContent = String(u.action_count || 0);
|
|
tr.appendChild(tdCount);
|
|
|
|
var tdDuration = document.createElement('td');
|
|
tdDuration.textContent = u.duration || '\u2014';
|
|
tr.appendChild(tdDuration);
|
|
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function loadDayUsers(date) {
|
|
fetch('/api/users/day/' + date)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.error) { showAlert('warning', data.error); return; }
|
|
clearAlert();
|
|
renderDayTable(data.users || [], date);
|
|
})
|
|
.catch(function() {});
|
|
}
|
|
|
|
/* --- Alertes --- */
|
|
|
|
function showAlert(type, message) {
|
|
var zone = document.getElementById('alert-zone');
|
|
zone.textContent = '';
|
|
var div = document.createElement('div');
|
|
div.className = 'alert alert-' + type;
|
|
var icon = document.createElement('i');
|
|
icon.className = 'bi bi-exclamation-triangle me-1';
|
|
div.appendChild(icon);
|
|
div.appendChild(document.createTextNode(message));
|
|
zone.appendChild(div);
|
|
}
|
|
|
|
function clearAlert() {
|
|
document.getElementById('alert-zone').textContent = '';
|
|
}
|
|
|
|
/* --- Refresh --- */
|
|
|
|
function refreshUsers() {
|
|
fetch('/api/users')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
if (data.error) {
|
|
showAlert('warning', data.error);
|
|
if (currentPeriod === 'today') { renderTable([]); renderChart([]); }
|
|
return;
|
|
}
|
|
if (data.no_files) {
|
|
showAlert('info', "Aucun log disponible pour aujourd'hui.");
|
|
if (currentPeriod === 'today') { renderTable([]); renderChart([]); }
|
|
return;
|
|
}
|
|
clearAlert();
|
|
lastTodayUsers = data.users || [];
|
|
currentHourly = data.hourly || [];
|
|
if (currentPeriod === 'today') {
|
|
setTableMode('today');
|
|
renderTable(lastTodayUsers);
|
|
renderChart(currentHourly);
|
|
}
|
|
document.getElementById('last-update').textContent =
|
|
'Mis a jour : ' + new Date().toLocaleTimeString('fr-FR');
|
|
})
|
|
.catch(function() {});
|
|
}
|
|
|
|
document.getElementById('period-select').addEventListener('change', function() {
|
|
currentPeriod = this.value;
|
|
var hint = document.getElementById('chart-hint');
|
|
if (currentPeriod === 'today') {
|
|
hint.classList.add('d-none');
|
|
document.getElementById('chart-container').style.display = 'flex';
|
|
document.getElementById('chart-labels').style.display = 'flex';
|
|
document.getElementById('chart-unavailable').classList.add('d-none');
|
|
setTableMode('today');
|
|
renderTable(lastTodayUsers);
|
|
renderChart(currentHourly);
|
|
} else {
|
|
fetch('/api/users/activity/weekly')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) { renderWeekly(data.weekly || []); })
|
|
.catch(function() {});
|
|
}
|
|
});
|
|
|
|
refreshUsers();
|
|
setInterval(refreshUsers, 30000);
|
|
</script>
|
|
{% endblock %}
|