oisdabei – Checklisten-App mit Szenarien-Verwaltung

oisdabei ist eine einfache, responsive Checklisten-Anwendung, die im Browser und in Android WebView funktioniert. Sie ermöglicht es, Checklisten zu erstellen, zu bearbeiten und mehrere Szenarien zu speichern.

---

📋 Features

• Checkliste mit Abhaken – Items abhaken und Status speichern
• Editiermodus – Punkte hinzufügen, ändern, löschen und per Drag & Drop sortieren
• Szenarien-Verwaltung – Verschiedene Listen speichern (z.B. „Urlaub", „Einkaufen", „Arbeit") und schnell wechseln
• localStorage-Persistenz – Alle Daten bleiben gespeichert, auch nach Neustart
• Responsive Design – Funktioniert auf Smartphones, Tablets und Desktop
• Keine Abhängigkeiten – Reines HTML/CSS/JavaScript, lädt schnell
• WebView-kompatibel – Läuft im Android WebView ohne externe Abhängigkeiten

---

🏗️ Architektur

Struktur

oisdabei/
├── oisdabei.html           # Haupt-App (Browser & Android WebView)
├── help.html               # Benutzer-Hilfe
├── android-app/            # Android-Projekt
│   └── app/src/main/
│       └── assets/
│           ├── oisdabei.html    # Kopie für WebView
│           └── help.html        # Kopie für WebView
├── Version                 # Zentrale Versionsdatei
├── gitupdate              # Release-Script (aktualisiert Versionen)
└── README.md              # Diese Datei

Datenfluss

Benutzer-Aktion (Button, Checkbox, Input)
         ↓
   JavaScript-Event-Listener
         ↓
   items[] & itemStates[] aktualisieren
         ↓
   saveItems() / saveState() / saveScenarios()
         ↓
   localStorage speichern
         ↓
   renderList() aufrufen (UI aktualisieren)

---

💾 localStorage-Struktur

Die App speichert folgende Keys im Browser-localStorage:

Key	Typ	Beschreibung
oisdabeiItems	JSON-Array	Die Checklisten-Texte: ["Schlüssel", "Handy", ...]
oisdabeiState	JSON-Array	Abhaken-Status: [false, true, false, ...] (boolean)
oisdabeiEditMode	boolean	Aktueller Modus: true = Editieren, false = Checkliste
oisdabeiScenarios	JSON-Object	Gespeicherte Szenarien: {"Urlaub": [...], "Arbeit": [...]}
oisdabeiActiveScenario	string	Name der aktuell geladenen Szene

Beispiel: localStorage nach Speicherung einer „Urlaub"-Szene mit 3 Items

{
  "oisdabeiItems": ["Reisepass", "Koffer", "Flugticket"],
  "oisdabeiState": [false, false, false],
  "oisdabeiScenarios": {
    "Urlaub": ["Reisepass", "Koffer", "Flugticket"],
    "Arbeit": ["Laptop", "Notizbuch"]
  },
  "oisdabeiActiveScenario": "Urlaub"
}

---

🎯 Benutzer-Anleitung

Checkliste verwenden

1. Items abhaken – Klick auf das Checkbox-Feld neben jedem Punkt
2. Reset – Alle Haken zurücksetzen (grüner Button)
3. Alle – Alle Punkte auf einmal abhaken (grüner Button)
4. Fortschritt sehen – Der Status-Text zeigt: „Noch X Sachen offen" oder „Alles im Blick!"

Liste bearbeiten

1. "Liste bearbeiten" klicken – Wechsel zum Editiermodus (Button wird zu "Fertig")
2. Punkte ändern – Input-Felder erscheinen; Text eingeben/ändern
3. Punkte hinzufügen – "Punkt hinzufügen" Button klicken
4. Punkte löschen – Im Editiermodus die "Entfernen"-Buttons nutzen
5. Sortieren – Items ziehen & ablegen (Drag & Drop)
6. "Fertig" klicken – Zurück zur normalen Checkliste

Szenarien speichern & laden

1. Hamburger-Menü ☰ öffnen (oben rechts)
2. "Speichern" klicken – Modal-Dialog für Szenennamen
3. Namen eingeben (z.B. „Urlaub") – Die aktuelle Liste wird gespeichert
4. Szene laden – Im Dropdown (unter "Szene wählen") eine Szene auswählen
5. Die Liste wird sofort geladen und alle Haken zurückgesetzt
6. Ein kurzer visueller Flash zeigt, dass die Szene geladen wurde
7. Szene löschen – Szene auswählen → "Löschen" klicken (im Menü)

Hilfe

• "Hilfe" klicken (im Hamburger-Menü) – Öffnet die help.html Seite mit ausführlicher Anleitung

---

👨‍💻 Entwickler-Anleitung

Code-Struktur (oisdabei.html)

1. HTML-Teil

• Minimales HTML mit semantischen Tags
• Alle UI-Elemente haben IDs für JavaScript-Zugriff
• Accessibility-Attribute (role, aria-hidden, etc.) für WebView-Kompatibilität

2. CSS-Teil

• Design: Modern, minimalistisch, responsive
• Breakpoints: max-width: 420px für mobile Optimierung
• Farbschema:
• Blau (#0b7cff) = Primärfarbe (Buttons, Accents)
• Grau (#5d6679, #8a94a6) = Text/Sekundär
• Hellblau (#f8fbff, #e8f5ff) = Hintergründe

3. JavaScript-Teil (ausführlich kommentiert)

Hauptfunktionen:

// === Laden ===
loadItems()        // Checklisten-Texte aus localStorage laden
loadState()        // Abhaken-Status laden
loadEditMode()     // Editier-Modus-Flag laden
loadScenarios()    // Szenarien laden

// === Speichern ===
saveItems()        // Items in localStorage schreiben
saveState()        // States in localStorage schreiben
saveScenarios()    // Szenarien in localStorage schreiben

// === Rendering ===
renderList()       // Checkliste anhand von items[] & itemStates[] aufbauen
updateStatus()     // Status-Text aktualisieren

// === Bearbeitung ===
addItem()          // Neuen Punkt hinzufügen
removeItem(index)  // Punkt entfernen
toggleEditMode()   // Zwischen Editier- und Checklisten-Modus wechseln

// === Szenarien ===
applyScenario(name)        // Szene laden
loadScenarios()            // Szenen aus localStorage laden
saveScenarios()            // Szenen speichern
flashActiveScenario()      // Visueller Hinweis (Animation)

// === Drag & Drop ===
setupDragAndDrop()         // Event-Listener konfigurieren
getDragAfterElement(c, y)  // Hilfsfunktion für Sortierung

Wie man die App erweitert

🎨 UI anpassen

1. Farben: CSS :root Variablen ändern oder direkt in den Style-Blöcken
2. Buttons: .button CSS-Klassen anpassen
3. Schriftarten: :root font-family ändern (aktuell: Inter, Roboto, Arial)

➕ Features hinzufügen

Beispiel: Export-Funktion hinzufügen

function exportScenarioAsJSON() {
    const data = {
        items: items,
        scenarios: scenarios,
        activeScenario: activeScenarioName,
        exportedAt: new Date().toISOString()
    };
    const json = JSON.stringify(data, null, 2);
    const blob = new Blob([json], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `oisdabei-export-${Date.now()}.json`;
    a.click();
}

Beispiel: Kategorien/Tags hinzufügen

Änder die items-Struktur von String zu Object:

const items = [
    { text: "Schlüssel", category: "Essentiell", priority: 1 },
    { text: "Handy", category: "Essentiell", priority: 1 },
    { text: "Jacke", category: "Kleidung", priority: 2 }
];

Dann im renderList() die Kategorien anzeigen.

📱 Android WebView Setup

1. Asset kopieren: oisdabei.html und help.html unter android-app/app/src/main/assets/ kopieren
2. In MainActivity.kt: WebView konfigurieren kotlin val webView = findViewById<WebView>(R.id.webView) webView.settings.apply { javaScriptEnabled = true domStorageEnabled = true // localStorage ermöglichen! } webView.loadUrl("file:///android_asset/oisdabei.html")

Versionierung

Die App nutzt ein zentrale Version-Datei für Releases:

Version-Datei:

Version="1.01"
Build="V1.02b 260731"

gitupdate Script: Automatisiert die Versionierung

./gitupdate -v              # Gibt Version aus
./gitupdate                 # Aktualisiert alle HTML-Dateien, committed und pushed

Das Script:

1. Liest Version und Build aus der Datei
2. Aktualisiert <meta name="app-version"> und Footer in allen 4 HTML-Dateien
3. Committed die Änderungen
4. Pushed zu SourceForge

---

🐛 Debugging

Browser-Developer-Tools

// In der Browser-Konsole (F12):
localStorage                           // Alle gespeicherten Daten anzeigen
localStorage.getItem('oisdabeiItems')  // Spezifische Items anschauen
JSON.parse(localStorage.getItem('oisdabeiScenarios'))  // Szenarien formatiert
localStorage.clear()                   // VORSICHT: Alles löschen!

Häufige Probleme

Problem	Lösung
Daten verschwinden	localStorage wird gelöscht → Browser-Cache leeren
Szenarien laden nicht	localStorage-Keys falsch geschrieben? Console Log prüfen
Drag & Drop funktioniert nicht	Nur im Editiermodus verfügbar. "Liste bearbeiten" klicken
Fehler in der Konsole	Siehe console.warn() / console.error() Ausgaben

---

🔒 Datenschutz & Sicherheit

• Lokale Speicherung: Alle Daten bleiben auf dem Gerät, keine Cloud-Verbindung
• Keine Tracking: Keine Analytics, kein Telemetry
• Open Source: Code ist vollständig sichtbar und überprüfbar
• Session-Logout: Historische Versionen durch Version-Datei und Git versioniert

---

📜 Lizenz

Apache License 2.0 – Siehe LICENSE Datei

Copyright © illulix – dev(at)illulix.biz

---

🚀 Release-Workflow

1. Version updaten: Version-Datei ändern (z.B. Build="V1.03 260801")
2. App-Features testen: In Browser und Android WebView
3. Release erstellen: bash ./gitupdate # Aktualisiert Versionen, committed, pushed git tag -a V1.03-260801 -m "Release V1.03 260801" git push origin --tags
4. Android APK bauen: bash ./rebuild-android.sh # Baut Release-APK

---

📞 Support & Kontakt

• Issues: Code-Probleme? In dieser Datei nachschauen oder Issue im Git erstellen
• Fragen zur Nutzung: Siehe help.html
• Kontakt: dev(at)illulix.biz

---

🎓 Lernressourcen

• localStorage API: MDN Web Docs
• Drag & Drop API: MDN Web Docs
• Android WebView: Android Dev Docs

---

Viel Spaß mit oisdabei! 🎉