Issue #62: Alert message on API error

climbdex/api.py

@@ -1,3 +1,5 @@
+from flask_parameter_validation import ValidateParameters, Query
+
 import boardlib.api.aurora
 import flask
 import requests
@@ -6,41 +8,88 @@
 
 blueprint = flask.Blueprint("api", __name__)
 
+def error_handler(err):
+    details = str(err)
+    error_type = str(type(err).__name__)
+    message = f"There was a problem while getting results from the api. If the issue persists, please <a href=\"https://github.com/lemeryfertitta/Climbdex/issues/new?title={str(type(err).__name__)}: {str(err)}\" target='_blank'>report it</a>"
+
+    return {
+        "error": True,
+        "details": details,
+        "type": error_type,
+        "message": message,
+    }, 400
+
 
 @blueprint.route("/api/v1/<board_name>/layouts")
 def layouts(board_name):
-    return flask.jsonify(climbdex.db.get_data(board_name, "layouts"))
+    try:
+        return flask.jsonify(climbdex.db.get_data(board_name, "layouts"))
+    except Exception as e:
+        return error_handler(e)
 
 
 @blueprint.route("/api/v1/<board_name>/layouts/<layout_id>/sizes")
 def sizes(board_name, layout_id):
-    return flask.jsonify(
-        climbdex.db.get_data(board_name, "sizes", {"layout_id": int(layout_id)})
-    )
+    try:
+        return flask.jsonify(
+            climbdex.db.get_data(board_name, "sizes", {"layout_id": int(layout_id)})
+        )
+    except Exception as e:
+        return error_handler(e)
 
 
 @blueprint.route("/api/v1/<board_name>/layouts/<layout_id>/sizes/<size_id>/sets")
 def sets(board_name, layout_id, size_id):
