Add resource navigation buttons #293 (#469)

Signed-off-by: Akhil Raj <[email protected]>

Author: lf32

scanpipe/templates/scanpipe/resource_detail.html

@@ -34,15 +34,19 @@
       </ul>
     </div>
 
-    <section class="mx-5">
-      <div class="message-header">
+    <section class="mx-5 message is-dark">
+      <div class="message-header is-flex">
         <p>
           {{ object.name }}
           | {{ object.size|filesizeformat }}
           | <a class="has-text-white" href="{{ object.get_raw_url }}?as_attachment=1"><i class="fas fa-download"></i></a>
           <br>
           <span style="font-size: 10px;">{{ object.path }}</span>
         </p>
+        <div>
+          <button class="button previous-btn is-dark" disabled><i class="fas fa-arrow-up mr-2"></i>Previous</button>
+          <button class="button next-btn is-dark" disabled><i class="fas fa-arrow-down mr-2"></i>Next</button>
+        </div>
       </div>
       <div id="editor" style="min-height:730px; border: lightgrey 1px solid;">{{ file_content }}</div>
     </section>
@@ -69,9 +73,9 @@
     function removeAllMarkers() {
       let session = editor.getSession();
       let markers = session.getMarkers();
-        for (const [key, value] of Object.entries(markers)) {
-          session.removeMarker(value.id);
-        }
+      for (const [key, value] of Object.entries(markers)) {
+        session.removeMarker(value.id);
+      }
     }
 
     // Range(startRow, startColumn, endRow, endColumn)
@@ -81,15 +85,15 @@
       let annotations = [];
       removeAllMarkers();
 
-      detected_data.forEach(function ($el) {
+      detected_data.forEach(function($el) {
         // Indexes a 0-based in ace.js
         let start_row = $el.start_line - 1;
         let start_column = 0;
         let end_row = $el.end_line - 1;
         let end_column = 10000;
 
         let range = new Range(start_row, start_column, end_row, end_column);
-        editor.session.addMarker(range, 'ace-marker', 'line');  // "fullLine" also available
+        editor.session.addMarker(range, 'ace-marker', 'line'); // "fullLine" also available
 
         annotations.push({
           row: start_row,
@@ -102,28 +106,55 @@
       editor.getSession().setAnnotations(annotations);
     }
 
-    const $selectionButtons = getAll('.tabs a');
+    let scrollPositionIndex = 0;
+    const selectionButtons = getAll('.tabs a');
+    const previousBtn = document.querySelector('.previous-btn');
+    const nextBtn = document.querySelector('.next-btn');
 
     let detected_values = JSON.parse(document.querySelector("#detected_values").textContent);
+    let detected_data;
 
-    if ($selectionButtons.length > 0) {
-      $selectionButtons.forEach(function ($el) {
-        $el.addEventListener('click', function () {
+    if (selectionButtons.length > 0) {
+      selectionButtons.forEach(function($el) {
+        $el.addEventListener('click', function() {
+          removeAllMarkers();
           let active_li = document.querySelector("li.is-active");
           if (active_li) active_li.classList.remove("is-active");
-          $el.parentElement.classList.add("is-active");
 
+          $el.parentElement.classList.add("is-active");
           let type = $el.getAttribute("data-type");
-          let detected_data = detected_values[type];
-          if (detected_data) {
+          detected_data = detected_values[type];
+
+          if (detected_data.length) {
+            scrollPositionIndex = 0;
             setDetectedValues(detected_data);
-          }
-          else {
-            removeAllMarkers();
-            editor.getSession().setAnnotations([]);
+            editor.renderer.scrollToLine(detected_data[0].start_line - 1);
+            previousBtn.disabled = true;
+            nextBtn.disabled = (detected_data.length - 1 == 0);
+          } else {
+            scrollPositionIndex = 0;
+            editor.renderer.scrollToLine(0);
+            previousBtn.disabled = true;
+            nextBtn.disabled = true;
           }
         });
       });
     }
+
+    nextBtn.addEventListener('click', function() {
+      if (scrollPositionIndex >= detected_data.length - 1) return false;
+      scrollPositionIndex++;
+      editor.renderer.scrollToLine(detected_data[scrollPositionIndex].start_line - 1);
+      nextBtn.disabled = (scrollPositionIndex == detected_data.length - 1);
+      previousBtn.disabled = false;
+    })
+
+    previousBtn.addEventListener('click', function() {
+      if (scrollPositionIndex <= 0) return false;
+      scrollPositionIndex--;
+      editor.renderer.scrollToLine(detected_data[scrollPositionIndex].start_line - 1);
+      previousBtn.disabled = (scrollPositionIndex == 0);
+      nextBtn.disabled = false;
+    })
   </script>
 {% endblock %}