Add custom error pages

app/__init__.py

@@ -6,3 +6,5 @@ from flask_bootstrap import Bootstrap
 app = Flask(__name__)
 app.secret_key = SECRET_KEY
 bootstrap = Bootstrap(app)
+
+from app import errors, routes

app/errors.py

@@ -0,0 +1,12 @@
+from flask import render_template
+from app import app
+
+
+@app.errorhandler(404)
+def not_found_error(error):
+    return render_template("404.html"), 404
+
+
+@app.errorhandler(500)
+def internal_error(error):
+    return render_template("500.html"), 500

app/forms.py

@@ -0,0 +1,9 @@
+from constants import DATASETS
+from flask_wtf import FlaskForm
+from wtforms import SelectField, SubmitField
+from wtforms.validators import DataRequired
+
+
+class DatasetForm(FlaskForm):
+    dataset = SelectField(validators=[DataRequired()], choices=DATASETS)
+    submit = SubmitField("Submit")

app/routes.py

@@ -1,6 +1,7 @@
 from flask import render_template
 
 from app import app
+from app.forms import DatasetForm
 
 
 @app.route("/")
@@ -11,4 +12,12 @@ def index():
 
 @app.route("/data")
 def data():
-    return render_template("data.html", title="Data")
+    form = DatasetForm()
+    if form.validate_on_submit():
+        return render_template("visualization.html", form=form, title="Visualization")
+    return render_template("data.html", title="Data", form=form)
+
+
+@app.route("/visualization")
+def visualization():
+    return render_template("visualization.html", title="Visualization", form=form)

app/templates/404.html

@@ -0,0 +1,6 @@
+{% extends "base.html" %}
+
+{% block app_content %}
+    <h1>Sorry, we couldn't find that</h1>
+    <p><a href="{{ url_for('index') }}">Back</a></p>
+{% endblock %}

app/templates/500.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block app_content %}
+    <h1>An unexpected error has occurred</h1>
+    <p>The administrator has been notified!</p>
+    <p>If he gets too many notifications, we might replace him with an AI</p>
+    <p><a href="{{ url_for('index') }}">Back</a></p>
+{% endblock %}

app/templates/base.html

@@ -29,14 +29,6 @@
 
 {% block content %}
 <div class="container">
-    {% with messages = get_flashed_messages() %}
-    {% if messages %}
-    {% for message in messages %}
-    <div class="alert alert-info" role="alert">{{ message }}</div>
-    {% endfor %}
-    {% endif %}
-    {% endwith %}
-
     {# application content needs to be provided in the app_content block #}
     {% block app_content %}{% endblock %}
 </div>

app/templates/data.html

@@ -1,15 +1,12 @@
 {% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
 
-{% block content %}
-<h1 class="text-center">How you like your data?</h1>
-<li>
-    <p class="text-center">
-        <a href="{{ url_for('map_view') }}" class="btn btn-success" role="button" aria-pressed="true">Maps</a>
-    </p>
-</li>
-<li>
-    <p class="text-center">
-        <a href="{{ url_for('plot_view') }}" class="btn btn-success" role="button" aria-pressed="true">Plots</a>
-    </p>
-</li>
+{% block app_content %}
+<h1>Select a dataset</h1>
+<div class="row">
+    <div class="col-md-4">
+        {{ wtf.quick_form(form) }}
+    </div>
+</div>
+<br>
 {% endblock %}

app/templates/visualization.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
+
+{% block app_content %}
+<h1>Dataset visualization</h1>
+<img src="data:image/png;base64,{{ plot }}" alt="Image Placeholder">
+<img src="data:image/png;base64,{{ map }}" alt="Image Placeholder">
+<p><a href="{{ url_for('data') }}">Back</a></p>
+{% endblock %}

shell.nix

@@ -10,6 +10,7 @@ pkgs.mkShell {
     flask
     flask-bootstrap
     flask_wtf
+    matplotlib
     folium
     pytest
     # Development tools