Initial commit
This commit is contained in:
SebastianOtt
commit
b7a3b14e06
41 changed files with 27493 additions and 0 deletions
193
src/components/MonitoringPage.astro
Normal file
193
src/components/MonitoringPage.astro
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
---
|
||||
// This is server-side - runs at build time
|
||||
const pageTitle = "Monitoring";
|
||||
---
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<h1 class="text-2xl font-bold">{pageTitle}</h1>
|
||||
|
||||
<!-- Real-time Metrics -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">Temperature</h2>
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="text-center">
|
||||
<div class="radial-progress text-primary" style="--value:65; --size:8rem;" id="temp-progress">65%</div>
|
||||
<div class="mt-2" id="temp-reading">25.6°C</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm mt-2">
|
||||
<span>Min: <span id="temp-min">22.1°C</span></span>
|
||||
<span>Max: <span id="temp-max">28.3°C</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">Current</h2>
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="text-center">
|
||||
<div class="radial-progress text-secondary" style="--value:42; --size:8rem;" id="current-progress">42%</div>
|
||||
<div class="mt-2" id="current-reading">125mA</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm mt-2">
|
||||
<span>Min: <span id="current-min">0mA</span></span>
|
||||
<span>Max: <span id="current-max">300mA</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">Output Power</h2>
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="text-center">
|
||||
<div class="radial-progress text-accent" style="--value:50; --size:8rem;" id="power-progress">50%</div>
|
||||
<div class="mt-2" id="power-reading">500mW</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm mt-2">
|
||||
<span>Min: <span id="power-min">0mW</span></span>
|
||||
<span>Max: <span id="power-max">1000mW</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- System Health -->
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">System Health</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>CPU Temperature</td>
|
||||
<td class="w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-full h-4 bg-base-300 rounded-lg relative">
|
||||
<div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
|
||||
<span>0°C</span>
|
||||
<span>30°C</span>
|
||||
<span>60°C</span>
|
||||
<span>90°C</span>
|
||||
<span>120°C</span>
|
||||
</div>
|
||||
<div class="absolute top-0 bottom-0 left-0 rounded-lg"
|
||||
style="width: 35.25%; background: linear-gradient(90deg, #3b82f6 0%, #22c55e 37.5%, #f59e0b 75%, #ef4444 100%);" id="cpu-temp-bar">
|
||||
</div>
|
||||
</div>
|
||||
<span id="cpu-temp">42.3°C</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>GaN Temperature</td>
|
||||
<td class="w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-full h-4 bg-base-300 rounded-lg relative">
|
||||
<div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
|
||||
<span>0°C</span>
|
||||
<span>30°C</span>
|
||||
<span>60°C</span>
|
||||
<span>90°C</span>
|
||||
<span>120°C</span>
|
||||
</div>
|
||||
<div class="absolute top-0 bottom-0 left-0 rounded-lg"
|
||||
style="width: 54.8%; background: linear-gradient(90deg, #3b82f6 0%, #22c55e 37.5%, #f59e0b 75%, #ef4444 100%);" id="gan-temp-bar">
|
||||
</div>
|
||||
</div>
|
||||
<span id="gan-temp">65.8°C</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WiFi Signal Strength</td>
|
||||
<td class="w-full">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-full h-4 bg-base-300 rounded-lg relative">
|
||||
<div class="absolute inset-0 flex justify-between px-1 text-[10px] text-base-content z-10">
|
||||
<span>-120dBm</span>
|
||||
<span>-90dBm</span>
|
||||
<span>-60dBm</span>
|
||||
<span>-30dBm</span>
|
||||
<span>0dBm</span>
|
||||
</div>
|
||||
<div class="absolute top-0 bottom-0 left-0 rounded-lg"
|
||||
style="width: 65%; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 40%, #22c55e 80%, #22c55e 100%);" id="wifi-signal-bar">
|
||||
</div>
|
||||
</div>
|
||||
<span id="wifi-signal">-42dBm</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Historical Data -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">Temperature History</h2>
|
||||
<div class="flex items-center justify-center h-64 bg-base-200 rounded-box">
|
||||
<p class="text-base-content opacity-50">Temperature Chart Placeholder</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-200 shadow-xl">
|
||||
<div class="card-body bg-base-200 rounded-lg">
|
||||
<h2 class="card-title">Power Output History</h2>
|
||||
<div class="flex items-center justify-center h-64 bg-base-200 rounded-box">
|
||||
<p class="text-base-content opacity-50">Power Chart Placeholder</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Update radial progress values
|
||||
function updateRadialProgress(elementId: string, value: number) {
|
||||
const element = document.getElementById(elementId);
|
||||
if (element) {
|
||||
element.style.setProperty('--value', value.toString());
|
||||
element.textContent = value + '%';
|
||||
}
|
||||
}
|
||||
|
||||
// Function to update monitoring values (called from WebSocket)
|
||||
(window as any).updateMonitoringValues = function(data: any) {
|
||||
if (data.temperature) {
|
||||
const tempProgress = Math.round((data.temperature / 100) * 100);
|
||||
updateRadialProgress('temp-progress', tempProgress);
|
||||
|
||||
const tempReading = document.getElementById('temp-reading');
|
||||
if (tempReading) tempReading.textContent = data.temperature + '°C';
|
||||
}
|
||||
|
||||
if (data.current) {
|
||||
const currentProgress = Math.round((data.current / 300) * 100);
|
||||
updateRadialProgress('current-progress', currentProgress);
|
||||
|
||||
const currentReading = document.getElementById('current-reading');
|
||||
if (currentReading) currentReading.textContent = data.current + 'mA';
|
||||
}
|
||||
|
||||
if (data.power) {
|
||||
const powerProgress = Math.round((data.power / 1000) * 100);
|
||||
updateRadialProgress('power-progress', powerProgress);
|
||||
|
||||
const powerReading = document.getElementById('power-reading');
|
||||
if (powerReading) powerReading.textContent = data.power + 'mW';
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue