From ca0621484db5eafead2845f4e147c7c979024227 Mon Sep 17 00:00:00 2001 From: Karlie Fang Date: Tue, 16 Jul 2024 12:01:22 -0400 Subject: [PATCH 1/3] feat: initialize instrument detail page Refs: #32 #33 --- .../static/instruments/css/detail.css | 97 +++++++++++ .../static/instruments/css/index.css | 6 + .../static/instruments/js/InstrumentDetail.js | 42 +++++ .../templates/instruments/detail.html | 155 ++++++++++++++++++ .../instruments/includes/masonryView.html | 2 +- .../instruments/includes/stdView.html | 2 +- .../instruments/views/instrument_detail.py | 37 +++++ web-app/django/VIM/urls.py | 2 + 8 files changed, 341 insertions(+), 2 deletions(-) create mode 100644 web-app/django/VIM/apps/instruments/static/instruments/css/detail.css create mode 100644 web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js create mode 100644 web-app/django/VIM/apps/instruments/templates/instruments/detail.html create mode 100644 web-app/django/VIM/apps/instruments/views/instrument_detail.py diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css new file mode 100644 index 0000000..a8bb4b1 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css @@ -0,0 +1,97 @@ +.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; +} \ No newline at end of file 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 95c42cd..9a27a96 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 @@ -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; 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 new file mode 100644 index 0000000..f91d145 --- /dev/null +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js @@ -0,0 +1,42 @@ + +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'; + }); + }); +}); \ No newline at end of file diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html new file mode 100644 index 0000000..e833efa --- /dev/null +++ b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html @@ -0,0 +1,155 @@ +{% extends 'base.html' %} + +{% load static %} + +{% block title %} +Instrument Detail +{% endblock %} + +{% block css_files %} + + +{% endblock %} + +{% block content %} +
+
+

{{ instrument_name_en }}

+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Wikidata ID +
+
+ {{ wikidata_id }} + +
+
+ + + +
+
+
Hornbostel-Sachs Classification +
+
+ {{ hornbostel_sachs_class }} + +
+
+ + + +
+
+
Classification +
+
+ {{ mimo_class }} + +
+
+ + + +
+
+
+ Instrument Names in Different Languages + + + + + + + + + + + {% for instrument_name in instrument_names %} + + + + + + {% endfor %} + +
LanguageNameSource
+
+
+ {{ instrument_name.language_en_label }} + +
+
+ + + +
+
+ 		+
+
+ {{ instrument_name.name }} + +
+
+ + + +
+
+ 		+
+
+ {{ instrument_name.source_name }} + +
+
+ + + +
+
+
+
Image +
+
+ {{ instrument_name_en }} +
+ View image in full size +
+
+
+
+
+
+
+{% endblock %} + +{% block script %} + +{% endblock %} \ No newline at end of file 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 f238175..304d466 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,7 +4,7 @@ id="masonry-view"> {% for instrument in instruments %}
-
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 f0f5484..0c9c818 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,7 +5,7 @@ style="display:none"> {% for instrument in instruments %}
-
diff --git a/web-app/django/VIM/apps/instruments/views/instrument_detail.py b/web-app/django/VIM/apps/instruments/views/instrument_detail.py new file mode 100644 index 0000000..2e854da --- /dev/null +++ b/web-app/django/VIM/apps/instruments/views/instrument_detail.py @@ -0,0 +1,37 @@ +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) + instrument = self.get_object() + + context['wikidata_id'] = instrument.wikidata_id + context['default_image_url'] = instrument.default_image.url if instrument.default_image else None + context['hornbostel_sachs_class'] = instrument.hornbostel_sachs_class + context['mimo_class'] = instrument.mimo_class + + # Get english name + context['instrument_name_en'] = instrument.instrumentname_set.get(language__en_label='english').name + + # Get all instrument names in all languages + instrument_names = [] + for instrument_name in instrument.instrumentname_set.all(): + instrument_names.append({ + 'name': instrument_name.name, + 'source_name': instrument_name.source_name, + 'language_code': instrument_name.language.wikidata_code, + 'language_id': instrument_name.language.wikidata_id, + 'language_en_label': instrument_name.language.en_label, + 'language_autonym': instrument_name.language.autonym, + }) + context['instrument_names'] = instrument_names + + return context \ No newline at end of file diff --git a/web-app/django/VIM/urls.py b/web-app/django/VIM/urls.py index 08e6910..9f50b58 100644 --- a/web-app/django/VIM/urls.py +++ b/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//', InstrumentDetail.as_view(), name='instrument-detail'), prefix_default_language=False, ) From f552546a9ac3c6e70b026d794dfcd5a0af162e1e Mon Sep 17 00:00:00 2001 From: Karlie Fang Date: Wed, 17 Jul 2024 10:47:10 -0400 Subject: [PATCH 2/3] style: reformat instrument detail init --- .../static/instruments/css/detail.css | 196 ++++++------ .../static/instruments/css/index.css | 6 +- .../static/instruments/js/InstrumentDetail.js | 83 +++-- .../templates/instruments/detail.html | 290 +++++++++--------- .../instruments/views/instrument_detail.py | 46 +-- web-app/django/VIM/urls.py | 2 +- 6 files changed, 323 insertions(+), 300 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css index a8bb4b1..7cb5e4f 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css +++ b/web-app/django/VIM/apps/instruments/static/instruments/css/detail.css @@ -1,97 +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; -} \ No newline at end of file +.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; +} 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 9a27a96..cbd6a2f 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 @@ -1,9 +1,9 @@ @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; + color: #435334; + font-size: 30px; + font-weight: 800; } h4 { 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 index f91d145..c868191 100644 --- a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js +++ b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js @@ -1,42 +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'; - }); - }); -}); \ No newline at end of file +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 index e833efa..78e2c86 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html @@ -1,155 +1,169 @@ -{% extends 'base.html' %} +{% extends "base.html" %} {% load static %} {% block title %} -Instrument Detail -{% endblock %} + Instrument Detail +{% endblock title %} {% block css_files %} - - -{% endblock %} + + +{% endblock css_files %} {% block content %} -
-
-

{{ instrument_name_en }}

-
-
-
-
- - - - - - - - - + + +
Wikidata ID -
-
- {{ wikidata_id }} - -
-
- - - -
-
-
Hornbostel-Sachs Classification -
-
- {{ hornbostel_sachs_class }} - -
-
- - - +
+
+

{{ instrument_name_en }}

+
+
+
+
+ + + + + - - - - + + + + + + + + - - - - - - - - + + + + + + + + - - -
Wikidata ID +
+
+ {{ wikidata_id }} + +
+
+ + + +
- -
Classification -
-
- {{ mimo_class }} - +
Hornbostel-Sachs Classification +
+
+ {{ hornbostel_sachs_class }} + +
+
+ + + +
-
- - - +
MIMO Classification +
+
+ {{ mimo_class }} + +
+
+ + + +
- -
- Instrument Names in Different Languages - - - - - - - - - - - {% for instrument_name in instrument_names %} - - - - - - {% endfor %} - -
LanguageNameSource
-
-
- {{ instrument_name.language_en_label }} - -
-
- - - -
-
- 		-
-
- {{ instrument_name.name }} - -
-
- - - -
-
- 		-
-
- {{ instrument_name.source_name }} - -
-
- - - -
-
-
-
Image -
-
- {{ instrument_name_en }} -
- View image in full size +
Instrument Names in Different Languages + + + + + + + + + + {% for instrument_name in instrument_names %} + + + + + + {% endfor %} + +
+ Language + + Name + + Source +
+
+
+ {{ instrument_name.language_en_label }} + +
+
+ + + +
+
+ 		+
+
+ {{ instrument_name.name }} + +
+
+ + + +
+
+ 		+
+
+ {{ instrument_name.source_name }} + +
+
+ + + +
+
+
+
Image +
+
+ {{ instrument_name_en }} +
+ View image in full size +
- -
+
+
-
-{% endblock %} +{% endblock content %} {% block script %} - -{% endblock %} \ No newline at end of file + +{% endblock script %} diff --git a/web-app/django/VIM/apps/instruments/views/instrument_detail.py b/web-app/django/VIM/apps/instruments/views/instrument_detail.py index 2e854da..4cb1615 100644 --- a/web-app/django/VIM/apps/instruments/views/instrument_detail.py +++ b/web-app/django/VIM/apps/instruments/views/instrument_detail.py @@ -1,37 +1,45 @@ from django.views.generic import DetailView -from VIM.apps.instruments.models import Instrument, Language +from VIM.apps.instruments.models import Instrument + class InstrumentDetail(DetailView): """ Displays details of a specific instrument. """ + model = Instrument - template_name = 'instruments/detail.html' - context_object_name = 'instrument' + template_name = "instruments/detail.html" + context_object_name = "instrument" def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) instrument = self.get_object() - context['wikidata_id'] = instrument.wikidata_id - context['default_image_url'] = instrument.default_image.url if instrument.default_image else None - context['hornbostel_sachs_class'] = instrument.hornbostel_sachs_class - context['mimo_class'] = instrument.mimo_class + context["wikidata_id"] = instrument.wikidata_id + context["default_image_url"] = ( + instrument.default_image.url if instrument.default_image else None + ) + context["hornbostel_sachs_class"] = instrument.hornbostel_sachs_class + context["mimo_class"] = instrument.mimo_class # Get english name - context['instrument_name_en'] = instrument.instrumentname_set.get(language__en_label='english').name + context["instrument_name_en"] = instrument.instrumentname_set.get( + language__en_label="english" + ).name # Get all instrument names in all languages instrument_names = [] for instrument_name in instrument.instrumentname_set.all(): - instrument_names.append({ - 'name': instrument_name.name, - 'source_name': instrument_name.source_name, - 'language_code': instrument_name.language.wikidata_code, - 'language_id': instrument_name.language.wikidata_id, - 'language_en_label': instrument_name.language.en_label, - 'language_autonym': instrument_name.language.autonym, - }) - context['instrument_names'] = instrument_names - - return context \ No newline at end of file + instrument_names.append( + { + "name": instrument_name.name, + "source_name": instrument_name.source_name, + "language_code": instrument_name.language.wikidata_code, + "language_id": instrument_name.language.wikidata_id, + "language_en_label": instrument_name.language.en_label, + "language_autonym": instrument_name.language.autonym, + } + ) + context["instrument_names"] = instrument_names + + return context diff --git a/web-app/django/VIM/urls.py b/web-app/django/VIM/urls.py index 9f50b58..e225526 100644 --- a/web-app/django/VIM/urls.py +++ b/web-app/django/VIM/urls.py @@ -26,7 +26,7 @@ path("admin/", admin.site.urls), path("", include("VIM.apps.main.urls", namespace="main")), path("instruments/", InstrumentList.as_view(), name="instrument-list"), - path('instrument//', InstrumentDetail.as_view(), name='instrument-detail'), + path("instrument//", InstrumentDetail.as_view(), name="instrument-detail"), prefix_default_language=False, ) From e9d974ee3fa66294ddda60813c2e4dac6e9f4ec6 Mon Sep 17 00:00:00 2001 From: Kun Fang Date: Wed, 17 Jul 2024 19:00:23 -0400 Subject: [PATCH 3/3] fix: fix button bugs & optimize query - use "MIMO Classification" as a header in detail table in `detail.html`; - fix bugs of `Edit` buttons; delete uneccessary `Edit` buttons; - avoid duplicate query by using `context["instrument"]` instead of `get_object`; - get `active_language` for future feature of supporting English and French in detail page; --- .../templates/instruments/detail.html | 56 +++++++------------ .../instruments/views/instrument_detail.py | 38 ++++--------- 2 files changed, 32 insertions(+), 62 deletions(-) diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html index 78e2c86..2f32226 100644 --- a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html +++ b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html @@ -14,7 +14,11 @@ {% block content %}
-

