Merge pull request #65 from brmnjsh/62-toast-message-on-error

Issue #62: Alert message on API error

climbdex/__init__.py

@@ -1,8 +1,15 @@
+import sys
 import flask
+import logging
 
 import climbdex.api
 import climbdex.views
 
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(message)s",
+    handlers=[logging.StreamHandler(sys.stdout)],
+)
 
 def create_app():
     app = flask.Flask(__name__, instance_relative_config=True)

climbdex/api.py

@@ -1,11 +1,44 @@
+from flask_parameter_validation import ValidateParameters, Query
+
 import boardlib.api.aurora
 import flask
 import requests
+import json
+import logging
 
 import climbdex.db
 
 blueprint = flask.Blueprint("api", __name__)
 
+def parameter_error(e):
+    code = 400
+    name = str(type(e).__name__)
+    description = f"Parameters were missing and/or misconfigured. If the issue persists, please <a href=\"https://github.com/lemeryfertitta/Climbdex/issues/new?title={str(type(e).__name__)}: {str(e)} ({code})\" target='_blank'>report it</a> (code: {code})"
+
+    response =  {
+        "error": True,
+        "code": code,
+        "name": name,
+        "description": description,
+    }, code
+
+    logging.error(response)
+    return response
+
+@blueprint.errorhandler(Exception)
+def handle_exception(e):
+    response = e.get_response()
+    response.data = json.dumps({
+        "error": True,
+        "code": e.code,
+        "name": e.name,
+        "description": f"There was a problem while getting results from the server. If the issue persists, please <a href=\"https://github.com/lemeryfertitta/Climbdex/issues/new?title={e.name} ({e.code})&body={e.description}\" target='_blank'>report it</a> (code: {e.code})",
+    })
+    response.content_type = "application/json"
+    logging.error(response.data)
+    return response
+
+
 
 @blueprint.route("/api/v1/<board_name>/layouts")
 def layouts(board_name):
@@ -29,12 +62,29 @@ def sets(board_name, layout_id, size_id):
 
 
 @blueprint.route("/api/v1/search/count")
-def resultsCount():
+@ValidateParameters(parameter_error)
+def resultsCount(
+    gradeAccuracy: float = Query(),
+    layout: int = Query(),
+    maxGrade: int = Query(),
+    minAscents: int = Query(),
+    minGrade: int = Query(),
+    minRating: float = Query(),
+    size: int = Query(),
+):
     return flask.jsonify(climbdex.db.get_search_count(flask.request.args))
 
-
 @blueprint.route("/api/v1/search")
-def search():
+@ValidateParameters(parameter_error)
+def search(
+    gradeAccuracy: float = Query(),
+    layout: int = Query(),
+    maxGrade: int = Query(),
+    minAscents: int = Query(),
+    minGrade: int = Query(),
+    minRating: float = Query(),
+    size: int = Query(),
+):
     return flask.jsonify(climbdex.db.get_search_results(flask.request.args))
 
 

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['description']
+    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['description']
+    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" + location.search;
 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