From aa13e25cca3dc5186679e83462f3eb78a1944500 Mon Sep 17 00:00:00 2001 From: Kun Fang Date: Thu, 29 Aug 2024 15:44:12 -0400 Subject: [PATCH 1/2] feat: initialize image upload UI - remove "instrument-detail" page - add two buttons on each instrument card: "Upload new images" & "View on wikidata" - initialize image upload modal UI Refs: #150 --- .../static/instruments/css/index.css | 77 +++++++++ .../static/instruments/js/ImageUpload.js | 69 ++++++++ .../static/instruments/js/InstrumentDetail.js | 41 ----- .../templates/instruments/detail.html | 157 ------------------ .../instruments/includes/masonryView.html | 23 ++- .../instruments/includes/stdView.html | 23 ++- .../instruments/includes/uploadImgModal.html | 42 +++++ .../templates/instruments/index.html | 3 + .../instruments/views/instrument_detail.py | 29 ---- .../apps/instruments/views/instrument_list.py | 4 +- web-app/django/VIM/urls.py | 2 - 11 files changed, 230 insertions(+), 240 deletions(-) create mode 100644 web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js delete mode 100644 web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js delete mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/detail.html create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html delete mode 100644 web-app/django/VIM/apps/instruments/views/instrument_detail.py diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css index cbd6a2f..155bee5 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css @@ -91,6 +91,83 @@ hr { background-color: #faf1e4; } +.instrument-img-container:hover .instrument-img { + opacity: 0.3; +} + +.instrument-img { + opacity: 1; + display: block; + width: 100%; + height: auto; + transition: 0.5s ease; + backface-visibility: hidden; +} + +.instrument-img-container:hover .middle-button-group { + opacity: 1; +} + +.middle-button-group { + transition: 0.5s ease; + opacity: 0; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + text-align: center; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: space-around; + width: max-content; +} + +.middle-button-group .btn { + background-color: #435334; + border: 1px solid #435334; + color: white; + font-size: 14px; + margin-bottom: 6px; +} + +.middle-button-group .btn:hover { + background-color: #9eb384; + border: 1px solid #9eb384; + color: white; +} + +.modal-btn { + background-color: #435334; + border: 1px solid #435334; +} + +.modal-btn:hover { + background-color: #9eb384; + border: 1px solid #9eb384; +} + +#instrumentNameInModal { + font-weight: bold; + color: #435334; +} + +#previewImages { + display: flex; + flex-wrap: wrap; +} + +#previewImages .col-3 { + margin-bottom: 15px; +} + +#previewImages img { + width: 100%; + height: auto; + border-radius: 5px; +} + .card-title { color: #435334; } diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js b/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js new file mode 100644 index 0000000..87b9b52 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js @@ -0,0 +1,69 @@ +function displaySelectedImage(event, elementId) { + const selectedImage = document.getElementById(elementId); + const fileInput = event.target; + + if (fileInput.files && fileInput.files[0]) { + const reader = new FileReader(); + + reader.onload = function (e) { + selectedImage.src = e.target.result; + }; + + reader.readAsDataURL(fileInput.files[0]); + } +} + +// Get the modal element +var uploadImagesModal = document.getElementById('uploadImagesModal'); + +uploadImagesModal.addEventListener('show.bs.modal', function (event) { + var button = event.relatedTarget; + var instrumentName = button.getAttribute('data-instrument-name'); + var instrumentWikidataId = button.getAttribute('data-instrument-wikidata-id'); + var instrumentNameInModal = uploadImagesModal.querySelector( + '#instrumentNameInModal' + ); + instrumentNameInModal.textContent = instrumentName; + + var instrumentWikidataIdInModal = uploadImagesModal.querySelector( + '#instrumentWikidataId' + ); + instrumentWikidataIdInModal.textContent = instrumentWikidataId; +}); + +document + .getElementById('imageFiles') + .addEventListener('change', function (event) { + var previewContainer = document.getElementById('previewImages'); + previewContainer.innerHTML = ''; // Clear existing previews + + var files = event.target.files; + + for (var i = 0; i < files.length; i++) { + var file = files[i]; + + // Ensure that the file is an image + if (file.type.startsWith('image/')) { + var reader = new FileReader(); + + reader.onload = (function (file) { + return function (e) { + var colDiv = document.createElement('div'); + colDiv.className = 'col-3'; + + var img = document.createElement('img'); + img.src = e.target.result; + img.className = 'img-thumbnail'; + img.alt = file.name; + img.style.maxHeight = '150px'; + img.style.objectFit = 'cover'; + + colDiv.appendChild(img); + previewContainer.appendChild(colDiv); + }; + })(file); + + reader.readAsDataURL(file); + } + } + }); diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js deleted file mode 100644 index c868191..0000000 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js +++ /dev/null @@ -1,41 +0,0 @@ -document.addEventListener('DOMContentLoaded', function () { - const editButtons = document.querySelectorAll('.btn.edit'); - const cancelButtons = document.querySelectorAll('.btn.cancel'); - const publishButtons = document.querySelectorAll('.btn.publish'); - - editButtons.forEach((button) => { - button.addEventListener('click', function () { - const parentTd = this.closest('td'); - parentTd.querySelector('.view-field').style.display = 'none'; - parentTd.querySelector('.edit-field').style.display = 'inline-block'; - parentTd.querySelector('.btn.cancel').style.display = 'inline-block'; - parentTd.querySelector('.btn.publish').style.display = 'inline-block'; - this.style.display = 'none'; - }); - }); - - cancelButtons.forEach((button) => { - button.addEventListener('click', function () { - const parentTd = this.closest('td'); - parentTd.querySelector('.view-field').style.display = 'inline'; - parentTd.querySelector('.edit-field').style.display = 'none'; - parentTd.querySelector('.btn.edit').style.display = 'inline-block'; - parentTd.querySelector('.btn.publish').style.display = 'none'; - this.style.display = 'none'; - }); - }); - - publishButtons.forEach((button) => { - button.addEventListener('click', function () { - const parentTd = this.closest('td'); - const newValue = parentTd.querySelector('.edit-field').value; - // TODO: request to update the value on the server - parentTd.querySelector('.view-field').textContent = newValue; - parentTd.querySelector('.view-field').style.display = 'inline'; - parentTd.querySelector('.edit-field').style.display = 'none'; - parentTd.querySelector('.btn.edit').style.display = 'inline-block'; - this.style.display = 'none'; - parentTd.querySelector('.btn.cancel').style.display = 'none'; - }); - }); -}); diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html deleted file mode 100644 index 2fe1dc7..0000000 --- a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html +++ /dev/null @@ -1,157 +0,0 @@ -{% extends "base.html" %} - -{% load static %} - -{% block title %} - Instrument Detail -{% endblock title %} - -{% block css_files %} - - -{% endblock css_files %} - -{% block content %} -
-
-

