Merge pull request #115 from DDMAL/init-detail-page

feat: initialize instrument detail page

web-app/django/VIM/apps/instruments/static/instruments/css/detail.css

@@ -0,0 +1,99 @@
+.instrument-detail {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  flex-direction: column;
+  padding: 50px;
+}
+.detail-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.detail-header hr {
+  width: 100%;
+}
+.detail-body {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: flex-start;
+  width: 100%;
+}
+.detail-image {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.instrument-image {
+  max-width: 50%;
+  margin-right: 10px;
+}
+.detail-image-caption {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.instrument-forms {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+.name-form-item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+.name-field {
+  width: 90%;
+}
+input.edit-field {
+  width: inherit;
+}
+th[scope='col'] {
+  width: 30%;
+}
+th[scope='row'] {
+  width: 20%;
+}
+.button-group {
+  display: flex;
+  flex-direction: row;
+}
+.edit-field,
+.btn.cancel,
+.btn.publish {
+  display: none;
+}
+.btn {
+  display: inline-block;
+  padding: 5px 10px;
+  cursor: pointer;
+  text-align: center;
+  text-decoration: none;
+  outline: none;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  margin-right: 5px;
+}
+.btn.edit {
+  background-color: #ffc107;
+}
+.btn.cancel {
+  background-color: #dc3545;
+}
+.btn.publish {
+  background-color: #28a745;
+}

web-app/django/VIM/apps/instruments/static/instruments/css/index.css

@@ -1,5 +1,11 @@
 @import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');
 
+h2 {
+  color: #435334;
+  font-size: 30px;
+  font-weight: 800;
+}
+
 h4 {
   color: #435334;
   font-size: 20px;

web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js

@@ -0,0 +1,41 @@
+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';
+    });
+  });
+});

web-app/django/VIM/apps/instruments/templates/instruments/detail.html

@@ -0,0 +1,155 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+{% block title %}
+  Instrument Detail
+{% endblock title %}
+
+{% block css_files %}
+  <link rel="stylesheet" href="{% static "instruments/css/index.css" %}" />
+  <link rel="stylesheet" href="{% static "instruments/css/detail.css" %}" />
+{% endblock css_files %}
+
+{% block content %}
+  <div class="instrument-detail">
+    <div class="detail-header">
+      <h2>
+        {% for instrumentname in instrument_names %}
+          {% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
+        {% endfor %}
+      </h2>
+      <hr />
+    </div>
+    <div class="detail-body">
+      <div class="instrument-forms">
+        <table class="table table-sm table-striped table-bordered">
+          <tbody>
+            <tr>
+              <th scope="row">Wikidata ID</th>
+              <td>
+                <div class="name-form-item">
+                  <div class="name-field">
+                    <a class="view-field"
+                       href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
+                       target="_blank">{{ instrument.wikidata_id }}</a>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Hornbostel-Sachs Classification</th>
+              <td>
+                <div class="name-form-item">
+                  <div class="name-field">
+                    <span class="view-field">{{ instrument.hornbostel_sachs_class }}</span>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">MIMO Classification</th>
+              <td>
+                <div class="name-form-item">
+                  <div class="name-field">
+                    <a class="view-field"
+                       href="https://vocabulary.mimo-international.com/InstrumentsKeywords/en/page/{{ mimo_class }}"
+                       target="_blank">{{ instrument.mimo_class }}</a>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Instrument Names in Different Languages</th>
+              <td>
+                <table class="table table-sm table-striped table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">
+                        <span class="name-form-item">Language</span>
+                      </th>
+                      <th scope="col">
+                        <span class="name-form-item">Name</span>
+                      </th>
+                      <th scope="col">
+                        <span class="name-form-item">Source</span>
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {% for instrumentname in instrument_names %}
+                      <tr>
+                        <td>
+                          <div class="name-form-item">
+                            <div class="name-field">
+                              <span class="view-field">{{ instrumentname.language.en_label }}</span>
+                              <input class="edit-field"
+                                     type="text"
+                                     value="{{ instrumentname.language.en_label }}" />
+                            </div>
+                            <div class="button-group">
+                              <button class="btn edit">Edit</button>
+                              <button class="btn cancel">Cancel</button>
+                              <button class="btn publish">Publish</button>
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div class="name-form-item">
+                            <div class="name-field">
+                              <span class="view-field">{{ instrumentname.name }}</span>
+                              <input class="edit-field" type="text" value="{{ instrumentname.name }}" />
+                            </div>
+                            <div class="button-group">
+                              <button class="btn edit">Edit</button>
+                              <button class="btn cancel">Cancel</button>
+                              <button class="btn publish">Publish</button>
+                            </div>
+                          </div>
+                        </td>
+                        <td>
+                          <div class="name-form-item">
+                            <div class="name-field">
+                              <span class="view-field">{{ instrumentname.source_name }}</span>
+                              <input class="edit-field"
+                                     type="text"
+                                     value="{{ instrumentname.source_name }}" />
+                            </div>
+                            <div class="button-group">
+                              <button class="btn edit">Edit</button>
+                              <button class="btn cancel">Cancel</button>
+                              <button class="btn publish">Publish</button>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    {% endfor %}
+                  </tbody>
+                </table>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">Image</th>
+              <td>
+                <div class="name-form-item">
+                  <div class="detail-image">
+                    <img src="{{ instrument.default_image.url }}"
+                         alt="{{ instrument.default_image.url }}"
+                         class="figure-img img-fluid rounded instrument-image" />
+                    <div class="detail-image-caption">
+                      <a href="{{ instrument.default_image.url }}" target="_blank">View image in full size</a>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+{% endblock content %}
+
+{% block scripts %}
+  <script src="{% static "instruments/js/InstrumentDetail.js" %}"></script>
+{% endblock scripts %}

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

@@ -4,7 +4,7 @@
      id="masonry-view">
   {% for instrument in instruments %}
     <div class="col">
-      <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id }}"
+      <a href="{% url 'instrument-detail' instrument.pk %}"
          class="text-decoration-none"
          target="_blank">
         <div class="card mb-3">

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

