Skip to content

Translate web interface to English #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SyntaxSorcerer7 merged 1 commit into from
Aug 12, 2025
Merged

Translate web interface to English #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 31 additions & 31 deletions templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html><html lang=de>
<head><meta charset=utf-8><title>Internet-Verbindungsmonitor</title>
<!doctype html><html lang=en>
<head><meta charset=utf-8><title>Internet Connection Monitor</title>
<script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
<script src='https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3'></script>
<style>
Expand All @@ -13,74 +13,74 @@
</style></head>

<body>
<h1>Internet-Verbindungsmonitor</h1>
<p id=status>Starte …</p>
<h1>Internet Connection Monitor</h1>
<p id=status>Starting…</p>

<div class="legend">
<strong>Verfügbarkeitsstufen:</strong><br>
<div class="legend-item"><span class="legend-color" style="background:#4ade80"></span>Exzellent (≥99,9%)</div>
<div class="legend-item"><span class="legend-color" style="background:#eab308"></span>Gut (98,0-99,8%)</div>
<div class="legend-item"><span class="legend-color" style="background:#ef4444"></span>Problematisch (<98%)</div>
<div class="legend-item"><span class="legend-color" style="background:#3b82f6"></span>Keine Daten</div>
<strong>Availability Levels:</strong><br>
<div class="legend-item"><span class="legend-color" style="background:#4ade80"></span>Excellent (≥99.9%)</div>
<div class="legend-item"><span class="legend-color" style="background:#eab308"></span>Good (98.0-99.8%)</div>
<div class="legend-item"><span class="legend-color" style="background:#ef4444"></span>Problematic (<98%)</div>
<div class="legend-item"><span class="legend-color" style="background:#3b82f6"></span>No Data</div>
</div>

<div class="chart-container">
<div class="chart-title">Detaillierter Verlauf</div>
<div class="chart-title">Detailed Timeline</div>
<canvas id=c height=80></canvas>
</div>

<div class="chart-container">
<div class="chart-title">24-Stunden-Übersicht (letzte 24h)</div>
<div class="chart-title">24-Hour Overview (last 24h)</div>
<canvas id=hourlyChart height=60></canvas>
</div>

<div class="chart-container">
<div class="chart-title">Tagesübersicht (letzte 30 Tage)</div>
<div class="chart-title">Daily Overview (last 30 days)</div>
<canvas id=dailyChart height=60></canvas>
</div>

<script>
let chart=null, hourlyChart=null, dailyChart=null;

// Hilfsfunktion: UTC-Timestamp zu lokaler Zeit konvertieren
// Helper: convert UTC timestamp to local time
function utcToLocal(utcTimestamp) {
return new Date(utcTimestamp * 1000);
}

// Hilfsfunktion: UTC-Stunde zu lokaler Stunde umrechnen und formatieren
// Helper: format UTC hour into local hour string
function formatHourLabel(utcHour) {
// UTC-Stunde in lokale Stunde umrechnen
// Convert UTC hour to local hour
const now = new Date();
const utcTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
utcTime.setUTCHours(utcHour, 0, 0, 0);
const localHour = utcTime.getHours();
return localHour.toString().padStart(2, '0') + ':00';
}

// Hilfsfunktion: UTC-Timestamp zu lokalem Tages-Label
// Helper: format UTC timestamp into local day label
function formatDayLabel(utcTimestamp) {
const localDate = utcToLocal(utcTimestamp);
return localDate.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit' });
return localDate.toLocaleDateString('en-US', { day: '2-digit', month: '2-digit' });
}

