579 lines
21 KiB
HTML
579 lines
21 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>
|
|
|
|
<!-- Offcanvas : détail d'un utilisateur sur 7 jours -->
|
|
<div class="offcanvas offcanvas-end" tabindex="-1" id="userHistoryCanvas" style="width:420px">
|
|
<div class="offcanvas-header border-bottom">
|
|
<h6 class="offcanvas-title mb-0">
|
|
<i class="bi bi-person-lines-fill"></i>
|
|
<span id="canvas-login" class="ms-1"></span>
|
|
</h6>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
|
|
</div>
|
|
<div class="offcanvas-body p-3">
|
|
<div class="btn-group btn-group-sm mb-3" role="group" id="canvas-period-btns">
|
|
<button type="button" class="btn btn-primary" data-days="7">7 jours</button>
|
|
<button type="button" class="btn btn-outline-primary" data-days="30">30 jours</button>
|
|
</div>
|
|
<div id="canvas-loading" class="text-center py-4">
|
|
<div class="spinner-border spinner-border-sm text-primary me-2"></div>
|
|
<span class="text-muted small">Chargement...</span>
|
|
</div>
|
|
<div id="canvas-content" class="d-none">
|
|
<p class="text-muted small mb-1" id="canvas-period-label">Actions par jour (7 derniers jours)</p>
|
|
<div style="display:flex;gap:4px;height:64px;align-items:flex-end" id="canvas-bars"></div>
|
|
<div style="display:flex;gap:4px;margin-top:2px" id="canvas-bar-labels"></div>
|
|
<table class="table table-sm mt-3 mb-0">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="small">Date</th>
|
|
<th class="small">Actions</th>
|
|
<th class="small">Présence</th>
|
|
<th class="small">Actif</th>
|
|
<th class="small">Sessions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="canvas-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div id="canvas-no-data" class="d-none text-center text-muted py-4">
|
|
<i class="bi bi-calendar-x d-block fs-3 mb-2"></i>
|
|
Aucune donnée disponible sur 7 jours.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Graphique -->
|
|
<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>
|
|
<option value="30days">30 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 données historiques ne sont pas disponibles (fichiers archivés).
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tableau utilisateurs -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0" id="table-title"></h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<table class="table table-hover mb-0">
|
|
<thead>
|
|
<tr id="table-headers"></tr>
|
|
</thead>
|
|
<tbody id="users-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<style>
|
|
.badge-absent { background-color: #fd7e14; color: #fff; }
|
|
tr.row-clickable { cursor: pointer; }
|
|
tr.row-clickable:hover td { background-color: rgba(13,110,253,.05); }
|
|
</style>
|
|
<script>
|
|
var STATUS_CONFIG = {
|
|
actif: { badge: 'bg-success', label: 'ACTIF' },
|
|
inactif: { badge: 'bg-warning text-dark', label: 'INACTIF' },
|
|
absent: { badge: 'badge-absent', label: 'ABSENT' },
|
|
deconnecte: { badge: 'bg-secondary', label: 'DECONNECTE' },
|
|
};
|
|
|
|
var currentPeriod = 'today';
|
|
var selectedBarEl = null;
|
|
var lastTodayUsers = [];
|
|
var currentHourly = [];
|
|
var DAYS_FR = ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'];
|
|
var canvasCurrentLogin = '';
|
|
var canvasDays = 7;
|
|
|
|
/* --- Helpers DOM --- */
|
|
|
|
function el(tag, cls, text) {
|
|
var e = document.createElement(tag);
|
|
if (cls) e.className = cls;
|
|
if (text !== undefined) e.textContent = text;
|
|
return e;
|
|
}
|
|
|
|
function icon(name) {
|
|
var i = document.createElement('i');
|
|
i.className = 'bi bi-' + name;
|
|
return i;
|
|
}
|
|
|
|
/* --- Y-axis --- */
|
|
|
|
function renderYAxis(max) {
|
|
var yaxis = document.getElementById('chart-yaxis');
|
|
yaxis.textContent = '';
|
|
[max, Math.round(max / 2), 0].forEach(function(v) {
|
|
var d = el('div');
|
|
d.style.fontSize = '0.6rem';
|
|
d.style.color = '#6c757d';
|
|
d.style.lineHeight = '1';
|
|
d.textContent = v;
|
|
yaxis.appendChild(d);
|
|
});
|
|
}
|
|
|
|
/* --- Graphique générique --- */
|
|
|
|
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);
|
|
container.appendChild(el('span', 'text-muted small', 'Aucune donnée disponible.'));
|
|
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 = el('div');
|
|
bar.style.flex = '1';
|
|
bar.style.minWidth = '8px';
|
|
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(ci, cb) {
|
|
cb.addEventListener('click', function() {
|
|
if (selectedBarEl) {
|
|
selectedBarEl.style.background = '#0d6efd';
|
|
selectedBarEl.style.outline = '';
|
|
}
|
|
cb.style.background = '#0a58ca';
|
|
cb.style.outline = '2px solid #0a3fa8';
|
|
selectedBarEl = cb;
|
|
options.onBarClick(ci);
|
|
});
|
|
})(item, bar);
|
|
}
|
|
container.appendChild(bar);
|
|
|
|
var lbl = el('div');
|
|
lbl.style.flex = '1';
|
|
lbl.style.minWidth = '8px';
|
|
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 renderPeakChart(list) {
|
|
var unavail = document.getElementById('chart-unavailable');
|
|
var container = document.getElementById('chart-container');
|
|
var labelsEl = document.getElementById('chart-labels');
|
|
var hint = document.getElementById('chart-hint');
|
|
|
|
if (list.every(function(d) { return d.count === null; })) {
|
|
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(
|
|
list.map(function(d) { return { date: d.date, count: d.count === null ? 0 : d.count }; }),
|
|
{ onBarClick: function(item) { loadDayUsers(item.date); } }
|
|
);
|
|
}
|
|
|
|
/* --- En-têtes du tableau --- */
|
|
|
|
function setTableMode(mode, dateLabel) {
|
|
var title = document.getElementById('table-title');
|
|
var thead = document.getElementById('table-headers');
|
|
title.textContent = '';
|
|
thead.textContent = '';
|
|
|
|
title.appendChild(icon('person-lines-fill'));
|
|
if (mode === 'today') {
|
|
title.appendChild(document.createTextNode(' Utilisateurs connectés aujourd\'hui'));
|
|
['Utilisateur','Statut','Dernière action','Actions (24h)','Présence / Actif','Depuis'].forEach(function(h) {
|
|
thead.appendChild(el('th', null, h));
|
|
});
|
|
} else {
|
|
title.appendChild(document.createTextNode(' Utilisateurs — ' + (dateLabel || '')));
|
|
['Utilisateur','Dernière utilisation','Actions','Présence / Actif','Sessions'].forEach(function(h) {
|
|
thead.appendChild(el('th', null, h));
|
|
});
|
|
}
|
|
}
|
|
|
|
/* --- Tableau aujourd'hui --- */
|
|
|
|
function renderTable(users) {
|
|
var tbody = document.getElementById('users-tbody');
|
|
tbody.textContent = '';
|
|
|
|
if (!users || users.length === 0) {
|
|
var tr = document.createElement('tr');
|
|
var td = el('td', 'text-center text-muted py-3', "Aucun utilisateur détecté aujourd'hui.");
|
|
td.colSpan = 6;
|
|
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 = el('tr', 'row-clickable');
|
|
tr.addEventListener('click', function() { openUserHistory(u.login); });
|
|
|
|
// Utilisateur
|
|
var tdUser = document.createElement('td');
|
|
tdUser.appendChild(el('strong', null, u.login || ''));
|
|
if ((u.session_count || 1) > 1) {
|
|
tdUser.appendChild(el('small', 'text-muted d-block', u.session_count + ' sessions aujourd\'hui'));
|
|
}
|
|
tr.appendChild(tdUser);
|
|
|
|
// Statut
|
|
var tdStatus = document.createElement('td');
|
|
tdStatus.appendChild(el('span', 'badge ' + sc.badge, sc.label));
|
|
tr.appendChild(tdStatus);
|
|
|
|
// Dernière action
|
|
var tdAction = document.createElement('td');
|
|
tdAction.textContent = u.last_action_time || '—';
|
|
if (u.last_action_label) {
|
|
tdAction.appendChild(el('small', 'text-muted d-block', u.last_action_label));
|
|
}
|
|
tr.appendChild(tdAction);
|
|
|
|
// Actions (24h)
|
|
tr.appendChild(el('td', null, String(u.action_count_24h || 0)));
|
|
|
|
// Présence / Actif
|
|
var tdPres = document.createElement('td');
|
|
if (u.presence_str) {
|
|
tdPres.textContent = u.presence_str;
|
|
if (u.active_time_str) {
|
|
tdPres.appendChild(el('small', 'text-muted d-block', u.active_time_str + ' actif'));
|
|
}
|
|
} else {
|
|
tdPres.textContent = '—';
|
|
}
|
|
tr.appendChild(tdPres);
|
|
|
|
// Depuis
|
|
tr.appendChild(el('td', null, u.connected_since || '—'));
|
|
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
/* --- Tableau jour historique --- */
|
|
|
|
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 = el('td', 'text-center text-muted py-3', 'Aucun utilisateur détecté ce jour.');
|
|
td.colSpan = 5;
|
|
tr.appendChild(td);
|
|
tbody.appendChild(tr);
|
|
return;
|
|
}
|
|
|
|
users.forEach(function(u) {
|
|
var tr = el('tr', 'row-clickable');
|
|
tr.addEventListener('click', function() { openUserHistory(u.login); });
|
|
|
|
var tdUser = document.createElement('td');
|
|
tdUser.appendChild(el('strong', null, u.login || ''));
|
|
if (u.first_action_time) {
|
|
tdUser.appendChild(el('small', 'text-muted d-block', 'depuis ' + u.first_action_time));
|
|
}
|
|
tr.appendChild(tdUser);
|
|
|
|
var tdAct = document.createElement('td');
|
|
tdAct.textContent = u.last_action_time || '—';
|
|
if (u.last_action_label) {
|
|
tdAct.appendChild(el('small', 'text-muted d-block', u.last_action_label));
|
|
}
|
|
tr.appendChild(tdAct);
|
|
|
|
tr.appendChild(el('td', null, String(u.action_count || 0)));
|
|
|
|
var tdPres = document.createElement('td');
|
|
if (u.presence) {
|
|
tdPres.textContent = u.presence;
|
|
if (u.active_time) {
|
|
tdPres.appendChild(el('small', 'text-muted d-block', u.active_time + ' actif'));
|
|
}
|
|
} else {
|
|
tdPres.textContent = '—';
|
|
}
|
|
tr.appendChild(tdPres);
|
|
|
|
tr.appendChild(el('td', null, String(u.sessions || 1)));
|
|
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() {});
|
|
}
|
|
|
|
/* --- Offcanvas historique utilisateur --- */
|
|
|
|
function setCanvasDays(days) {
|
|
canvasDays = days;
|
|
var btns = document.querySelectorAll('#canvas-period-btns button');
|
|
btns.forEach(function(b) {
|
|
var active = parseInt(b.getAttribute('data-days')) === days;
|
|
b.className = active ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-outline-primary';
|
|
});
|
|
document.getElementById('canvas-period-label').textContent =
|
|
'Actions par jour (' + days + ' derniers jours)';
|
|
}
|
|
|
|
function loadCanvasHistory(login, days) {
|
|
document.getElementById('canvas-loading').classList.remove('d-none');
|
|
document.getElementById('canvas-content').classList.add('d-none');
|
|
document.getElementById('canvas-no-data').classList.add('d-none');
|
|
|
|
fetch('/api/users/' + encodeURIComponent(login) + '/history?days=' + days)
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) {
|
|
document.getElementById('canvas-loading').classList.add('d-none');
|
|
var history = data.history || [];
|
|
if (!history.some(function(d) { return d.action_count !== null; })) {
|
|
document.getElementById('canvas-no-data').classList.remove('d-none');
|
|
return;
|
|
}
|
|
renderUserHistory(history);
|
|
document.getElementById('canvas-content').classList.remove('d-none');
|
|
})
|
|
.catch(function() {
|
|
document.getElementById('canvas-loading').classList.add('d-none');
|
|
document.getElementById('canvas-no-data').classList.remove('d-none');
|
|
});
|
|
}
|
|
|
|
function openUserHistory(login) {
|
|
canvasCurrentLogin = login;
|
|
document.getElementById('canvas-login').textContent = login;
|
|
setCanvasDays(canvasDays);
|
|
|
|
bootstrap.Offcanvas.getOrCreateInstance(
|
|
document.getElementById('userHistoryCanvas')
|
|
).show();
|
|
|
|
loadCanvasHistory(login, canvasDays);
|
|
}
|
|
|
|
document.getElementById('canvas-period-btns').addEventListener('click', function(e) {
|
|
var btn = e.target.closest('button[data-days]');
|
|
if (!btn || !canvasCurrentLogin) return;
|
|
var days = parseInt(btn.getAttribute('data-days'));
|
|
setCanvasDays(days);
|
|
loadCanvasHistory(canvasCurrentLogin, days);
|
|
});
|
|
|
|
function renderUserHistory(history) {
|
|
var barsEl = document.getElementById('canvas-bars');
|
|
var lblsEl = document.getElementById('canvas-bar-labels');
|
|
barsEl.textContent = '';
|
|
lblsEl.textContent = '';
|
|
|
|
var max = 1;
|
|
history.forEach(function(d) { if ((d.action_count || 0) > max) max = d.action_count; });
|
|
|
|
history.forEach(function(d) {
|
|
var count = d.action_count || 0;
|
|
var h = count > 0 ? Math.max(Math.round((count / max) * 64), 6) : 4;
|
|
|
|
var bar = el('div');
|
|
bar.style.flex = '1';
|
|
bar.style.height = h + 'px';
|
|
bar.style.background = count > 0 ? '#0d6efd' : '#e9ecef';
|
|
bar.style.borderRadius = '3px 3px 0 0';
|
|
bar.title = d.date + ' : ' + count + ' actions';
|
|
barsEl.appendChild(bar);
|
|
|
|
var dt = new Date(d.date);
|
|
var lbl = el('div', null, DAYS_FR[dt.getUTCDay()] + ' ' + dt.getUTCDate());
|
|
lbl.style.flex = '1';
|
|
lbl.style.textAlign = 'center';
|
|
lbl.style.fontSize = '0.6rem';
|
|
lbl.style.color = '#6c757d';
|
|
lblsEl.appendChild(lbl);
|
|
});
|
|
|
|
var tbody = document.getElementById('canvas-tbody');
|
|
tbody.textContent = '';
|
|
history.forEach(function(d) {
|
|
var tr = document.createElement('tr');
|
|
var dt = new Date(d.date);
|
|
var dLbl = DAYS_FR[dt.getUTCDay()] + ' ' + dt.getUTCDate() + '/' + (dt.getUTCMonth() + 1);
|
|
if (!d.action_count) {
|
|
var td = el('td', 'text-muted small', dLbl + ' — aucun log');
|
|
td.colSpan = 5;
|
|
tr.appendChild(td);
|
|
} else {
|
|
[dLbl, String(d.action_count), d.presence || '—', d.active_time || '—', String(d.sessions || 1)]
|
|
.forEach(function(txt) { tr.appendChild(el('td', 'small', txt)); });
|
|
}
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
/* --- Alertes --- */
|
|
|
|
function showAlert(type, message) {
|
|
var zone = document.getElementById('alert-zone');
|
|
zone.textContent = '';
|
|
var div = el('div', 'alert alert-' + type);
|
|
div.appendChild(icon('exclamation-triangle'));
|
|
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 à 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 if (currentPeriod === '7days') {
|
|
fetch('/api/users/activity/weekly')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) { renderPeakChart(data.weekly || []); })
|
|
.catch(function() {});
|
|
} else if (currentPeriod === '30days') {
|
|
fetch('/api/users/activity/monthly')
|
|
.then(function(r) { return r.json(); })
|
|
.then(function(data) { renderPeakChart(data.monthly || []); })
|
|
.catch(function() {});
|
|
}
|
|
});
|
|
|
|
setTableMode('today');
|
|
refreshUsers();
|
|
setInterval(refreshUsers, 30000);
|
|
</script>
|
|
{% endblock %}
|