From fca45b7220f96247f14b1c95b5444c41e3eff9a0 Mon Sep 17 00:00:00 2001 From: demitrix Date: Fri, 3 Jan 2025 16:05:01 +0000 Subject: [PATCH 1/2] Rework metadata scraping flow Redesign UI of meta results to allow selecting which elements of metainfo to save. Save button added to push changes to book record as cover is now optional to update. New save button does not close modal, allowing user to scrape multiple results. --- cps/static/css/style.css | 97 ++++++++++++++++++++++++++++++++++-- cps/static/js/get_meta.js | 56 +++++++++++++-------- cps/templates/book_edit.html | 78 +++++++++++++++++++++-------- 3 files changed, 186 insertions(+), 45 deletions(-) diff --git a/cps/static/css/style.css b/cps/static/css/style.css index 0bab5b5368..b127a52c66 100644 --- a/cps/static/css/style.css +++ b/cps/static/css/style.css @@ -382,14 +382,103 @@ input.pill:not(:checked) + label .glyphicon { display: none; } overflow-y: scroll; } -.media-list { padding-right: 15px; } +#meta-info #book-list { + list-style-type: none; + padding: 0px 15px 0px 0px; +} + +#meta-info #book-list .media { + display: flex; + background-color: #f9f9f9; + margin-bottom: 20px; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + +#meta-info #book-list .media .media-image { + width: 200px; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + position: relative; +} + +#meta-info #book-list .media .media-image-wrapper { + position: relative; + width: 100%; +} + +#meta-info #book-list .media .media-image img { + max-width: 100%; + height: auto; + border-radius: 4px; + display: block; +} +#meta-info #book-list .media .media-image .image-dimensions { + position: absolute; + bottom: 5px; + right: 5px; + background-color: rgba(0, 0, 0, 0.7); + color: white; + padding: 4px 8px; + border-radius: 4px; + font-size: 12px; +} +#meta-info #book-list .media .media-image .image-dimensions.larger { + background-color: rgba(0, 160, 0, 0.7); +} +#meta-info #book-list .media .media-image .image-dimensions.smaller { + background-color: rgba(160, 0, 0, 0.7); +} +#meta-info #book-list .media .media-image input { + position: absolute; + top: 5px; + right: 5px; + width: 20px; + height: 20px; +} -#meta-info img { - max-height: 150px; - max-width: 100px; +#meta-info #book-list .media .media-image button { + margin-top: 10px; + /* padding: 8px 16px; */ cursor: pointer; } +#meta-info #book-list .media .media-image div { + margin-top: 10px; + font-size: 0.9em; + color: #666; + text-align: center; +} + +#meta-info #book-list .media .media-body { + flex: 1; + padding: 20px; + display: grid; + grid-template-columns: auto 1fr; + gap: 10px; + align-content: start; +} + +#meta-info #book-list .media .media-body dt { + font-weight: bold; + color: #333; + display: flex; + align-items: center; +} + +#meta-info #book-list .media .media-body dt input { + margin-right: 5px; + margin-top: 0px; +} + +#meta-info #book-list .media .media-body dd { + margin: 0; + color: #666; +} + .padded-bottom { margin-bottom: 15px; } .upload-format-input-text { display: initial; } #btn-upload-format { display: none; } diff --git a/cps/static/js/get_meta.js b/cps/static/js/get_meta.js index df4119dca2..d2171909d7 100644 --- a/cps/static/js/get_meta.js +++ b/cps/static/js/get_meta.js @@ -37,27 +37,43 @@ $(function () { return presentArray } - function populateForm (book) { - tinymce.get("comments").setContent(book.description); - var uniqueTags = getUniqueValues('tags', book) + function populateForm (book, idx) { + var updateItems = Object.fromEntries(Array.from(document.querySelectorAll(`[data-meta-index="${idx}"]`)).map((value)=>[value.dataset.metaValue, value.checked])) + if (updateItems.description){ + tinymce.get("comments").setContent(book.description); + } + if (updateItems.tags){ + var uniqueTags = getUniqueValues('tags', book) + $("#tags").val(uniqueTags.join(", ")); + } var uniqueLanguages = getUniqueValues('languages', book) - var ampSeparatedAuthors = (book.authors || []).join(" & "); - $("#authors").val(ampSeparatedAuthors); - $("#title").val(book.title); - $("#tags").val(uniqueTags.join(", ")); + if (updateItems.authors){ + var ampSeparatedAuthors = (book.authors || []).join(" & "); + $("#authors").val(ampSeparatedAuthors); + } + if (updateItems.titles){ + $("#title").val(book.title); + } $("#languages").val(uniqueLanguages.join(", ")); $("#rating").data("rating").setValue(Math.round(book.rating)); - if(book.cover && $("#cover_url").length){ + + if(updateItems.cover && book.cover && $("#cover_url").length){ $(".cover img").attr("src", book.cover); $("#cover_url").val(book.cover); } - $("#pubdate").val(book.publishedDate); - $("#publisher").val(book.publisher); - if (typeof book.series !== "undefined") { + if (updateItems.pubDate){ + $("#pubdate").val(book.publishedDate); + } + if (updateItems.publisher){ + $("#publisher").val(book.publisher); + } + if (updateItems.series && typeof book.series !== "undefined") { $("#series").val(book.series); + } + if (updateItems.series_index && typeof book.series_index !== "undefined"){ $("#series_index").val(book.series_index); } - if (typeof book.identifiers !== "undefined") { + if (updateItems.identifiers && typeof book.identifiers !== "undefined") { populateIdentifiers(book.identifiers) } } @@ -94,10 +110,10 @@ $(function () { success: function success(data) { if (data.length) { $("#meta-info").html(""); - data.forEach(function(book) { - var $book = $(templates.bookResult(book)); - $book.find("img").on("click", function () { - populateForm(book); + data.forEach(function(book,idx) { + var $book = $(templates.bookResult({"book":book,"index":idx})); + $book.find("button").on("click", function () { + populateForm(book,idx); }); $("#book-list").append($book); }); @@ -150,10 +166,10 @@ $(function () { data: JSON.stringify(params), success: function success(data) { element.data("initial", "true"); - data.forEach(function(book) { - var $book = $(templates.bookResult(book)); - $book.find("img").on("click", function () { - populateForm(book); + data.forEach(function(book,idx) { + var $book = $(templates.bookResult({"book":book,"index":idx})); + $book.find("button").on("click", function () { + populateForm(book,idx); }); $("#book-list").append($book); }); diff --git a/cps/templates/book_edit.html b/cps/templates/book_edit.html index 615b40c2e8..1b7cb0ef34 100644 --- a/cps/templates/book_edit.html +++ b/cps/templates/book_edit.html @@ -263,28 +263,56 @@