arimelody.me/admin/static/edit-release.js

import Stateful from "/script/silver.min.js"

const releaseID = document.getElementById("release").dataset.id;
const titleInput = document.getElementById("title");
const artworkImg = document.getElementById("artwork");
const artworkInput = document.getElementById("artwork-file");
const typeInput = document.getElementById("type");
const descInput = document.getElementById("description");
const dateInput = document.getElementById("release-date");
const buynameInput = document.getElementById("buyname");
const buylinkInput = document.getElementById("buylink");
const visInput = document.getElementById("visibility");
const saveBtn = document.getElementById("save");
const deleteBtn = document.getElementById("delete");

var artworkData = artworkImg.attributes.src.value;
var edited = new Stateful(false);
var releaseData = updateData(undefined);

function updateData(old) {
    var releaseData = {
        visible: visInput.value === "true",
        title: titleInput.value,
        description: descInput.value,
        type: typeInput.value,
        releaseDate: dateInput.value,
        artwork: artworkData,
        buyname: buynameInput.value,
        buylink: buylinkInput.value,
    };

    if (releaseData && releaseData != old) {
        edited.set(true);
    }

    return releaseData;
}

function saveRelease() {
    console.table(releaseData);

    fetch("/api/v1/music/" + releaseID, {
        method: "PUT",
        body: JSON.stringify(releaseData),
        headers: { "Content-Type": "application/json" }
    }).then(res => {
        if (!res.ok) {
            res.text().then(error => {
                console.error(error);
                alert("Failed to update release: " + error);
            });
            return;
        }

        location = location;
    });
}

function deleteRelease() {
    fetch("/api/v1/music/" + releaseID, {
        method: "DELETE",
    }).then(res => {
        if (!res.ok) {
            res.text().then(error => {
                console.error(error);
                alert("Failed to delete release: " + error);
            });
            return;
        }

        location = "/admin";
    });
}

edited.onUpdate(edited => {
    saveBtn.disabled = !edited;
})

titleInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
artworkImg.addEventListener("click", () => {
    artworkInput.addEventListener("change", () => {
        if (artworkInput.files.length > 0) {
            const reader = new FileReader();
            reader.onload = e => {
                const data = e.target.result;
                artworkImg.src = data;
                artworkData = data;
                releaseData = updateData(releaseData);
            };
            reader.readAsDataURL(artworkInput.files[0]);
        }
    });
    artworkInput.click();
});
typeInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
descInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
dateInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
buynameInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
buylinkInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});
visInput.addEventListener("change", () => {
    releaseData = updateData(releaseData);
});

saveBtn.addEventListener("click", () => {
    if (!edited.get()) return;
    saveRelease();
});

deleteBtn.addEventListener("click", () => {
    if (releaseID != prompt(
        "You are about to permanently delete " + releaseID + ". " +
        "This action is irreversible. " +
        "Please enter \"" + releaseID + "\" to continue.")) return;
    deleteRelease();
});