@@ -5,7 +5,7 @@
      style="display:none">
   {% for instrument in instruments %}
     <div class="col">
-      <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id }}"
+      <a href="{% url 'instrument-detail' instrument.pk %}"
          class="text-decoration-none"
          target="_blank">
         <div class="card mb-3">

web-app/django/VIM/apps/instruments/views/instrument_detail.py

@@ -0,0 +1,29 @@
+from django.views.generic import DetailView
+from VIM.apps.instruments.models import Instrument, Language
+
+
+class InstrumentDetail(DetailView):
+    """
+    Displays details of a specific instrument.
+    """
+
+    model = Instrument
+    template_name = "instruments/detail.html"
+    context_object_name = "instrument"
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+
+        # Query the instrument names in all languages
+        context["instrument_names"] = (
+            context["instrument"].instrumentname_set.all().select_related("language")
+        )
+
+        # Get the active language
+        active_language_en = self.request.session.get("active_language_en", None)
+        context["active_language"] = (
+            Language.objects.get(en_label=active_language_en)
+            if active_language_en
+            else Language.objects.get(en_label="english")  # default in English
+        )
+        return context

web-app/django/VIM/urls.py

@@ -19,12 +19,14 @@
 from django.urls import path, include
 from django.conf import settings
 from VIM.apps.instruments.views.instrument_list import InstrumentList
+from VIM.apps.instruments.views.instrument_detail import InstrumentDetail
 from django.conf.urls.i18n import i18n_patterns
 
 urlpatterns = i18n_patterns(
     path("admin/", admin.site.urls),
     path("", include("VIM.apps.main.urls", namespace="main")),
     path("instruments/", InstrumentList.as_view(), name="instrument-list"),
+    path("instrument/<int:pk>/", InstrumentDetail.as_view(), name="instrument-detail"),
     prefix_default_language=False,
 )