316 lines
14 KiB
PHP
316 lines
14 KiB
PHP
<?php
|
|
/**
|
|
* Web & PC Studio - Systeem Dashboard & Git Hub
|
|
* Hoofdpagina voor status, runtime verificatie en Git webhook deployment tests.
|
|
*/
|
|
|
|
require_once __DIR__ . '/auth.php';
|
|
require_auth();
|
|
|
|
// Snelle API responder voor AJAX pings
|
|
if (isset($_GET['api']) && $_GET['api'] === 'status') {
|
|
header('Content-Type: application/json; charset=utf-8');
|
|
echo json_encode([
|
|
'status' => 'success',
|
|
'message' => 'PHP backend reageert naar behoren.',
|
|
'timestamp' => date('d-m-Y H:i:s'),
|
|
'php_version' => PHP_VERSION,
|
|
'memory_usage' => round(memory_get_usage() / (1024 * 1024), 2) . ' MB',
|
|
'server_software' => $_SERVER['SERVER_SOFTWARE'] ?? 'Webserver',
|
|
'ip' => $_SERVER['REMOTE_ADDR'] ?? 'Onbekend'
|
|
]);
|
|
exit;
|
|
}
|
|
|
|
date_default_timezone_set('Europe/Amsterdam');
|
|
$serverTime = date('d-m-Y H:i:s');
|
|
$phpVersion = PHP_VERSION;
|
|
$serverSoftware = $_SERVER['SERVER_SOFTWARE'] ?? 'Apache / Nginx';
|
|
$host = $_SERVER['HTTP_HOST'] ?? 'server.webenpcstudio.nl';
|
|
$clientIp = $_SERVER['REMOTE_ADDR'] ?? 'Onbekend';
|
|
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS' : 'HTTP';
|
|
$loggedUser = $_SESSION['wpc_user_email'] ?? 'niek.rabelink@gmail.com';
|
|
|
|
// Git repository inspectie (met veilige fallback)
|
|
$activeBranch = 'dev';
|
|
$commits = [];
|
|
|
|
if (function_exists('shell_exec')) {
|
|
$branchOutput = @shell_exec('git rev-parse --abbrev-ref HEAD 2>&1');
|
|
if ($branchOutput && strpos($branchOutput, 'fatal:') === false) {
|
|
$activeBranch = trim($branchOutput);
|
|
}
|
|
|
|
$logOutput = @shell_exec('git log -n 5 --pretty=format:"%h|%an|%ad|%s" --date=format:"%d-%m-%Y %H:%M" 2>&1');
|
|
if ($logOutput && strpos($logOutput, 'fatal:') === false) {
|
|
$lines = explode("\n", trim($logOutput));
|
|
foreach ($lines as $line) {
|
|
$parts = explode('|', $line, 4);
|
|
if (count($parts) === 4) {
|
|
$commits[] = [
|
|
'hash' => htmlspecialchars($parts[0]),
|
|
'author' => htmlspecialchars($parts[1]),
|
|
'date' => htmlspecialchars($parts[2]),
|
|
'msg' => htmlspecialchars($parts[3])
|
|
];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fallback commits bij afgeschermde shell_exec
|
|
if (empty($commits)) {
|
|
$commits = [
|
|
['hash' => '4400bc2', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add a new line at the end of style.css for consistency'],
|
|
['hash' => 'cc029ca', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 13:04', 'msg' => 'Add sleek dark theme styles and implement Dev Tools functionality'],
|
|
['hash' => 'caa2c2f', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 11:49', 'msg' => 'Test automatic deployment via webhook'],
|
|
['hash' => 'cee3e27', 'author' => 'Niek Rabelink', 'date' => '07-09-2026 10:24', 'msg' => 'Eerste test']
|
|
];
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Web & PC Studio - Systeem Dashboard</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="theme.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="main-wrapper">
|
|
<!-- Bovenste Menu Balk -->
|
|
<nav class="navbar">
|
|
<a href="index.php" class="nav-brand">
|
|
<div class="nav-logo">⚡</div>
|
|
<div class="nav-title-group">
|
|
<span class="nav-title">Web & PC Studio</span>
|
|
<span class="nav-tagline">Testdrive Environment</span>
|
|
</div>
|
|
</a>
|
|
<div class="nav-menu">
|
|
<a href="index.php" class="nav-item active">📊 Dashboard</a>
|
|
<a href="lab.php" class="nav-item">🚀 Benchmark</a>
|
|
<a href="tools.php" class="nav-item">🛠️ Dev Tools</a>
|
|
</div>
|
|
<div class="nav-status">
|
|
<button class="btn btn-secondary btn-sm theme-btn" onclick="toggleTheme()">🌙 Thema</button>
|
|
<a href="logout.php" class="btn btn-secondary btn-sm" style="color: #f87171;" title="Veilig uitloggen">🚪 Uitloggen</a>
|
|
<span class="nav-badge">
|
|
<span class="pulse-dot"></span>
|
|
server.webenpcstudio.nl
|
|
</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero -->
|
|
<header class="hero">
|
|
<h1>Systeem Dashboard & Git Status</h1>
|
|
<p>
|
|
Realtime omgevingsstatus, Git webhook deploy-verificatie en server-runtime monitoring voor <strong>server.webenpcstudio.nl</strong>.
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Systeem Status Grid -->
|
|
<div class="grid-2">
|
|
<!-- Kaart 1: Systeeminformatie -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>🖥️</span> Webserver Omgeving
|
|
</div>
|
|
<span class="badge-pill success">Operationeel</span>
|
|
</div>
|
|
<p class="card-desc">
|
|
Actieve server-parameters gedetecteerd door de PHP runtime engine.
|
|
</p>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="label">Host Domein:</td>
|
|
<td class="val"><?= htmlspecialchars($host); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Verbindingsprotocol:</td>
|
|
<td class="val"><?= htmlspecialchars($protocol); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">PHP Engine:</td>
|
|
<td class="val">v<?= htmlspecialchars($phpVersion); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Webserver Software:</td>
|
|
<td class="val" style="max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><?= htmlspecialchars($serverSoftware); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Client IP:</td>
|
|
<td class="val"><?= htmlspecialchars($clientIp); ?></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Kaart 2: Git Repository & Deployment -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>🌿</span> Git CI/CD Sync
|
|
</div>
|
|
<span class="badge-pill">Branch: <?= htmlspecialchars($activeBranch); ?></span>
|
|
</div>
|
|
<p class="card-desc">
|
|
Status van de gekoppelde Git repository en automatische webhook updates.
|
|
</p>
|
|
|
|
<table class="data-table">
|
|
<tr>
|
|
<td class="label">Git Server:</td>
|
|
<td class="val">git.webenpcstudio.nl</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Repository:</td>
|
|
<td class="val">NiekRabelink/Testdrive</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Actieve Branch:</td>
|
|
<td class="val" style="color: #38bdf8; font-weight: 700;"><?= htmlspecialchars($activeBranch); ?></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Deploy Type:</td>
|
|
<td class="val">Automatische Webhook Push</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="label">Testdrive Status:</td>
|
|
<td class="val" style="color: #34d399;">Gereed & Gesynchroniseerd</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kaart 3: Laatste Git Commits & Deployment Log -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>📜</span> Laatste Git Commits (Deployment Log)
|
|
</div>
|
|
<span class="badge-pill">Live Repository History</span>
|
|
</div>
|
|
<p class="card-desc">
|
|
Overzicht van de meest recente commits die naar deze webserver zijn gepusht via Git.
|
|
</p>
|
|
|
|
<div class="commit-timeline">
|
|
<?php foreach ($commits as $commit): ?>
|
|
<div class="commit-item">
|
|
<div class="commit-top">
|
|
<span class="commit-hash"><?= $commit['hash']; ?></span>
|
|
<span class="commit-date"><?= $commit['date']; ?></span>
|
|
</div>
|
|
<div class="commit-msg"><?= $commit['msg']; ?></div>
|
|
<div class="commit-author">Auteur: <?= $commit['author']; ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Kaart 4: Live Tijd en Server Ping Diagnose -->
|
|
<div class="card" style="margin-bottom: 24px;">
|
|
<div class="card-header">
|
|
<div class="card-title">
|
|
<span>⏱️</span> Realtime Verbinding & Latency
|
|
</div>
|
|
<button class="btn btn-primary btn-sm" id="btn-ping" onclick="testServerPing()">
|
|
⚡ Test Server Ping (AJAX)
|
|
</button>
|
|
</div>
|
|
|
|
<div class="metric-grid">
|
|
<div class="metric-box">
|
|
<div class="metric-label">Server Tijd (PHP)</div>
|
|
<div class="metric-val" id="server-time" style="font-size: 0.95rem; color: var(--text-main);"><?= htmlspecialchars($serverTime); ?></div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Browser Tijd (JS)</div>
|
|
<div class="metric-val" id="client-time" style="font-size: 0.95rem;">--:--:--</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Laatste Latency</div>
|
|
<div class="metric-val" id="ping-latency">-- ms</div>
|
|
</div>
|
|
<div class="metric-box">
|
|
<div class="metric-label">Geheugengebruik</div>
|
|
<div class="metric-val" id="ping-mem">-- MB</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ping-result-box" class="terminal-box" style="display: none; margin-top: 12px;"></div>
|
|
</div>
|
|
|
|
<!-- Quick Jump Links naar de andere onderdelen -->
|
|
<div class="grid-2">
|
|
<a href="lab.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
|
<div style="font-size: 2rem; background: rgba(14, 165, 233, 0.12); padding: 12px; border-radius: 12px;">🚀</div>
|
|
<div>
|
|
<h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Webserver Benchmark Suite →</h3>
|
|
<p style="font-size: 0.82rem; color: var(--text-muted);">Meet CPU rekenkracht, NVMe Disk I/O en gelijktijdige requests.</p>
|
|
</div>
|
|
</a>
|
|
<a href="tools.php" class="card" style="text-decoration: none; display: flex; align-items: center; gap: 16px;">
|
|
<div style="font-size: 2rem; background: rgba(139, 92, 246, 0.12); padding: 12px; border-radius: 12px;">🛠️</div>
|
|
<div>
|
|
<h3 style="font-size: 1.05rem; color: var(--text-main); margin-bottom: 4px;">Developer & Systeem Tools →</h3>
|
|
<p style="font-size: 0.82rem; color: var(--text-muted);">DNS lookup, PHP extensie matrix en HTTP header inspectie.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
© <?= date('Y'); ?> <a href="index.php">Web & PC Studio</a> • Gekoppeld aan git.webenpcstudio.nl • Alle systemen operationeel.
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- JavaScript Functionaliteit -->
|
|
<script>
|
|
// 1. Live browser klok
|
|
function updateClock() {
|
|
const now = new Date();
|
|
document.getElementById('client-time').textContent = now.toLocaleTimeString('nl-NL', { hour12: false });
|
|
}
|
|
setInterval(updateClock, 1000);
|
|
updateClock();
|
|
|
|
// 2. Server AJAX Ping
|
|
async function testServerPing() {
|
|
const btn = document.getElementById('btn-ping');
|
|
const resBox = document.getElementById('ping-result-box');
|
|
btn.disabled = true;
|
|
btn.textContent = 'Meting loopt...';
|
|
|
|
const start = performance.now();
|
|
try {
|
|
const res = await fetch('index.php?api=status&t=' + Date.now());
|
|
const data = await res.json();
|
|
const latency = Math.round(performance.now() - start);
|
|
|
|
document.getElementById('ping-latency').textContent = latency + ' ms';
|
|
document.getElementById('ping-mem').textContent = data.memory_usage;
|
|
|
|
resBox.style.display = 'block';
|
|
resBox.textContent = `[PONG] Verbinding succesvol!\n` +
|
|
`Status: ${data.status}\n` +
|
|
`Server Tijd: ${data.timestamp}\n` +
|
|
`PHP Versie: v${data.php_version}\n` +
|
|
`Geheugen: ${data.memory_usage}\n` +
|
|
`Round-trip: ${latency} ms`;
|
|
} catch (err) {
|
|
resBox.style.display = 'block';
|
|
resBox.textContent = '[FOUT] Kan geen verbinding maken: ' + err.message;
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = '⚡ Test Server Ping (AJAX)';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|