Implementieren der PWA, Multi-Instanzen-Passwort-Schutz und Kassen-Löschfunktion

2026-02-24 16:33:16 +01:00
parent 1a12dcd1d0
commit 8b12d17935
11 changed files with 645 additions and 153 deletions
--- a/templates/landing.html
+++ b/templates/landing.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="de">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>erdbeerhannah 🍓💶 - Start</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <style>
+        body,
+        html {
+            height: 100%;
+            background-color: #f8f9fa;
+        }
+
+        .container {
+            height: 100%;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            text-align: center;
+            padding-top: 10vh;
+        }
+    </style>
+    <link rel="manifest" href="/manifest.json">
+    <meta name="theme-color" content="#dc3545">
+    <link rel="apple-touch-icon" href="/static/icon-192x192.png">
+</head>
+
+<body>
+    <div class="container">
+        <h1 class="mb-4">Willkommen beim erdbeerrechner 🍓💶</h1>
+        <p class="lead mb-5">Erstelle deine eigene, anpassbare Kassen-Instanz für deinen Verkaufsstand.</p>
+        <form method="post" class="bg-white p-4 shadow-sm rounded" style="max-width: 400px; width: 100%;">
+            <div class="form-group text-left">
+                <label for="password">Admin Passwort (optional)</label>
+                <input type="password" class="form-control" name="password" id="password" placeholder="Passwort...">
+                <small class="form-text text-muted">Dieses Passwort wird für den /admin Bereich benötigt.</small>
+            </div>
+            <button type="submit" class="btn btn-primary btn-lg shadow-sm w-100">Neue Kasse erstellen</button>
+        </form>
+
+        <div class="mt-5 w-100" id="saved-instances-container" style="display: none; max-width: 500px;">
+            <h4 class="mb-3 text-secondary">Gespeicherte Kassen:</h4>
+            <ul class="list-group shadow-sm" id="saved-instances-list">
+            </ul>
+        </div>
+        <div class="mt-5 text-muted">
+            <small>Version: {{ version }}</small>
+        </div>
+    </div>
+    <script>
+        if ('serviceWorker' in navigator) {
+            window.addEventListener('load', () => {
+                navigator.serviceWorker.register('/sw.js');
+            });
+        }
+
+        document.addEventListener("DOMContentLoaded", () => {
+            let saved = JSON.parse(localStorage.getItem('erdbeerkassen')) || [];
+            if (saved.length > 0) {
+                document.getElementById('saved-instances-container').style.display = 'block';
+                const list = document.getElementById('saved-instances-list');
+
+                [...saved].reverse().forEach(instance => {
+                    const li = document.createElement('li');
+                    li.className = 'list-group-item d-flex justify-content-between align-items-center flex-wrap text-left';
+
+                    const link = document.createElement('a');
+                    link.href = '/' + instance.id;
+                    link.textContent = 'Kasse ' + instance.id.substring(0, 8);
+                    link.className = 'font-weight-bold flex-grow-1 text-decoration-none';
+
+                    const btnGroup = document.createElement('div');
+
+                    const deleteBtn = document.createElement('button');
+                    deleteBtn.className = 'btn btn-sm btn-outline-danger mr-2';
+                    deleteBtn.textContent = '🗑️';
+                    deleteBtn.title = 'Aus Liste entfernen';
+                    deleteBtn.onclick = () => {
+                        saved = saved.filter(i => i.id !== instance.id);
+                        localStorage.setItem('erdbeerkassen', JSON.stringify(saved));
+                        li.remove();
+                        if (list.children.length === 0) {
+                            document.getElementById('saved-instances-container').style.display = 'none';
+                        }
+                    };
+
+                    const shareBtn = document.createElement('button');
+                    shareBtn.className = 'btn btn-sm btn-outline-primary';
+                    shareBtn.textContent = '📤 Teilen';
+                    shareBtn.onclick = () => {
+                        const url = window.location.origin + '/' + instance.id;
+                        if (navigator.share) {
+                            navigator.share({
+                                title: 'erdbeerrechner 🍓💶',
+                                url: url
+                            }).catch(console.error);
+                        } else {
+                            navigator.clipboard.writeText(url);
+                            alert('URL in die Zwischenablage kopiert!');
+                        }
+                    };
+
+                    btnGroup.appendChild(deleteBtn);
+                    btnGroup.appendChild(shareBtn);
+
+                    li.appendChild(link);
+                    li.appendChild(btnGroup);
+                    list.appendChild(li);
+                });
+            }
+        });
+    </script>
+</body>
+
+</html>