{{ instrument_name_en }}

+

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

@@ -27,14 +31,8 @@

{{ instrument_name_en }}

{{ wikidata_id }} - -
-
- - - + href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}" + target="_blank">{{ instrument.wikidata_id }}
@@ -44,13 +42,7 @@

{{ instrument_name_en }}

- {{ hornbostel_sachs_class }} - -
-
- - - + {{ instrument.hornbostel_sachs_class }}
@@ -62,13 +54,7 @@

{{ instrument_name_en }}

{{ mimo_class }} - -
-
- - - + target="_blank">{{ instrument.mimo_class }}
@@ -91,15 +77,15 @@

{{ instrument_name_en }}

- {% for instrument_name in instrument_names %} + {% for instrumentname in instrument_names %}
- {{ instrument_name.language_en_label }} + {{ instrumentname.language.en_label }} + value="{{ instrumentname.language.en_label }}" />
@@ -111,8 +97,8 @@

{{ instrument_name_en }}

- {{ instrument_name.name }} - + {{ instrumentname.name }} +
@@ -124,10 +110,10 @@

{{ instrument_name_en }}

- {{ instrument_name.source_name }} + {{ instrumentname.source_name }} + value="{{ instrumentname.source_name }}" />
@@ -147,11 +133,11 @@

{{ instrument_name_en }}

- {{ instrument_name_en }}
- View image in full size + View image in full size
@@ -164,6 +150,6 @@

{{ instrument_name_en }}

{% endblock content %} -{% block script %} +{% block scripts %} -{% endblock script %} +{% endblock scripts %} diff --git a/web-app/django/VIM/apps/instruments/views/instrument_detail.py b/web-app/django/VIM/apps/instruments/views/instrument_detail.py index 4cb1615..6892e7e 100644 --- a/web-app/django/VIM/apps/instruments/views/instrument_detail.py +++ b/web-app/django/VIM/apps/instruments/views/instrument_detail.py @@ -1,5 +1,5 @@ from django.views.generic import DetailView -from VIM.apps.instruments.models import Instrument +from VIM.apps.instruments.models import Instrument, Language class InstrumentDetail(DetailView): @@ -13,33 +13,17 @@ class InstrumentDetail(DetailView): def get_context_data(self, **kwargs): context = super().get_context_data(**kwargs) - instrument = self.get_object() - context["wikidata_id"] = instrument.wikidata_id - context["default_image_url"] = ( - instrument.default_image.url if instrument.default_image else None + # Query the instrument names in all languages + context["instrument_names"] = ( + context["instrument"].instrumentname_set.all().select_related("language") ) - context["hornbostel_sachs_class"] = instrument.hornbostel_sachs_class - context["mimo_class"] = instrument.mimo_class - - # Get english name - context["instrument_name_en"] = instrument.instrumentname_set.get( - language__en_label="english" - ).name - - # Get all instrument names in all languages - instrument_names = [] - for instrument_name in instrument.instrumentname_set.all(): - instrument_names.append( - { - "name": instrument_name.name, - "source_name": instrument_name.source_name, - "language_code": instrument_name.language.wikidata_code, - "language_id": instrument_name.language.wikidata_id, - "language_en_label": instrument_name.language.en_label, - "language_autonym": instrument_name.language.autonym, - } - ) - context["instrument_names"] = instrument_names + # 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