Minor UI navigation improvements

lemeryfertitta · Dec 24, 2023 · 9e43599 · 9e43599
1 parent f978e91
commit 9e43599
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 5 deletions.
diff --git a/app.py b/app.py
@@ -52,6 +52,12 @@
 AND password IS NULL;
 """
 
+LAYOUT_NAME_SQL = """
+SELECT name
+FROM layouts
+WHERE id = $layout_id
+"""
+
 IMAGE_FILENAME_SQL = """
 SELECT 
     image_filename
@@ -113,6 +119,16 @@
 AND psls.layout_id = $layout_id
 """
 
+SIZE_NAME_SQL = """
+SELECT
+    product_sizes.name
+FROM product_sizes
+INNER JOIN layouts
+ON product_sizes.product_id = layouts.product_id
+WHERE layouts.id = $layout_id
+AND product_sizes.id = $size_id
+"""
+
 SIZES_SQL = """
 SELECT 
     product_sizes.id,
@@ -221,10 +237,16 @@ def filter():
     grades = cursor.fetchall()
     cursor.execute(COLORS_SQL, {"layout_id": layout_id})
     colors = cursor.fetchall()
-
+    cursor.execute(LAYOUT_NAME_SQL, {"layout_id": layout_id})
+    layout_name = cursor.fetchone()[0]
+    cursor.execute(SIZE_NAME_SQL, {"layout_id": layout_id, "size_id": size_id})
+    size_name = cursor.fetchone()[0]
     return flask.render_template(
         "filterSelection.html.j2",
         params=flask.request.args,
+        board_name=board_name,
+        layout_name=layout_name,
+        size_name=size_name,
         angles=angles,
         grades=grades,
         colors=colors,

diff --git a/static/js/filterSelection.js b/static/js/filterSelection.js
@@ -45,6 +45,19 @@ function updateMinOnMaxChange(event) {
   }
 }
 
+function resetHoldFilter() {
+  const holdFilterInput = document.getElementById("input-hold-filter");
+  holdFilterInput.value = "";
+  const circles = document.getElementsByTagNameNS(
+    "http://www.w3.org/2000/svg",
+    "circle"
+  );
+  for (const circle of circles) {
+    circle.setAttribute("stroke-opacity", 0.0);
+    circle.setAttribute("stroke", "black");
+  }
+}
+
 document
   .getElementById("div-hold-filter")
   .addEventListener("shown.bs.collapse", function (event) {
@@ -54,6 +67,23 @@ document
 document
   .getElementById("select-min-grade")
   .addEventListener("change", updateMaxOnMinChange);
+
 document
   .getElementById("select-max-grade")
   .addEventListener("change", updateMinOnMaxChange);
+
+document
+  .getElementById("button-reset-hold-filter")
+  .addEventListener("click", resetHoldFilter);
+
+const backAnchor = document.getElementById("anchor-back");
+backAnchor.href = location.origin;
+if (document.referrer) {
+  referrerUrl = new URL(document.referrer);
+  if (referrerUrl.origin == location.origin && referrerUrl.pathname == "/") {
+    backAnchor.addEventListener("click", function (event) {
+      event.preventDefault();
+      history.back();
+    });
+  }
+}
diff --git a/static/js/results.js b/static/js/results.js
@@ -29,6 +29,7 @@ function drawClimb(uuid, name, frames, setter, difficultyAngleText) {
   const climbNameHeader = document.getElementById("header-climb-name");
   climbNameHeader.innerHTML = "";
   climbNameHeader.appendChild(anchor);
+  climbNameHeader.scrollIntoView(true);
 
   const climbSetterHeader = document.getElementById("header-climb-setter");
   climbSetterHeader.textContent = `by ${setter}`;
@@ -104,5 +105,14 @@ function drawResultsPage(pageNumber, pageSize) {
   });
 }
 
+const backAnchor = document.getElementById("anchor-back");
+backAnchor.href = location.origin + "/filter?" + location.search;
+if (document.referrer && new URL(document.referrer).origin == location.origin) {
+  backAnchor.addEventListener("click", function (event) {
+    event.preventDefault();
+    history.back();
+  });
+}
+
 drawResultsCount();
 drawResultsPage(0, 10);
diff --git a/templates/filterSelection.html.j2 b/templates/filterSelection.html.j2
@@ -16,6 +16,8 @@
     <div class="row justify-content-md-center">
       <div class="col-md-5">
         <form class="card p-3 bg-light" id="form-search" action="/results">
+          <p class="mb-2">Setup: {{board_name.capitalize()}} - {{layout_name}} - {{size_name}}</p>
+          <p class="mb-3"><small><a id="anchor-back">Back to setup selection</a></small></p>
           <div class="input-group mb-3">
             <span class="input-group-text">Angle</span>
             <select class="form-select" id="select-angle" name="angle">
@@ -66,14 +68,18 @@
           <div class="input-group 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" type="button">
-              Holds
+              Filtered Holds
             </button>
             <input type="hidden" id="input-hold-filter" name="holds" />
             {% for param_name, param_value in params.items(multi=True)%}
             <input type="hidden" name="{{param_name}}" value="{{param_value}}" />
             {% endfor %}
             <div class="collapse" id="div-hold-filter">
-              <svg id="svg-hold-filter" viewbox="0 0 0 0" xmlns="http://www.w3.org/2000/svg"></svg>
+              <svg class="vh-100" id="svg-hold-filter" viewbox="0 0 0 0" xmlns="http://www.w3.org/2000/svg"></svg>
+              <div class="input-group mb-3 d-grid gap-2">
+                <button class="btn btn-warning" type="button" id="button-reset-hold-filter">Reset Hold
+                  Filter</button>
+              </div>
             </div>
           </div>
           <div class="input-group mb-3 d-grid gap-2">

diff --git a/templates/results.html.j2 b/templates/results.html.j2
@@ -15,11 +15,12 @@
   <div class="container-sm text-center">
     {% include 'heading.html.j2' %}
     <div class="row justify-content-md-center">
-      <div class="col-md-5 card p-3 g-2">
+      <div class="col-md-5 card p-3 g-2 vh-100">
         <h4 id="header-results-count"></h4>
+        <p class="mb-3"><small><a id="anchor-back">Back to filter selection</a></small></p>
         <div id="div-results-list" class="list-group"></div>
       </div>
-      <div class="col-md-5 card p-3 g-2">
+      <div class="col-md-5 card p-3 g-2 vh-100">
         <h4 id="header-climb-name"></h4>
         <h6 id="header-climb-setter"></h6>
         <p id="paragraph-climb-stats"></p>