YMS/webgui/js/shopping.js

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();
    };
}