drafter/js/app.js

import {Elm} from '../src/Main.elm';

function getSetData(db, setCode, callback) {
    const transaction = db.transaction(["sets"], "readwrite");

    const objectStore = transaction.objectStore("sets");
    const request = objectStore.get(setCode);

    request.onerror = (event) => {
        alert("Database error")
    };
    request.onsuccess = (event) => {
        if (request.result === undefined) {
            callback({code: setCode, data: null});
        } else {
            callback({code: setCode, data: request.result.data});
        }
    };
}

function deleteSetData(db, setCode, callback) {
    const transaction = db.transaction(["sets"], "readwrite");
    const objectStore = transaction.objectStore("sets");
    const request = objectStore.delete(setCode);

    request.onerror = (event) => {
        alert("Database error")
    };

    request.onsuccess = (event) => {
        callback(setCode)
    }
}

function saveSetData(db, setData) {
    const transaction = db.transaction(["sets"], "readwrite");

    const objectStore = transaction.objectStore("sets");
    const request = objectStore.add(setData);

    request.onerror = (event) => {
        alert("Database error")
    };
}

function getAllLocalSets(db, callback) {
    const transaction = db.transaction(["sets"], "readwrite");

    const objectStore = transaction.objectStore("sets");

    objectStore.getAll().onsuccess = (event) => {
        callback(event.target.result.map((set) => set.code));
    };

}

const openDBRequest = indexedDB.open("set_database", 2);

openDBRequest.onerror = (event) => {
    alert("Could not open browser database");
};

openDBRequest.onupgradeneeded = (event) => {
    console.log("Upgrading")
    const database = event.target.result;

    const objectStore = database.createObjectStore("sets", {keyPath: "code"});
}

openDBRequest.onsuccess = (event) => {
    const database = event.target.result;

    getAllLocalSets(database, (sets) => {
        const app = Elm.Main.init({
            node: document.getElementById('myapp'),
            flags: {
                sets: sets,
            }
        });

        app.ports.sendDoesSetHaveLocalData.subscribe((setCode) => {
            getSetData(database, setCode, (data) => {
                app.ports.receiveDoesSetHaveLocalData.send(JSON.stringify(data));
            })
        });

        app.ports.sendSaveLocalData.subscribe((setData) => {
            saveSetData(database, setData);
        });

        app.ports.sendDeleteLocalData.subscribe((setCode) => {
            deleteSetData(database, setCode, (setCode) => app.ports.receiveDidDeleteLocalData.send(setCode))
        });
    })
};