- {% for instrumentname in instrument_names %} - {% if instrumentname.language.en_label == active_language.en_label %} - {{ instrumentname.name|title }} - {% endif %} - {% endfor %} -

-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
Wikidata ID -
-
- {{ instrument.wikidata_id }} -
-
-
Hornbostel-Sachs Classification -
-
- {{ instrument.hornbostel_sachs_class }} -
-
-
MIMO Classification -
-
- {{ instrument.mimo_class }} -
-
-
Instrument Names in Different Languages - - - - - - - - - - {% for instrumentname in instrument_names %} - - - - - - {% endfor %} - -
- Language - - Name - - Source -
-
-
- {{ instrumentname.language.en_label }} - -
-
- - - -
-
- 		-
-
- {{ instrumentname.name }} - -
-
- - - -
-
- 		-
-
- {{ instrumentname.source_name }} - -
-
- - - -
-
-
-
Image -
-
- {{ instrument.default_image.url }} -
- View image in full size -
-
-
-
-
-
-
-{% endblock content %} - -{% block scripts %} - -{% endblock scripts %} diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html index d920518..0149446 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html @@ -4,11 +4,24 @@ id="masonry-view"> {% for instrument in instruments %}
- +
- instrument thumbnail +
+ instrument thumbnail +
+ + View on Wikidata +
+

{% for instrumentname in instrument.instrumentname_set.all %} @@ -17,7 +30,7 @@

- +
{% endfor %} diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html index a645148..ec08ba5 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html @@ -5,12 +5,25 @@ style="display:none"> {% for instrument in instruments %}
- +
- instrument thumbnail +
+ instrument thumbnail +
+ + View on Wikidata +
+

@@ -20,7 +33,7 @@

- +
{% endfor %} diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html new file mode 100644 index 0000000..caab7aa --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html @@ -0,0 +1,42 @@ +{% load static %} + + + diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html index 42bc80a..b83aefa 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html @@ -103,6 +103,8 @@

+ {% include "instruments/includes/uploadImgModal.html" %} +