Merge pull request #89 from DDMAL/instruments-pagination

Adjust instrument list view UI mentioned in #87
DDMAL · Oct 29, 2023 · 59c468f · 59c468f
2 parents eb73356 + e7e0d3e
commit 59c468f
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 49 deletions.
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
@@ -42,6 +42,11 @@ hr {
     color: #9EB384;
 }
 
+.selected {
+    color: #435334;
+    font-weight: bold;
+}
+
 .toggle-more{
     color: #0b0f07;
 }
@@ -60,13 +65,21 @@ hr {
 
 .display-btn {
     font-weight: bold;
-    color: #435334;
-    font-size: 20px;
+    color: #9EB384;
     width: 30px;
+    border: none;
 }
 
-.display-btn:focus {
-    border-color:#435334;
+.masonry-btn {
+    font-size: 20px;
+}
+
+.std-btn {
+    font-size: 23px;
+}
+
+.highlighted-btn {
+    color: #435334;
 }
 
 .card {
@@ -85,7 +98,6 @@ hr {
     color: #435334;
 }
 
-.page-number,
 .page-link:hover {
     color: #9EB384;
 }

diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css
@@ -30,6 +30,7 @@ input[type="number"]:focus {
     padding: 0.1rem 0.2rem;
 }
 
+.view-per-page
 .text-start, .text-end {
     color: #435334;
     margin: 0 0.3rem;

diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js
@@ -1,9 +1,7 @@
 const masonryBtn = document.getElementById("masonry-btn");
-// const listBtn = document.getElementById("list-btn");
 const stdBtn = document.getElementById("std-btn");
 
 const masonryView = document.getElementById('masonry-view');
-// const listView = document.getElementById('list-view');
 const stdView = document.getElementById('std-view');
 
 updateDisplayMode();
@@ -21,28 +19,16 @@ function updateDisplayMode() {
     switch (currentDisplayMode) {
         case 'masonry':
             setMasonryView();
-            masonryBtn.style.display = "";
-            // listBtn.style.display = "none";
-            stdBtn.style.display = "none";
             masonryView.style.display = "";
-            // listView.style.display = "none";
             stdView.style.display = "none";
+            masonryBtn.classList.toggle("highlighted-btn");
+            stdBtn.classList.remove("highlighted-btn");
             break;
-        // case 'list':
-        //     masonryBtn.style.display = "none";
-        //     listBtn.style.display = "";
-        //     stdBtn.style.display = "none";
-        //     masonryView.style.display = "none";
-        //     listView.style.display = "";
-        //     stdView.style.display = "none";
-        //     break;
         case 'standard':
-            masonryBtn.style.display = "none";
-            // listBtn.style.display = "none";
-            stdBtn.style.display = "";
             masonryView.style.display = "none";
-            // listView.style.display = "none";
             stdView.style.display = "";
+            stdBtn.classList.toggle("highlighted-btn");
+            masonryBtn.classList.remove("highlighted-btn");
             break;
         default:
             break;
@@ -51,18 +37,17 @@ function updateDisplayMode() {
 
 // Switch to the next mode
 masonryBtn.addEventListener("click", () => {
-    setDisplayMode('standard');
-    updateDisplayMode();
+    if (getDisplayMode() !== 'masonry') {
+        setDisplayMode('masonry');
+        updateDisplayMode();
+    }
 });
 
-// listBtn.addEventListener("click", () => {
-//     setDisplayMode('standard');
-//     updateDisplayMode();
-// });
-
 stdBtn.addEventListener("click", () => {
-    setDisplayMode('masonry'); 
-    updateDisplayMode();
+    if (getDisplayMode() !== 'standard') {
+        setDisplayMode('standard');
+        updateDisplayMode();
+    }
 });
 
 
@@ -100,4 +85,33 @@ function updateInstrumentBadge() {
 instrumentLanguage.addEventListener("click", function () {
     localStorage.setItem("hideInstrumentBadge", true);
     updateInstrumentBadge();
-});
+});
+
+
+// HBS facet settings
+const items = document.querySelectorAll('.list-group-item');
+
+updateHbsFacet();
+
+function updateHbsFacet() {
+    const url = new URL(window.location.href);
+    const selectedHbsFacet = url.searchParams.get("hbs_facet") || '';
+    localStorage.setItem('selectedHbsFacet', selectedHbsFacet);
+    items.forEach(item => {
+        current_item = item.getAttribute('current-value');
+        if (current_item === selectedHbsFacet) {
+            item.classList.add('selected');
+        } else {
+            item.classList.remove('selected');
+        }
+    });
+}
+
+items.forEach(item => {
+    item.addEventListener('click', function () {
+        current_item = item.getAttribute('current-value');
+        localStorage.setItem('selectedHbsFacet', current_item);
+        updateHbsFacet();
+    });
+});
+
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -14,24 +14,24 @@
 <div class="container py-5">
   <div class="row">
     <div class="col-lg-3">
-      <div class="px-3 pt-3 me-1 sidebar-container">
+      <div class="px-3 pt-3 me-1 mb-3 sidebar-container">
         <div class="info-block p-2 mb-3 notranslate">
           {% if active_language.en_label == "french"%}
             <h4>Système Hornbostel-Sachs</h4>
           {% else %}
             <h4>Hornbostel-Sachs Classification</h4>
           {% endif  %}
           <hr>
-          <ul class="list-group list-group-flush">
-            {% for hbs_facet in hbs_facets %}
-              <a href="?hbs_facet={{ hbs_facet.value }}" class="text-decoration-none">
-                <li class="list-group-item d-flex justify-content-between p-0">
-                  {% if hbs_facet.name == '' %}
+          <ul class="list-group">
+            {% for hbs_facet_item in hbs_facets %}
+              <a href="?hbs_facet={{ hbs_facet_item.value }}" class="text-decoration-none">
+                <li class="list-group-item d-flex justify-content-between p-0" current-value="{{ hbs_facet_item.value }}">
+                  {% if hbs_facet_item.name == '' %}
                     <span class="text-start">Unclassified</span>
                   {% else %}
-                    <span class="text-start">{{ hbs_facet.value }} - {{ hbs_facet.name }}</span>
+                    <span class="text-start">{{ hbs_facet_item.value }} - {{ hbs_facet_item.name }}</span>
                   {% endif %}
-                  <span class="text-end">{{ hbs_facet.count}}</span>
+                  <span class="text-end">{{ hbs_facet_item.count}}</span>
                 </li>
               </a>
             {% endfor %}
@@ -94,23 +94,24 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4>
       </div>
 
       <div class="d-flex">
-        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="masonry-btn">
+        <button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn" id="masonry-btn">
           <i class="bi bi-columns-gap"></i>
         </button>
-        {% comment %} <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="list-btn" style="display:none;">
-          <i class="bi bi-view-list"></i>
-        </button> {% endcomment %}
-        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="std-btn" style="display:none;">
+        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn" id="std-btn">
           <i class="bi bi-grid"></i>
         </button>
       </div>
     </div>
     <hr class="mb-2 mx-2">
     <div class="container py-3" id="body-content">
-      <div class="mb-2 d-flex flex-md-row flex-column justify-content-between">
+      <div class="mb-2 d-flex flex-md-row flex-column justify-content-between view-per-page">
         <span id="instrumentNum" data-instrument-num="{{ page_obj.paginator.count }}" class="text-start">
           Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries
-        </span>
+          {% if hbs_facet_name %}
+            for
+          {% endif %}
+          <strong>{{ hbs_facet_name }}</strong>
+        </span>        
         <div class="ms-2 d-flex align-items-center">
           <span class="text-start">View</span>
           <input type="radio" class="btn-check option-radio" name="options-group1" id="20" autocomplete="off">
@@ -130,7 +131,7 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4>
     </div>
 
     <div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
-      <div class="me-2 mb-1 d-flex align-items-center justify-content-end">
+      <div class="me-2 mb-1 d-flex align-items-center justify-content-end view-per-page">
         <span class="text-start">View</span>
         <input type="radio" class="btn-check option-radio" name="options-group2" id="20" autocomplete="off">
         <label class="btn" for="20">20</label>

diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py
@@ -57,6 +57,10 @@ def get_context_data(self, **kwargs):
             )
         hbs_facet_list.sort(key=lambda x: x["value"])
         context["hbs_facets"] = hbs_facet_list
+        if hbs_facet:
+            context["hbs_facet_name"] = next(
+                (x["name"] for x in hbs_facet_list if x["value"] == hbs_facet), ""
+            )
         return context
 
     def get(self, request, *args, **kwargs):