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

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

const releaseID = document.getElementById("release").dataset.id;
const title_input = document.getElementById("title");
const artwork_img = document.getElementById("artwork");
const artwork_input = document.getElementById("artwork-file");
const type_input = document.getElementById("type");
const desc_input = document.getElementById("description");
const date_input = document.getElementById("release-date");
const buyname_input = document.getElementById("buyname");
const buylink_input = document.getElementById("buylink");
const vis_input = document.getElementById("visibility");
const save_btn = document.getElementById("save");

var artwork_data = artwork_img.attributes.src.value;

var token = atob(localStorage.getItem("arime-token"));

var edited = new Stateful(false);

var release_data = update_data(undefined);

function update_data(old) {
    var release_data = {
        visible: vis_input.value === "true",
        title: title_input.value,
        description: desc_input.value,
        type: type_input.value,
        releaseDate: date_input.value,
        artwork: artwork_data,
        buyname: buyname_input.value,
        buylink: buylink_input.value,
    };

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

    return release_data;
}

function save_release() {
    console.table(release_data);

    (async () => {
        const res = await fetch(
            "/api/v1/music/" + releaseID, {
            method: "PUT",
            body: JSON.stringify(release_data),
            headers: {
                "Content-Type": "application/json",
                "Authorisation": "Bearer " + token,
            },
        });

        if (!res.ok) {
            const text = await res.text();
            console.error(text);
            alert(text);
            return;
        }

        location = location;
    })();
}

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

title_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
artwork_img.addEventListener("click", () => {
    artwork_input.addEventListener("change", () => {
        if (artwork_input.files.length > 0) {
            const reader = new FileReader();
            reader.onload = e => {
                const data = e.target.result;
                artwork_img.src = data;
                artwork_data = data;
                release_data = update_data(release_data);
            };
            reader.readAsDataURL(artwork_input.files[0]);
        }
    });
    artwork_input.click();
});
type_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
desc_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
date_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
buyname_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
buylink_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});
vis_input.addEventListener("change", () => {
    release_data = update_data(release_data);
});

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

    save_release();
})