nix
389 lines
14 KiB
JavaScript
Executable File
389 lines
14 KiB
JavaScript
Executable File
/**
|
|
* Sparklines & Easter Egg - Nixiews Dashboard
|
|
* Ajoute des mini-graphiques dans les stat-cards existantes
|
|
* + easter egg clavier dans le loader
|
|
* + lecture du fichier server.status (remplace news.json)
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
// =========================================================
|
|
// CONFIG
|
|
// =========================================================
|
|
const MAX_POINTS = 20;
|
|
const CANVAS_H = 36;
|
|
|
|
const COLOR_OK = '#50fa7b';
|
|
const COLOR_WARN = '#ffb86c';
|
|
const COLOR_DANGER = '#ff5555';
|
|
const COLOR_LINE = 'rgba(98,114,164,0.35)';
|
|
const COLOR_FILL_OK = 'rgba(80,250,123,0.12)';
|
|
|
|
const TRACKED = [
|
|
{
|
|
id: 'cpu',
|
|
max: 100,
|
|
warn: 50,
|
|
danger: 80,
|
|
parse: v => parseFloat(v),
|
|
},
|
|
{
|
|
id: 'ram',
|
|
max: null,
|
|
maxId: 'ram-subtitle',
|
|
warn: 60,
|
|
danger: 80,
|
|
parse: (v, sub) => {
|
|
const m = sub && sub.match(/\((\d+\.?\d*)%\)/);
|
|
return m ? parseFloat(m[1]) : null;
|
|
},
|
|
},
|
|
{
|
|
id: 'load',
|
|
max: 8,
|
|
warn: 50,
|
|
danger: 80,
|
|
parse: v => Math.min((parseFloat(v) / 8) * 100, 100),
|
|
},
|
|
];
|
|
|
|
const history = {};
|
|
TRACKED.forEach(t => { history[t.id] = []; });
|
|
|
|
// =========================================================
|
|
// CANVAS / SPARKLINES
|
|
// =========================================================
|
|
function injectCanvas(statCard) {
|
|
if (statCard.querySelector('.spark-canvas')) return;
|
|
|
|
const canvas = document.createElement('canvas');
|
|
canvas.className = 'spark-canvas';
|
|
canvas.width = statCard.offsetWidth || 150;
|
|
canvas.height = CANVAS_H;
|
|
canvas.style.cssText = `
|
|
display: block;
|
|
width: 100%;
|
|
height: ${CANVAS_H}px;
|
|
margin-top: 0.5rem;
|
|
border-radius: 6px;
|
|
opacity: 0.85;
|
|
`;
|
|
statCard.appendChild(canvas);
|
|
return canvas;
|
|
}
|
|
|
|
function drawSparkline(canvas, data, warn, danger) {
|
|
if (!canvas || data.length < 2) return;
|
|
|
|
const ctx = canvas.getContext('2d');
|
|
const W = canvas.offsetWidth || canvas.width;
|
|
const H = canvas.height;
|
|
canvas.width = W;
|
|
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
const range = 100;
|
|
const stepX = W / (MAX_POINTS - 1);
|
|
const xOf = i => i * stepX;
|
|
const yOf = v => H - ((v / range) * (H - 4)) - 2;
|
|
|
|
const last = data[data.length - 1];
|
|
const color = last > danger ? COLOR_DANGER : last > warn ? COLOR_WARN : COLOR_OK;
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(xOf(0), H);
|
|
data.forEach((v, i) => ctx.lineTo(xOf(i), yOf(v)));
|
|
ctx.lineTo(xOf(data.length - 1), H);
|
|
ctx.closePath();
|
|
ctx.fillStyle = last > danger
|
|
? 'rgba(255,85,85,0.10)'
|
|
: last > warn
|
|
? 'rgba(255,184,108,0.10)'
|
|
: COLOR_FILL_OK;
|
|
ctx.fill();
|
|
|
|
ctx.beginPath();
|
|
data.forEach((v, i) => {
|
|
i === 0 ? ctx.moveTo(xOf(i), yOf(v)) : ctx.lineTo(xOf(i), yOf(v));
|
|
});
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineJoin = 'round';
|
|
ctx.stroke();
|
|
|
|
const lx = xOf(data.length - 1);
|
|
const ly = yOf(last);
|
|
ctx.beginPath();
|
|
ctx.arc(lx, ly, 3, 0, Math.PI * 2);
|
|
ctx.fillStyle = color;
|
|
ctx.fill();
|
|
|
|
[50, 80].forEach(pct => {
|
|
const gy = yOf(pct);
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, gy);
|
|
ctx.lineTo(W, gy);
|
|
ctx.strokeStyle = COLOR_LINE;
|
|
ctx.lineWidth = 0.8;
|
|
ctx.setLineDash([3, 4]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
});
|
|
}
|
|
|
|
function sample() {
|
|
TRACKED.forEach(t => {
|
|
const el = document.getElementById(t.id);
|
|
const subEl = document.getElementById(t.id + '-subtitle');
|
|
if (!el) return;
|
|
|
|
const raw = el.textContent.trim();
|
|
const sub = subEl ? subEl.textContent.trim() : '';
|
|
const val = t.parse(raw, sub);
|
|
|
|
if (val === null || isNaN(val)) return;
|
|
|
|
history[t.id].push(val);
|
|
if (history[t.id].length > MAX_POINTS) history[t.id].shift();
|
|
|
|
const card = el.closest('.stat-card');
|
|
if (!card) return;
|
|
|
|
let canvas = card.querySelector('.spark-canvas');
|
|
if (!canvas) canvas = injectCanvas(card);
|
|
if (!canvas) return;
|
|
|
|
drawSparkline(canvas, history[t.id], t.warn, t.danger);
|
|
});
|
|
}
|
|
|
|
function watchStats() {
|
|
const section = document.querySelector('.stats-section');
|
|
if (!section) return;
|
|
|
|
const obs = new MutationObserver(() => sample());
|
|
obs.observe(section, { subtree: true, characterData: true, childList: true });
|
|
setTimeout(sample, 6000);
|
|
}
|
|
|
|
// =========================================================
|
|
// EASTER EGG
|
|
// =========================================================
|
|
const EASTER_COMMANDS = {
|
|
'sudo': '⚠ [sudo] password for nixiews: \n💀 sudo: permission refusée. T\'es pas root ici.',
|
|
'rm -rf /': '💀 SIGTERM — Au revoir cruel monde... \n ... nan je déconne, j\'ai pas les droits.',
|
|
'rm -rf': '💀 Haha non. Pas sur mon serveur.',
|
|
'emerge': '🟢 emerge: Calcul du dépôt world...\n ETA: 3 jours, 14 heures, 7 minutes.\n (C\'est Gentoo, t\'avais qu\'à pas.)',
|
|
'nixos-rebuild': '❓ nixos-rebuild: command not found\n Ici c\'est Gentoo/Debian. Le pseudo c\'est juste un pseudo.',
|
|
'pacman': '🔴 erreur: pacman not found. Ici c\'est Gentoo/Debian.',
|
|
'apt': '🟡 apt: command not found (on Gentoo side)\n Essaie emerge plutôt.',
|
|
'reboot': '♻ Reboot programmé dans... nan, j\'ai changé d\'avis.',
|
|
'uname': '🐧 Linux nicoleta 6.x.x-gentoo #1 SMP PREEMPT_DYNAMIC\n x86_64 GNU/Linux',
|
|
'htop': '📊 htop: trop stylé pour être lancé dans un easter egg.',
|
|
'ls': '📁 . .. index.html data/ secret/ binpkg/ fun/ minecraft/',
|
|
'cat /etc/passwd': '😏 root:x:0:0::/root:/bin/bash\n nixiews:x:1000:1000::/home/nixiews:/bin/zsh\n claude:x:9999:9999:meilleur ami:/dev/null:/bin/sh',
|
|
'help': '📖 Commandes disponibles:\n sudo, rm -rf /, emerge, nixos-rebuild, pacman, apt,\n reboot, uname, htop, ls, cat /etc/passwd, help\n (Nixiews = pseudo, pas une distro 🙃)',
|
|
};
|
|
|
|
let typedBuffer = '';
|
|
let eggTimeout = null;
|
|
|
|
function resetBuffer() { typedBuffer = ''; }
|
|
|
|
function checkEasterEgg(key) {
|
|
const loader = document.getElementById('loader');
|
|
if (!loader || loader.style.display === 'none' || loader.style.opacity === '0') return;
|
|
|
|
typedBuffer += key.toLowerCase();
|
|
if (typedBuffer.length > 30) typedBuffer = typedBuffer.slice(-30);
|
|
|
|
clearTimeout(eggTimeout);
|
|
eggTimeout = setTimeout(resetBuffer, 2500);
|
|
|
|
for (const [cmd, response] of Object.entries(EASTER_COMMANDS)) {
|
|
if (typedBuffer.endsWith(cmd)) {
|
|
triggerEgg(cmd, response);
|
|
typedBuffer = '';
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
function triggerEgg(cmd, response) {
|
|
const logs = document.querySelector('#loader .logs');
|
|
if (!logs) return;
|
|
|
|
const cmdLine = document.createElement('div');
|
|
cmdLine.style.cssText = `
|
|
color: #8be9fd;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.85rem;
|
|
margin-top: 0.3rem;
|
|
animation: fadeIn 0.2s ease;
|
|
`;
|
|
cmdLine.innerHTML = `<span style="color:#50fa7b">nixiews@nicoleta</span><span style="color:#f8f8f2">:</span><span style="color:#bd93f9">~</span><span style="color:#f8f8f2">$</span> ${cmd}`;
|
|
logs.appendChild(cmdLine);
|
|
|
|
setTimeout(() => {
|
|
const responseLine = document.createElement('div');
|
|
responseLine.style.cssText = `
|
|
color: #f1fa8c;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 0.82rem;
|
|
white-space: pre-wrap;
|
|
margin-bottom: 0.3rem;
|
|
animation: fadeIn 0.3s ease;
|
|
`;
|
|
responseLine.textContent = response;
|
|
logs.appendChild(responseLine);
|
|
logs.scrollTop = logs.scrollHeight;
|
|
}, 300);
|
|
|
|
logs.scrollTop = logs.scrollHeight;
|
|
}
|
|
|
|
// =========================================================
|
|
// SERVER STATUS — lecture directe du .status
|
|
// =========================================================
|
|
const STATUS_ENDPOINT = '/data/server.status';
|
|
|
|
function parseStatusFile(text) {
|
|
const result = { status: '', couleur: '#bd93f9', date: '', message: '', motds: [] };
|
|
const lines = text.split('\n');
|
|
for (const line of lines) {
|
|
const m = line.match(/^\[(\w+)\]\s*(.*)$/);
|
|
if (!m) continue;
|
|
const [, key, val] = m;
|
|
if (key === 'motd') {
|
|
result.motds.push(val.trim());
|
|
} else {
|
|
result[key] = val.trim();
|
|
}
|
|
}
|
|
return result;
|
|
}
|
|
|
|
function buildStatusCard(data) {
|
|
const motdsHtml = data.motds.map(m =>
|
|
`<div class="status-motd">💬 ${m}</div>`
|
|
).join('');
|
|
|
|
return `
|
|
<div class="status-header">
|
|
<span class="status-badge" style="color:${data.couleur};border-color:${data.couleur}20;background:${data.couleur}15">
|
|
● ${data.status}
|
|
</span>
|
|
${data.date ? `<span class="status-date">${data.date}</span>` : ''}
|
|
</div>
|
|
${data.message ? `<p class="status-message">${data.message}</p>` : ''}
|
|
${motdsHtml ? `<div class="status-motds">${motdsHtml}</div>` : ''}
|
|
`;
|
|
}
|
|
|
|
function injectStatusSection() {
|
|
const mainContent = document.querySelector('.main-content');
|
|
const otherSection = document.querySelector('.other-section');
|
|
if (!mainContent) return null;
|
|
|
|
const section = document.createElement('div');
|
|
section.className = 'news-section';
|
|
section.innerHTML = `
|
|
<h2>Infos du jour</h2>
|
|
<div class="news-card">
|
|
<div class="news-loading">
|
|
<div class="mc-loading-dot"></div>
|
|
<div class="mc-loading-dot"></div>
|
|
<div class="mc-loading-dot"></div>
|
|
</div>
|
|
</div>`;
|
|
|
|
if (otherSection) {
|
|
mainContent.insertBefore(section, otherSection);
|
|
} else {
|
|
mainContent.appendChild(section);
|
|
}
|
|
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
.news-section h2 { color: #bd93f9; font-size: 1.5rem; margin-bottom: 1rem; }
|
|
.news-card {
|
|
background-color: rgba(68,71,90,0.95);
|
|
border-radius: 12px;
|
|
padding: 1.4rem 1.6rem;
|
|
border-left: 3px solid #bd93f9;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
.news-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
|
|
.status-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.8rem; }
|
|
.status-badge {
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
padding: 0.2rem 0.7rem;
|
|
border-radius: 20px;
|
|
border: 1px solid;
|
|
white-space: nowrap;
|
|
}
|
|
.status-date { font-size: 0.78rem; color: #6272a4; font-family: 'Courier New', monospace; margin-left: auto; }
|
|
.status-message { color: #f8f8f2; font-size: 0.95rem; margin-bottom: 0.9rem; line-height: 1.5; }
|
|
.status-motds { display: flex; flex-direction: column; gap: 0.4rem; }
|
|
.status-motd {
|
|
font-size: 0.85rem;
|
|
color: #6272a4;
|
|
padding: 0.3rem 0.6rem;
|
|
background: rgba(40,42,54,0.6);
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.news-loading { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 0; }
|
|
.status-error { color: #ff5555; font-size: 0.85rem; font-family: 'Courier New', monospace; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
return section.querySelector('.news-card');
|
|
}
|
|
|
|
async function fetchStatus(card) {
|
|
try {
|
|
const res = await fetch(STATUS_ENDPOINT, { cache: 'no-cache' });
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const text = await res.text();
|
|
card.innerHTML = buildStatusCard(parseStatusFile(text));
|
|
} catch (e) {
|
|
card.innerHTML = `<span class="status-error">⚠ Impossible de charger server.status (${e.message})</span>`;
|
|
}
|
|
}
|
|
|
|
function initStatus() {
|
|
const card = injectStatusSection();
|
|
if (card) fetchStatus(card);
|
|
}
|
|
|
|
// =========================================================
|
|
// INIT
|
|
// =========================================================
|
|
function init() {
|
|
document.addEventListener('keypress', e => {
|
|
if (e.key && e.key.length === 1) checkEasterEgg(e.key);
|
|
});
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') checkEasterEgg(' ');
|
|
});
|
|
|
|
if (document.querySelector('.stats-section')) {
|
|
watchStats();
|
|
} else {
|
|
document.addEventListener('DOMContentLoaded', watchStats);
|
|
}
|
|
|
|
initStatus();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
|
|
})();
|