-    return flask.jsonify(
-        climbdex.db.get_data(
-            board_name, "sets", {"layout_id": int(layout_id), "size_id": int(size_id)}
+    try:
+        return flask.jsonify(
+            climbdex.db.get_data(
+                board_name, "sets", {"layout_id": int(layout_id), "size_id": int(size_id)}
+            )
         )
-    )
+    except Exception as e:
+        return error_handler(e)
 
 
 @blueprint.route("/api/v1/search/count")
-def resultsCount():
-    return flask.jsonify(climbdex.db.get_search_count(flask.request.args))
-
+@ValidateParameters(error_handler)
+def resultsCount(
+    gradeAccuracy: float = Query(),
+    layout: int = Query(),
+    maxGrade: int = Query(),
+    minAscents: int = Query(),
+    minGrade: int = Query(),
+    minRating: float = Query(),
+    size: int = Query(),
+):
+    try:
+        return flask.jsonify(climbdex.db.get_search_count(flask.request.args))
+    except Exception as e:
+        return error_handler(e)
 
 @blueprint.route("/api/v1/search")
-def search():
-    return flask.jsonify(climbdex.db.get_search_results(flask.request.args))
+@ValidateParameters(error_handler)
+def search(
+    gradeAccuracy: float = Query(),
+    layout: int = Query(),
+    maxGrade: int = Query(),
+    minAscents: int = Query(),
+    minGrade: int = Query(),
+    minRating: float = Query(),
+    size: int = Query(),
+):
+    try:
+        return flask.jsonify(climbdex.db.get_search_results(flask.request.args))
+    except Exception as e:
+        return error_handler(e)
 
 
 @blueprint.route("/api/v1/<board_name>/beta/<uuid>")
 def beta(board_name, uuid):
-    return flask.jsonify(climbdex.db.get_data(board_name, "beta", {"uuid": uuid}))
+    try:
+        return flask.jsonify(climbdex.db.get_data(board_name, "beta", {"uuid": uuid}))
+    except Exception as e:
+        return error_handler(e)
 
 
 @blueprint.route("/api/v1/login/", methods=["POST"])

climbdex/static/css/common.css

@@ -0,0 +1,7 @@
+.alert {
+  display: none;
+}
+
+.show-alert {
+  display: inherit;
+}

climbdex/static/js/common.js

@@ -1,3 +1,5 @@
+var alert = document.querySelector('.alert')
+
 function drawBoard(
   svgElementId,
   imagesToHolds,

climbdex/static/js/results.js

@@ -86,7 +86,13 @@ async function fetchResultsCount() {
   const urlParams = new URLSearchParams(window.location.search);
   const response = await fetch("/api/v1/search/count?" + urlParams);
   const resultsCount = await response.json();
-  return resultsCount;
+
+  if (resultsCount['error'] == true) {
+    alert.querySelector('.alert-content').innerHTML = resultsCount['message']
+    alert.classList.add('show-alert')
+  } else {
+    return resultsCount;
+  }
 }
 
 async function fetchResults(pageNumber, pageSize) {
@@ -95,7 +101,13 @@ async function fetchResults(pageNumber, pageSize) {
   urlParams.append("pageSize", pageSize);
   const response = await fetch("/api/v1/search?" + urlParams);
   const results = await response.json();
-  return results;
+
+  if (results['error'] == true) {
+    alert.querySelector('.alert-content').innerHTML = resultsCount['message']
+    alert.classList.add('show-alert')
+  } else {
+    return results;
+  }
 }
 
 function clickClimbButton(index, pageSize, resultsCount) {
@@ -230,7 +242,7 @@ function drawResultsPage(results, pageNumber, pageSize, resultsCount) {
 }
 
 const backAnchor = document.getElementById("anchor-back");
-backAnchor.href = location.origin + "/filter?" + location.search;
+backAnchor.href = location.origin + "/filter";
 if (document.referrer && new URL(document.referrer).origin == location.origin) {
   backAnchor.addEventListener("click", function (event) {
     event.preventDefault();

climbdex/templates/alert.html.j2

@@ -0,0 +1,8 @@
+<div class="row justify-content-md-center">
+  <div class="col-md-10 p-0">
+    <div class="alert alert-danger alert-dismissible fade show" role="alert">
+      <div class="alert-content"></div>
+      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
+  </div>
+</div>

climbdex/templates/beta.html.j2

@@ -16,6 +16,7 @@
 <body>
     <div class="container text-center">
         {% include 'heading.html.j2' %}
+        {% include 'alert.html.j2' %}
         <div class="row justify-content-md-center">
             <div class="col-md-5 card p-3 g-2 vh-100">
                 <h4 id="header-links-count"> {{ beta | length }} beta videos for {{ climb_name }}</h4>
@@ -52,6 +53,9 @@
             {% include 'footer.html.j2'%}
         </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
     <script src="{{url_for('static', filename='js/beta.js')}}"></script>
     <script src="{{url_for('static', filename='js/swipe.js')}}"></script>
 

climbdex/templates/boardSelection.html.j2

@@ -16,6 +16,7 @@
 <body>
   <div class="container-sm text-center">
     {% include 'heading.html.j2' %}
+    {% include 'alert.html.j2' %}
     <div class="row justify-content-md-center">
       <div class="col-md-5">
         <form class="card p-3 bg-light" action="/filter" id="form-board">
@@ -100,7 +101,9 @@
       </div>
     </div>
   </div>
-
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+    crossorigin="anonymous"></script>
   <script src="{{url_for('static', filename='js/boardSelection.js')}}"></script>
 </body>
 

climbdex/templates/climbCreation.html.j2

@@ -14,6 +14,7 @@
 <body>
     <div class="container-sm text-center">
         {% include 'heading.html.j2' %}
+        {% include 'alert.html.j2' %}
         <div class="row justify-content-md-center">
             <div class="col-md-5 card p-3 g-2 vh-100" id="div-climb">
                 <p class="mb-2">Setup: {{board.capitalize()}} - {{layout_name}} - {{size_name}}</p>
@@ -33,9 +34,12 @@
         <div class="row justify-content-md-center mt-3">
             {% include 'footer.html.j2' %}
         </div>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+            crossorigin="anonymous"></script>
+        <script src="{{url_for('static', filename='js/common.js')}}"></script>
         <script src="{{url_for('static', filename='js/bluetooth.js')}}"></script>
         <script src="{{url_for('static', filename='js/climbCreation.js')}}"></script>
-        <script src="{{url_for('static', filename='js/common.js')}}"></script>
         <script>
             const appUrl = "{{ app_url }}";
             const colors = {{ colors | tojson}};

climbdex/templates/filterSelection.html.j2

@@ -24,6 +24,7 @@
 <body>
   <div class="container-sm text-center">
     {% include 'heading.html.j2' %}
+    {% include 'alert.html.j2' %}
     <div class="row justify-content-md-center">
       <div class="col-md-5">
         <form class="card p-3 bg-light" id="form-search" action="/results">

climbdex/templates/head.html.j2

@@ -1,6 +1,7 @@
 <title>Climbdex</title>
 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+<link href="{{url_for('static', filename='css/common.css')}}" rel="stylesheet"/>
 <link rel="icon" type="image/x-icon" href="{{url_for('static', filename='media/icon.svg')}}" />
 <link rel="manifest" href="{{url_for('static', filename='manifest.json')}}" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />

climbdex/templates/results.html.j2

@@ -24,6 +24,7 @@
 <body>
   <div class="container-sm text-center">
     {% include 'heading.html.j2' %}
+    {% include 'alert.html.j2' %}
     <div class="row justify-content-md-center">
       <div class="col-md-5 card p-3 g-2 vh-100">
         <h4 id="header-results-count"></h4>
@@ -76,6 +77,9 @@
     <div class="row justify-content-md-center mt-3">
       {% include 'footer.html.j2' %}
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"></script>
     <script src="{{url_for('static', filename='js/bluetooth.js')}}"></script>
     <script src="{{url_for('static', filename='js/common.js')}}"></script>
     <script>

requirements.txt

@@ -21,3 +21,4 @@ typing_extensions==4.9.0
 urllib3==2.1.0
 Werkzeug==3.0.1
 zipp==3.17.0
+flask_parameter_validation==2.3.1