Working with bootstrap-flask

benchmark/scripts/flask_app/app.py

@@ -1,15 +1,31 @@
 #!/usr/bin/env python
 from flask import Flask
+from flask_bootstrap import Bootstrap5
+from flask_login import LoginManager
 from .config import Config
+from .models import User, db
 
 # from .results import results
 from .main import main
 
+bootstrap = Bootstrap5()
+
+login_manager = LoginManager()
+
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.get(int(user_id))
+
 
 def create_app():
+    # db.create_all()
     app = Flask(__name__)
-    app.register_blueprint(main)
+    bootstrap.init_app(app)
     # app.register_blueprint(results)
     app.config.from_object(Config)
+    login_manager.init_app(app)
+    login_manager.login_view = "login"
     app.jinja_env.auto_reload = True
+    app.register_blueprint(main)
     return app

benchmark/scripts/flask_app/main.py

@@ -31,3 +31,23 @@ def index():
     #     compare=compare.capitalize() == "True",
     # )
     return render_template("index.html")
+
+
+@main.route("/results")
+def results():
+    pass
+
+
+@main.route("/datasets")
+def datasets():
+    pass
+
+
+@main.route("/config")
+def config():
+    pass
+
+
+@main.route("/login")
+def login():
+    return render_template("login.html")

benchmark/scripts/flask_app/models.py

@@ -0,0 +1,14 @@
+from flask_sqlalchemy import SQLAlchemy
+from sqlalchemy import Column, Integer, String
+from flask_login import UserMixin
+
+db = SQLAlchemy()
+
+
+class User(UserMixin, db.Model):
+    id = Column(Integer, primary_key=True)
+    username = Column(String(64), index=True, unique=True)
+    password_hash = Column(String(128))
+
+    def __repr__(self):
+        return "<User {}>".format(self.username)

benchmark/scripts/flask_app/static/css/main.css

@@ -36,3 +36,16 @@ body {
 .navbar {
   margin-bottom: 20px;
 }
+
+pre {
+    background: #ddd;
+    padding: 10px;
+}
+
+h2 {
+    margin-top: 20px;
+}
+
+footer {
+    margin: 20px;
+}

benchmark/scripts/flask_app/templates/_nav.html

@@ -0,0 +1,32 @@
+{% from 'bootstrap5/nav.html' import render_nav_item %}
+<nav class="navbar navbar-expand-sm navbar-light bg-light mb-4 justify-content-end">
+    <div class="container">
+        <button class="navbar-toggler"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#navbarSupportedContent"
+                aria-controls="navbarSupportedContent"
+                aria-expanded="false"
+                aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <!-- Left side of navbar -->
+            <ul class="navbar-nav me-auto">
+                <li class="nav-item">
+                    <a class="nav-link" href="{{ url_for("main.index") }}">Home</a>
+                </li>
+            </ul>
+            <ul class="navbar-nav justify-content-end">
+                {{ render_nav_item('main.results', 'Results') }}
+                {{ render_nav_item('main.datasets', 'Datasets') }}
+                {{ render_nav_item('main.config', 'Config') }}
+                {% if current_user.is_authenticated %}
+                    {{ render_nav_item('main.logout', 'Logout') }}
+                {% else %}
+                    {{ render_nav_item('main.login', 'Login') }}
+                {% endif %}
+            </ul>
+        </div>
+    </div>
+</nav>

benchmark/scripts/flask_app/templates/base.html

@@ -1,58 +1,17 @@
-{% extends 'base_bulma.html' %}
-{% block title %}
-    {% if title %}
-        {{ title }} - benchmark
-    {% else %}
-        Benchmark
-    {% endif %}
-{% endblock %}
-{% block navbar %}
-    <section class="hero is-fullheight is-default is-bold">
-        <div class="hero-head">
-            <nav class="navbar">
-                <div class="container">
-                    <div class="navbar-brand">
-                        <a class="navbar-item" href="../">
-                            <img src="../images/bulma.png" alt="Logo">
-                        </a>
-                        <span class="navbar-burger burger" data-target="navbarMenu">
-                            <span></span>
-                            <span></span>
-                            <span></span>
-                        </span>
-                    </div>
-                    <div id="navbarMenu" class="navbar-menu">
-                        <div class="navbar-end">
-                            <div class="tabs is-right">
-                                <ul>
-                                    <li id="home">
-                                        <a href="{{ url_for("main.index") }}">Home</a>
-                                    </li>
-                                    <li id="results">
-                                        <a href="">Results</a>
-                                    </li>
-                                    <li id="datasets">
-                                        <a href="">Datasets</a>
-                                    </li>
-                                    <li id="config">
-                                        <a href="">Config</a>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-        </div>
-    {% endblock %}
-    {% 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>
-    {% endblock %}
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        {% block head %}
+            <meta charset="utf-8">
+            <meta name="viewport"
+                  content="width=device-width, initial-scale=1, shrink-to-fit=no">
+            {% block styles %}
+                <!-- Bootstrap CSS -->
+                {{ bootstrap.load_css() }}
+            {% endblock %}
+            <title>Benchmark</title>
+        {% endblock %}
+    </head>
+    <body>{% include "_nav.html" %}</body>
+    {% block jscript %}{{ bootstrap.load_js() }}{% endblock %}
+</html>

requirements.txt

@@ -3,6 +3,11 @@ scikit-learn
 scipy
 python-dotenv
 flask
+bootstrap-flask
+flask-wtf
+flask-login
+flask-migrate
+flask_sqlalchemy
 odte
 cython
 fimdlp