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

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;
 }

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);
+      }
+    }
+  });

web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html

@@ -4,11 +4,24 @@
      id="masonry-view">
   {% for instrument in instruments %}
     <div class="col">
-      <a href="{% url 'instrument-detail' instrument.pk %}"
-         class="text-decoration-none"
-         target="_blank">
+      <div class="text-decoration-none">
         <div class="card mb-3">
-          <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+          <div class="instrument-img-container">
+            <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2 instrument-img" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+            <div class="middle-button-group">
+              <button type="button"
+                      class="btn"
+                      data-bs-toggle="modal"
+                      data-bs-target="#uploadImagesModal"
+                      data-instrument-name="{{ instrument.instrumentname_set.first.name|title }}"
+                      data-instrument-wikidata-id="{{ instrument.wikidata_id }}">
+                Upload new images
+              </button>
+              <a class="btn"
+                 href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
+                 target="_blank">View on Wikidata</a>
+            </div>
+          </div>
           <div class="card-body pb-0 pt-0">
             <p class="card-title text-center notranslate ">
               {% for instrumentname in instrument.instrumentname_set.all %}
@@ -17,7 +30,7 @@
             </p>
           </div>
         </div>
-      </a>
+      </div>
     </div>
   {% endfor %}
 </div>