update pagination settings

DDMAL · Oct 12, 2023 · 837c633 · 837c633
1 parent f25a871
commit 837c633
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 17 deletions.
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/pagination.js b/web-app/django/VIM/apps/instruments/static/instruments/js/pagination.js
@@ -3,8 +3,11 @@ const instrumentNumElement = document.getElementById('instrumentNum');
 const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num');
 
 const savePaginationBtn = document.getElementById("save-pagination-setting");
-const paginateByInput = document.getElementById("paginate-by");
+const paginateByInput = document.getElementById("pagination-range");
 const pageNumInput = document.getElementById("page-num");
+const rangeValue = document.getElementById("range-value");
+
+const pageBtns = document.querySelectorAll(".page-link");
 
 updatePaginationSetting();
 
@@ -27,12 +30,37 @@ function updatePaginationSetting() {
     pageNumInput.value = currentPageNum;
 }
 
+function pageNumInputValidation() {
+    maxPageNum = Math.ceil(instrumentNum / paginateByInput.value);
+    if (pageNumInput.value < 1) {
+        pageNumInput.value = 1;
+    } else if (pageNumInput.value > maxPageNum) {
+        pageNumInput.value = maxPageNum;
+    }
+}
+
+paginateByInput.addEventListener("input", function () {
+    rangeValue.textContent = this.value;
+    maxPageNum = Math.ceil(instrumentNum / this.value);
+    if (pageNumInput.value > maxPageNum) {
+        pageNumInput.value = maxPageNum;
+    }
+    pageNumInput.max = maxPageNum;
+});
+
 savePaginationBtn.addEventListener("click", () => {
+    pageNumInputValidation();
     const url = new URL(window.location.href);
     url.searchParams.set("paginate_by", paginateByInput.value);
     url.searchParams.set("page", pageNumInput.value);
     window.location.href = url.href;
-
     setPaginationSetting(paginateByInput.value, pageNumInput.value);
     updatePaginationSetting();
+});
+
+pageBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+        paginate_by = localStorage.getItem("paginate_by");
+        btn.href = btn.href + "&paginate_by=" + paginate_by;
+    });
 });
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html
@@ -15,13 +15,11 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
                         </div>
                         <div class="row mb-2">
                             <label for="paginate-by" class="col-sm-4 col-form-label">Paginate by:</label>
-                            <div class="col-sm-8">
-                                <input type="number" name="paginate_by" id="paginate-by" min="1" step="1" placeholder="Default: 20">
+                            <div class="col-sm-6 d-flex align-items-center">
+                                <input type="range" id="pagination-range" name="paginate_by" min="15" max="50" step="1" value="20">
                             </div>
-                        </div>
-                        <div class="row mb-2">
-                            <div class="invalid-feedback">
-                                Please provide a valid value.
+                            <div class="col-sm-2">
+                                <span class="range-value" id="range-value">20</span>
                             </div>
                         </div>
                         <div class="row mb-3">
@@ -30,11 +28,6 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
                                 <input type="number" name="page" id="page-num" min="1" step="1" placeholder="Default: 1">
                             </div>
                         </div>
-                        <div class="row mb-2">
-                            <div class="invalid-feedback">
-                                Please provide a valid value.
-                            </div>
-                        </div>
                         <div class="row">
                             <div class="col-sm-12 text-end">
                                 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
@@ -63,7 +56,34 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
     background-color: #FAF1E4;
 }
 
-input {
+.range-value {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background: #435334;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 5px;
+    border-radius: 5px;
+    background-color: #9EB384;
+    color: #435334;
+    outline: none;
+}
+
+input[type="number"] {
     border: 1px solid #9EB384;
     border-radius: 4px;
     background-color: #FAF1E4;
@@ -72,19 +92,19 @@ <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
     color: #435334;
 }
 
-input:hover {
+input[type="number"]:hover {
     border: 1px solid #435334;
     background-color: #FAF1E4;
     color: #435334;
 }
 
-input:focus {
+input[type="number"]:focus {
     border: 1px solid #435334;
     box-shadow: 0 0 5px #9EB384;
     outline: none;
 }
 
-input::placeholder {
+input[type="number"]::placeholder {
     color: #9EB384;
 }