feat: Anleitung-Popup und Version 1.5.0
- ANLEITUNG.html erstellt (Bedienungsanleitung als HTML-Seite) - Anleitung-Button im Dashboard-Footer ergänzt - Anleitung öffnet sich als Modal-Popup mit eigenem Header - Version 1.4.1 → 1.5.0
This commit is contained in:
+490
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Wetterstation – Bedienungsanleitung</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #1a1a2e;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a3a5c 0%, #2d6a9f 100%);
|
||||
color: #fff;
|
||||
padding: 3rem 2rem 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
header h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.5px; }
|
||||
header p { margin-top: .5rem; font-size: 1.05rem; opacity: .85; }
|
||||
|
||||
/* ── Layout ── */
|
||||
.page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
|
||||
|
||||
/* ── Table of Contents ── */
|
||||
.toc {
|
||||
background: #fff;
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 10px;
|
||||
padding: 1.4rem 1.8rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6a7a; margin-bottom: .7rem; }
|
||||
.toc ol { padding-left: 1.4rem; }
|
||||
.toc li { margin: .25rem 0; }
|
||||
.toc a { color: #2d6a9f; text-decoration: none; }
|
||||
.toc a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Sections ── */
|
||||
section {
|
||||
background: #fff;
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 10px;
|
||||
padding: 1.8rem 2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
section h2 {
|
||||
font-size: 1.35rem;
|
||||
color: #1a3a5c;
|
||||
border-bottom: 2px solid #e4eaf2;
|
||||
padding-bottom: .5rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
section h3 {
|
||||
font-size: 1.05rem;
|
||||
color: #2d6a9f;
|
||||
margin: 1.3rem 0 .5rem;
|
||||
}
|
||||
p { margin-bottom: .8rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
|
||||
/* ── Buttons – visual replicas ── */
|
||||
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .35rem .85rem;
|
||||
border-radius: 6px;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid #2d6a9f;
|
||||
color: #2d6a9f;
|
||||
background: #fff;
|
||||
}
|
||||
.btn.active { background: #2d6a9f; color: #fff; }
|
||||
|
||||
/* ── Charts grid preview ── */
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: .8rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chart-card {
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 8px;
|
||||
padding: .8rem 1rem;
|
||||
background: #f9fbfd;
|
||||
}
|
||||
.chart-card .icon { font-size: 1.4rem; }
|
||||
.chart-card strong { display: block; margin-top: .3rem; font-size: .92rem; color: #1a3a5c; }
|
||||
.chart-card span { font-size: .82rem; color: #5a6a7a; }
|
||||
|
||||
/* ── Info boxes ── */
|
||||
.info-box {
|
||||
background: #eef5ff;
|
||||
border-left: 4px solid #2d6a9f;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
.tip-box {
|
||||
background: #f0faf3;
|
||||
border-left: 4px solid #27ae60;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
.warn-box {
|
||||
background: #fffbea;
|
||||
border-left: 4px solid #f0a500;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
|
||||
/* ── Table ── */
|
||||
table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0; }
|
||||
th, td { padding: .55rem .8rem; border: 1px solid #dce3ec; text-align: left; }
|
||||
th { background: #eef2f8; font-weight: 600; color: #1a3a5c; }
|
||||
tr:nth-child(even) td { background: #f9fbfd; }
|
||||
|
||||
/* ── Trend arrows ── */
|
||||
.trend-table td:first-child { font-size: 1.1rem; text-align: center; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #8a9ab0;
|
||||
font-size: .85rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 { font-size: 1.6rem; }
|
||||
.page { padding: 1.2rem 1rem 3rem; }
|
||||
section { padding: 1.2rem 1.1rem; }
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background: #fff; font-size: 12pt; }
|
||||
header { background: #1a3a5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.btn.active { background: #2d6a9f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>🌤️ Wetterstation – Bedienungsanleitung</h1>
|
||||
<p>Dashboard auf Basis einer Davis VantagePro</p>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<!-- Table of Contents -->
|
||||
<nav class="toc">
|
||||
<h2>Inhalt</h2>
|
||||
<ol>
|
||||
<li><a href="#ueberblick">Überblick</a></li>
|
||||
<li><a href="#zeitraum">Zeitraum-Auswahl</a></li>
|
||||
<li><a href="#aktuell">Aktuelle Werte</a></li>
|
||||
<li><a href="#diagramme">Diagramme im Überblick</a></li>
|
||||
<li><a href="#charts-detail">Diagramme im Detail</a></li>
|
||||
<li><a href="#tabelle">Tabellenansicht</a></li>
|
||||
<li><a href="#benutzerdefiniert">Benutzerdefinierter Zeitbereich</a></li>
|
||||
<li><a href="#refresh">Automatische Aktualisierung</a></li>
|
||||
<li><a href="#drucken">Drucken</a></li>
|
||||
<li><a href="#hinweise">Hinweise & Grenzen</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- 1 Überblick -->
|
||||
<section id="ueberblick">
|
||||
<h2>1. Überblick</h2>
|
||||
<p>
|
||||
Das Wetterstation-Dashboard zeigt die Messwerte einer <strong>Davis VantagePro</strong>
|
||||
in interaktiven Diagrammen an. Alle Daten werden aus einer PostgreSQL-Datenbank
|
||||
bezogen und im Browser aufbereitet.
|
||||
</p>
|
||||
<p>
|
||||
Die Oberfläche besteht aus drei Bereichen:
|
||||
</p>
|
||||
<ol style="padding-left:1.4rem;">
|
||||
<li><strong>Zeitraum-Navigation</strong> (oben) – wählt den dargestellten Zeitraum.</li>
|
||||
<li><strong>Diagramme / Tabelle</strong> (Mitte) – zeigt die Wetterdaten an.</li>
|
||||
<li><strong>Fußzeile</strong> (unten) – zeigt Version, Build-Datum und Kontakt.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- 2 Zeitraum-Auswahl -->
|
||||
<section id="zeitraum">
|
||||
<h2>2. Zeitraum-Auswahl</h2>
|
||||
<p>
|
||||
In der Navigationsleiste am oberen Rand können Sie den Darstellungszeitraum wählen:
|
||||
</p>
|
||||
<div class="btn-row">
|
||||
<span class="btn active">24 Stunden</span>
|
||||
<span class="btn">7 Tage</span>
|
||||
<span class="btn">30 Tage</span>
|
||||
<span class="btn">365 Tage</span>
|
||||
<span class="btn">Bereich</span>
|
||||
<span class="btn">Tabelle</span>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Schaltfläche</th><th>Dargestellter Zeitraum</th><th>Auflösung</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><strong>24 Stunden</strong></td><td>Letzte 24 Stunden ab jetzt</td><td>Einzelmessungen (~5 min)</td></tr>
|
||||
<tr><td><strong>7 Tage</strong></td><td>Letzte 7 Tage ab heute</td><td>Tagesmittel / Tages-Min+Max</td></tr>
|
||||
<tr><td><strong>30 Tage</strong></td><td>Letzte 30 Tage ab heute</td><td>Tagesmittel / Tages-Min+Max</td></tr>
|
||||
<tr><td><strong>365 Tage</strong></td><td>Letzte 365 Tage ab heute</td><td>Tagesmittel, Regen pro Woche</td></tr>
|
||||
<tr><td><strong>Bereich</strong></td><td>Frei wählbar (max. 1 Jahr)</td><td>Stundenmittel (< 7 Tage) oder Tagesmittel (≥ 7 Tage)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="info-box">
|
||||
Der aktuell aktive Zeitraum wird unterhalb der Navigationsleiste als Text angezeigt,
|
||||
z. B. <em>„Die letzten 24 Stunden"</em> oder
|
||||
<em>„01.01.2026 00:00 – 31.01.2026 23:59"</em>.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 Aktuelle Werte -->
|
||||
<section id="aktuell">
|
||||
<h2>3. Aktuelle Werte</h2>
|
||||
<p>
|
||||
Über jedem Diagramm wird der <strong>aktuellste Messwert</strong> angezeigt
|
||||
(grauer Hinweistext, z. B. <em>„Aktuell: 18,4 °C"</em>).
|
||||
Dieser Wert stammt immer aus den letzten 24 Stunden – unabhängig vom gewählten
|
||||
Zeitraum.
|
||||
</p>
|
||||
<p>
|
||||
Unterhalb jedes Diagramms erscheinen die <strong>Minimum- und Maximumwerte</strong>
|
||||
des gewählten Zeitraums mit dem zugehörigen Zeitpunkt.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 4 Diagramme im Überblick -->
|
||||
<section id="diagramme">
|
||||
<h2>4. Diagramme im Überblick</h2>
|
||||
<div class="chart-grid">
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌡️</div>
|
||||
<strong>Temperatur</strong>
|
||||
<span>°C</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌐</div>
|
||||
<strong>Luftdruck</strong>
|
||||
<span>hPa</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">💧</div>
|
||||
<strong>Luftfeuchtigkeit</strong>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌧️</div>
|
||||
<strong>Regen</strong>
|
||||
<span>mm / mm/h</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🧭</div>
|
||||
<strong>Windrichtung</strong>
|
||||
<span>°</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">💨</div>
|
||||
<strong>Wind & Böen</strong>
|
||||
<span>km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Alle Diagramme sind interaktiv: Fahren Sie mit der Maus über eine Kurve,
|
||||
um den genauen Messwert und Zeitpunkt als Tooltip anzuzeigen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 5 Diagramme im Detail -->
|
||||
<section id="charts-detail">
|
||||
<h2>5. Diagramme im Detail</h2>
|
||||
|
||||
<h3>🌡️ Temperatur</h3>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> wird der Temperaturverlauf als Flächendiagramm dargestellt.
|
||||
Bei längeren Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert ≥ 7 Tage) werden
|
||||
<strong>Tages-Minimum und -Maximum</strong> als Band angezeigt, sodass die
|
||||
tägliche Schwankungsbreite sofort erkennbar ist.
|
||||
</p>
|
||||
|
||||
<h3>🌐 Luftdruck</h3>
|
||||
<p>
|
||||
Zeigt den barometrischen Druck in hPa. Im Diagrammtitel erscheint ein
|
||||
<strong>Trendpfeil</strong>, der die Druckentwicklung der letzten Stunden anzeigt:
|
||||
</p>
|
||||
<table class="trend-table">
|
||||
<thead><tr><th>Pfeil</th><th>Bedeutung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>⬇⬇</td><td>Fällt schnell (–60)</td></tr>
|
||||
<tr><td>⬇</td><td>Fällt langsam (–20)</td></tr>
|
||||
<tr><td>→</td><td>Stabil (0)</td></tr>
|
||||
<tr><td>⬆</td><td>Steigt langsam (+20)</td></tr>
|
||||
<tr><td>⬆⬆</td><td>Steigt schnell (+60)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>💧 Luftfeuchtigkeit</h3>
|
||||
<p>Relative Luftfeuchtigkeit in Prozent als Flächendiagramm.</p>
|
||||
|
||||
<h3>🌧️ Regen</h3>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> werden zwei Kurven überlagert:
|
||||
</p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li><strong>Regen (mm)</strong> – kumulierter Regenfall als Fläche.</li>
|
||||
<li><strong>Regenrate (mm/h)</strong> – aktuelle Intensität als gestrichelte Linie.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Bei längeren Zeiträumen (7 d, 30 d) wird der <strong>Tagesregen</strong>
|
||||
als Balkendiagramm dargestellt; bei 365 Tagen der <strong>Wochenregen</strong>.
|
||||
</p>
|
||||
|
||||
<h3>🧭 Windrichtung</h3>
|
||||
<p>
|
||||
Die Windrichtung wird als <strong>Punktewolke</strong> (Streudiagramm) angezeigt.
|
||||
Die Y-Achse zeigt die Himmelsrichtungen von 0° bis 360°:
|
||||
N = 0°/360°, NO = 45°, O = 90°, SO = 135°, S = 180°, SW = 225°, W = 270°, NW = 315°.
|
||||
</p>
|
||||
|
||||
<h3>💨 Wind & Böen</h3>
|
||||
<p>
|
||||
Zeigt <strong>Windgeschwindigkeit</strong> (lila) und <strong>Böen</strong> (orange)
|
||||
in km/h. Bei 365 Tagen und benutzerdefinierten Zeiträumen über einem Jahr
|
||||
werden Böen ausgeblendet, da keine aussagekräftigen Tagesmaxima vorliegen.
|
||||
Unterhalb des Diagramms erscheint die maximale Böe des gewählten Zeitraums
|
||||
mit Zeitpunkt.
|
||||
</p>
|
||||
<div class="tip-box">
|
||||
<strong>Tipp:</strong> Im Wind-Diagramm ist eine Legende eingeblendet,
|
||||
die Windgeschwindigkeit und Böen unterscheidet.
|
||||
Klicken Sie auf einen Legendeneintrag, um eine Serie ein- oder auszublenden.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 Tabellenansicht -->
|
||||
<section id="tabelle">
|
||||
<h2>6. Tabellenansicht</h2>
|
||||
<p>
|
||||
Klicken Sie auf die Schaltfläche <span class="btn">Tabelle</span>,
|
||||
um statt der Diagramme eine <strong>tabellarische Tagesübersicht</strong>
|
||||
anzuzeigen. Ein Klick auf <span class="btn active">Grafik</span>
|
||||
kehrt zur Diagrammansicht zurück.
|
||||
</p>
|
||||
<p>Die Tabelle enthält je Tag:</p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li>Temperatur-Minimum und -Maximum (°C)</li>
|
||||
<li>Luftfeuchtigkeit-Minimum und -Maximum (%)</li>
|
||||
<li>Luftdruck-Minimum und -Maximum (hPa)</li>
|
||||
<li>Regen gesamt (mm)</li>
|
||||
<li>Maximale Windböe (km/h)</li>
|
||||
</ul>
|
||||
<div class="info-box">
|
||||
Im 24h-Modus werden die vorliegenden Einzelmessungen automatisch
|
||||
pro Tag aggregiert, sodass immer eine Tageszeile erscheint.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7 Benutzerdefinierter Zeitbereich -->
|
||||
<section id="benutzerdefiniert">
|
||||
<h2>7. Benutzerdefinierter Zeitbereich</h2>
|
||||
<p>
|
||||
Mit der Schaltfläche <span class="btn">Bereich</span> öffnet sich ein Dialog,
|
||||
in dem Sie ein <strong>Start- und Enddatum</strong> frei eingeben können.
|
||||
</p>
|
||||
<p><strong>Regeln:</strong></p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li>Das Enddatum muss nach dem Startdatum liegen.</li>
|
||||
<li>Der maximale Zeitraum beträgt <strong>365 Tage</strong>.</li>
|
||||
</ul>
|
||||
<p><strong>Darstellungsauflösung:</strong></p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li><strong>< 7 Tage:</strong> Stundenmittelwerte, X-Achse mit Datum und Uhrzeit.</li>
|
||||
<li><strong>≥ 7 Tage:</strong> Tagesmittel- bzw. Min/Max-Werte, X-Achse mit Datum.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Der zuletzt gewählte benutzerdefinierte Zeitbereich wird im Browser
|
||||
(<code>localStorage</code>) gespeichert und beim nächsten Öffnen des
|
||||
Dialogs vorausgefüllt.
|
||||
</p>
|
||||
<div class="warn-box">
|
||||
<strong>Hinweis:</strong> Schließen Sie den Dialog mit <em>Abbrechen</em>,
|
||||
um ohne Änderung zurückzukehren. Ein Klick auf den dunklen Hintergrund
|
||||
schließt den Dialog ebenfalls.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8 Automatische Aktualisierung -->
|
||||
<section id="refresh">
|
||||
<h2>8. Automatische Aktualisierung</h2>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> werden die Daten automatisch alle
|
||||
<strong>5 Minuten</strong> neu geladen. Dabei bleibt die aktuelle
|
||||
Ansicht sichtbar – die Seite flackert nicht.
|
||||
</p>
|
||||
<p>
|
||||
Bei allen anderen Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert)
|
||||
findet <strong>kein automatisches Neuladen</strong> statt.
|
||||
Laden Sie die Seite manuell neu (F5 / ⌘R), um aktuelle Daten
|
||||
für diese Zeiträume zu erhalten.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 9 Drucken -->
|
||||
<section id="drucken">
|
||||
<h2>9. Drucken</h2>
|
||||
<p>
|
||||
In der <strong>Tabellenansicht</strong> erscheint oben links die Schaltfläche
|
||||
<em>🖨️ Drucken</em>. Ein Klick darauf öffnet den Druckdialog des Browsers.
|
||||
</p>
|
||||
<p>
|
||||
Die Schaltflächen-Leiste und der Drucken-Button werden beim Ausdruck
|
||||
automatisch ausgeblendet, sodass nur die Tabelle erscheint.
|
||||
</p>
|
||||
<div class="tip-box">
|
||||
<strong>Tipp für PDF-Export:</strong> Wählen Sie im Druckdialog
|
||||
„Als PDF speichern", um die Tabelle als PDF-Datei zu exportieren.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 Hinweise & Grenzen -->
|
||||
<section id="hinweise">
|
||||
<h2>10. Hinweise & Grenzen</h2>
|
||||
<table>
|
||||
<thead><tr><th>Thema</th><th>Details</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Messsystem</strong></td>
|
||||
<td>Davis VantagePro Wetterstation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Datenbank</strong></td>
|
||||
<td>PostgreSQL, Tabelle <code>weather_data</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Messintervall</strong></td>
|
||||
<td>ca. 5 Minuten (Rohwerte); längere Zeiträume werden serverseitig aggregiert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Max. Zeitraum</strong></td>
|
||||
<td>365 Tage bei benutzerdefiniertem Bereich</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Datenlücken</strong></td>
|
||||
<td>Ausfälle der Station oder des Collectors erscheinen als Unterbrechung in den Kurven</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Browserkompatibilität</strong></td>
|
||||
<td>Alle modernen Browser (Chrome, Firefox, Safari, Edge) in aktueller Version</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Mobil</strong></td>
|
||||
<td>Die Oberfläche ist für Mobilgeräte optimiert; Zeitraum-Buttons zeigen Kurzbezeichnungen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Zeitzone</strong></td>
|
||||
<td>Alle Zeitangaben in lokaler Browserzeit (keine UTC-Umrechnung)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Wetterstation Dashboard · Stand: Mai 2026</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "wetterstation-frontend",
|
||||
"private": true,
|
||||
"version": "1.4.1",
|
||||
"version": "1.5.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -0,0 +1,490 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Wetterstation – Bedienungsanleitung</title>
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
color: #1a1a2e;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a3a5c 0%, #2d6a9f 100%);
|
||||
color: #fff;
|
||||
padding: 3rem 2rem 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
header h1 { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.5px; }
|
||||
header p { margin-top: .5rem; font-size: 1.05rem; opacity: .85; }
|
||||
|
||||
/* ── Layout ── */
|
||||
.page { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
|
||||
|
||||
/* ── Table of Contents ── */
|
||||
.toc {
|
||||
background: #fff;
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 10px;
|
||||
padding: 1.4rem 1.8rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
.toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: #5a6a7a; margin-bottom: .7rem; }
|
||||
.toc ol { padding-left: 1.4rem; }
|
||||
.toc li { margin: .25rem 0; }
|
||||
.toc a { color: #2d6a9f; text-decoration: none; }
|
||||
.toc a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Sections ── */
|
||||
section {
|
||||
background: #fff;
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 10px;
|
||||
padding: 1.8rem 2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
section h2 {
|
||||
font-size: 1.35rem;
|
||||
color: #1a3a5c;
|
||||
border-bottom: 2px solid #e4eaf2;
|
||||
padding-bottom: .5rem;
|
||||
margin-bottom: 1.1rem;
|
||||
}
|
||||
section h3 {
|
||||
font-size: 1.05rem;
|
||||
color: #2d6a9f;
|
||||
margin: 1.3rem 0 .5rem;
|
||||
}
|
||||
p { margin-bottom: .8rem; }
|
||||
p:last-child { margin-bottom: 0; }
|
||||
|
||||
/* ── Buttons – visual replicas ── */
|
||||
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: .35rem .85rem;
|
||||
border-radius: 6px;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
border: 2px solid #2d6a9f;
|
||||
color: #2d6a9f;
|
||||
background: #fff;
|
||||
}
|
||||
.btn.active { background: #2d6a9f; color: #fff; }
|
||||
|
||||
/* ── Charts grid preview ── */
|
||||
.chart-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: .8rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.chart-card {
|
||||
border: 1px solid #dce3ec;
|
||||
border-radius: 8px;
|
||||
padding: .8rem 1rem;
|
||||
background: #f9fbfd;
|
||||
}
|
||||
.chart-card .icon { font-size: 1.4rem; }
|
||||
.chart-card strong { display: block; margin-top: .3rem; font-size: .92rem; color: #1a3a5c; }
|
||||
.chart-card span { font-size: .82rem; color: #5a6a7a; }
|
||||
|
||||
/* ── Info boxes ── */
|
||||
.info-box {
|
||||
background: #eef5ff;
|
||||
border-left: 4px solid #2d6a9f;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
.tip-box {
|
||||
background: #f0faf3;
|
||||
border-left: 4px solid #27ae60;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
.warn-box {
|
||||
background: #fffbea;
|
||||
border-left: 4px solid #f0a500;
|
||||
border-radius: 0 6px 6px 0;
|
||||
padding: .8rem 1.1rem;
|
||||
margin: 1rem 0;
|
||||
font-size: .94rem;
|
||||
}
|
||||
|
||||
/* ── Table ── */
|
||||
table { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0; }
|
||||
th, td { padding: .55rem .8rem; border: 1px solid #dce3ec; text-align: left; }
|
||||
th { background: #eef2f8; font-weight: 600; color: #1a3a5c; }
|
||||
tr:nth-child(even) td { background: #f9fbfd; }
|
||||
|
||||
/* ── Trend arrows ── */
|
||||
.trend-table td:first-child { font-size: 1.1rem; text-align: center; }
|
||||
|
||||
/* ── Footer ── */
|
||||
footer {
|
||||
text-align: center;
|
||||
color: #8a9ab0;
|
||||
font-size: .85rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
header h1 { font-size: 1.6rem; }
|
||||
.page { padding: 1.2rem 1rem 3rem; }
|
||||
section { padding: 1.2rem 1.1rem; }
|
||||
}
|
||||
|
||||
@media print {
|
||||
body { background: #fff; font-size: 12pt; }
|
||||
header { background: #1a3a5c !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
.btn.active { background: #2d6a9f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>🌤️ Wetterstation – Bedienungsanleitung</h1>
|
||||
<p>Dashboard auf Basis einer Davis VantagePro</p>
|
||||
</header>
|
||||
|
||||
<div class="page">
|
||||
|
||||
<!-- Table of Contents -->
|
||||
<nav class="toc">
|
||||
<h2>Inhalt</h2>
|
||||
<ol>
|
||||
<li><a href="#ueberblick">Überblick</a></li>
|
||||
<li><a href="#zeitraum">Zeitraum-Auswahl</a></li>
|
||||
<li><a href="#aktuell">Aktuelle Werte</a></li>
|
||||
<li><a href="#diagramme">Diagramme im Überblick</a></li>
|
||||
<li><a href="#charts-detail">Diagramme im Detail</a></li>
|
||||
<li><a href="#tabelle">Tabellenansicht</a></li>
|
||||
<li><a href="#benutzerdefiniert">Benutzerdefinierter Zeitbereich</a></li>
|
||||
<li><a href="#refresh">Automatische Aktualisierung</a></li>
|
||||
<li><a href="#drucken">Drucken</a></li>
|
||||
<li><a href="#hinweise">Hinweise & Grenzen</a></li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<!-- 1 Überblick -->
|
||||
<section id="ueberblick">
|
||||
<h2>1. Überblick</h2>
|
||||
<p>
|
||||
Das Wetterstation-Dashboard zeigt die Messwerte einer <strong>Davis VantagePro</strong>
|
||||
in interaktiven Diagrammen an. Alle Daten werden aus einer PostgreSQL-Datenbank
|
||||
bezogen und im Browser aufbereitet.
|
||||
</p>
|
||||
<p>
|
||||
Die Oberfläche besteht aus drei Bereichen:
|
||||
</p>
|
||||
<ol style="padding-left:1.4rem;">
|
||||
<li><strong>Zeitraum-Navigation</strong> (oben) – wählt den dargestellten Zeitraum.</li>
|
||||
<li><strong>Diagramme / Tabelle</strong> (Mitte) – zeigt die Wetterdaten an.</li>
|
||||
<li><strong>Fußzeile</strong> (unten) – zeigt Version, Build-Datum und Kontakt.</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- 2 Zeitraum-Auswahl -->
|
||||
<section id="zeitraum">
|
||||
<h2>2. Zeitraum-Auswahl</h2>
|
||||
<p>
|
||||
In der Navigationsleiste am oberen Rand können Sie den Darstellungszeitraum wählen:
|
||||
</p>
|
||||
<div class="btn-row">
|
||||
<span class="btn active">24 Stunden</span>
|
||||
<span class="btn">7 Tage</span>
|
||||
<span class="btn">30 Tage</span>
|
||||
<span class="btn">365 Tage</span>
|
||||
<span class="btn">Bereich</span>
|
||||
<span class="btn">Tabelle</span>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Schaltfläche</th><th>Dargestellter Zeitraum</th><th>Auflösung</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><strong>24 Stunden</strong></td><td>Letzte 24 Stunden ab jetzt</td><td>Einzelmessungen (~5 min)</td></tr>
|
||||
<tr><td><strong>7 Tage</strong></td><td>Letzte 7 Tage ab heute</td><td>Tagesmittel / Tages-Min+Max</td></tr>
|
||||
<tr><td><strong>30 Tage</strong></td><td>Letzte 30 Tage ab heute</td><td>Tagesmittel / Tages-Min+Max</td></tr>
|
||||
<tr><td><strong>365 Tage</strong></td><td>Letzte 365 Tage ab heute</td><td>Tagesmittel, Regen pro Woche</td></tr>
|
||||
<tr><td><strong>Bereich</strong></td><td>Frei wählbar (max. 1 Jahr)</td><td>Stundenmittel (< 7 Tage) oder Tagesmittel (≥ 7 Tage)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="info-box">
|
||||
Der aktuell aktive Zeitraum wird unterhalb der Navigationsleiste als Text angezeigt,
|
||||
z. B. <em>„Die letzten 24 Stunden"</em> oder
|
||||
<em>„01.01.2026 00:00 – 31.01.2026 23:59"</em>.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3 Aktuelle Werte -->
|
||||
<section id="aktuell">
|
||||
<h2>3. Aktuelle Werte</h2>
|
||||
<p>
|
||||
Über jedem Diagramm wird der <strong>aktuellste Messwert</strong> angezeigt
|
||||
(grauer Hinweistext, z. B. <em>„Aktuell: 18,4 °C"</em>).
|
||||
Dieser Wert stammt immer aus den letzten 24 Stunden – unabhängig vom gewählten
|
||||
Zeitraum.
|
||||
</p>
|
||||
<p>
|
||||
Unterhalb jedes Diagramms erscheinen die <strong>Minimum- und Maximumwerte</strong>
|
||||
des gewählten Zeitraums mit dem zugehörigen Zeitpunkt.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 4 Diagramme im Überblick -->
|
||||
<section id="diagramme">
|
||||
<h2>4. Diagramme im Überblick</h2>
|
||||
<div class="chart-grid">
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌡️</div>
|
||||
<strong>Temperatur</strong>
|
||||
<span>°C</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌐</div>
|
||||
<strong>Luftdruck</strong>
|
||||
<span>hPa</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">💧</div>
|
||||
<strong>Luftfeuchtigkeit</strong>
|
||||
<span>%</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🌧️</div>
|
||||
<strong>Regen</strong>
|
||||
<span>mm / mm/h</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">🧭</div>
|
||||
<strong>Windrichtung</strong>
|
||||
<span>°</span>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<div class="icon">💨</div>
|
||||
<strong>Wind & Böen</strong>
|
||||
<span>km/h</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Alle Diagramme sind interaktiv: Fahren Sie mit der Maus über eine Kurve,
|
||||
um den genauen Messwert und Zeitpunkt als Tooltip anzuzeigen.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 5 Diagramme im Detail -->
|
||||
<section id="charts-detail">
|
||||
<h2>5. Diagramme im Detail</h2>
|
||||
|
||||
<h3>🌡️ Temperatur</h3>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> wird der Temperaturverlauf als Flächendiagramm dargestellt.
|
||||
Bei längeren Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert ≥ 7 Tage) werden
|
||||
<strong>Tages-Minimum und -Maximum</strong> als Band angezeigt, sodass die
|
||||
tägliche Schwankungsbreite sofort erkennbar ist.
|
||||
</p>
|
||||
|
||||
<h3>🌐 Luftdruck</h3>
|
||||
<p>
|
||||
Zeigt den barometrischen Druck in hPa. Im Diagrammtitel erscheint ein
|
||||
<strong>Trendpfeil</strong>, der die Druckentwicklung der letzten Stunden anzeigt:
|
||||
</p>
|
||||
<table class="trend-table">
|
||||
<thead><tr><th>Pfeil</th><th>Bedeutung</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>⬇⬇</td><td>Fällt schnell (–60)</td></tr>
|
||||
<tr><td>⬇</td><td>Fällt langsam (–20)</td></tr>
|
||||
<tr><td>→</td><td>Stabil (0)</td></tr>
|
||||
<tr><td>⬆</td><td>Steigt langsam (+20)</td></tr>
|
||||
<tr><td>⬆⬆</td><td>Steigt schnell (+60)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>💧 Luftfeuchtigkeit</h3>
|
||||
<p>Relative Luftfeuchtigkeit in Prozent als Flächendiagramm.</p>
|
||||
|
||||
<h3>🌧️ Regen</h3>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> werden zwei Kurven überlagert:
|
||||
</p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li><strong>Regen (mm)</strong> – kumulierter Regenfall als Fläche.</li>
|
||||
<li><strong>Regenrate (mm/h)</strong> – aktuelle Intensität als gestrichelte Linie.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Bei längeren Zeiträumen (7 d, 30 d) wird der <strong>Tagesregen</strong>
|
||||
als Balkendiagramm dargestellt; bei 365 Tagen der <strong>Wochenregen</strong>.
|
||||
</p>
|
||||
|
||||
<h3>🧭 Windrichtung</h3>
|
||||
<p>
|
||||
Die Windrichtung wird als <strong>Punktewolke</strong> (Streudiagramm) angezeigt.
|
||||
Die Y-Achse zeigt die Himmelsrichtungen von 0° bis 360°:
|
||||
N = 0°/360°, NO = 45°, O = 90°, SO = 135°, S = 180°, SW = 225°, W = 270°, NW = 315°.
|
||||
</p>
|
||||
|
||||
<h3>💨 Wind & Böen</h3>
|
||||
<p>
|
||||
Zeigt <strong>Windgeschwindigkeit</strong> (lila) und <strong>Böen</strong> (orange)
|
||||
in km/h. Bei 365 Tagen und benutzerdefinierten Zeiträumen über einem Jahr
|
||||
werden Böen ausgeblendet, da keine aussagekräftigen Tagesmaxima vorliegen.
|
||||
Unterhalb des Diagramms erscheint die maximale Böe des gewählten Zeitraums
|
||||
mit Zeitpunkt.
|
||||
</p>
|
||||
<div class="tip-box">
|
||||
<strong>Tipp:</strong> Im Wind-Diagramm ist eine Legende eingeblendet,
|
||||
die Windgeschwindigkeit und Böen unterscheidet.
|
||||
Klicken Sie auf einen Legendeneintrag, um eine Serie ein- oder auszublenden.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6 Tabellenansicht -->
|
||||
<section id="tabelle">
|
||||
<h2>6. Tabellenansicht</h2>
|
||||
<p>
|
||||
Klicken Sie auf die Schaltfläche <span class="btn">Tabelle</span>,
|
||||
um statt der Diagramme eine <strong>tabellarische Tagesübersicht</strong>
|
||||
anzuzeigen. Ein Klick auf <span class="btn active">Grafik</span>
|
||||
kehrt zur Diagrammansicht zurück.
|
||||
</p>
|
||||
<p>Die Tabelle enthält je Tag:</p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li>Temperatur-Minimum und -Maximum (°C)</li>
|
||||
<li>Luftfeuchtigkeit-Minimum und -Maximum (%)</li>
|
||||
<li>Luftdruck-Minimum und -Maximum (hPa)</li>
|
||||
<li>Regen gesamt (mm)</li>
|
||||
<li>Maximale Windböe (km/h)</li>
|
||||
</ul>
|
||||
<div class="info-box">
|
||||
Im 24h-Modus werden die vorliegenden Einzelmessungen automatisch
|
||||
pro Tag aggregiert, sodass immer eine Tageszeile erscheint.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7 Benutzerdefinierter Zeitbereich -->
|
||||
<section id="benutzerdefiniert">
|
||||
<h2>7. Benutzerdefinierter Zeitbereich</h2>
|
||||
<p>
|
||||
Mit der Schaltfläche <span class="btn">Bereich</span> öffnet sich ein Dialog,
|
||||
in dem Sie ein <strong>Start- und Enddatum</strong> frei eingeben können.
|
||||
</p>
|
||||
<p><strong>Regeln:</strong></p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li>Das Enddatum muss nach dem Startdatum liegen.</li>
|
||||
<li>Der maximale Zeitraum beträgt <strong>365 Tage</strong>.</li>
|
||||
</ul>
|
||||
<p><strong>Darstellungsauflösung:</strong></p>
|
||||
<ul style="padding-left:1.4rem; margin-bottom:.8rem;">
|
||||
<li><strong>< 7 Tage:</strong> Stundenmittelwerte, X-Achse mit Datum und Uhrzeit.</li>
|
||||
<li><strong>≥ 7 Tage:</strong> Tagesmittel- bzw. Min/Max-Werte, X-Achse mit Datum.</li>
|
||||
</ul>
|
||||
<p>
|
||||
Der zuletzt gewählte benutzerdefinierte Zeitbereich wird im Browser
|
||||
(<code>localStorage</code>) gespeichert und beim nächsten Öffnen des
|
||||
Dialogs vorausgefüllt.
|
||||
</p>
|
||||
<div class="warn-box">
|
||||
<strong>Hinweis:</strong> Schließen Sie den Dialog mit <em>Abbrechen</em>,
|
||||
um ohne Änderung zurückzukehren. Ein Klick auf den dunklen Hintergrund
|
||||
schließt den Dialog ebenfalls.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8 Automatische Aktualisierung -->
|
||||
<section id="refresh">
|
||||
<h2>8. Automatische Aktualisierung</h2>
|
||||
<p>
|
||||
Im <strong>24h-Modus</strong> werden die Daten automatisch alle
|
||||
<strong>5 Minuten</strong> neu geladen. Dabei bleibt die aktuelle
|
||||
Ansicht sichtbar – die Seite flackert nicht.
|
||||
</p>
|
||||
<p>
|
||||
Bei allen anderen Zeiträumen (7 d, 30 d, 365 d, benutzerdefiniert)
|
||||
findet <strong>kein automatisches Neuladen</strong> statt.
|
||||
Laden Sie die Seite manuell neu (F5 / ⌘R), um aktuelle Daten
|
||||
für diese Zeiträume zu erhalten.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<!-- 9 Drucken -->
|
||||
<section id="drucken">
|
||||
<h2>9. Drucken</h2>
|
||||
<p>
|
||||
In der <strong>Tabellenansicht</strong> erscheint oben links die Schaltfläche
|
||||
<em>🖨️ Drucken</em>. Ein Klick darauf öffnet den Druckdialog des Browsers.
|
||||
</p>
|
||||
<p>
|
||||
Die Schaltflächen-Leiste und der Drucken-Button werden beim Ausdruck
|
||||
automatisch ausgeblendet, sodass nur die Tabelle erscheint.
|
||||
</p>
|
||||
<div class="tip-box">
|
||||
<strong>Tipp für PDF-Export:</strong> Wählen Sie im Druckdialog
|
||||
„Als PDF speichern", um die Tabelle als PDF-Datei zu exportieren.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 10 Hinweise & Grenzen -->
|
||||
<section id="hinweise">
|
||||
<h2>10. Hinweise & Grenzen</h2>
|
||||
<table>
|
||||
<thead><tr><th>Thema</th><th>Details</th></tr></thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><strong>Messsystem</strong></td>
|
||||
<td>Davis VantagePro Wetterstation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Datenbank</strong></td>
|
||||
<td>PostgreSQL, Tabelle <code>weather_data</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Messintervall</strong></td>
|
||||
<td>ca. 5 Minuten (Rohwerte); längere Zeiträume werden serverseitig aggregiert</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Max. Zeitraum</strong></td>
|
||||
<td>365 Tage bei benutzerdefiniertem Bereich</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Datenlücken</strong></td>
|
||||
<td>Ausfälle der Station oder des Collectors erscheinen als Unterbrechung in den Kurven</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Browserkompatibilität</strong></td>
|
||||
<td>Alle modernen Browser (Chrome, Firefox, Safari, Edge) in aktueller Version</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Mobil</strong></td>
|
||||
<td>Die Oberfläche ist für Mobilgeräte optimiert; Zeitraum-Buttons zeigen Kurzbezeichnungen</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Zeitzone</strong></td>
|
||||
<td>Alle Zeitangaben in lokaler Browserzeit (keine UTC-Umrechnung)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>Wetterstation Dashboard · Stand: Mai 2026</p>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -190,10 +190,27 @@
|
||||
.version-line {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.anleitung-btn {
|
||||
background: none;
|
||||
border: 1px solid #0066cc;
|
||||
border-radius: 6px;
|
||||
color: #0066cc;
|
||||
cursor: pointer;
|
||||
font-size: 0.82rem;
|
||||
padding: 0.2rem 0.75rem;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.anleitung-btn:hover {
|
||||
background: #0066cc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.version-short {
|
||||
display: none;
|
||||
}
|
||||
@@ -252,6 +269,52 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Anleitung Modal */
|
||||
.anleitung-modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
width: 90vw;
|
||||
max-width: 900px;
|
||||
height: 85vh;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.anleitung-modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.55rem 0.9rem;
|
||||
background: #1a3a5c;
|
||||
color: #fff;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
border-radius: 12px 12px 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.anleitung-modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
|
||||
.anleitung-modal-close:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
.anleitung-frame {
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
|
||||
@@ -21,6 +21,9 @@ Highcharts.setOptions({
|
||||
})
|
||||
|
||||
const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '24h', onTimeRangeChange, showTable = false, onToggleTable }) => {
|
||||
// State für Anleitung
|
||||
const [showAnleitung, setShowAnleitung] = useState(false)
|
||||
|
||||
// State für benutzerdefinierten Zeitbereich
|
||||
const [showCustomRangeModal, setShowCustomRangeModal] = useState(false)
|
||||
const [customStartDate, setCustomStartDate] = useState('')
|
||||
@@ -1074,6 +1077,23 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
|
||||
</div>
|
||||
)} {/* end showTable ternary */}
|
||||
|
||||
{/* Modal Anleitung */}
|
||||
{showAnleitung && (
|
||||
<div className="modal-overlay" onClick={() => setShowAnleitung(false)}>
|
||||
<div className="anleitung-modal" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="anleitung-modal-header">
|
||||
<span>Bedienungsanleitung</span>
|
||||
<button className="anleitung-modal-close" onClick={() => setShowAnleitung(false)}>✕</button>
|
||||
</div>
|
||||
<iframe
|
||||
src="/ANLEITUNG.html"
|
||||
title="Bedienungsanleitung"
|
||||
className="anleitung-frame"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal für benutzerdefinierten Zeitbereich */}
|
||||
{showCustomRangeModal && (
|
||||
<div className="modal-overlay" onClick={handleCancelCustomRange}>
|
||||
@@ -1130,6 +1150,14 @@ const WeatherDashboard = ({ data, currentData = [], rainData = [], timeRange = '
|
||||
mailto:rxf@gmx.de
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
className="anleitung-btn"
|
||||
onClick={() => setShowAnleitung(true)}
|
||||
>
|
||||
Anleitung
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<span className="version-full">Version</span>
|
||||
<span className="version-short">V</span>
|
||||
|
||||
Reference in New Issue
Block a user