async function reloadData(){
const r = await fetch('/data');
const {labels,values,hourly,daily} = await r.json();

// Status-Text setzen
// Set status text
const statusTxt = values.length
? (values.at(-1) ? '🟢 Verbindung steht' : '🔴 Keine Verbindung')
: 'Noch keine Daten';
? (values.at(-1) ? '🟢 Connection up' : '🔴 No connection')
: 'No data yet';
document.getElementById('status').textContent = statusTxt;

// Detaillierter Verlauf - UTC-Timestamps zu lokalen Zeiten konvertieren
// Detailed timeline - convert UTC timestamps to local times
const localLabels = labels.map(utcTimestamp => utcToLocal(utcTimestamp).toISOString());

if(!chart){
chart = new Chart(document.getElementById('c'),{
type:'line',
data:{labels:localLabels,
datasets:[{label:'Online-Status',data:values,stepped:true,fill:true}]},
datasets:[{label:'Online Status',data:values,stepped:true,fill:true}]},
options:{scales:{
y:{min:0,max:1,ticks:{stepSize:1,callback:v=>v?'Online':'Offline'}},
x:{type:'time',time:{unit:'hour'}}
Expand All @@ -92,15 +92,15 @@ <h1>Internet-Verbindungsmonitor</h1>
chart.update();
}

// 24-Stunden-Chart - UTC zu lokaler Zeit konvertieren
// 24-hour chart - convert UTC to local time
if(hourly && hourly.length){
if(!hourlyChart){
hourlyChart = new Chart(document.getElementById('hourlyChart'),{
type:'bar',
data:{
labels:hourly.map(h=>h.uptime<0 ? formatHourLabel(h.hour)+' ?' : formatHourLabel(h.hour)),
datasets:[{
label:'Stündlicher Status',
label:'Hourly Status',
data:hourly.map(h=>h.uptime<0?0.5:h.uptime),
backgroundColor:hourly.map(h=>h.uptime<0?'#3b82f6':(h.uptime>=0.999?'#4ade80':(h.uptime>=0.98?'#eab308':'#ef4444'))),
borderWidth:0
Expand All @@ -110,14 +110,14 @@ <h1>Internet-Verbindungsmonitor</h1>
responsive:true,
scales:{
y:{min:0,max:1,ticks:{stepSize:0.2,callback:v=>(v*100).toFixed(0)+'%'}},
x:{title:{display:true,text:'Stunde (Ortszeit)'}}
x:{title:{display:true,text:'Hour (local time)'}}
},
plugins:{
tooltip:{
callbacks:{
label:ctx=>{
const hourData = hourly[ctx.dataIndex];
return hourData.uptime<0 ? 'Keine Daten verfügbar' : `Verfügbarkeit: ${(ctx.parsed.y*100).toFixed(1)}%`;
return hourData.uptime<0 ? 'No data available' : `Availability: ${(ctx.parsed.y*100).toFixed(1)}%`;
}
}
}
Expand All @@ -132,15 +132,15 @@ <h1>Internet-Verbindungsmonitor</h1>
}
}

// Tages-Chart - UTC zu lokaler Zeit konvertieren
// Daily chart - convert UTC to local time
if(daily && daily.length){
if(!dailyChart){
dailyChart = new Chart(document.getElementById('dailyChart'),{
type:'bar',
data:{
labels:daily.map(d=>d.uptime<0 ? formatDayLabel(d.date)+' ?' : formatDayLabel(d.date)),
datasets:[{
label:'Täglicher Status',
label:'Daily Status',
data:daily.map(d=>d.uptime<0?0.5:d.uptime),
backgroundColor:daily.map(d=>d.uptime<0?'#3b82f6':(d.uptime>=0.999?'#4ade80':(d.uptime>=0.98?'#eab308':'#ef4444'))),
borderWidth:0
Expand All @@ -150,14 +150,14 @@ <h1>Internet-Verbindungsmonitor</h1>
responsive:true,
scales:{
y:{min:0,max:1,ticks:{stepSize:0.2,callback:v=>(v*100).toFixed(0)+'%'}},
x:{title:{display:true,text:'Tag (Ortszeit)'}}
x:{title:{display:true,text:'Day (local time)'}}
},
plugins:{
tooltip:{
callbacks:{
label:ctx=>{
const dayData = daily[ctx.dataIndex];
return dayData.uptime<0 ? 'Keine Daten verfügbar' : `Verfügbarkeit: ${(ctx.parsed.y*100).toFixed(1)}%`;
return dayData.uptime<0 ? 'No data available' : `Availability: ${(ctx.parsed.y*100).toFixed(1)}%`;
}
}
}
Expand All @@ -174,5 +174,5 @@ <h1>Internet-Verbindungsmonitor</h1>
}

reloadData();
setInterval(reloadData, 60000); // jede Minute
setInterval(reloadData, 60000); // every minute
</script></body></html>