Updated index page + Added about and result pages

static/css/style.css

@@ -20,4 +20,58 @@
 
 .noUi-target.noUi-horizontal .noUi-tooltip {
     transform: scale(1) rotate(-45deg) translate(0px, 4px);
+}
+
+h4 {
+    font-size: 1.8rem;
+}
+
+label {
+    font-size: 1.2rem;
+}
+
+.input-field > label {
+    font-size: 1.2rem;
+}
+
+.table-wrapper {
+  overflow-x: scroll;
+  overflow-y: scroll;
+  height: 600px;
+  border: #555555;
+}
+
+.table-wrapper thead th {
+  position: sticky;
+  top: 0;
+}
+
+.table-wrapper thead th{
+  cursor: pointer;
+}
+
+.tr-link {
+  cursor: pointer;
+}
+
+table {
+  table-layout: fixed;
+}
+
+th {
+  width: 300px;
+  padding: 10px 0 10px;
+  background-color: #cccccc;
+  text-align: center;
+  border-left-radius: 2px;
+  border-right: solid 1px #bbbbbb;
+  border-left: solid 1px #bbbbbb;
+}
+
+td {
+  width: 300px;
+  padding: 10px 0 10px;
+  text-align: center;
+  border-right: solid 1px #bbbbbb;
+  border-left: solid 1px #bbbbbb;
 }

static/js/init.js

@@ -30,32 +30,43 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
   }); // end of document ready
   $(document).ready(function(){
-    // slider
-//    var valuesForSlider = [2,3,4,5];
-//    var slider = document.getElementById('slider');
-//    var format = {
-//      to: function(value) {
-//        return valuesForSlider[Math.round(value)];
-//      },
-//      from: function (value) {
-//        return valuesForSlider.indexOf(Number(value));
-//      }
-//    };
-//
-//    noUiSlider.create(slider, {
-//      start: [3, 4],
-//      connect: true,
-//      step: 1,
-//      orientation: 'horizontal', // 'horizontal' or 'vertical'
-//      range: {
-//        'min': 0,
-//        'max': valuesForSlider.length - 1
-//      },
-//      format: wNumb({
-//     decimals: 0
-//   })
-//    });
+    $('#advanced-tree').hide();
+    $('.input-field span.helper-text').hide();
+    $('.input-field').bind('mouseenter', function(e) {
+      $(this).find('span.helper-text').show('fast')
+    });
+    var advancedTreeExpanded = false;
+    $('#advanced-tree-expand').bind('click', function(e) {
+      if (!advancedTreeExpanded){
+        advancedTreeExpanded = true;
+        $('#advanced-tree').show('fast');
+        $('#advanced-tree-expand i').text('remove');
+      } else {
+        advancedTreeExpanded = false;
+        $('#advanced-tree').hide('fast');
+        $('#advanced-tree-expand i').text('add');
+      }
+      $(this).find('span.helper-text').show('fast')
+    });
+    $('.input-field').bind('mouseleave', function(e) {
+      $(this).find('span.helper-text').hide('fast')
+    });
+  });
 
+  $("#submit-form").submit( function(eventObj) {
+    var spans = $(".noUi-tooltip").find('span');
+    var tree_size_min = spans[0].innerText;
+    var tree_size_max = spans[1].innerText;
+    console.log('amm');
+    $("<input />").attr("type", "hidden")
+      .attr("name", "tree_size_min")
+      .attr("value", tree_size_min)
+      .appendTo("#submit-form");
+    $("<input />").attr("type", "hidden")
+      .attr("name", "tree_size_max")
+      .attr("value", tree_size_max)
+      .appendTo("#submit-form");
+    return true;
   });
 })(jQuery); // end of jQuery name space
 

static/js/result.js

@@ -0,0 +1,52 @@
+function addOrUpdateUrlParameter(url, key, value) {
+    var urlObject = new URL(url);
+    urlObject.searchParams.set(key, value);
+    return urlObject.href;
+}
+function getUrlParameters() {
+    var searchParams = new URLSearchParams(window.location.search);
+    var params = {};
+
+    // Iterate over each parameter and add to the 'params' object
+    searchParams.forEach(function(value, key) {
+      params[key] = value;
+    });
+
+    return params;
+}
+
+$(document).ready(function() {
+    var params = getUrlParameters();
+    // Make table rows clickable
+    $(".table-wrapper tbody tr").click(function() {
+        var url = $(this).data("href");
+        if (url) {
+            window.location.href = url;
+        }
+    });
+    $(".th-desc").hide();
+    $(".th-asc").hide();
+    if ('order_by' in params) {
+        if ('order_type' in params && params.order_type == 'desc') {
+            $('th:contains(' + params.order_by + ') .th-desc').show();
+        } else {
+            $('th:contains(' + params.order_by + ') .th-asc').show();
+        }
+    }
+    // Make table rows clickable
+    $(".table-wrapper thead th").click(function(e) {
+        var column_name = $(this).find('span:first').text();
+
+        var newUrl = addOrUpdateUrlParameter(window.location.href, 'order_by', column_name);
+        if ('order_by' in params && 'order_type' in params && params.order_by == column_name && params.order_type == 'desc') {
+            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'asc');
+        } else {
+            newUrl = addOrUpdateUrlParameter(newUrl, 'order_type', 'desc');
+        }
+
+
+
+        // Redirect to the modified URL
+        window.location.href = newUrl;
+    });
+});