User management with native gui and further improvements

2026-08-17 10:37:19 +02:00
parent 41556cfe73
commit a3c8b4083d
24 changed files with 1004 additions and 159 deletions
@@ -0,0 +1,167 @@
+let db;
+
+const request = indexedDB.open("shopping", 1);
+
+request.onupgradeneeded = function(event) {
+    db = event.target.result;
+    const store = db.createObjectStore(
+        "items",
+        { keyPath: "provid" }
+    );
+};
+
+request.onsuccess = function(event) {
+    db = event.target.result;
+    checkDatabase();
+};
+
+function checkDatabase()
+{
+    let tx = db.transaction(
+        "items",
+        "readonly"
+    );
+    let store = tx.objectStore("items");
+    let request = store.count();
+    request.onsuccess = function(){
+        if (request.result > 0) {
+            renderLists();
+        } else {
+            importList(initialList);
+        }
+    };
+}
+
+function importList(list)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    list.forEach(item => {
+        item.done = false;
+        store.put(item);
+    });
+    tx.oncomplete = function(){
+        renderLists();
+    };
+}
+
+function renderLists()
+{
+    let tx = db.transaction(
+        "items",
+        "readonly"
+    );
+    let store = tx.objectStore("items");
+    let request = store.getAll();
+    request.onsuccess = function(){
+        let pending = "";
+        let completed = "";
+        request.result.forEach(item => {
+            let html = `
+            <div class="item">
+                <span class="name">
+                    ${item.provname}
+                </span>
+
+                <span>
+                    ${item.buy} ${item.unit}
+                </span>
+
+                <button onclick="completeItem(${item.provid})">
+                    ✓
+                </button>
+            </div>
+            `;
+            if (item.completed) {
+                completed += html;
+            } else {
+                pending += html;
+            }
+        });
+        document.getElementById("shoppingList").innerHTML = pending || "No items";
+        document.getElementById("completedList").innerHTML = completed || "No completed items";
+    };
+}
+
+function plus(id)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    let req = store.get(id);
+    req.onsuccess = function(){
+        let item = req.result;
+        item.buy++;
+        store.put(item);
+        renderLists();
+    };
+}
+
+function minus(id)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    let req = store.get(id);
+    req.onsuccess = function(){
+        let item = req.result;
+        item.buy--;
+        store.put(item);
+        renderLists();
+    };
+}
+
+function completeItem(id)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    let request = store.get(id);
+    request.onsuccess = function(){
+        let item = request.result;
+        item.completed = true;
+        store.put(item);
+        renderLists();
+    };
+}
+
+function undo(id)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    let req = store.get(id);
+    req.onsuccess = function(){
+        let item = req.result;
+        item.done = false;
+        store.put(item);
+        showList();
+    };
+}
+
+function done(id)
+{
+    let tx = db.transaction(
+        "items",
+        "readwrite"
+    );
+    let store = tx.objectStore("items");
+    let req = store.get(id);
+    req.onsuccess = function(){
+        let item = req.result;
+        item.done = true;
+        store.put(item);
+        showList();
+    };
+}