samuelzielke
/
monitor-check
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Erste Version

Browse Source
main
Samuel Zielke 1 week ago
commit 0a7b27e4f2
10 changed files with 2514 additions and 0 deletions
Show Stats Download Patch File Download Diff File

14
.gitignore vendored
Unescape View File

@ -0,0 +1,14 @@
# Geheimnisse und lokale Konfiguration
server/.env
*.pem
*.key
ZUGANGSDATEN.txt
# Abhängigkeiten und Laufzeitdaten
node_modules/
uploads/
# Gepackte Stände – werden bei Bedarf neu erzeugt
*.tar.gz
.DS_Store

377
README.md
Unescape View File

@ -0,0 +1,377 @@
# Monitor-Check
**Bildschirme, Lautsprecher und Übersetzungsanlagen vor Ort per Handy erfassen und prüfen.**
Bei Veranstaltungen mit vielen Monitoren, z. B. in Foyers, Nebenräumen oder
Übertragungssälen, muss vorher jedes Gerät einmal geprüft werden: Kommt Ton?
Kommt Bild? Läuft die richtige Sprache? Monitor-Check macht daraus eine kleine
Web-App fürs Handy. Ihr geht von Gerät zu Gerät, macht ein Foto, tippt drei
Mal auf JA / NEIN / n.A., und die Übersicht zeigt sofort, was funktioniert und
wo jemand nachsehen muss.
```
Handy (Browser)
├── Foto ──────────────► dein Server (Node) ──► /uploads/…jpg
└── Daten ──────────────► Apps-Script Web-App ──► Google Tabelle
```
Die **Daten liegen in einer Google Tabelle**, die ihr selbst besitzt. Dort
könnt ihr filtern, drucken oder teilen. Die **Oberfläche und die Fotos liegen
auf eurem eigenen Server**. Im Repo sind keine Zugangsdaten enthalten: Token,
Tabellen-URL und Domain richtet ihr bei der Installation selbst ein.
### Was das Tool kann
- **Erfassen in Sekunden:** Bezeichnung, Standort, Foto direkt aus der Kamera, Status
- **Automatischer Status** aus den drei Prüfpunkten *Audio*, *Bild* und *Sprache*
- **Übersicht** mit Kacheln, Suche und Statusfilter
- **Fortlaufende IDs** (`MON-001`, `MON-002` …), die nie doppelt vergeben werden
- **Protokoll** jeder Änderung mit Zeit und Person im Blatt `Protokoll`
- **Offline-Warteschlange:** Änderungen ohne Netz werden nachgereicht
- **Als App installierbar** über „Zum Home-Bildschirm“
### So kommt ihr zum Laufen
1. **Google Tabelle** anlegen und das Apps Script einfügen ([Teil 1](#teil-1--google-tabelle-einrichten))
2. **Server** mit `install.sh` aufsetzen ([Teil 2](#teil-2--server-aufsetzen))
3. **Am Handy** die Seite öffnen und im Setup-Tab URL und Token eintragen ([Teil 3](#teil-3--oberfläche-verbinden))
Dafür braucht ihr ein Google-Konto, einen Linux-Server oder LXC-Container
(Ubuntu 22.04/24.04) und eine Domain mit HTTPS. Ohne HTTPS gibt das Handy die
Kamera nicht frei.
### Anpassen
| Was | Wo |
|---|---|
| ID-Präfix (`MON`) und Stellenzahl | `apps-script/Code.gs` → `CONFIG.ID_PREFIX`, `CONFIG.ID_PAD` |
| Namen der Tabellenblätter | `apps-script/Code.gs` → `CONFIG.SHEET_NAME`, `CONFIG.LOG_SHEET_NAME` |
| Statusbezeichnungen | `apps-script/Code.gs` → `STATUS` und gleichlautend in `web/index.html` |
| Zugangsdaten am Gerät vorbelegen | `web/index.html` → `DEFAULTS` (nicht committen, wenn echte Werte drinstehen) |
| Bildgröße, Upload-Limit, Port | `server/.env` (Vorlage: `server/.env.example`) |
## Statusregeln
Jeder Eintrag hat drei Prüfpunkte: **Audio**, **Bild**, **Sprache** – jeweils `JA`, `NEIN` oder `n.A.`
| Eingabe | Ergebnis |
|---|---|
| alle bewerteten Punkte `JA` | **Funktionsfähig** |
| teilweise `NEIN` | **Teilweise funktionsfähig** |
| alle bewerteten Punkte `NEIN` | **Fehlerhaft** |
| alle drei `n.A.` | **Deaktiviert** |
| nichts erfasst | **Nicht geprüft** |
Ein einzelnes `n.A.` schließt nur diesen Punkt aus der Bewertung aus und zählt nie als Fehler. Beispiel: `n.A. / NEIN / NEIN` → **Fehlerhaft** (die zwei bewerteten Punkte sind beide nein), `n.A. / JA / NEIN` → **Teilweise funktionsfähig**.
Die Regeln stehen identisch in `Code.gs` (`berechneStatus`) und in `index.html` – das Sheet bleibt die maßgebliche Quelle, das Frontend zeigt die Vorschau sofort an.
---
## Teil 1 – Google Tabelle einrichten
1. Neue Tabelle auf [sheets.new](https://sheets.new) anlegen, z. B. „Monitore Veranstaltung 2026".
2. **Erweiterungen → Apps Script**. Den Standardinhalt von `Code.gs` löschen und den Inhalt aus `apps-script/Code.gs` einfügen.
3. Ganz oben `CONFIG.API_TOKEN` durch ein langes Zufallstoken ersetzen. Erzeugen z. B. mit:
```bash
openssl rand -hex 24
```
Dieses Token brauchst du gleich noch zweimal (Server und Oberfläche).
4. Speichern. Im Editor die Funktion `testStatusLogik` auswählen und **Ausführen** – beim ersten Mal Zugriff freigeben. Im Ausführungsprotokoll muss „Alle 9 Testfälle bestanden" stehen.
5. Zurück in der Tabelle: Seite neu laden, dann Menü **Monitor-Check → Tabelle einrichten**. Damit entstehen die Blätter `Monitore` und `Protokoll` samt Spaltenbreiten und Dropdowns.
6. Im Apps-Script-Editor: **Bereitstellen → Neue Bereitstellung → Typ: Web-App**
- Beschreibung: `Monitor-Check API`
- **Ausführen als: Ich**
- **Zugriff: Jeder** ← zwingend, sonst antwortet die API mit einer HTML-Anmeldeseite
- Bereitstellen, Berechtigungen bestätigen, die `…/exec`-URL kopieren.
> Nach jeder Änderung an `Code.gs`: **Bereitstellen → Bereitstellungen verwalten → Bearbeiten → Version: Neu → Bereitstellen**. Die URL bleibt dabei gleich.
---
## Teil 2 – Server aufsetzen
**Der schnelle Weg:** Projektordner auf den Server kopieren und `install.sh` laufen lassen – das erledigt alles ab Abschnitt 2.2.
```bash
# auf deinem Rechner (IP anpassen)
scp -r . root@192.168.1.50:/root/monitor-check-quelle
# auf dem Server
cd /root/monitor-check-quelle
sudo bash install.sh
```
Das Skript fragt nach Domain und E-Mail, erzeugt ein API-Token, installiert Node 20, nginx, den Dienst und holt das Let's-Encrypt-Zertifikat. Am Ende stehen alle Zugangsdaten auf dem Bildschirm und in `/opt/monitor-check/ZUGANGSDATEN.txt`.
Ohne Rückfragen:
```bash
sudo bash install.sh --domain monitore.deine-domain.de --email du@deine-domain.de --yes
```
Nützliche Schalter: `--dry-run` zeigt nur, was passieren würde. `--update` spielt nach Änderungen an `web/` oder `server/` die neuen Dateien ein und startet den Dienst neu. `--no-tls` und `--no-firewall` überspringen Zertifikat bzw. ufw. `--help` listet alles auf.
### Hinter einem vorgeschalteten Reverse-Proxy
Wenn TLS bereits auf einem vorgelagerten nginx liegt, übernimmt der Container nur HTTP:
```bash
sudo bash install.sh --behind-proxy --public-url https://monitore.deine-domain.de --yes
```
Das überspringt certbot, lässt den Container auf Port 80 lauschen und setzt `PUBLIC_URL` trotzdem auf **https** – wichtig, denn diese Adresse landet als Bild-Link in der Tabelle. Bei `http://` blockiert der Browser die Bilder später als Mixed Content.
Am Ende schreibt das Skript eine passende Vorlage nach `/opt/monitor-check/PROXY-SNIPPET.conf`, die du auf dem vorgelagerten Proxy einsetzen kannst. Ein Punkt daraus entscheidet über Erfolg oder Frust:
```nginx
client_max_body_size 20m;
```
Fehlt die Zeile im **äußeren** Proxy, brechen Foto-Uploads mit `413 Request Entity Too Large` ab – der Container selbst ist dann gar nicht schuld.
Der lokale nginx im Container darf auch ganz entfallen; dann hört Node direkt auf `0.0.0.0:8080` und der Proxy zielt dorthin:
```bash
sudo bash install.sh --behind-proxy --no-nginx --public-url https://monitore.deine-domain.de --yes
```
Der Unterschied ist klein: Mit lokalem nginx werden die Fotos direkt von der Platte ausgeliefert statt durch Node. Bei ein paar hundert Bildern spielt das keine Rolle – wähle, was besser in deine Landschaft passt.
Läuft das Skript durch, geht es direkt bei **Teil 3** weiter. Die Abschnitte 2.2 bis 2.7 beschreiben dieselben Schritte von Hand – nützlich zum Nachvollziehen oder Reparieren.
### 2.1 Container erstellen (auf dem Proxmox-Host)
Getestet mit Ubuntu 22.04/24.04 in einem unprivilegierten LXC-Container (Proxmox). Alle Befehle als `root` im Container.
```bash
pct create 120 local:vztmpl/ubuntu-24.04-standard_24.04-2_amd64.tar.zst \
--hostname monitor-check \
--cores 2 --memory 1024 --swap 512 \
--rootfs local-lvm:8 \
--net0 name=eth0,bridge=vmbr0,ip=dhcp \
--features nesting=1 \
--unprivileged 1 \
--onboot 1
pct start 120
pct enter 120
```
Ein bestehender Container tut es genauso – dann direkt bei 2.2 weiter.
### 2.2 Grundpakete
```bash
apt update && apt -y upgrade
apt -y install curl git nginx ca-certificates
# Node.js 20 LTS
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt -y install nodejs
node -v # sollte v20.x zeigen
```
### 2.3 Benutzer und Verzeichnisse
```bash
adduser --system --group --home /opt/monitor-check monitor
mkdir -p /opt/monitor-check /var/lib/monitor-check/uploads
```
### 2.4 Dateien einspielen
Ordner `server/` und `web/` aus diesem Projekt nach `/opt/monitor-check/` kopieren – z. B. vom Arbeitsrechner aus:
```bash
# auf deinem Rechner, IP anpassen
scp -r server web root@192.168.1.50:/opt/monitor-check/
```
Dann im Container:
```bash
cd /opt/monitor-check/server
npm install --omit=dev
```
`sharp` bringt fertige Binärpakete mit; sollte der Build doch starten, hilft `apt -y install build-essential python3`.
### 2.5 Konfiguration
```bash
cd /opt/monitor-check/server
cp .env.example .env
nano .env
```
Anzupassen:
```ini
PORT=8080
HOST=127.0.0.1
API_TOKEN=<dasselbe Token wie in Code.gs>
PUBLIC_URL=https://monitore.deine-domain.de
UPLOAD_DIR=/var/lib/monitor-check/uploads
WEB_DIR=/opt/monitor-check/web
ALLOWED_ORIGINS=https://monitore.deine-domain.de
```
`PUBLIC_URL` ist wichtig: genau diese Adresse landet als Bild-Link in der Tabelle.
```bash
chown -R monitor:monitor /opt/monitor-check /var/lib/monitor-check
chmod 600 /opt/monitor-check/server/.env
```
### 2.6 Als Dienst starten
```bash
cp /opt/monitor-check/server/monitor-check.service /etc/systemd/system/
systemctl daemon-reload
systemctl enable --now monitor-check
systemctl status monitor-check --no-pager
curl -s localhost:8080/gesundheit # {"ok":true,…}
```
Logs mitlesen: `journalctl -u monitor-check -f`
### 2.7 nginx und HTTPS
```bash
cp /opt/monitor-check/server/nginx-monitor-check.conf /etc/nginx/sites-available/monitor-check
sed -i 's/monitore.example.org/monitore.deine-domain.de/' /etc/nginx/sites-available/monitor-check
ln -sf ../sites-available/monitor-check /etc/nginx/sites-enabled/
rm -f /etc/nginx/sites-enabled/default
nginx -t && systemctl reload nginx
# Zertifikat (DNS muss vorher auf den Server zeigen)
apt -y install certbot python3-certbot-nginx
certbot --nginx -d monitore.deine-domain.de
```
**HTTPS ist Pflicht.** Ohne TLS gibt die Handy-Kamera im Browser kein Bild frei und `fetch` zu Google wird von der Seite aus blockiert.
Optional Firewall:
```bash
apt -y install ufw
ufw allow 22,80,443/tcp && ufw --force enable
```
---
## Teil 3 – Oberfläche verbinden
`https://monitore.deine-domain.de` am Handy öffnen. Beim ersten Start landest du im Tab **Setup**:
| Feld | Wert |
|---|---|
| Apps-Script Web-App URL | die `…/exec`-URL aus Schritt 1.6 |
| API-Token | dasselbe Token wie in `Code.gs` und `.env` |
| Upload-Endpoint | `https://monitore.deine-domain.de/api/upload` |
| Dein Name | wird je Prüfung als „Prüfer" gespeichert |
**Speichern**, dann **Verbindung testen** – die Meldung „Verbindung ok" bestätigt Schritt 1 und 2.
Die Werte liegen im `localStorage` des Browsers, also pro Gerät einmal eintragen. Willst du das vorbelegen, trage sie in `web/index.html` oben im Block `DEFAULTS` ein und lade die Datei neu auf den Server.
Auf dem iPhone: Teilen → **Zum Home-Bildschirm**. Danach startet das Tool wie eine App im Vollbild.
---
## Bedienung
**Erfassen** – Bezeichnung eingeben, optional Standort, aufs Fotofeld tippen (öffnet direkt die Kamera). Der Status lässt sich sofort mitsetzen oder später nachtragen. Die ID vergibt das Skript automatisch: `MON-001`, `MON-002`, …
**Übersicht** – Kacheln zeigen die Verteilung, darunter Suche und Statusfilter. Ein Tippen auf einen Eintrag öffnet die Detailansicht mit den drei Schaltern. Erneutes Tippen auf einen bereits gewählten Wert hebt die Auswahl wieder auf.
**Löschen** – In der Detailansicht ganz unten „Eintrag löschen", nach Rückfrage verschwindet die Zeile aus der Tabelle. Alternativ die Zeile direkt im Sheet löschen. Vergebene IDs werden dabei nie erneut vergeben, auch nicht die des zuletzt angelegten Eintrags – der Zähler steht in den Skript-Eigenschaften. Das zugehörige Foto bleibt auf dem Server liegen; siehe „Wartung" zum Aufräumen.
**Offline** – Bei Verbindungsabbruch wandern Neuanlagen und Statusmeldungen in eine lokale Warteschlange (Anzeige oben rechts) und gehen automatisch raus, sobald das Netz zurück ist. Manuell auslösen im Setup-Tab. Fotos brauchen dagegen eine Verbindung – ohne Netz den Eintrag ohne Bild anlegen und das Foto später über die Tabelle nachtragen.
---
## Tabellenstruktur
Blatt `Monitore`:
| Spalte | Inhalt |
|---|---|
| A ID | `MON-001` fortlaufend |
| B Bezeichnung | Freitext |
| C Standort | Freitext |
| D Bild-URL | Link auf dein `/uploads/…` |
| E Audio / F Bild / G Sprache | `JA` / `NEIN` / `n.A.` |
| H Status | automatisch berechnet, Zeile wird eingefärbt |
| I Notiz | Freitext |
| J Erfasst am, K Geprüft am, L Geprüft von | Zeitstempel und Person |
Blatt `Protokoll` schreibt jede Änderung mit – Zeitpunkt, ID, Aktion, Status, Person.
Direkt in der Tabelle bearbeitete Werte werden nicht automatisch neu bewertet. Dafür gibt es **Monitor-Check → Alle Status neu berechnen**.
Bilder als Vorschau in der Tabelle: eine leere Spalte ergänzen und dort
`=BILD(D2)` eintragen.
---
## Wartung
```bash
# Dienst neu starten (nach Änderungen an server.js oder .env)
systemctl restart monitor-check
# Oberfläche und Server aktualisieren – neue Dateien hochladen, dann
sudo bash install.sh --update
# Browser-Cache: Seite mit gedrücktem Reload neu laden
# Platzbedarf der Fotos
du -sh /var/lib/monitor-check/uploads
# Sicherung der Bilder
tar czf uploads-$(date +%F).tar.gz -C /var/lib/monitor-check uploads
```
Verwaiste Fotos gelöschter Einträge aufräumen: Spalte D des Sheets als CSV exportieren, auf den Server legen und abgleichen.
```bash
# behaelt nur Dateien, die noch in der Tabelle verlinkt sind
cd /var/lib/monitor-check/uploads
grep -o '[^/]*\.jpg' /root/bild-urls.csv | sort -u > /tmp/benutzt.txt
ls *.jpg | sort > /tmp/vorhanden.txt
comm -23 /tmp/vorhanden.txt /tmp/benutzt.txt # erst anschauen
comm -23 /tmp/vorhanden.txt /tmp/benutzt.txt | xargs -r rm -- # dann loeschen
```
Bilder werden auf max. 1600 px verkleinert und als JPEG (Qualität 78) gespeichert – rund 150–400 kB pro Foto. 1000 Einträge belegen also etwa 300 MB. Anpassbar über `MAX_IMAGE_PX` und `JPEG_QUALITY` in der `.env`.
## Fehlersuche
| Symptom | Ursache |
|---|---|
| „Unerwartete Antwort – Web-App-Zugriff auf ‚Jeder' gesetzt?" | Bereitstellung steht auf „Nur ich". In den Bereitstellungen auf **Jeder** ändern. |
| „Nicht autorisiert" | Token stimmt nicht überein. Muss in `Code.gs`, `.env` und im Setup-Tab identisch sein. |
| Änderungen an `Code.gs` wirken nicht | Neue **Version** bereitstellen, nicht nur speichern. |
| Kamera öffnet nicht | Seite läuft über `http` statt `https`. |
| Upload bricht bei großen Fotos ab | `client_max_body_size` in **jedem** nginx davor und `MAX_UPLOAD_MB` in der `.env` erhöhen. |
| Bilder erscheinen nicht, Konsole meldet Mixed Content | `PUBLIC_URL` steht auf `http://`, die Seite läuft über `https://`. In der `.env` korrigieren, Dienst neu starten. Bereits gespeicherte Links im Sheet per Suchen-und-Ersetzen anpassen. |
| Bild-Link im Sheet zeigt `127.0.0.1` | `PUBLIC_URL` in der `.env` setzen und Dienst neu starten. |
| Nichts geht mehr | `journalctl -u monitor-check -n 50 --no-pager` |
## Sicherheit
Das Token schützt die Schnittstelle gegen zufällige Zugriffe, ist aber kein Login – wer die URL und das Token hat, kann schreiben. Für eine interne Veranstaltung reicht das. Soll es enger sein, lege in nginx zusätzlich eine Basic-Auth über `location /` (nicht über `/api/upload`, sonst scheitert der Upload aus der Seite heraus) oder beschränke den Vhost auf das Veranstaltungs-Netz per `allow`/`deny`.
---
## Dateien
| Datei | Zweck |
|---|---|
| `install.sh` | richtet den Server komplett ein (Ubuntu 22.04/24.04) |
| `apps-script/Code.gs` | Backend an der Google Tabelle, JSON-API, Statusberechnung |
| `web/index.html` | die komplette Oberfläche in einer Datei |
| `server/server.js` | Foto-Upload und Auslieferung der Oberfläche |
| `server/.env.example` | Konfigurationsvorlage, wird zur `.env` (nicht im Repo) |
| `server/monitor-check.service` | systemd-Unit |
| `server/nginx-monitor-check.conf` | nginx-Vhost mit TLS-Vorbereitung |

452
apps-script/Code.gs
Unescape View File

@ -0,0 +1,452 @@
/**
* Monitor-Check – Google Apps Script Backend
* ------------------------------------------
* Stellt eine JSON-API fuer das Web-Tool bereit.
* Deployment: Bereitstellen > Neue Bereitstellung > Web-App
* Ausfuehren als: Ich
* Zugriff: Jeder
*
* WICHTIG: API_TOKEN unten aendern und identisch im Frontend eintragen.
*/
var CONFIG = {
SHEET_NAME: 'Monitore',
LOG_SHEET_NAME: 'Protokoll',
API_TOKEN: 'BITTE-AENDERN-langes-zufaelliges-token',
ID_PREFIX: 'MON',
ID_PAD: 3
};
var HEADERS = [
'ID',
'Bezeichnung',
'Standort',
'Bild-URL',
'Audio',
'Bild',
'Sprache',
'Status',
'Notiz',
'Erfasst am',
'Geprueft am',
'Geprueft von'
];
var COL = {
ID: 0, BEZEICHNUNG: 1, STANDORT: 2, BILD_URL: 3,
AUDIO: 4, BILD: 5, SPRACHE: 6, STATUS: 7,
NOTIZ: 8, ERFASST: 9, GEPRUEFT: 10, PRUEFER: 11
};
/* ------------------------------------------------------------------ */
/* Status-Logik */
/* ------------------------------------------------------------------ */
var STATUS = {
OK: 'Funktionsfähig',
TEIL: 'Teilweise funktionsfähig',
FEHLER: 'Fehlerhaft',
AUS: 'Deaktiviert',
OFFEN: 'Nicht geprüft'
};
/**
* Regeln (audio/bild/sprache jeweils 'JA' | 'NEIN' | 'n.A.' | '')
* - Felder mit 'n.A.' werden aus der Bewertung ausgeschlossen.
* - Alle drei 'n.A.' -> Deaktiviert
* - Kein Feld gesetzt -> Nicht geprueft
* - Alle bewerteten Felder JA -> Funktionsfaehig
* - Alle bewerteten Felder NEIN -> Fehlerhaft
* - Gemischt -> Teilweise funktionsfaehig
*/
function berechneStatus(audio, bild, sprache) {
var werte = [norm_(audio), norm_(bild), norm_(sprache)];
var gesetzt = werte.filter(function (w) { return w !== ''; });
if (gesetzt.length === 0) return STATUS.OFFEN;
var na = werte.filter(function (w) { return w === 'n.A.'; }).length;
if (na === 3) return STATUS.AUS;
var bewertet = werte.filter(function (w) { return w === 'JA' || w === 'NEIN'; });
if (bewertet.length === 0) return STATUS.AUS;
var ja = bewertet.filter(function (w) { return w === 'JA'; }).length;
var nein = bewertet.filter(function (w) { return w === 'NEIN'; }).length;
if (nein === 0) return STATUS.OK;
if (ja === 0) return STATUS.FEHLER;
return STATUS.TEIL;
}
/**
* Vereinheitlicht Statustexte. Aeltere Zeilen wurden ohne Umlaute geschrieben
* ("Funktionsfaehig"); beide Schreibweisen ergeben denselben Status.
*/
function statusKanon_(v) {
var k = String(v == null ? '' : v).toLowerCase().trim()
.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss');
if (k === 'funktionsfaehig') return STATUS.OK;
if (k === 'teilweise funktionsfaehig') return STATUS.TEIL;
if (k === 'fehlerhaft') return STATUS.FEHLER;
if (k === 'deaktiviert') return STATUS.AUS;
return STATUS.OFFEN;
}
function norm_(v) {
if (v === null || v === undefined) return '';
var s = String(v).trim().toUpperCase();
if (s === '') return '';
if (s === 'JA' || s === 'J' || s === 'YES' || s === 'TRUE') return 'JA';
if (s === 'NEIN' || s === 'N' || s === 'NO' || s === 'FALSE') return 'NEIN';
if (s === 'N.A.' || s === 'NA' || s === 'N/A' || s === 'N.A') return 'n.A.';
return '';
}
/* ------------------------------------------------------------------ */
/* HTTP-Einstieg */
/* ------------------------------------------------------------------ */
function doGet(e) {
return handle_(e, (e && e.parameter) ? e.parameter : {});
}
function doPost(e) {
var payload = {};
try {
if (e && e.postData && e.postData.contents) {
payload = JSON.parse(e.postData.contents);
}
} catch (err) {
return json_({ ok: false, error: 'Ungueltiges JSON' });
}
return handle_(e, payload);
}
function handle_(e, p) {
try {
if (String(p.token || '') !== CONFIG.API_TOKEN) {
return json_({ ok: false, error: 'Nicht autorisiert' });
}
switch (String(p.action || '')) {
case 'ping': return json_({ ok: true, version: 1, time: new Date().toISOString() });
case 'list': return json_({ ok: true, items: listeEintraege_() });
case 'create': return json_(erstelleEintrag_(p));
case 'status': return json_(setzeStatus_(p));
case 'update': return json_(aktualisiereEintrag_(p));
case 'archive': return json_(archiviereEintrag_(p));
case 'delete': return json_(loescheEintrag_(p));
default: return json_({ ok: false, error: 'Unbekannte Aktion' });
}
} catch (err) {
return json_({ ok: false, error: String(err && err.message ? err.message : err) });
}
}
function json_(obj) {
return ContentService
.createTextOutput(JSON.stringify(obj))
.setMimeType(ContentService.MimeType.JSON);
}
/* ------------------------------------------------------------------ */
/* Sheet-Zugriff */
/* ------------------------------------------------------------------ */
function sheet_() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sh = ss.getSheetByName(CONFIG.SHEET_NAME);
if (!sh) {
sh = ss.insertSheet(CONFIG.SHEET_NAME);
}
if (sh.getLastRow() === 0 || String(sh.getRange(1, 1).getValue()).trim() === '') {
sh.getRange(1, 1, 1, HEADERS.length).setValues([HEADERS]);
sh.getRange(1, 1, 1, HEADERS.length).setFontWeight('bold');
sh.setFrozenRows(1);
}
return sh;
}
function daten_() {
var sh = sheet_();
var last = sh.getLastRow();
if (last < 2) return [];
return sh.getRange(2, 1, last - 1, HEADERS.length).getValues();
}
function zeileFuerId_(id) {
var rows = daten_();
for (var i = 0; i < rows.length; i++) {
if (String(rows[i][COL.ID]).trim() === String(id).trim()) {
return { row: i + 2, values: rows[i] };
}
}
return null;
}
function listeEintraege_() {
return daten_()
.filter(function (r) { return String(r[COL.ID]).trim() !== ''; })
.map(function (r) {
return {
id: String(r[COL.ID]),
bezeichnung: String(r[COL.BEZEICHNUNG] || ''),
standort: String(r[COL.STANDORT] || ''),
bildUrl: String(r[COL.BILD_URL] || ''),
audio: norm_(r[COL.AUDIO]),
bild: norm_(r[COL.BILD]),
sprache: norm_(r[COL.SPRACHE]),
status: statusKanon_(r[COL.STATUS]),
notiz: String(r[COL.NOTIZ] || ''),
erfasstAm: iso_(r[COL.ERFASST]),
geprueftAm: iso_(r[COL.GEPRUEFT]),
pruefer: String(r[COL.PRUEFER] || '')
};
});
}
function iso_(v) {
if (!v) return '';
if (v instanceof Date) return v.toISOString();
return String(v);
}
/* ------------------------------------------------------------------ */
/* Aktionen */
/* ------------------------------------------------------------------ */
function erstelleEintrag_(p) {
var bez = String(p.bezeichnung || '').trim();
if (!bez) return { ok: false, error: 'Bezeichnung fehlt' };
var lock = LockService.getScriptLock();
lock.waitLock(20000);
try {
var sh = sheet_();
var id = naechsteId_(sh);
var jetzt = new Date();
var audio = norm_(p.audio);
var bild = norm_(p.bild);
var sprache = norm_(p.sprache);
var status = berechneStatus(audio, bild, sprache);
var geprueft = status === STATUS.OFFEN ? '' : jetzt;
var zeile = [];
zeile[COL.ID] = id;
zeile[COL.BEZEICHNUNG] = bez;
zeile[COL.STANDORT] = String(p.standort || '').trim();
zeile[COL.BILD_URL] = String(p.bildUrl || '').trim();
zeile[COL.AUDIO] = audio;
zeile[COL.BILD] = bild;
zeile[COL.SPRACHE] = sprache;
zeile[COL.STATUS] = status;
zeile[COL.NOTIZ] = String(p.notiz || '').trim();
zeile[COL.ERFASST] = jetzt;
zeile[COL.GEPRUEFT] = geprueft;
zeile[COL.PRUEFER] = String(p.pruefer || '').trim();
sh.appendRow(zeile);
faerbeZeile_(sh, sh.getLastRow(), status);
protokolliere_(id, 'angelegt', status, p.pruefer);
return { ok: true, id: id, status: status };
} finally {
lock.releaseLock();
}
}
/**
* Naechste freie ID. Der hoechste je vergebene Zaehler wird zusaetzlich in den
* Skript-Eigenschaften gemerkt, damit IDs geloeschter Eintraege nie erneut
* vergeben werden.
*/
function naechsteId_(sh) {
var props = PropertiesService.getScriptProperties();
var max = parseInt(props.getProperty('lastId') || '0', 10);
if (isNaN(max)) max = 0;
var rows = daten_();
var re = new RegExp('^' + CONFIG.ID_PREFIX + '-(\\d+)$');
for (var i = 0; i < rows.length; i++) {
var m = re.exec(String(rows[i][COL.ID]).trim());
if (m) {
var n = parseInt(m[1], 10);
if (n > max) max = n;
}
}
var nummer = max + 1;
props.setProperty('lastId', String(nummer));
var next = String(nummer);
while (next.length < CONFIG.ID_PAD) next = '0' + next;
return CONFIG.ID_PREFIX + '-' + next;
}
function setzeStatus_(p) {
var treffer = zeileFuerId_(p.id);
if (!treffer) return { ok: false, error: 'ID nicht gefunden: ' + p.id };
var sh = sheet_();
var audio = norm_(p.audio);
var bild = norm_(p.bild);
var sprache = norm_(p.sprache);
var status = berechneStatus(audio, bild, sprache);
var jetzt = new Date();
sh.getRange(treffer.row, COL.AUDIO + 1, 1, 4)
.setValues([[audio, bild, sprache, status]]);
if (p.notiz !== undefined) {
sh.getRange(treffer.row, COL.NOTIZ + 1).setValue(String(p.notiz || ''));
}
sh.getRange(treffer.row, COL.GEPRUEFT + 1, 1, 2)
.setValues([[jetzt, String(p.pruefer || '')]]);
faerbeZeile_(sh, treffer.row, status);
protokolliere_(p.id, 'Status gesetzt', status, p.pruefer);
return { ok: true, id: String(p.id), status: status, geprueftAm: jetzt.toISOString() };
}
function aktualisiereEintrag_(p) {
var treffer = zeileFuerId_(p.id);
if (!treffer) return { ok: false, error: 'ID nicht gefunden: ' + p.id };
var sh = sheet_();
if (p.bezeichnung !== undefined) sh.getRange(treffer.row, COL.BEZEICHNUNG + 1).setValue(String(p.bezeichnung));
if (p.standort !== undefined) sh.getRange(treffer.row, COL.STANDORT + 1).setValue(String(p.standort));
if (p.bildUrl !== undefined) sh.getRange(treffer.row, COL.BILD_URL + 1).setValue(String(p.bildUrl));
if (p.notiz !== undefined) sh.getRange(treffer.row, COL.NOTIZ + 1).setValue(String(p.notiz));
protokolliere_(p.id, 'bearbeitet', '', p.pruefer);
return { ok: true, id: String(p.id) };
}
function archiviereEintrag_(p) {
var treffer = zeileFuerId_(p.id);
if (!treffer) return { ok: false, error: 'ID nicht gefunden: ' + p.id };
var sh = sheet_();
sh.getRange(treffer.row, COL.AUDIO + 1, 1, 4).setValues([['n.A.', 'n.A.', 'n.A.', STATUS.AUS]]);
faerbeZeile_(sh, treffer.row, STATUS.AUS);
protokolliere_(p.id, 'deaktiviert', STATUS.AUS, p.pruefer);
return { ok: true, id: String(p.id), status: STATUS.AUS };
}
function loescheEintrag_(p) {
var treffer = zeileFuerId_(p.id);
if (!treffer) return { ok: false, error: 'ID nicht gefunden: ' + p.id };
var lock = LockService.getScriptLock();
lock.waitLock(20000);
try {
// Zeile koennte sich zwischenzeitlich verschoben haben – erneut suchen.
treffer = zeileFuerId_(p.id);
if (!treffer) return { ok: false, error: 'ID nicht gefunden: ' + p.id };
var bez = String(treffer.values[COL.BEZEICHNUNG] || '');
var bild = String(treffer.values[COL.BILD_URL] || '');
sheet_().deleteRow(treffer.row);
protokolliere_(p.id, 'geloescht (' + bez + ')', bild, p.pruefer);
return { ok: true, id: String(p.id) };
} finally {
lock.releaseLock();
}
}
/* ------------------------------------------------------------------ */
/* Darstellung + Protokoll */
/* ------------------------------------------------------------------ */
function faerbeZeile_(sh, row, status) {
var farben = {};
farben[STATUS.OK] = '#e6f4ea';
farben[STATUS.TEIL] = '#fef7e0';
farben[STATUS.FEHLER] = '#fce8e6';
farben[STATUS.AUS] = '#f1f3f4';
farben[STATUS.OFFEN] = '#ffffff';
sh.getRange(row, 1, 1, HEADERS.length).setBackground(farben[status] || '#ffffff');
}
function protokolliere_(id, aktion, status, pruefer) {
try {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var log = ss.getSheetByName(CONFIG.LOG_SHEET_NAME);
if (!log) {
log = ss.insertSheet(CONFIG.LOG_SHEET_NAME);
log.appendRow(['Zeitpunkt', 'ID', 'Aktion', 'Status', 'Person']);
log.getRange(1, 1, 1, 5).setFontWeight('bold');
log.setFrozenRows(1);
}
log.appendRow([new Date(), String(id || ''), String(aktion || ''), String(status || ''), String(pruefer || '')]);
} catch (err) {
// Protokoll ist optional – Fehler hier duerfen die Aktion nicht abbrechen.
}
}
/* ------------------------------------------------------------------ */
/* Einmalige Einrichtung / Menue */
/* ------------------------------------------------------------------ */
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('Monitor-Check')
.addItem('Tabelle einrichten', 'einrichten')
.addItem('Alle Status neu berechnen', 'statusNeuBerechnen')
.addToUi();
}
function einrichten() {
var sh = sheet_();
sh.setColumnWidth(COL.ID + 1, 90);
sh.setColumnWidth(COL.BEZEICHNUNG + 1, 200);
sh.setColumnWidth(COL.STANDORT + 1, 160);
sh.setColumnWidth(COL.BILD_URL + 1, 260);
sh.setColumnWidth(COL.STATUS + 1, 190);
sh.setColumnWidth(COL.NOTIZ + 1, 260);
var jn = SpreadsheetApp.newDataValidation()
.requireValueInList(['JA', 'NEIN', 'n.A.'], true)
.setAllowInvalid(false)
.build();
sh.getRange(2, COL.AUDIO + 1, 1000, 3).setDataValidation(jn);
protokolliere_('', 'Tabelle eingerichtet', '', Session.getActiveUser().getEmail());
SpreadsheetApp.getUi().alert('Tabelle "' + CONFIG.SHEET_NAME + '" ist eingerichtet.');
}
function statusNeuBerechnen() {
var sh = sheet_();
var rows = daten_();
for (var i = 0; i < rows.length; i++) {
if (String(rows[i][COL.ID]).trim() === '') continue;
var s = berechneStatus(rows[i][COL.AUDIO], rows[i][COL.BILD], rows[i][COL.SPRACHE]);
sh.getRange(i + 2, COL.STATUS + 1).setValue(s);
faerbeZeile_(sh, i + 2, s);
}
}
/* ------------------------------------------------------------------ */
/* Selbsttest (im Editor ausfuehrbar) */
/* ------------------------------------------------------------------ */
function testStatusLogik() {
var faelle = [
[['JA', 'JA', 'JA'], STATUS.OK],
[['NEIN', 'NEIN', 'NEIN'], STATUS.FEHLER],
[['JA', 'NEIN', 'JA'], STATUS.TEIL],
[['JA', 'NEIN', 'NEIN'], STATUS.TEIL],
[['n.A.', 'n.A.', 'n.A.'], STATUS.AUS],
[['n.A.', 'JA', 'JA'], STATUS.OK],
[['n.A.', 'NEIN', 'NEIN'], STATUS.FEHLER],
[['n.A.', 'JA', 'NEIN'], STATUS.TEIL],
[['', '', ''], STATUS.OFFEN]
];
var fehler = [];
faelle.forEach(function (f) {
var ist = berechneStatus(f[0][0], f[0][1], f[0][2]);
if (ist !== f[1]) fehler.push(f[0].join('/') + ' -> ' + ist + ' (erwartet ' + f[1] + ')');
});
if (fehler.length) throw new Error('Fehlgeschlagen:\n' + fehler.join('\n'));
Logger.log('Alle ' + faelle.length + ' Testfaelle bestanden.');
}

519
install.sh
Unescape View File

@ -0,0 +1,519 @@
#!/usr/bin/env bash
#
# Monitor-Check – Installationsskript fuer Ubuntu 24.04 (funktioniert auch auf 22.04)
#
# sudo bash install.sh # gefuehrte Installation
# sudo bash install.sh --domain m.example.de --email ich@example.de --yes
# sudo bash install.sh --update # nur Dateien aktualisieren + Neustart
# sudo bash install.sh --dry-run # nur zeigen, was passieren wuerde
#
# Das Skript erwartet die Ordner server/ und web/ neben sich.
set -euo pipefail
# ------------------------------------------------------------------ Konstanten
APP_NAME="monitor-check"
APP_USER="monitor"
APP_DIR="/opt/${APP_NAME}"
DATA_DIR="/var/lib/${APP_NAME}"
UPLOAD_DIR="${DATA_DIR}/uploads"
SERVICE_FILE="/etc/systemd/system/${APP_NAME}.service"
NGINX_FILE="/etc/nginx/sites-available/${APP_NAME}"
NODE_MAJOR=20
SRC_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
# ------------------------------------------------------------------ Parameter
DOMAIN=""
EMAIL=""
TOKEN=""
PORT="8080"
MAX_UPLOAD_MB="15"
ASSUME_YES=0
DRY_RUN=0
MODE="install"
USE_TLS=1
USE_FIREWALL=1
USE_NGINX=1
PUBLIC_URL_OVERRIDE=""
BEHIND_PROXY=0
# ------------------------------------------------------------------ Ausgabe
if [[ -t 1 ]]; then
B="\033[1m"; DIM="\033[2m"; GRN="\033[32m"; YLW="\033[33m"; RED="\033[31m"; RST="\033[0m"
else
B=""; DIM=""; GRN=""; YLW=""; RED=""; RST=""
fi
schritt() { printf "\n${B}==> %s${RST}\n" "$*"; }
info() { printf " %s\n" "$*"; }
ok() { printf " ${GRN}✓${RST} %s\n" "$*"; }
warn() { printf " ${YLW}!${RST} %s\n" "$*"; }
fehler() { printf "\n${RED}Fehler:${RST} %s\n\n" "$*" >&2; exit 1; }
run() {
if [[ $DRY_RUN -eq 1 ]]; then
printf " ${DIM}[dry-run] %s${RST}\n" "$*"
else
"$@"
fi
}
# schreibt stdin nach $1
# Im Testlauf: mit MC_DRY_OUT=/pfad werden die erzeugten Dateien dort abgelegt.
schreibe() {
local ziel="$1"
if [[ $DRY_RUN -eq 1 ]]; then
printf " ${DIM}[dry-run] schreibe %s${RST}\n" "$ziel"
if [[ -n "${MC_DRY_OUT:-}" ]]; then
mkdir -p "${MC_DRY_OUT}$(dirname "$ziel")"
cat > "${MC_DRY_OUT}${ziel}"
else
cat >/dev/null
fi
else
cat > "$ziel"
fi
}
hilfe() {
sed -n '3,10p' "${BASH_SOURCE[0]}" | sed 's/^# \{0,1\}//'
cat <<'EOF'
Optionen:
--domain <name> Domain, unter der das Tool erreichbar ist
--email <adresse> E-Mail fuer Let's Encrypt
--token <token> API-Token (sonst wird eins erzeugt)
--port <nummer> interner Node-Port (Standard 8080)
--max-upload <mb> maximale Fotogroesse in MB (Standard 15)
--behind-proxy hinter vorgeschaltetem Reverse-Proxy (kein certbot),
zusammen mit --public-url verwenden
--public-url <url> oeffentliche Adresse, z. B. https://monitore.example.de
(landet als Bild-Link in der Tabelle)
--no-nginx kein nginx im Container, Node direkt auf 0.0.0.0:<port>
--no-tls kein Zertifikat anfordern
--no-firewall ufw nicht konfigurieren
--update nur Anwendungsdateien erneuern und Dienst neu starten
--yes keine Rueckfragen
--dry-run nichts veraendern, nur anzeigen
--help diese Hilfe
EOF
exit 0
}
while [[ $# -gt 0 ]]; do
case "$1" in
--domain) DOMAIN="${2:-}"; shift 2 ;;
--email) EMAIL="${2:-}"; shift 2 ;;
--token) TOKEN="${2:-}"; shift 2 ;;
--port) PORT="${2:-}"; shift 2 ;;
--max-upload) MAX_UPLOAD_MB="${2:-}"; shift 2 ;;
--public-url) PUBLIC_URL_OVERRIDE="${2:-}"; shift 2 ;;
--behind-proxy) BEHIND_PROXY=1; USE_TLS=0; shift ;;
--no-nginx) USE_NGINX=0; shift ;;
--no-tls) USE_TLS=0; shift ;;
--no-firewall) USE_FIREWALL=0; shift ;;
--update) MODE="update"; shift ;;
--yes|-y) ASSUME_YES=1; shift ;;
--dry-run) DRY_RUN=1; shift ;;
--help|-h) hilfe ;;
*) fehler "Unbekannte Option: $1 (--help zeigt die Uebersicht)" ;;
esac
done
# ------------------------------------------------------------------ Vorpruefung
[[ $EUID -eq 0 || $DRY_RUN -eq 1 ]] || fehler "Bitte als root ausfuehren: sudo bash install.sh"
[[ -d "${SRC_DIR}/server" && -d "${SRC_DIR}/web" ]] || \
fehler "Ordner server/ und web/ nicht gefunden neben ${BASH_SOURCE[0]}"
[[ -f "${SRC_DIR}/server/server.js" ]] || fehler "server/server.js fehlt."
[[ -f "${SRC_DIR}/web/index.html" ]] || fehler "web/index.html fehlt."
if [[ -r /etc/os-release ]]; then
. /etc/os-release
[[ "${ID:-}" == "ubuntu" || "${ID_LIKE:-}" == *debian* ]] || \
warn "Nicht getestetes System (${PRETTY_NAME:-unbekannt}) – weiter auf eigenes Risiko."
fi
printf "\n${B}Monitor-Check – Installation${RST}\n"
[[ $DRY_RUN -eq 1 ]] && printf "${YLW}Testlauf: es wird nichts veraendert.${RST}\n" || true
# ------------------------------------------------------------------ Update-Modus
if [[ "$MODE" == "update" ]]; then
[[ -d "$APP_DIR" ]] || fehler "${APP_DIR} existiert nicht – zuerst normal installieren."
schritt "Anwendungsdateien erneuern"
run rsync -a --delete --exclude node_modules --exclude .env \
"${SRC_DIR}/server/" "${APP_DIR}/server/" 2>/dev/null || \
run cp -r "${SRC_DIR}/server/." "${APP_DIR}/server/"
run cp -r "${SRC_DIR}/web/." "${APP_DIR}/web/"
run chown -R "${APP_USER}:${APP_USER}" "$APP_DIR"
run bash -c "cd '${APP_DIR}/server' && npm install --omit=dev --no-audit --no-fund"
run systemctl restart "$APP_NAME"
ok "Aktualisiert. Status: systemctl status ${APP_NAME}"
exit 0
fi
# ------------------------------------------------------------------ Abfragen
frage() { # frage <Variable> <Text> <Standard>
local __var="$1" __text="$2" __default="${3:-}" __eingabe=""
local __aktuell="${!__var}"
if [[ -n "$__aktuell" ]]; then return; fi
if [[ $ASSUME_YES -eq 1 || ! -t 0 ]]; then
printf -v "$__var" '%s' "$__default"; return
fi
if [[ -n "$__default" ]]; then
read -r -p " ${__text} [${__default}]: " __eingabe || true
else
read -r -p " ${__text}: " __eingabe || true
fi
printf -v "$__var" '%s' "${__eingabe:-$__default}"
}
schritt "Angaben"
# Token aus bestehender Installation weiterverwenden
if [[ -z "$TOKEN" && -f "${APP_DIR}/server/.env" ]]; then
TOKEN="$(grep -E '^API_TOKEN=' "${APP_DIR}/server/.env" | cut -d= -f2- || true)"
[[ -n "$TOKEN" ]] && ok "Vorhandenes API-Token wird weiterverwendet." || true
fi
if [[ -z "$TOKEN" ]]; then
TOKEN="$(openssl rand -hex 24 2>/dev/null || head -c 24 /dev/urandom | od -An -tx1 | tr -d ' \n')"
ok "Neues API-Token erzeugt."
fi
# Hinter einem vorgeschalteten Proxy uebernimmt dieser TLS und Zertifikat.
[[ $USE_NGINX -eq 0 ]] && USE_TLS=0 || true
[[ $BEHIND_PROXY -eq 1 ]] && USE_TLS=0 || true
if [[ -z "$PUBLIC_URL_OVERRIDE" ]]; then
frage DOMAIN "Domain (leer lassen fuer Zugriff nur ueber IP)" ""
fi
if [[ -n "$DOMAIN" && $USE_TLS -eq 1 ]]; then
frage EMAIL "E-Mail fuer Let's Encrypt (leer = kein Zertifikat)" ""
[[ -z "$EMAIL" ]] && USE_TLS=0 || true
else
USE_TLS=0
fi
if [[ -n "$PUBLIC_URL_OVERRIDE" ]]; then
PUBLIC_URL="${PUBLIC_URL_OVERRIDE%/}"
[[ "$PUBLIC_URL" =~ ^https?:// ]] || fehler "--public-url muss mit http:// oder https:// beginnen."
elif [[ -n "$DOMAIN" ]]; then
PUBLIC_URL="$([[ $USE_TLS -eq 1 ]] && echo "https://${DOMAIN}" || echo "http://${DOMAIN}")"
else
IP="$(hostname -I 2>/dev/null | awk '{print $1}')"
[[ -z "$IP" ]] && IP="127.0.0.1" || true
PUBLIC_URL="http://${IP}"
warn "Ohne Domain laeuft alles ueber http – die Handy-Kamera bleibt dann gesperrt."
fi
# Ohne nginx im Container muss Node von aussen erreichbar sein.
if [[ $USE_NGINX -eq 1 ]]; then BIND_HOST="127.0.0.1"; else BIND_HOST="0.0.0.0"; fi
# Hostname aus der oeffentlichen URL – fuer die Proxy-Vorlage
PUBLIC_HOST="${PUBLIC_URL#*://}"; PUBLIC_HOST="${PUBLIC_HOST%%/*}"
CONTAINER_IP="$(hostname -I 2>/dev/null | awk '{print $1}')"
[[ -z "$CONTAINER_IP" ]] && CONTAINER_IP="<container-ip>" || true
UPSTREAM="$([[ $USE_NGINX -eq 1 ]] && echo "http://${CONTAINER_IP}:80" || echo "http://${CONTAINER_IP}:${PORT}")"
cat <<EOF
Domain : ${DOMAIN:-<nur IP>}
Oeffentliche URL: ${PUBLIC_URL}
TLS : $([[ $USE_TLS -eq 1 ]] && echo "Let's Encrypt im Container" || echo "nicht im Container (Proxy oder http)")
nginx lokal : $([[ $USE_NGINX -eq 1 ]] && echo "ja, Port 80" || echo "nein, Node direkt")
Node hoert auf: ${BIND_HOST}:${PORT}
Verzeichnisse : ${APP_DIR} , ${DATA_DIR}
API-Token : ${TOKEN}
EOF
if [[ $ASSUME_YES -eq 0 && $DRY_RUN -eq 0 && -t 0 ]]; then
read -r -p " Fortfahren? [J/n] " a || true
[[ "${a:-J}" =~ ^([JjYy]|)$ ]] || { echo " Abgebrochen."; exit 0; }
fi
# ------------------------------------------------------------------ Pakete
schritt "Systempakete installieren"
export DEBIAN_FRONTEND=noninteractive
run apt-get update -qq
if [[ $USE_NGINX -eq 1 ]]; then
run apt-get install -y -qq curl ca-certificates gnupg nginx openssl rsync
else
run apt-get install -y -qq curl ca-certificates gnupg openssl rsync
fi
ok "Basispakete vorhanden."
# Node.js
NODE_OK=0
if command -v node >/dev/null 2>&1; then
NODE_VER="$(node -p 'process.versions.node.split(".")[0]' 2>/dev/null || echo 0)"
[[ "$NODE_VER" -ge 18 ]] && NODE_OK=1 && ok "Node.js $(node -v) bereits installiert." || true
fi
if [[ $NODE_OK -eq 0 ]]; then
info "Node.js ${NODE_MAJOR} LTS wird eingerichtet …"
run bash -c "curl -fsSL https://deb.nodesource.com/setup_${NODE_MAJOR}.x | bash -"
run apt-get install -y -qq nodejs
ok "Node.js installiert."
fi
# ------------------------------------------------------------------ Benutzer
schritt "Benutzer und Verzeichnisse"
if id "$APP_USER" >/dev/null 2>&1; then
ok "Benutzer ${APP_USER} existiert."
else
run adduser --system --group --home "$APP_DIR" --no-create-home "$APP_USER"
ok "Benutzer ${APP_USER} angelegt."
fi
run mkdir -p "${APP_DIR}/server" "${APP_DIR}/web" "$UPLOAD_DIR"
# ------------------------------------------------------------------ Dateien
schritt "Anwendung kopieren"
run rsync -a --exclude node_modules --exclude .env --exclude uploads \
"${SRC_DIR}/server/" "${APP_DIR}/server/"
run rsync -a "${SRC_DIR}/web/" "${APP_DIR}/web/"
ok "Dateien liegen in ${APP_DIR}."
schritt "Node-Abhaengigkeiten installieren"
info "Das dauert beim ersten Mal ein bis zwei Minuten (sharp)."
run bash -c "cd '${APP_DIR}/server' && npm install --omit=dev --no-audit --no-fund"
ok "Abhaengigkeiten installiert."
# ------------------------------------------------------------------ Konfiguration
schritt "Konfiguration schreiben"
if [[ -f "${APP_DIR}/server/.env" && $DRY_RUN -eq 0 ]]; then
cp "${APP_DIR}/server/.env" "${APP_DIR}/server/.env.bak.$(date +%s)"
info "Bisherige .env gesichert."
fi
schreibe "${APP_DIR}/server/.env" <<EOF
# erzeugt von install.sh am $(date -Is)
PORT=${PORT}
HOST=${BIND_HOST}
API_TOKEN=${TOKEN}
PUBLIC_URL=${PUBLIC_URL}
UPLOAD_DIR=${UPLOAD_DIR}
WEB_DIR=${APP_DIR}/web
MAX_UPLOAD_MB=${MAX_UPLOAD_MB}
MAX_IMAGE_PX=1600
JPEG_QUALITY=78
ALLOWED_ORIGINS=${PUBLIC_URL}
TRUST_PROXY=$([[ $USE_TLS -eq 0 && $USE_NGINX -eq 1 ]] && echo 2 || echo 1)
RATE_LIMIT=300
EOF
run chown -R "${APP_USER}:${APP_USER}" "$APP_DIR" "$DATA_DIR"
run chmod 600 "${APP_DIR}/server/.env"
ok ".env geschrieben."
# ------------------------------------------------------------------ systemd
schritt "Dienst einrichten"
schreibe "$SERVICE_FILE" <<EOF
[Unit]
Description=Monitor-Check Upload- und Web-Server
After=network-online.target
Wants=network-online.target
[Service]
Type=simple
User=${APP_USER}
Group=${APP_USER}
WorkingDirectory=${APP_DIR}/server
EnvironmentFile=${APP_DIR}/server/.env
ExecStart=$(command -v node || echo /usr/bin/node) ${APP_DIR}/server/server.js
Restart=always
RestartSec=3
NoNewPrivileges=true
PrivateTmp=true
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=${DATA_DIR}
ProtectKernelTunables=true
ProtectControlGroups=true
RestrictSUIDSGID=true
LockPersonality=true
StandardOutput=journal
StandardError=journal
SyslogIdentifier=${APP_NAME}
[Install]
WantedBy=multi-user.target
EOF
run systemctl daemon-reload
run systemctl enable --now "$APP_NAME"
run systemctl restart "$APP_NAME"
ok "Dienst ${APP_NAME} laeuft."
# ------------------------------------------------------------------ nginx
if [[ $USE_NGINX -eq 1 ]]; then
schritt "nginx einrichten"
SERVER_NAME="${DOMAIN:-_}"
schreibe "$NGINX_FILE" <<EOF
# erzeugt von install.sh
server {
listen 80;
listen [::]:80;
server_name ${SERVER_NAME};
client_max_body_size $((MAX_UPLOAD_MB + 5))m;
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
location / {
proxy_pass http://127.0.0.1:${PORT};
proxy_http_version 1.1;
proxy_set_header Host \$host;
proxy_set_header X-Real-IP \$remote_addr;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto \$scheme;
proxy_read_timeout 120s;
}
location /uploads/ {
alias ${UPLOAD_DIR}/;
expires 30d;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options "nosniff" always;
access_log off;
location ~* \\.(php|pl|py|cgi|sh)\$ { deny all; }
}
}
EOF
run ln -sfn "$NGINX_FILE" "/etc/nginx/sites-enabled/${APP_NAME}"
[[ -e /etc/nginx/sites-enabled/default ]] && run rm -f /etc/nginx/sites-enabled/default || true
run nginx -t
run systemctl reload nginx
ok "nginx liefert ${SERVER_NAME} aus."
else
schritt "nginx"
info "uebersprungen – Node bedient ${BIND_HOST}:${PORT} direkt."
fi
# ------------------------------------------------------------------ TLS
if [[ $USE_TLS -eq 1 ]]; then
schritt "Zertifikat anfordern"
run apt-get install -y -qq certbot python3-certbot-nginx
if run certbot --nginx -d "$DOMAIN" --agree-tos -m "$EMAIL" --redirect --non-interactive; then
ok "HTTPS aktiv fuer ${DOMAIN}."
else
warn "certbot ist fehlgeschlagen – zeigt der DNS-Eintrag von ${DOMAIN} schon hierher?"
warn "Spaeter nachholen: certbot --nginx -d ${DOMAIN}"
fi
fi
# ------------------------------------------------------------------ Firewall
if [[ $USE_FIREWALL -eq 1 ]]; then
schritt "Firewall"
run apt-get install -y -qq ufw
run ufw allow 22/tcp
if [[ $USE_NGINX -eq 1 ]]; then
run ufw allow 80/tcp
run ufw allow 443/tcp
PORTS="22, 80, 443"
else
run ufw allow "${PORT}/tcp"
PORTS="22, ${PORT}"
fi
run bash -c "ufw --force enable"
ok "ufw aktiv (${PORTS})."
fi
# ------------------------------------------------------------------ Test
schritt "Funktionstest"
if [[ $DRY_RUN -eq 0 ]]; then
sleep 2
if curl -fsS "http://127.0.0.1:${PORT}/gesundheit" >/dev/null 2>&1; then
ok "Node-Dienst antwortet."
else
warn "Node-Dienst antwortet nicht – pruefen mit: journalctl -u ${APP_NAME} -n 40 --no-pager"
fi
if [[ $USE_NGINX -eq 1 ]]; then
if curl -fsS -o /dev/null "http://127.0.0.1/" 2>/dev/null; then
ok "nginx liefert die Oberflaeche aus."
else
warn "nginx antwortet lokal nicht wie erwartet."
fi
fi
fi
# ------------------------------------------------------------------ Proxy-Vorlage
PROXY_DATEI="${APP_DIR}/PROXY-SNIPPET.conf"
if [[ $USE_TLS -eq 0 ]]; then
schritt "Vorlage fuer den vorgeschalteten Proxy"
schreibe "$PROXY_DATEI" <<EOF
# Fuer den vorgeschalteten Reverse-Proxy (TLS liegt dort).
# Wichtig ist client_max_body_size – sonst brechen Foto-Uploads mit 413 ab.
server {
listen 443 ssl http2;
server_name ${PUBLIC_HOST};
# ssl_certificate ... ;
# ssl_certificate_key ... ;
client_max_body_size $((MAX_UPLOAD_MB + 5))m;
location / {
proxy_pass ${UPSTREAM};
proxy_http_version 1.1;
proxy_set_header Host \$host;
proxy_set_header X-Real-IP \$remote_addr;
proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto \$scheme;
proxy_read_timeout 120s;
proxy_request_buffering off;
}
}
EOF
ok "Vorlage liegt in ${PROXY_DATEI} (Upstream: ${UPSTREAM})."
fi
# ------------------------------------------------------------------ Abschluss
ZUSAMMENFASSUNG="${APP_DIR}/ZUGANGSDATEN.txt"
if [[ $DRY_RUN -eq 0 ]]; then
cat > "$ZUSAMMENFASSUNG" <<EOF
Monitor-Check – Zugangsdaten (erzeugt $(date -Is))
Oberflaeche : ${PUBLIC_URL}
Upload-Endpoint : ${PUBLIC_URL}/api/upload
API-Token : ${TOKEN}
Dieses Token muss identisch in apps-script/Code.gs stehen (CONFIG.API_TOKEN)
und im Setup-Tab der Oberflaeche eingetragen werden.
EOF
chmod 600 "$ZUSAMMENFASSUNG"
fi
cat <<EOF
${GRN}${B}Fertig.${RST}
Oberflaeche ${B}${PUBLIC_URL}${RST}
Upload-Endpoint ${PUBLIC_URL}/api/upload
API-Token ${B}${TOKEN}${RST}
$([[ $DRY_RUN -eq 0 ]] && echo "notiert in ${ZUSAMMENFASSUNG}")
$([[ $USE_TLS -eq 0 ]] && cat <<PROXY
${B}Vorgeschalteter Proxy:${RST} Ziel ist ${B}${UPSTREAM}${RST}
Dort unbedingt setzen: client_max_body_size $((MAX_UPLOAD_MB + 5))m;
Fertige Vorlage: ${PROXY_DATEI}
PROXY
)
${B}Noch zu tun:${RST}
1. In der Google Tabelle: Erweiterungen > Apps Script, Inhalt von
apps-script/Code.gs einfuegen und CONFIG.API_TOKEN auf das Token oben setzen.
2. Bereitstellen > Neue Bereitstellung > Web-App
Ausfuehren als: Ich | Zugriff: ${B}Jeder${RST}
Die .../exec-URL kopieren.
3. ${PUBLIC_URL} am Handy oeffnen, Tab "Setup":
Apps-Script-URL, Token und Upload-Endpoint eintragen, dann
"Verbindung testen".
${B}Nuetzlich:${RST}
systemctl status ${APP_NAME}
journalctl -u ${APP_NAME} -f
sudo bash install.sh --update # nach Aenderungen an web/ oder server/
EOF

26
server/.env.example
Unescape View File

@ -0,0 +1,26 @@
# Kopieren nach .env und anpassen
PORT=8080
HOST=127.0.0.1
# Muss identisch sein mit CONFIG.API_TOKEN in apps-script/Code.gs
API_TOKEN=BITTE-AENDERN-langes-zufaelliges-token
# Oeffentliche Basis-URL (ohne Slash am Ende) – landet als Bild-URL im Sheet
PUBLIC_URL=https://monitore.example.org
# Pfade
UPLOAD_DIR=/var/lib/monitor-check/uploads
WEB_DIR=/opt/monitor-check/web
# Grenzen
MAX_UPLOAD_MB=15
MAX_IMAGE_PX=1600
JPEG_QUALITY=78
# Kommagetrennt, oder * fuer alle
ALLOWED_ORIGINS=*
# Anzahl vorgeschalteter Proxys (eigener nginx = 1, plus externer Proxy = 2)
TRUST_PROXY=1
# Uploads pro Minute und IP
RATE_LIMIT=300

32
server/monitor-check.service
Unescape View File

@ -0,0 +1,32 @@
[Unit]
Description=Monitor-Check Upload- und Web-Server
After=network-online.target
Wants=network-online.target
[Service]
Type=simple
User=monitor
Group=monitor
WorkingDirectory=/opt/monitor-check/server
EnvironmentFile=/opt/monitor-check/server/.env
ExecStart=/usr/bin/node /opt/monitor-check/server/server.js
Restart=always
RestartSec=3
# Haertung
NoNewPrivileges=true
PrivateTmp=true
ProtectSystem=strict
ProtectHome=true
ReadWritePaths=/var/lib/monitor-check
ProtectKernelTunables=true
ProtectControlGroups=true
RestrictSUIDSGID=true
LockPersonality=true
StandardOutput=journal
StandardError=journal
SyslogIdentifier=monitor-check
[Install]
WantedBy=multi-user.target

39
server/nginx-monitor-check.conf
Unescape View File

@ -0,0 +1,39 @@
# /etc/nginx/sites-available/monitor-check
# Danach: ln -s ../sites-available/monitor-check /etc/nginx/sites-enabled/
# nginx -t && systemctl reload nginx
# certbot --nginx -d monitore.example.org
server {
listen 80;
listen [::]:80;
server_name monitore.example.org;
# Uploads vom Handy koennen gross sein
client_max_body_size 20m;
# Sicherheits-Header
add_header X-Content-Type-Options "nosniff" always;
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_read_timeout 120s;
}
# Hochgeladene Bilder direkt von der Platte ausliefern (schneller als durch Node)
location /uploads/ {
alias /var/lib/monitor-check/uploads/;
expires 30d;
add_header Cache-Control "public, immutable";
add_header X-Content-Type-Options "nosniff" always;
access_log off;
# keine Ausfuehrung von hochgeladenen Dateien
location ~* \.(php|pl|py|cgi|sh)$ { deny all; }
}
}

19
server/package.json
Unescape View File

@ -0,0 +1,19 @@
{
"name": "monitor-check-server",
"version": "1.0.0",
"description": "Upload- und Hosting-Server fuer das Monitor-Check-Tool",
"main": "server.js",
"private": true,
"scripts": {
"start": "node server.js"
},
"engines": {
"node": ">=18"
},
"dependencies": {
"dotenv": "^16.4.5",
"express": "^4.19.2",
"multer": "^1.4.5-lts.1",
"sharp": "^0.33.4"
}
}

151
server/server.js
Unescape View File

@ -0,0 +1,151 @@
/**
* Monitor-Check – Upload- und Hosting-Server
* ------------------------------------------
* - liefert die Weboberflaeche (web/index.html) aus
* - nimmt Fotos entgegen, verkleinert sie und legt sie unter /uploads ab
* - gibt die oeffentliche URL des Bildes zurueck
*
* Start: node server.js
* Konfig: .env (siehe .env.example)
*/
const express = require('express');
const multer = require('multer');
const sharp = require('sharp');
const path = require('path');
const fs = require('fs');
const crypto = require('crypto');
require('dotenv').config();
const PORT = parseInt(process.env.PORT || '8080', 10);
const HOST = process.env.HOST || '0.0.0.0';
const TOKEN = process.env.API_TOKEN || '';
const PUBLIC_URL = (process.env.PUBLIC_URL || '').replace(/\/+$/, '');
const UPLOAD_DIR = path.resolve(process.env.UPLOAD_DIR || path.join(__dirname, 'uploads'));
const WEB_DIR = path.resolve(process.env.WEB_DIR || path.join(__dirname, '..', 'web'));
const MAX_MB = parseInt(process.env.MAX_UPLOAD_MB || '15', 10);
const MAX_PX = parseInt(process.env.MAX_IMAGE_PX || '1600', 10);
const JPEG_Q = parseInt(process.env.JPEG_QUALITY || '78', 10);
const ALLOWED_ORIGINS = (process.env.ALLOWED_ORIGINS || '*')
.split(',').map(s => s.trim()).filter(Boolean);
fs.mkdirSync(UPLOAD_DIR, { recursive: true });
const app = express();
app.disable('x-powered-by');
// Anzahl der vorgeschalteten Proxys. Hinter einem zusaetzlichen externen
// Reverse-Proxy auf 2 setzen, sonst landen alle Clients in einem Rate-Limit-Topf.
app.set('trust proxy', parseInt(process.env.TRUST_PROXY || '1', 10));
/* ---------- CORS ---------- */
app.use((req, res, next) => {
const origin = req.headers.origin;
if (ALLOWED_ORIGINS.includes('*')) {
res.setHeader('Access-Control-Allow-Origin', '*');
} else if (origin && ALLOWED_ORIGINS.includes(origin)) {
res.setHeader('Access-Control-Allow-Origin', origin);
res.setHeader('Vary', 'Origin');
}
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Token');
if (req.method === 'OPTIONS') return res.sendStatus(204);
next();
});
/* ---------- Einfache Rate-Begrenzung ---------- */
const treffer = new Map();
function rateLimit(max, fensterMs) {
return (req, res, next) => {
const key = req.ip;
const jetzt = Date.now();
const e = treffer.get(key) || { n: 0, bis: jetzt + fensterMs };
if (jetzt > e.bis) { e.n = 0; e.bis = jetzt + fensterMs; }
e.n++;
treffer.set(key, e);
if (e.n > max) return res.status(429).json({ ok: false, error: 'Zu viele Anfragen' });
next();
};
}
setInterval(() => {
const jetzt = Date.now();
for (const [k, v] of treffer) if (jetzt > v.bis) treffer.delete(k);
}, 60000).unref();
/* ---------- Token-Pruefung ---------- */
function pruefeToken(req, res, next) {
if (!TOKEN) return next(); // ohne Token konfiguriert = offen
const mit = req.get('X-Token') || req.query.token || '';
const a = Buffer.from(String(mit));
const b = Buffer.from(TOKEN);
const ok = a.length === b.length && crypto.timingSafeEqual(a, b);
if (!ok) return res.status(401).json({ ok: false, error: 'Nicht autorisiert' });
next();
}
/* ---------- Upload ---------- */
const upload = multer({
storage: multer.memoryStorage(),
limits: { fileSize: MAX_MB * 1024 * 1024, files: 1 },
fileFilter: (req, file, cb) => {
if (!/^image\//.test(file.mimetype)) return cb(new Error('Nur Bilddateien erlaubt'));
cb(null, true);
}
});
app.post('/api/upload', rateLimit(parseInt(process.env.RATE_LIMIT || '300', 10), 60000), pruefeToken, (req, res) => {
upload.single('datei')(req, res, async (err) => {
if (err) {
const code = err.code === 'LIMIT_FILE_SIZE' ? 413 : 400;
return res.status(code).json({
ok: false,
error: err.code === 'LIMIT_FILE_SIZE' ? `Datei groesser als ${MAX_MB} MB` : err.message
});
}
if (!req.file) return res.status(400).json({ ok: false, error: 'Keine Datei empfangen' });
try {
const name = `${new Date().toISOString().slice(0, 10)}_${crypto.randomBytes(6).toString('hex')}.jpg`;
const ziel = path.join(UPLOAD_DIR, name);
await sharp(req.file.buffer, { failOn: 'none' })
.rotate() // EXIF-Ausrichtung anwenden
.resize({ width: MAX_PX, height: MAX_PX, fit: 'inside', withoutEnlargement: true })
.jpeg({ quality: JPEG_Q, mozjpeg: true })
.toFile(ziel);
const basis = PUBLIC_URL || `${req.protocol}://${req.get('host')}`;
const url = `${basis}/uploads/${name}`;
const { size } = fs.statSync(ziel);
console.log(`[upload] ${name} ${(size / 1024).toFixed(0)} kB von ${req.ip}`);
res.json({ ok: true, url, datei: name, bytes: size });
} catch (e) {
console.error('[upload] Fehler:', e.message);
res.status(500).json({ ok: false, error: 'Bild konnte nicht verarbeitet werden' });
}
});
});
/* ---------- Statisches Ausliefern ---------- */
app.use('/uploads', express.static(UPLOAD_DIR, {
maxAge: '30d',
immutable: true,
index: false,
setHeaders: (res) => res.setHeader('X-Content-Type-Options', 'nosniff')
}));
app.use('/', express.static(WEB_DIR, { extensions: ['html'], maxAge: '5m' }));
app.get('/gesundheit', (req, res) => {
res.json({ ok: true, zeit: new Date().toISOString(), uploads: fs.readdirSync(UPLOAD_DIR).length });
});
app.use((req, res) => res.status(404).json({ ok: false, error: 'Nicht gefunden' }));
app.listen(PORT, HOST, () => {
console.log(`Monitor-Check laeuft auf http://${HOST}:${PORT}`);
console.log(` Weboberflaeche: ${WEB_DIR}`);
console.log(` Uploads: ${UPLOAD_DIR}`);
console.log(` Token: ${TOKEN ? 'aktiv' : 'NICHT gesetzt (offen!)'}`);
});

885
web/index.html
Unescape View File

@ -0,0 +1,885 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#111418">
<title>Monitor-Check</title>
<style>
:root{
--bg:#f5f6f7;
--surface:#ffffff;
--line:#d9dce0;
--line-strong:#b7bcc3;
--ink:#111418;
--ink-2:#5a616b;
--ink-3:#8b929b;
--accent:#1b57d6;
--ok:#1a7f45; --ok-bg:#e4f3ea;
--teil:#9a6400; --teil-bg:#fdf1d8;
--fehler:#b3261e; --fehler-bg:#fbe5e3;
--aus:#5a616b; --aus-bg:#eceef0;
--offen:#5a616b; --offen-bg:#ffffff;
--r:10px;
--tap:48px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* muss vor den Layoutregeln stehen: display:block wuerde [hidden] sonst aushebeln */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
background:var(--bg);color:var(--ink);
font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
header{
position:sticky;top:0;z-index:30;background:var(--surface);
border-bottom:1px solid var(--line);
padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
display:flex;align-items:center;gap:10px;
}
header h1{font-size:16px;font-weight:650;margin:0;letter-spacing:-.01em;flex:1}
.netstate{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.netstate.off{background:var(--fehler-bg);border-color:#f0c4c0;color:var(--fehler)}
.netstate.queue{background:var(--teil-bg);border-color:#eddaa8;color:var(--teil)}
main{padding:14px;max-width:720px;margin:0 auto}
.view{display:none}
.view.on{display:block}
nav{
position:fixed;left:0;right:0;bottom:0;z-index:30;
background:var(--surface);border-top:1px solid var(--line);
display:grid;grid-template-columns:repeat(3,1fr);
padding-bottom:env(safe-area-inset-bottom);
}
nav button{
appearance:none;border:0;background:none;color:var(--ink-3);
padding:12px 4px;font:inherit;font-size:12px;font-weight:550;
display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
min-height:var(--tap);
}
nav button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav button.on{color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
.card h2{font-size:13px;font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin:0 0 12px}
label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 6px}
input[type=text],input[type=url],input[type=password],textarea,select{
width:100%;padding:12px;font:inherit;color:var(--ink);
background:#fff;border:1px solid var(--line-strong);border-radius:8px;min-height:var(--tap);
}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
textarea{min-height:76px;resize:vertical}
.field{margin-bottom:14px}
.hint{font-size:12px;color:var(--ink-3);margin-top:5px}
button.btn{
appearance:none;font:inherit;font-weight:600;cursor:pointer;
border:1px solid var(--line-strong);background:#fff;color:var(--ink);
border-radius:8px;padding:13px 16px;min-height:var(--tap);width:100%;
}
button.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
button.btn.ghost{background:transparent}
button.btn.danger{color:var(--fehler);border-color:#f0c4c0}
button.btn.danger:active{background:var(--fehler-bg)}
button.btn:disabled{opacity:.5;cursor:default}
.btnrow{display:flex;gap:8px}
.btnrow .btn{width:auto;flex:1}
/* Status-Schalter */
.triple{display:flex;flex-direction:column;gap:10px}
.trow{display:grid;grid-template-columns:78px 1fr;align-items:center;gap:10px}
.trow > span{font-size:14px;font-weight:600}
.seg{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.seg button{
appearance:none;border:0;border-right:1px solid var(--line-strong);background:#fff;
font:inherit;font-size:14px;font-weight:600;color:var(--ink-2);
padding:12px 4px;min-height:var(--tap);cursor:pointer;
}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true][data-v=JA]{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 2px var(--ok)}
.seg button[aria-pressed=true][data-v=NEIN]{background:var(--fehler-bg);color:var(--fehler);box-shadow:inset 0 0 0 2px var(--fehler)}
.seg button[aria-pressed=true][data-v="n.A."]{background:var(--aus-bg);color:var(--aus);box-shadow:inset 0 0 0 2px var(--aus)}
.chip{
display:inline-flex;align-items:center;gap:6px;
font-size:12px;font-weight:650;padding:4px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap;
}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.s-ok{background:var(--ok-bg);color:var(--ok)}
.s-teil{background:var(--teil-bg);color:var(--teil)}
.s-fehler{background:var(--fehler-bg);color:var(--fehler)}
.s-aus{background:var(--aus-bg);color:var(--aus)}
.s-offen{background:#fff;color:var(--offen);border-color:var(--line-strong)}
.preview{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px;border:1px dashed var(--line-strong);border-radius:8px;margin-top:12px;
}
.preview small{color:var(--ink-3);font-size:12px}
/* Foto */
.photo{position:relative;border:1px dashed var(--line-strong);border-radius:8px;overflow:hidden;background:#fff}
.photo img{display:block;width:100%;max-height:260px;object-fit:cover}
.photo .ph{padding:26px 12px;text-align:center;color:var(--ink-3);font-size:14px}
.photo .rm{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(17,20,24,.78);color:#fff;font-size:18px;cursor:pointer;line-height:1}
input[type=file]{display:none}
/* Liste */
.toolbar{display:flex;gap:8px;margin-bottom:10px}
.toolbar input{flex:1}
.filters{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.filters button{
appearance:none;font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);border-radius:999px;padding:8px 13px;
}
.filters button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.item{
display:flex;gap:12px;align-items:center;width:100%;text-align:left;cursor:pointer;
background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:10px;margin-bottom:8px;font:inherit;
}
.item .thumb{width:56px;height:56px;border-radius:6px;background:var(--aus-bg);flex:0 0 auto;object-fit:cover}
.item .thumb.empty{display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:11px}
.item .meta{flex:1;min-width:0}
.item .idline{font-size:11px;color:var(--ink-3);letter-spacing:.04em}
.item .name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .sub{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:12px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 4px;text-align:center}
.stat b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.stat span{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
/* Detail-Sheet */
.sheet{position:fixed;inset:0;z-index:50;display:none}
.sheet.on{display:block}
.sheet .bd{position:absolute;inset:0;background:rgba(17,20,24,.45)}
.sheet .pn{
position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;
background:var(--bg);border-radius:16px 16px 0 0;padding:16px 14px calc(20px + env(safe-area-inset-bottom));
}
.sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 14px}
@media(min-width:720px){.sheet .pn{max-width:640px;margin:0 auto;border-radius:16px;bottom:auto;top:50%;transform:translateY(-50%)}}
.toast{
position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom));
z-index:60;background:var(--ink);color:#fff;padding:11px 16px;border-radius:8px;
font-size:14px;font-weight:550;max-width:88vw;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s;
}
.toast.on{opacity:1}
.toast.err{background:var(--fehler)}
.empty{text-align:center;color:var(--ink-3);padding:40px 20px;font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
dl.kv{margin:0;font-size:13px}
dl.kv div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--line)}
dl.kv dt{color:var(--ink-3)}
dl.kv dd{margin:0;text-align:right}
</style>
</head>
<body>
<header>
<h1>Monitor-Check</h1>
<span class="netstate" id="netstate">bereit</span>
</header>
<main>
<!-- ============ ERFASSEN ============ -->
<section class="view on" id="v-erfassen">
<div class="card">
<h2>Neuer Eintrag</h2>
<div class="field">
<label for="f-bez">Bezeichnung *</label>
<input type="text" id="f-bez" placeholder="z. B. Monitor Foyer Nord" autocomplete="off">
</div>
<div class="field">
<label for="f-ort">Standort</label>
<input type="text" id="f-ort" placeholder="z. B. Halle 2, Reihe A" autocomplete="off">
</div>
<div class="field">
<label>Foto</label>
<div class="photo" id="f-photo">
<div class="ph" id="f-photo-ph">Tippen zum Fotografieren</div>
<img id="f-photo-img" alt="" hidden>
<button class="rm" id="f-photo-rm" hidden aria-label="Foto entfernen">&times;</button>
</div>
<input type="file" id="f-file" accept="image/*" capture="environment">
<p class="hint" id="f-photo-hint">Wird auf deinen Server geladen, das Sheet speichert die URL.</p>
</div>
<div class="field">
<label>Status sofort erfassen (optional)</label>
<div class="triple" id="f-triple"></div>
<div class="preview">
<span class="chip s-offen" id="f-status">Nicht geprüft</span>
<small>wird automatisch berechnet</small>
</div>
</div>
<div class="field">
<label for="f-notiz">Notiz</label>
<textarea id="f-notiz" placeholder="Auffälligkeiten, Defekte, Zuständigkeit …"></textarea>
</div>
<button class="btn primary" id="f-save">Eintrag anlegen</button>
</div>
</section>
<!-- ============ ÜBERSICHT ============ -->
<section class="view" id="v-liste">
<div class="stats" id="stats"></div>
<div class="toolbar">
<input type="text" id="q" placeholder="ID, Bezeichnung, Standort …" autocomplete="off">
<button class="btn" id="reload" style="width:auto;padding:0 16px" aria-label="Neu laden">&#8635;</button>
</div>
<div class="filters" id="filters"></div>
<div id="list"></div>
</section>
<!-- ============ EINSTELLUNGEN ============ -->
<section class="view" id="v-setup">
<div class="card">
<h2>Verbindung</h2>
<div class="field">
<label for="s-api">Apps-Script Web-App URL</label>
<input type="url" id="s-api" placeholder="https://script.google.com/macros/s/…/exec" autocomplete="off">
</div>
<div class="field">
<label for="s-token">API-Token</label>
<input type="password" id="s-token" placeholder="Token aus Code.gs" autocomplete="off">
</div>
<div class="field">
<label for="s-upload">Upload-Endpoint</label>
<input type="url" id="s-upload" placeholder="https://dein-server/api/upload" autocomplete="off">
<p class="hint">Leer lassen, wenn ohne Foto gearbeitet wird.</p>
</div>
<div class="field">
<label for="s-user">Dein Name</label>
<input type="text" id="s-user" placeholder="wird als Prüfer gespeichert" autocomplete="off">
</div>
<div class="btnrow">
<button class="btn primary" id="s-save">Speichern</button>
<button class="btn" id="s-test">Verbindung testen</button>
</div>
</div>
<div class="card">
<h2>Statusregeln</h2>
<dl class="kv">
<div><dt>Audio / Bild / Sprache alle JA</dt><dd><span class="chip s-ok">Funktionsfähig</span></dd></div>
<div><dt>Teilweise NEIN</dt><dd><span class="chip s-teil">Teilweise</span></dd></div>
<div><dt>Alle bewerteten NEIN</dt><dd><span class="chip s-fehler">Fehlerhaft</span></dd></div>
<div><dt>Alle drei n.A.</dt><dd><span class="chip s-aus">Deaktiviert</span></dd></div>
<div style="border:0"><dt>Nichts erfasst</dt><dd><span class="chip s-offen">Nicht geprüft</span></dd></div>
</dl>
<p class="hint">Einzelne Felder mit „n.A.“ werden aus der Bewertung ausgeschlossen und zählen nicht als Fehler.</p>
</div>
<div class="card">
<h2>Offline-Warteschlange</h2>
<p class="hint" id="q-info" style="margin-top:0">–</p>
<div class="btnrow">
<button class="btn" id="q-flush">Jetzt senden</button>
<button class="btn ghost" id="q-clear">Verwerfen</button>
</div>
</div>
</section>
</main>
<nav>
<button class="on" data-view="erfassen">
<svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>Erfassen
</button>
<button data-view="liste">
<svg viewBox="0 0 24 24"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>Übersicht
</button>
<button data-view="setup">
<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-2.9 1.2v.1a2 2 0 1 1-4 0v-.2a1.7 1.7 0 0 0-3-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0-1.1-2.9H3a2 2 0 1 1 0-4h.2A1.7 1.7 0 0 0 4.3 6l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 2.9-1.1V2a2 2 0 1 1 4 0v.2a1.7 1.7 0 0 0 2.9 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0 1.1 2.9h.2a2 2 0 1 1 0 4h-.2a1.7 1.7 0 0 0-1.4 1z"/></svg>Setup
</button>
</nav>
<!-- Detail -->
<div class="sheet" id="detail">
<div class="bd" data-close></div>
<div class="pn" id="detail-pn"></div>
</div>
<div class="toast" id="toast"></div>
<script>
"use strict";
/* ================= Konfiguration ================= */
/* Optional hier fest eintragen – sonst über den Setup-Tab pflegen. */
var DEFAULTS = {
api: "",
token: "",
upload: "",
user: ""
};
var LS = "monitorcheck.v1";
var cfg = Object.assign({}, DEFAULTS, load(LS + ".cfg", {}));
var queue = load(LS + ".queue", []);
var items = load(LS + ".cache", []);
function load(k, fb){ try{ var v = localStorage.getItem(k); return v ? JSON.parse(v) : fb; }catch(e){ return fb; } }
function save(k, v){ try{ localStorage.setItem(k, JSON.stringify(v)); }catch(e){} }
/* ================= Statuslogik (identisch zu Code.gs) ================= */
var S = {
OK:"Funktionsfähig", TEIL:"Teilweise funktionsfähig",
FEHLER:"Fehlerhaft", AUS:"Deaktiviert", OFFEN:"Nicht geprüft"
};
var CLS = {};
CLS[S.OK]="s-ok"; CLS[S.TEIL]="s-teil"; CLS[S.FEHLER]="s-fehler";
CLS[S.AUS]="s-aus"; CLS[S.OFFEN]="s-offen";
function norm(v){
var s = String(v == null ? "" : v).trim().toUpperCase();
if(!s) return "";
if(s==="JA"||s==="J"||s==="TRUE") return "JA";
if(s==="NEIN"||s==="N"||s==="FALSE") return "NEIN";
if(s==="N.A."||s==="NA"||s==="N/A"||s==="N.A") return "n.A.";
return "";
}
function berechneStatus(a,b,c){
var w = [norm(a), norm(b), norm(c)];
var gesetzt = w.filter(function(x){ return x !== ""; });
if(!gesetzt.length) return S.OFFEN;
if(w.filter(function(x){ return x==="n.A."; }).length === 3) return S.AUS;
var bew = w.filter(function(x){ return x==="JA" || x==="NEIN"; });
if(!bew.length) return S.AUS;
var nein = bew.filter(function(x){ return x==="NEIN"; }).length;
if(nein === 0) return S.OK;
if(nein === bew.length) return S.FEHLER;
return S.TEIL;
}
/* Vereinheitlicht Statustexte aus der Tabelle – aeltere Zeilen stehen dort
ohne Umlaute ("Funktionsfaehig"). Ohne das greifen Filter und Zaehler nicht. */
function statusKanon(v){
var k = String(v == null ? "" : v).toLowerCase().trim()
.replace(/ä/g,"ae").replace(/ö/g,"oe").replace(/ü/g,"ue").replace(/ß/g,"ss");
if(k === "funktionsfaehig") return S.OK;
if(k === "teilweise funktionsfaehig") return S.TEIL;
if(k === "fehlerhaft") return S.FEHLER;
if(k === "deaktiviert") return S.AUS;
return S.OFFEN;
}
/* Kurzform für die Statistik-Kacheln */
function shortStatus(s){
if(s===S.OK) return "OK";
if(s===S.TEIL) return "Teil";
if(s===S.FEHLER) return "Fehler";
if(s===S.AUS) return "Aus";
return "Offen";
}
/* ================= Hilfen ================= */
var $ = function(sel, root){ return (root||document).querySelector(sel); };
var $$ = function(sel, root){ return Array.prototype.slice.call((root||document).querySelectorAll(sel)); };
function esc(s){
return String(s == null ? "" : s).replace(/[&<>"']/g, function(c){
return {"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c];
});
}
var toastTimer;
function toast(msg, isErr){
var t = $("#toast");
t.textContent = msg;
t.className = "toast on" + (isErr ? " err" : "");
clearTimeout(toastTimer);
toastTimer = setTimeout(function(){ t.className = "toast"; }, 2800);
}
function chip(status){
return '<span class="chip ' + (CLS[status]||"s-offen") + '">' + esc(status) + "</span>";
}
function datum(iso){
if(!iso) return "–";
var d = new Date(iso);
if(isNaN(d)) return String(iso);
return d.toLocaleString("de-DE",{day:"2-digit",month:"2-digit",year:"2-digit",hour:"2-digit",minute:"2-digit"});
}
/* ================= API ================= */
/* text/plain vermeidet den CORS-Preflight, den Apps Script nicht beantwortet. */
function api(action, payload){
if(!cfg.api) return Promise.reject(new Error("Keine Apps-Script-URL hinterlegt (Setup)."));
var body = Object.assign({ action: action, token: cfg.token }, payload || {});
return fetch(cfg.api, {
method: "POST",
redirect: "follow",
headers: { "Content-Type": "text/plain;charset=utf-8" },
body: JSON.stringify(body)
})
.then(function(r){ return r.text(); })
.then(function(txt){
var data;
try{ data = JSON.parse(txt); }
catch(e){ throw new Error("Unerwartete Antwort – Web-App-Zugriff auf „Jeder“ gesetzt?"); }
if(!data.ok) throw new Error(data.error || "Fehler");
return data;
});
}
function uploadFoto(file){
if(!cfg.upload) return Promise.reject(new Error("Kein Upload-Endpoint hinterlegt (Setup)."));
var fd = new FormData();
fd.append("datei", file, file.name || "foto.jpg");
return fetch(cfg.upload, {
method: "POST",
headers: cfg.token ? { "X-Token": cfg.token } : {},
body: fd
})
.then(function(r){ return r.json().catch(function(){ throw new Error("Upload fehlgeschlagen (" + r.status + ")"); }); })
.then(function(d){
if(!d.ok) throw new Error(d.error || "Upload fehlgeschlagen");
return d.url;
});
}
/* ================= Warteschlange ================= */
function enqueue(action, payload){
queue.push({ action: action, payload: payload, ts: Date.now() });
save(LS + ".queue", queue);
renderNet();
window.dispatchEvent(new Event("mc:queue"));
}
function flushQueue(silent){
if(!queue.length){ if(!silent) toast("Warteschlange ist leer."); return Promise.resolve(); }
if(!navigator.onLine){ if(!silent) toast("Offline – später erneut.", true); return Promise.resolve(); }
var pending = queue.slice();
var ok = 0;
return pending.reduce(function(p, job){
return p.then(function(){
return api(job.action, job.payload).then(function(){
ok++;
queue = queue.filter(function(q){ return q !== job; });
save(LS + ".queue", queue);
});
});
}, Promise.resolve())
.then(function(){
if(ok) toast(ok + " Eintrag/Einträge nachgesendet.");
renderNet();
window.dispatchEvent(new Event("mc:queue"));
return ladeListe(true);
})
.catch(function(err){
renderNet();
if(!silent) toast(err.message, true);
});
}
function renderNet(){
var el = $("#netstate");
if(!navigator.onLine){ el.className = "netstate off"; el.textContent = "offline"; return; }
if(queue.length){ el.className = "netstate queue"; el.textContent = queue.length + " wartet"; return; }
el.className = "netstate"; el.textContent = "verbunden";
}
$("#q-info") && (function(){
var upd = function(){ $("#q-info").textContent = queue.length ? queue.length + " Vorgang/Vorgänge warten auf Übertragung." : "Keine offenen Vorgänge."; };
upd();
window.addEventListener("mc:queue", upd);
})();
/* ================= Navigation ================= */
$$("nav button").forEach(function(b){
b.addEventListener("click", function(){
$$("nav button").forEach(function(x){ x.classList.toggle("on", x === b); });
$$(".view").forEach(function(v){ v.classList.toggle("on", v.id === "v-" + b.dataset.view); });
window.scrollTo(0,0);
if(b.dataset.view === "liste") ladeListe(true);
});
});
/* ================= Status-Schalter ================= */
function buildTriple(host, werte, onChange){
host.__werte = werte;
host.__onChange = onChange;
var felder = [["audio","Audio"],["bild","Bild"],["sprache","Sprache"]];
host.innerHTML = felder.map(function(f){
return '<div class="trow"><span>' + f[1] + '</span><div class="seg" data-k="' + f[0] + '">' +
["JA","NEIN","n.A."].map(function(v){
var on = norm(werte[f[0]]) === v;
return '<button type="button" data-v="' + v + '" aria-pressed="' + on + '">' + v + "</button>";
}).join("") + "</div></div>";
}).join("");
// Listener nur einmal pro Host binden – buildTriple wird beim Zuruecksetzen erneut aufgerufen.
if(host.dataset.bound === "1") return;
host.dataset.bound = "1";
host.addEventListener("click", function(ev){
var btn = ev.target.closest("button[data-v]");
if(!btn) return;
var seg = btn.parentNode, k = seg.dataset.k;
var war = btn.getAttribute("aria-pressed") === "true";
$$("button", seg).forEach(function(x){ x.setAttribute("aria-pressed", "false"); });
if(!war){ btn.setAttribute("aria-pressed","true"); host.__werte[k] = btn.dataset.v; }
else { host.__werte[k] = ""; } // erneutes Tippen hebt die Auswahl auf
host.__onChange(host.__werte);
});
}
/* ================= Erfassen ================= */
var neu = { audio:"", bild:"", sprache:"" };
var neuFile = null;
buildTriple($("#f-triple"), neu, function(w){
var st = berechneStatus(w.audio, w.bild, w.sprache);
var el = $("#f-status");
el.className = "chip " + (CLS[st] || "s-offen");
el.textContent = st;
});
$("#f-photo").addEventListener("click", function(ev){
if(ev.target.id === "f-photo-rm") return;
$("#f-file").click();
});
var vorschauUrl = null;
$("#f-file").addEventListener("change", function(){
var f = this.files && this.files[0];
if(!f) return;
neuFile = f;
if(vorschauUrl) URL.revokeObjectURL(vorschauUrl);
vorschauUrl = URL.createObjectURL(f);
var img = $("#f-photo-img");
img.src = vorschauUrl;
img.hidden = false;
$("#f-photo-ph").hidden = true;
$("#f-photo-rm").hidden = false;
});
function fotoEntfernen(){
neuFile = null;
$("#f-file").value = "";
if(vorschauUrl){ URL.revokeObjectURL(vorschauUrl); vorschauUrl = null; }
var img = $("#f-photo-img");
img.removeAttribute("src");
img.hidden = true;
$("#f-photo-ph").hidden = false;
$("#f-photo-rm").hidden = true;
}
$("#f-photo-rm").addEventListener("click", function(ev){
ev.stopPropagation();
fotoEntfernen();
});
$("#f-save").addEventListener("click", function(){
var btn = this;
var bez = $("#f-bez").value.trim();
if(!bez){ toast("Bezeichnung fehlt.", true); $("#f-bez").focus(); return; }
btn.disabled = true;
btn.textContent = "Wird gespeichert …";
var schritt = neuFile
? uploadFoto(neuFile).catch(function(err){
toast("Foto: " + err.message, true);
return "";
})
: Promise.resolve("");
schritt.then(function(url){
var payload = {
bezeichnung: bez,
standort: $("#f-ort").value.trim(),
bildUrl: url,
audio: neu.audio, bild: neu.bild, sprache: neu.sprache,
notiz: $("#f-notiz").value.trim(),
pruefer: cfg.user || ""
};
return api("create", payload).then(function(res){
toast("Angelegt: " + res.id);
resetForm();
ladeListe(true);
}).catch(function(err){
if(!navigator.onLine || /Failed to fetch|NetworkError/i.test(err.message)){
enqueue("create", payload);
toast("Offline gespeichert – wird nachgesendet.");
resetForm();
} else {
toast(err.message, true);
}
});
}).then(function(){
btn.disabled = false;
btn.textContent = "Eintrag anlegen";
});
});
function resetForm(){
$("#f-bez").value = ""; $("#f-ort").value = ""; $("#f-notiz").value = "";
neu.audio = neu.bild = neu.sprache = "";
buildTriple($("#f-triple"), neu, function(w){
var st = berechneStatus(w.audio, w.bild, w.sprache);
var el = $("#f-status");
el.className = "chip " + (CLS[st] || "s-offen");
el.textContent = st;
});
$("#f-status").className = "chip s-offen";
$("#f-status").textContent = S.OFFEN;
fotoEntfernen();
window.scrollTo(0, 0);
}
/* ================= Übersicht ================= */
var filter = "alle";
var suche = "";
var FILTERS = [["alle","Alle"],[S.OFFEN,"Nicht geprüft"],[S.FEHLER,"Fehlerhaft"],[S.TEIL,"Teilweise"],[S.OK,"Funktionsfähig"],[S.AUS,"Deaktiviert"]];
$("#filters").innerHTML = FILTERS.map(function(f){
return '<button data-f="' + esc(f[0]) + '"' + (f[0]==="alle"?' class="on"':"") + ">" + esc(f[1]) + "</button>";
}).join("");
$("#filters").addEventListener("click", function(ev){
var b = ev.target.closest("button[data-f]");
if(!b) return;
filter = b.dataset.f;
$$("#filters button").forEach(function(x){ x.classList.toggle("on", x === b); });
renderListe();
});
$("#q").addEventListener("input", function(){ suche = this.value.trim().toLowerCase(); renderListe(); });
$("#reload").addEventListener("click", function(){ ladeListe(false); });
function setzeItems(arr){
items = (arr || []).map(function(i){
i.status = statusKanon(i.status);
return i;
});
save(LS + ".cache", items);
}
function ladeListe(silent){
if(!cfg.api){ if(!silent) toast("Bitte zuerst die Verbindung einrichten.", true); renderListe(); return Promise.resolve(); }
return api("list").then(function(res){
setzeItems(res.items || []);
renderListe();
if(!silent) toast(items.length + " Einträge geladen.");
}).catch(function(err){
renderListe();
if(!silent) toast(err.message, true);
});
}
function renderListe(){
var zahl = {};
zahl[S.OK]=0; zahl[S.TEIL]=0; zahl[S.FEHLER]=0; zahl[S.AUS]=0; zahl[S.OFFEN]=0;
items.forEach(function(i){ if(zahl[i.status] !== undefined) zahl[i.status]++; else zahl[S.OFFEN]++; });
$("#stats").innerHTML = [S.OK,S.TEIL,S.FEHLER,S.AUS,S.OFFEN].map(function(s){
return '<div class="stat"><b>' + zahl[s] + "</b><span>" + esc(shortStatus(s)) + "</span></div>";
}).join("");
var gefiltert = items.filter(function(i){
if(filter !== "alle" && i.status !== filter) return false;
if(!suche) return true;
return (i.id + " " + i.bezeichnung + " " + i.standort + " " + i.notiz).toLowerCase().indexOf(suche) >= 0;
});
if(!gefiltert.length){
$("#list").innerHTML = '<div class="empty">' +
(items.length ? "Keine Treffer." : "Noch keine Einträge – oben rechts neu laden oder im Tab „Erfassen“ anlegen.") +
"</div>";
return;
}
$("#list").innerHTML = gefiltert.map(function(i){
var thumb = i.bildUrl
? '<img class="thumb" src="' + esc(i.bildUrl) + '" alt="" loading="lazy">'
: '<div class="thumb empty">kein<br>Bild</div>';
return '<button class="item" data-id="' + esc(i.id) + '">' + thumb +
'<div class="meta">' +
'<div class="idline mono">' + esc(i.id) + "</div>" +
'<div class="name">' + esc(i.bezeichnung) + "</div>" +
'<div class="sub">' + esc(i.standort || "–") + "</div>" +
"</div>" + chip(i.status) + "</button>";
}).join("");
}
$("#list").addEventListener("click", function(ev){
var b = ev.target.closest(".item");
if(b) oeffneDetail(b.dataset.id);
});
/* ================= Detail / Statusmeldung ================= */
var aktiv = null;
var aktivWerte = null;
function oeffneDetail(id){
var it = items.filter(function(x){ return x.id === id; })[0];
if(!it) return;
aktiv = it;
aktivWerte = { audio: it.audio || "", bild: it.bild || "", sprache: it.sprache || "" };
$("#detail-pn").innerHTML =
'<div class="grip"></div>' +
'<div class="card">' +
'<div style="display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px">' +
"<div><div class='idline mono' style='font-size:12px;color:var(--ink-3)'>" + esc(it.id) + "</div>" +
"<div style='font-size:18px;font-weight:650'>" + esc(it.bezeichnung) + "</div>" +
"<div style='font-size:13px;color:var(--ink-3)'>" + esc(it.standort || "–") + "</div></div>" +
chip(it.status) +
"</div>" +
(it.bildUrl ? '<img src="' + esc(it.bildUrl) + '" alt="" style="width:100%;border-radius:8px;margin-bottom:12px">' : "") +
'<div class="triple" id="d-triple"></div>' +
'<div class="preview"><span class="chip ' + (CLS[it.status]||"s-offen") + '" id="d-preview">' + esc(it.status) + "</span><small>neuer Status</small></div>" +
'<div class="field" style="margin-top:14px"><label for="d-notiz">Notiz</label><textarea id="d-notiz">' + esc(it.notiz) + "</textarea></div>" +
'<div class="btnrow"><button class="btn primary" id="d-save">Status melden</button>' +
'<button class="btn ghost" data-close>Schließen</button></div>' +
'<button class="btn ghost danger" id="d-del" style="margin-top:8px">Eintrag löschen</button>' +
"</div>" +
'<div class="card"><h2>Verlauf</h2><dl class="kv">' +
"<div><dt>Erfasst</dt><dd>" + esc(datum(it.erfasstAm)) + "</dd></div>" +
"<div><dt>Zuletzt geprüft</dt><dd>" + esc(datum(it.geprueftAm)) + "</dd></div>" +
"<div style='border:0'><dt>Prüfer</dt><dd>" + esc(it.pruefer || "–") + "</dd></div>" +
"</dl></div>";
buildTriple($("#d-triple"), aktivWerte, function(w){
var st = berechneStatus(w.audio, w.bild, w.sprache);
var el = $("#d-preview");
el.className = "chip " + (CLS[st] || "s-offen");
el.textContent = st;
});
$("#d-save").addEventListener("click", speichereStatus);
$("#d-del").addEventListener("click", loescheEintrag);
$("#detail").classList.add("on");
document.body.style.overflow = "hidden";
}
function schliesseDetail(){
$("#detail").classList.remove("on");
document.body.style.overflow = "";
aktiv = null;
}
document.addEventListener("click", function(ev){
if(ev.target.matches("[data-close]")) schliesseDetail();
});
document.addEventListener("keydown", function(ev){
if(ev.key === "Escape" && $("#detail").classList.contains("on")) schliesseDetail();
});
function speichereStatus(){
if(!aktiv) return;
var btn = $("#d-save");
var payload = {
id: aktiv.id,
audio: aktivWerte.audio, bild: aktivWerte.bild, sprache: aktivWerte.sprache,
notiz: $("#d-notiz").value.trim(),
pruefer: cfg.user || ""
};
var neuStatus = berechneStatus(payload.audio, payload.bild, payload.sprache);
btn.disabled = true;
btn.textContent = "Wird gemeldet …";
api("status", payload).then(function(res){
lokalAktualisieren(payload, res.status || neuStatus, res.geprueftAm);
toast(aktiv.id + ": " + (res.status || neuStatus));
schliesseDetail();
}).catch(function(err){
if(!navigator.onLine || /Failed to fetch|NetworkError/i.test(err.message)){
enqueue("status", payload);
lokalAktualisieren(payload, neuStatus, new Date().toISOString());
toast("Offline gespeichert – wird nachgesendet.");
schliesseDetail();
} else {
toast(err.message, true);
btn.disabled = false;
btn.textContent = "Status melden";
}
});
}
function loescheEintrag(){
if(!aktiv) return;
var it = aktiv;
if(!confirm("„" + it.id + " – " + it.bezeichnung + "“ wirklich löschen?\n\nDie Zeile wird aus der Tabelle entfernt. Das lässt sich nicht rückgängig machen.")) return;
var btn = $("#d-del");
btn.disabled = true;
btn.textContent = "Wird gelöscht …";
api("delete", { id: it.id, pruefer: cfg.user || "" }).then(function(){
items = items.filter(function(x){ return x.id !== it.id; });
save(LS + ".cache", items);
renderListe();
toast(it.id + " gelöscht.");
schliesseDetail();
}).catch(function(err){
toast(err.message, true);
btn.disabled = false;
btn.textContent = "Eintrag löschen";
});
}
function lokalAktualisieren(p, status, zeit){
items = items.map(function(i){
if(i.id !== p.id) return i;
return Object.assign({}, i, {
audio: norm(p.audio), bild: norm(p.bild), sprache: norm(p.sprache),
status: statusKanon(status), notiz: p.notiz,
geprueftAm: zeit || i.geprueftAm, pruefer: p.pruefer || i.pruefer
});
});
save(LS + ".cache", items);
renderListe();
}
/* ================= Setup ================= */
function fuelleSetup(){
$("#s-api").value = cfg.api || "";
$("#s-token").value = cfg.token || "";
$("#s-upload").value = cfg.upload || "";
$("#s-user").value = cfg.user || "";
}
fuelleSetup();
$("#s-save").addEventListener("click", function(){
cfg.api = $("#s-api").value.trim();
cfg.token = $("#s-token").value.trim();
cfg.upload = $("#s-upload").value.trim();
cfg.user = $("#s-user").value.trim();
save(LS + ".cfg", cfg);
toast("Einstellungen gespeichert.");
ladeListe(true);
});
$("#s-test").addEventListener("click", function(){
var btn = this;
cfg.api = $("#s-api").value.trim();
cfg.token = $("#s-token").value.trim();
btn.disabled = true;
api("ping").then(function(r){ toast("Verbindung ok (" + datum(r.time) + ")"); })
.catch(function(e){ toast(e.message, true); })
.then(function(){ btn.disabled = false; });
});
$("#q-flush").addEventListener("click", function(){ flushQueue(false); });
$("#q-clear").addEventListener("click", function(){
if(!queue.length){ toast("Warteschlange ist leer."); return; }
if(confirm("Wirklich " + queue.length + " nicht gesendete Vorgänge verwerfen?")){
queue = []; save(LS + ".queue", queue); renderNet();
window.dispatchEvent(new Event("mc:queue"));
toast("Warteschlange geleert.");
}
});
/* ================= Start ================= */
window.addEventListener("online", function(){ renderNet(); flushQueue(true); });
window.addEventListener("offline", renderNet);
renderNet();
setzeItems(items); // Zwischenspeicher aus aelteren Versionen vereinheitlichen
renderListe();
if(cfg.api){ flushQueue(true).then(function(){ ladeListe(true); }); }
else { $$("nav button")[2].click(); }
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.