Add Bootstrap simple template and error handling

Design.org

@@ -45,7 +45,7 @@ CLOSED: [2019-11-01 Fri 00:34]
 - [X] Black box
 - [X] Entity-Relationship
 ** Implementation
-*** TODO Backend [2/3] [66%]
+*** TODO Backend [2/4] [50%]
 **** DONE Database [3/3] [100%]
 CLOSED: [2020-01-03 Fri 00:44]
 - [X] Connection
@@ -56,11 +56,15 @@ CLOSED: [2020-01-08 Wed 03:18]
 - [X] Select useful fiels
 - [X] Convert PU to Country (ISO 3166)
 - [X] Insert into database
-**** TODO Flask Application [0/2] [0%]
-- [ ] Login for admin
+**** TODO Flask Application [1/4] [25%]
 - [ ] Arithmetic operations for yearly changes
+- [ ] Tables with pandas
 - [ ] Plots with pandas
-*** NEXT Documentation
-*** INACTIVE Frontend [0/1] [0%]
-- [ ] [[https://adminlte.io/][Adminlte]]
-- [ ] Bootstrap
+- [X] Login for admin
+**** TODO Possible additions [0/2] [0%]
+- [ ] Text search for glaciers
+- [ ] Form seach for a year
+*** TODO Frontend [1/2] [50%]
+- [X] Flask-Bootstrap
+- [ ] Find CSS
+*** TODO Documentation

code/Pipfile

@@ -13,6 +13,7 @@ pandas = "*"
 iso3166 = "*"
 flask-wtf = "*"
 flask-login = "*"
+flask-bootstrap = "*"
 
 [requires]
 python_version = "3.8"

code/Pipfile.lock

@@ -1,7 +1,7 @@
 {
     "_meta": {
         "hash": {
-            "sha256": "234ca1fc7cbb10534d17febc8a9d0320ecb5c6317351bcd97e161c860201b5a5"
+            "sha256": "b25fa5cfde97f34d3f4210b7c3e602df640d50105eb290daefa14c194b289936"
         },
         "pipfile-spec": 6,
         "requires": {
@@ -23,6 +23,13 @@
             ],
             "version": "==7.0"
         },
+        "dominate": {
+            "hashes": [
+                "sha256:6e833aea505f0236a9fc692326bac575f8bd38ae0f3a1bdc73d20ca606ac75d5",
+                "sha256:a92474b4312bd8b4c1789792f3ec8c571cd8afa8e7502a2b1c64dd48cd67e59c"
+            ],
+            "version": "==2.4.0"
+        },
         "flask": {
             "hashes": [
                 "sha256:13f9f196f330c7c2c5d7a5cf91af894110ca0215ac051b5844701f2bfd934d52",
@@ -31,6 +38,13 @@
             "index": "pypi",
             "version": "==1.1.1"
         },
+        "flask-bootstrap": {
+            "hashes": [
+                "sha256:cb08ed940183f6343a64e465e83b3a3f13c53e1baabb8d72b5da4545ef123ac8"
+            ],
+            "index": "pypi",
+            "version": "==3.3.7.1"
+        },
         "flask-login": {
             "hashes": [
                 "sha256:c815c1ac7b3e35e2081685e389a665f2c74d7e077cb93cecabaea352da4752ec"
@@ -195,6 +209,12 @@
             ],
             "version": "==1.3.12"
         },
+        "visitor": {
+            "hashes": [
+                "sha256:2c737903b2b6864ebc6167eef7cf3b997126f1aa94bdf590f90f1436d23e480a"
+            ],
+            "version": "==0.1.3"
+        },
         "werkzeug": {
             "hashes": [
                 "sha256:7280924747b5733b246fe23972186c6b348f9ae29724135a6dfc1e53cea433e7",

code/app/__init__.py

@@ -2,11 +2,13 @@ from flask import Flask
 from config import Config
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager
+from flask_bootstrap import Bootstrap
 
 app = Flask(__name__)
 app.config.from_object(Config)
 db = SQLAlchemy(app)
 login = LoginManager(app)
 login.login_view = "login"
+bootstrap = Bootstrap(app)
 
-from app import routes, models
+from app import routes, models, errors

code/app/errors.py

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

code/app/routes.py

@@ -40,3 +40,9 @@ def logout():
 @login_required
 def admin():
     return render_template("admin.html", title="Admin Page")
+
+
+@app.route("/nuke")
+@login_required
+def nuke():
+    return render_template("nuked.html", title="NUKE THE SYSTEM!")

code/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 %}

code/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 %}

code/app/templates/admin.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>Hi, {{ current_user.username }}!</h1>
+    <h1>Hey, {{ current_user.username }}!</h1>
     Do you want to nuke the database?
+    <li><a href="{{ url_for('nuke') }}">Yes, I want to burn down the world</a></li>
 {% endblock %}

code/app/templates/base.html

@@ -1,30 +1,49 @@
-<html>
-    <head>
-      {% if title %}
-      <title>{{ title }} - IGDB</title>
-      {% else %}
-      <title>Welcome to IGDB</title>
-      {% endif %}
-    </head>
-    <body>
-      <div>IGDB:
-        <a href="{{ url_for('index') }}">Home</a>
-        {% if current_user.is_anonymous %}
-        <a href="{{ url_for('login') }}">Login</a>
-        {% else %}
-        <a href="{{ url_for('admin') }}">Administration</a>
-        <a href="{{ url_for('logout') }}">Logout</a>
-        {% endif %}
+{% extends 'bootstrap/base.html' %}
+
+{% block title %}
+    IGDB
+{% endblock %}
+
+{% block navbar %}
+    <nav class="navbar navbar-default">
+        <div class="container">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <a class="navbar-brand" href="{{ url_for('index') }}">Microblog</a>
             </div>
-        <hr>
+            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+                <ul class="nav navbar-nav">
+                    <li><a href="{{ url_for('index') }}">Home</a></li>
+                </ul>
+                <ul class="nav navbar-nav navbar-right">
+                    {% if current_user.is_anonymous %}
+                    <li><a href="{{ url_for('login') }}">Login</a></li>
+                    {% else %}
+                    <li><a href="{{ url_for('admin') }}">Administration</a></li>
+                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+{% endblock %}
+
+{% block content %}
+    <div class="container">
         {% with messages = get_flashed_messages() %}
         {% if messages %}
-        <ul>
             {% for message in messages %}
-            <li>{{ message }}</li>
+            <div class="alert alert-info" role="alert">{{ message }}</div>
             {% endfor %}
-        </ul>
         {% endif %}
         {% endwith %}
-        {% block content %}{% endblock %}    </body>
-</html>
+
+        {# application content needs to be provided in the app_content block #}
+        {% block app_content %}{% endblock %}
+    </div>
+{% endblock %}

code/app/templates/index.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>IGDB: International Glacier Database</h1>
-    The IGDB is a database, that uses data from the <a href="https://dx.doi.org/10.5904/wgms-fog-2019-12">WGMS</a> to illustrate the consequences of climate change.
+<h1 id="igdb-internation-glacier-database">IGDB: Internation Glacier Database</h1>
+<p>The IGDB is a database, that uses data from the <a href="http://dx.doi.org/10.5904/wgms-fog-2018-11">WGMS</a> to illustrate the consequences of climate change.</p>
 {% endblock %}

code/app/templates/login.html

@@ -1,24 +1,12 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
+{% import 'bootstrap/wtf.html' as wtf %}
 
-{% block content %}
+{% block app_content %}
     <h1>Sign In</h1>
-    <form action="" method="post" novalidate>
-        {{ form.hidden_tag() }}
-        <p>
-            {{ form.username.label }}<br>
-            {{ form.username(size=32) }}<br>
-            {% for error in form.username.errors %}
-            <span style="color: red;">[{{ error }}]</span>
-            {% endfor %}
-        </p>
-        <p>
-            {{ form.password.label }}<br>
-            {{ form.password(size=32) }}<br>
-            {% for error in form.password.errors %}
-            <span style="color: red;">[{{ error }}]</span>
-            {% endfor %}
-        </p>
-        <p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
-        <p>{{ form.submit() }}</p>
-    </form>
+    <div class="row">
+        <div class="col-md-4">
+            {{ wtf.quick_form(form) }}
+        </div>
+    </div>
+    <br>
 {% endblock %}

code/app/templates/nuked.html

@@ -0,0 +1,13 @@
+{% extends "base.html" %}
+
+{% block content %}
+<h1 id="youre-the-boss">You're the boss!</h1>
+<ol type="1">
+<li>Stop the web server, and then execute:</li>
+<pre class="shell"><code>mysql -u root -p</code></pre>
+<li><p>Introduce MySQL's root password</p></li>
+<li><p>Execute these statements:</p></li>
+<div class="sourceCode" id="cb2"><pre class="sourceCode sql"><code class="sourceCode sql"><span id="cb2-1"><a href="#cb2-1"></a><span class="kw">DROP</span> <span class="kw">DATABASE</span> IGDB;</span>
+<span id="cb2-2"><a href="#cb2-2"></a><span class="kw">DROP</span> <span class="fu">USER</span> IGDB@LOCALHOST;</span></code></pre></div>
+{% endblock %}
+</ol>