Merge pull request #42 from gardaholm/collapsable-filter

Collapsable Advanced Filter + Setter Name / Improved Navigation
lemeryfertitta · Feb 14, 2024 · dc2671c · dc2671c
2 parents 6de35d3 + e628925
commit dc2671c
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 16 deletions.
diff --git a/climbdex/db.py b/climbdex/db.py
@@ -209,6 +209,11 @@ def get_search_base_sql_and_binds(args):
         sql += " AND climbs.name LIKE :name"
         binds["name"] = f"%{name}%"
 
+    settername = args.get("settername")
+    if settername:
+        sql += " AND setter_username LIKE :settername"
+        binds["settername"] = f"%{settername}%"
+
     angle = args.get("angle")
     if angle and angle != "any":
         sql += " AND climb_stats.angle = $angle"

diff --git a/climbdex/static/js/swipe.js b/climbdex/static/js/swipe.js
@@ -0,0 +1,70 @@
+document.addEventListener("DOMContentLoaded", function () {
+  let startX;
+  let endX;
+  const threshold = 150; // Minimum distance of swipe
+
+  // Function to simulate button click and add button hover
+  function simulateClick(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.click();
+      addHoverEffect(elementId);
+      setTimeout(function () {
+        removeHoverEffect(elementId);
+      }, 200);
+    }
+  }
+
+  function addHoverEffect(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.classList.add("simulated-button-click");
+    }
+  }
+
+  function removeHoverEffect(elementId) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.classList.remove("simulated-button-click");
+    }
+  }
+
+  document.addEventListener(
+    "touchstart",
+    function (e) {
+      startX = e.changedTouches[0].screenX;
+    },
+    false
+  );
+
+  document.addEventListener(
+    "touchend",
+    function (e) {
+      endX = e.changedTouches[0].screenX;
+
+      // Check if swipe is right to left (next)
+      if (startX > endX + threshold) {
+        simulateClick("button-next");
+      }
+      // Check if swipe is left to right (previous)
+      else if (startX < endX - threshold) {
+        simulateClick("button-prev");
+      }
+    },
+    false
+  );
+
+  // Arrow keys detection
+  document.addEventListener(
+    "keydown",
+    function (e) {
+      if (e.key === "ArrowLeft") {
+        simulateClick("button-prev");
+      }
+      if (e.key === "ArrowRight") {
+        simulateClick("button-next");
+      }
+    },
+    false
+  );
+});
diff --git a/climbdex/templates/beta.html.j2 b/climbdex/templates/beta.html.j2
@@ -3,6 +3,14 @@
 
 <head>
     {% include 'head.html.j2'%}
+    <style>
+        /* simulate button click for swipe gestures */
+        .simulated-button-click {
+            color: var(--bs-btn-hover-color);
+            background-color: var(--bs-btn-hover-bg);
+            border-color: var(--bs-btn-hover-border-color);
+        }
+    </style>
 </head>
 
 <body>
@@ -45,6 +53,8 @@
         </div>
     </div>
     <script src="{{url_for('static', filename='js/beta.js')}}"></script>
+    <script src="{{url_for('static', filename='js/swipe.js')}}"></script>
+
 </body>
 
 </html>
diff --git a/climbdex/templates/filterSelection.html.j2 b/climbdex/templates/filterSelection.html.j2
@@ -35,11 +35,6 @@
             <span class="input-group-text">Min Ascents</span>
             <input type="number" class="form-control" id="input-min-ascents" value="1" min="1" name="minAscents" />
           </div>
-          <div class="input-group mb-3">
-            <span class="input-group-text">Min Rating</span>
-            <input type="number" , class="form-control" id="input-min-rating" value="1.0" min="1.0" max="3.0" step="0.1"
-              name="minRating" />
-          </div>
           <div class="input-group mb-3">
             <span class="input-group-text">Min Grade</span>
             <select class="form-select" id="select-min-grade" name="minGrade">
@@ -56,15 +51,6 @@
               {% endfor %}
             </select>
           </div>
-          <div class="input-group mb-3">
-            <span class="input-group-text">Grade Accuracy</span>
-            <select class="form-select" id="select-grade-accuracy" name="gradeAccuracy">
-              <option value="1" selected>Any</option>
-              <option value="0.2">Somewhat Accurate (&lt;0.2)</option>
-              <option value="0.1">Very Accurate (&lt;0.1)</option>
-              <option value="0.05">Extremely Accurate (&lt;0.05)</option>
-            </select>
-          </div>
           <div class="input-group mb-3">
             <span class="input-group-text">Sort By</span>
             <select class="form-select" id="select-sort-by" name="sortBy">
@@ -78,7 +64,38 @@
               <option value="asc">Ascending</option>
             </select>
           </div>
-          <div class="input-group mb-3 d-grid gap-2">
+
+          <div class="mb-3 d-grid gap-2">
+            <button class="btn btn-outline-secondary collapsed" type="button" data-bs-toggle="collapse"
+              data-bs-target="#advanced-filters" aria-expanded="false" aria-controls="advanced-filters">Advanced
+              Filters</button>
+          </div>
+          <div class="row">
+            <div class="col">
+              <div class="collapse multi-collapse" id="advanced-filters">
+                <div class="input-group mb-3">
+                  <span class="input-group-text">Min Rating</span>
+                  <input type="number" , class="form-control" id="input-min-rating" value="1.0" min="1.0" max="3.0"
+                    step="0.1" name="minRating" />
+                </div>
+                <div class="input-group mb-3">
+                  <span class="input-group-text">Grade Accuracy</span>
+                  <select class="form-select" id="select-grade-accuracy" name="gradeAccuracy">
+                    <option value="1" selected>Any</option>
+                    <option value="0.2">Somewhat Accurate (&lt;0.2)</option>
+                    <option value="0.1">Very Accurate (&lt;0.1)</option>
+                    <option value="0.05">Extremely Accurate (&lt;0.05)</option>
+                  </select>
+                </div>
+                <div class="input-group mb-3">
+                  <span class="input-group-text">Setter Name</span>
+                  <input type="text" class="form-control" id="settername" name="settername" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="mb-3 d-grid gap-2">
             <button class="btn btn-secondary" id="hold-filter-button" data-bs-toggle="collapse"
               data-bs-target="#div-hold-filter" data-count="0" type="button">
               0 Selected Holds
@@ -127,4 +144,4 @@
   </script>
 </body>
 
-</html>
+</html>
diff --git a/climbdex/templates/results.html.j2 b/climbdex/templates/results.html.j2
@@ -8,6 +8,13 @@
       max-height: 800px;
       overflow-y: scroll;
     }
+
+    /* simulate button click for swipe gestures */
+    .simulated-button-click {
+      color: var(--bs-btn-hover-color);
+      background-color: var(--bs-btn-hover-bg);
+      border-color: var(--bs-btn-hover-border-color);
+    }
   </style>
 </head>
 
@@ -76,6 +83,7 @@
       drawBoard('svg-climb', {{ images_to_holds | tojson}}, {{ edge_left }}, {{ edge_right }}, {{ edge_bottom }}, {{ edge_top }});
     </script>
     <script src="{{url_for('static', filename='js/results.js')}}"></script>
+    <script src="{{url_for('static', filename='js/swipe.js')}}"></script>
 
 </body>