my god...it's finally done

admin/static/edit-artist.css

@@ -0,0 +1,151 @@
+h1 {
+    margin: 0 0 1em 0;
+}
+
+#artist {
+    margin-bottom: 1em;
+    padding: 1.5em;
+    display: flex;
+    flex-direction: row;
+    gap: 1.2em;
+
+    border-radius: .5em;
+    background: #f8f8f8f8;
+    border: 1px solid #808080;
+}
+
+.artist-avatar {
+    width: 200px;
+    text-align: center;
+}
+.artist-avatar img {
+    width: 100%;
+    aspect-ratio: 1;
+}
+.artist-avatar img:hover {
+    outline: 1px solid #808080;
+    cursor: pointer;
+}
+.artist-avatar #remove-avatar {
+    padding: .3em .4em;
+}
+
+.artist-info {
+    margin: -1em 0 0 0;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.attribute-header {
+    margin: 1em 0 .2em 0;
+    opacity: .5;
+}
+
+.artist-name {
+    margin: 0;
+}
+
+input[type="text"] {
+    width: calc(100% - .4em);
+    padding: .1em .2em;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    background: #ffffff;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    outline: none;
+}
+input[type="text"]:hover {
+    border-color: #80808080;
+}
+input[type="text"]:active,
+input[type="text"]:focus {
+    border-color: #808080;
+}
+
+button, .button {
+    padding: .5em .8em;
+    font-family: inherit;
+    font-size: inherit;
+    border-radius: .5em;
+    border: 1px solid #a0a0a0;
+    background: #f0f0f0;
+    color: inherit;
+}
+button:hover, .button:hover {
+    background: #fff;
+    border-color: #d0d0d0;
+}
+button:active, .button:active {
+    background: #d0d0d0;
+    border-color: #808080;
+}
+
+button {
+    color: inherit;
+}
+button.save {
+    background: #6fd7ff;
+    border-color: #6f9eb0;
+}
+button.delete {
+    background: #ff7171;
+    border-color: #7d3535;
+}
+button:hover {
+    background: #fff;
+    border-color: #d0d0d0;
+}
+button:active {
+    background: #d0d0d0;
+    border-color: #808080;
+}
+button[disabled] {
+    background: #d0d0d0 !important;
+    border-color: #808080 !important;
+    opacity: .5;
+    cursor: not-allowed !important;
+}
+
+a.delete {
+    color: #d22828;
+}
+
+.artist-actions {
+    margin-top: auto;
+    display: flex;
+    gap: .5em;
+    flex-direction: row;
+    justify-content: right;
+}
+
+.card-title a.button {
+    text-decoration: none;
+}
+
+.credit {
+    margin: 1em 0;
+    padding: .5em;
+    display: flex;
+    flex-direction: row;
+    gap: 1em;
+    align-items: center;
+    background: #f8f8f8;
+    border-radius: 8px;
+    border: 1px solid #808080;
+}
+
+.release-artwork {
+    width: 64px;
+    height: min-content;
+    border-radius: 4px;
+}
+
+.credit-info h3,
+.credit-info p {
+    margin: 0;
+    font-size: .9em;
+}

admin/static/edit-artist.js

@@ -0,0 +1,79 @@
+const artistID = document.getElementById("artist").dataset.id;
+const nameInput = document.getElementById("name");
+const avatarImg = document.getElementById("avatar");
+const removeAvatarBtn = document.getElementById("remove-avatar");
+const avatarInput = document.getElementById("avatar-file");
+const websiteInput = document.getElementById("website");
+const saveBtn = document.getElementById("save");
+const deleteBtn = document.getElementById("delete");
+
+saveBtn.addEventListener("click", () => {
+    fetch("/api/v1/artist/" + artistID, {
+        method: "PUT",
+        body: JSON.stringify({
+            name: nameInput.value,
+            website: websiteInput.value,
+            avatar: avatarImg.src,
+        }),
+        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;
+    });
+});
+
+deleteBtn.addEventListener("click", () => {
+    if (artistID != prompt(
+        "You are about to permanently delete " + artistID + ". " +
+        "This action is irreversible. " +
+        "Please enter \"" + artistID + "\" to continue.")) return;
+    fetch("/api/v1/artist/" + artistID, {
+        method: "DELETE",
+    }).then(res => {
+        if (!res.ok) {
+            res.text().then(error => {
+                console.error(error);
+                alert("Failed to delete release: " + error);
+            });
+            return;
+        }
+
+        location = "/admin";
+    });
+});
+
+[nameInput, websiteInput].forEach(input => {
+    input.addEventListener("change", () => {
+        saveBtn.disabled = false;
+    });
+    input.addEventListener("keypress", () => {
+        saveBtn.disabled = false;
+    });
+});
+
+avatarImg.addEventListener("click", () => {
+    avatarInput.addEventListener("change", () => {
+        if (avatarInput.files.length > 0) {
+            const reader = new FileReader();
+            reader.onload = e => {
+                const data = e.target.result;
+                avatarImg.src = data;
+                saveBtn.disabled = false;
+            };
+            reader.readAsDataURL(avatarInput.files[0]);
+        }
+    });
+    avatarInput.click();
+});
+
+removeAvatarBtn.addEventListener("click", () => {
+    avatarImg.src = "/img/default-avatar.png"
+    saveBtn.disabled = false;
+});

admin/static/edit-release.js

@@ -1,5 +1,3 @@
-import Stateful from "/script/silver.min.js"
-
 const releaseID = document.getElementById("release").dataset.id;
 const titleInput = document.getElementById("title");
 const artworkImg = document.getElementById("artwork");

admin/static/edit-track.css

@@ -6,7 +6,7 @@ h1 {
 
 #track {
     margin-bottom: 1em;
-    padding: 1.5em;
+    padding: .5em 1.5em 1.5em 1.5em;
     display: flex;
     flex-direction: row;
     gap: 1.2em;
@@ -34,7 +34,7 @@ h1 {
 }
 
 #title {
-    width: 100%;
+    width: calc(100% - .4em);
     padding: .1em .2em;
 }
 

admin/static/index.js

@@ -1,4 +1,5 @@
 const newReleaseBtn = document.getElementById("create-release");
+const newArtistBtn = document.getElementById("create-artist");
 const newTrackBtn = document.getElementById("create-track");
 
 newReleaseBtn.addEventListener("click", event => {
@@ -24,6 +25,30 @@ newReleaseBtn.addEventListener("click", event => {
     });
 });
 
+newArtistBtn.addEventListener("click", event => {
+    event.preventDefault();
+    const id = prompt("Enter an ID for this artist:");
+    if (id == null || id == "") return;
+
+    fetch("/api/v1/artist", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({id})
+    }).then(res => {
+        res.text().then(text => {
+            if (res.ok) {
+                location = "/admin/artist/" + id;
+            } else {
+                alert("Request failed: " + text);
+                console.error(text);
+            }
+        })
+    }).catch(err => {
+        alert("Failed to create artist. Check the console for details.");
+        console.error(err);
+    });
+});
+
 newTrackBtn.addEventListener("click", event => {
     event.preventDefault();
     const title = prompt("Enter an title for this track:");
@@ -43,7 +68,7 @@ newTrackBtn.addEventListener("click", event => {
             }
         })
     }).catch(err => {
-        alert("Failed to create release. Check the console for details.");
+        alert("Failed to create track. Check the console for details.");
         console.error(err);
     });
 });