Refs #4 Batch write meta (WIP)

router/api.js

@@ -29,13 +29,17 @@ module.exports = { register: app => {
     });
     app.router.patch("/api/media/:id/meta/:key", async (req, res) => {
         app.routerUtils.onApiRequest(req, res);
-        if (!req.params.id ||!req.params.key || !req.body)
+        if (!req.params.id ||!req.params.key || !Number.isInteger(req.body?.value?.length))
             return app.routerUtils.onBadRequest(res);
         let data = await MediaService.fetchOne(app, req.params.id, req.sessionObj?.accessList);
         if (!data || data.accessType !== ACCESS_GRANT.write)
             return app.routerUtils.onPageNotFound(res);
-        let newMediaItemMedia = new MediaFileMetaModel(data.md5sum, req.params.key, req.body.value, false);
-        await app.databaseHelper.upsertOne(newMediaItemMedia);
+        if (!req.body.value) {
+            await app.databaseHelper.remove(MediaFileMetaModel, { md5sum: data.md5sum, key: req.params.key, fromFile: 0 });
+        } else {
+            let newMediaItemMedia = new MediaFileMetaModel(data.md5sum, req.params.key, req.body.value, false);
+            await app.databaseHelper.upsertOne(newMediaItemMedia);
+        }
         res.end();
     });
     app.router.get("/api/media/list", async (req, res) => {

static/public/css/style.css

@@ -44,12 +44,17 @@
     transition: scale 700ms;
 }
 
-#pch-mediaList > .pch-image:hover input,
-    #pch-mediaList.selection > .pch-image input {
+#pch-mediaList.selection > .pch-image input,
+#pch-mediaList.selection > .pch-image button {
     visibility: visible;
 }
 
-#pch-mediaList > .pch-image input {
+#pch-mediaList > .pch-image:hover input {
+    visibility: visible;
+}
+
+#pch-mediaList > .pch-image input,
+#pch-mediaList > .pch-image button {
     display: inline-block;
     visibility: hidden;
     position: absolute;
@@ -60,6 +65,10 @@
     border-radius: 1rem;
 }
 
+#pch-mediaList > .pch-image button {
+    left: 5rem;
+}
+
 #pch-mediaList > h3, #pch-mediaList > h4 {
     text-align: left;
 }
@@ -85,8 +94,8 @@
     visibility: hidden;
 }
 
-#pch-fullPageMedia.hidden {
-    display: none;
+.hidden {
+    display: none !important;
 }
 
 #pch-fullPageMedia {

static/public/js/medias.js

@@ -152,6 +152,10 @@ class MediaStorage extends EventTarget
         return this.getMediaBetweenIndexes(aIndex, bIndex);
     }
 
+    getMediaLocal(md5sum) {
+        return this.medias.find(x => x.md5sum === md5sum);
+    }
+
     async getMedia(md5sum) {
         let media = this.medias.find(x => x.md5sum === md5sum);
         if (media)

static/public/js/uiMedia.js

@@ -18,10 +18,17 @@ $(() => {
         if (mediaItem.ui)
             return mediaItem.ui;
         let checkbox = document.createElement("input");
+        let editButton = document.createElement("button");
         let img = document.createElement("img");
         let container = document.createElement("li");
         let loadingImg = document.createElement("div");
         checkbox.type = "checkbox";
+        editButton.type = "button";
+        if (!mediaItem.writeAccess)
+            editButton.classList.add("hidden");
+        let editButtonSpan = document.createElement("span");
+        editButtonSpan.className = "bi bi-pen";
+        editButton.appendChild(editButtonSpan);
         container.classList.add("pch-image");
         container.classList.add("loading");
         loadingImg.classList.add("spinner");
@@ -40,6 +47,7 @@ $(() => {
         container.appendChild(loadingImg);
         container.appendChild(img);
         container.appendChild(checkbox);
+        container.appendChild(editButton);
         let setSelectionCheckboxValue = function(media, value) {
             let checked = media.ui.checkbox.checked;
             let indexInSelection = selectedThumbnails.indexOf(media.md5sum);
@@ -71,6 +79,21 @@ $(() => {
             }
             lastSelection = mediaItem;
         }
+        editButton.addEventListener("click", e => {
+            e.stopPropagation();
+            if (!checkbox.checked) {
+                checkbox.checked = true;
+                setSelectionCheckboxValue(mediaItem, true);
+            }
+            let sel = selectedThumbnails.map(x => MediaStorage.Instance.getMediaLocal(x)).filter(x => x.writeAccess);
+            if (sel.length === 1 && sel[0].md5sum === mediaItem.md5sum) {
+                checkbox.checked = false;
+                setSelectionCheckboxValue(mediaItem, false);
+                document.location.hash = mediaItem.md5sum;
+                return;
+            }
+            console.log(sel);
+        });
         container.addEventListener("click", () => {
             if (selectedThumbnails.length || lastKeyboardEvent?.ctrlKey) {
                 let value = !checkbox.checked;
@@ -152,7 +175,7 @@ $(() => {
     function displayMeta(key, value, isRo) {
         let li = document.createElement("li");
         let type = value?.type || null;
-        let val = (value?.value ? value.value : value);
+        let val = (value?.value !== undefined ? value.value : value);
         if (!val && val !== '')
             return null;
         if (type === 'date')