New webpage structure, not yet finished. Change password implemented again (#11 )

* Adjusted GUI of daily dashboard to better deal with float values * Change password + New base (#10) * created a new Base template to test with * Changed out the base and added a new password page * Password change works, UI needs redisgn
Adjusted GUI of daily dashboard to better deal with float values (#9 )
2025-10-30 11:19:59 +00:00 · 2025-10-08 15:38:40 +02:00 · 2025-10-08 11:56:20 +02:00 · 2025-08-21 17:05:32 +02:00
9 changed files with 212 additions and 83 deletions
--- a/app.py
+++ b/app.py
@@ -1,8 +1,4 @@
-from flask import (
+from flask import redirect, url_for, send_from_directory, render_template
    redirect,
    url_for,
    send_from_directory,
 )
 from flask_login import (
    login_required,
    current_user,
@@ -54,6 +50,12 @@ def index():
    return redirect(url_for("auth.login"))
@app.route("/test")
@login_required
 def text():
    return render_template("newBase.html")
@app.route("/favicon.ico")
 def favicon():
    return send_from_directory("static", "favicon.ico")
--- a/application/auth/routes.py
+++ b/application/auth/routes.py
@@ -35,8 +35,8 @@ def login():
    return render_template("login.html", form=form)
-@bp.route("/change_password", methods=["GET", "POST"])
+@bp.route("/change_pass", methods=["GET", "POST"])
-def change_password():
+def change_pass():
    if not current_user.is_authenticated:
        return redirect(url_for("auth.login"))
@@ -50,8 +50,9 @@ def change_password():
            current_user.change_password(form.new_password.data)
            current_user.set_pw_change(False)
            db.session.commit()
            logout_user()
            return default_return()
-    return render_template("change_password.html", form=form)
+    return render_template("new_change_password.html", form=form)
@bp.route("/logout")
--- a/application/auth/templates/new_change_password.html
+++ b/application/auth/templates/new_change_password.html
@@ -0,0 +1,52 @@
 {% extends "base.html" %}
 {% block title %}Change Password{%endblock%}
 {% block content %}
 <style>
    .card {
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
 </style>
 <div class="d-flex justify-content-center align-items-center">
    <div class="card p-4" style="max-width: 400px; width: 90%">
        <h1 class="text-center mb-4" style="font-size: 2rem;">Change Your Password</h1>
        <form method="POST">
            {{ form.hidden_tag() }}
            <div class="mb-3">
                <label for="current-password" class="form-label">Current Password</label>
                {{ form.current_password(class="form-control", placeholder="") }}
                {% if form.current_password.errors %}
                <div class="text-danger small">
                    {{ form.current_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label for="new-password" class="form-label">New Password</label>
                {{ form.new_password(class="form-control", placeholder="Enter password") }}
                {% if form.new_password.errors %}
                <div class="text-danger small">
                    {{ form.new_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label for="confirm-password" class="form-label">Confirm New Password</label>
                {{ form.confirm_password(class="form-control", placeholder="Enter password") }}
                {% if form.confirm_password.errors %}
                <div class="text-danger small">
                    {{ form.confirm_password.errors[0] }}
                </div>
                {% endif %}
            </div>
            {{ form.submit(class="btn btn-primary w-100", label="Update Password") }}
        </form>
        <p class="text-center text-muted mt-3" style="font-size: 0.85rem;">
            Make sure your password is at least 8 characters long and includes a mix of letters and numbers.
        </p>
    </div>
 </div>
 {% endblock %}
--- a/application/templates/base.html
+++ b/application/templates/base.html
@@ -10,74 +10,16 @@
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
-<body class="bg-body-secondary">
+<body class="bg-body-secondary" style="max-width: calc(100vh*9/16); margin: 0 auto;">
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
+    {% include "new_navbar.html" %}
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">CalCounter</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
+    {% include "flash.html" %}
                <div class="d-flex w-100">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('user.daily_log') }}">Daily Log (new)</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('user.dashboard') }}">Dashboard</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        {% if current_user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
                        </li>
                        {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
                        </li>
                        {% endif %}
                        <li class="nav-item">
                            <button id="toggleTheme" class="btn btn-outline-light">Toggle Theme</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    {% block content %}
    {% endblock %}
-    <div class="container">
+    {% block footer %}
-        {% with messages = get_flashed_messages() %}
+    {% endblock %}
        {% if messages %}
        <div class="alert alert-info">
            {% for message in messages %}
            <p>{{ message }}</p>
            {% endfor %}
        </div>
        {% endif %}
        {% endwith %}
        {% block content %}
        {% endblock %}
    </div>
    <script>
        const html = document.documentElement;
        const savedTheme = localStorage.getItem("theme");
        if (savedTheme) {
            html.setAttribute("data-bs-theme", savedTheme);
        }
        document.getElementById("toggleTheme").addEventListener("click", () => {
            const current = html.getAttribute("data-bs-theme");
            const next = current === "dark" ? "light" : "dark";
            html.setAttribute("data-bs-theme", next);
            localStorage.setItem("theme", next);
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
--- a/application/templates/flash.html
+++ b/application/templates/flash.html
@@ -0,0 +1,9 @@
 {% with messages = get_flashed_messages() %}
 {% if messages %}
 <div class="alert alert-info">
    {% for message in messages %}
    <p>{{ message }}</p>
    {% endfor %}
 </div>
 {% endif %}
 {% endwith %}
--- a/application/templates/navbar.html
+++ b/application/templates/navbar.html
@@ -0,0 +1,51 @@
 <nav class="navbar navbar-dark bg-dark mb-4">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index') }}">CalCounter</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <div class="d-flex w-100">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('user.daily_log') }}">Daily Log (new)</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('user.dashboard') }}">Dashboard</a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    {% if current_user.is_authenticated %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
                    </li>
                    {% endif %}
                    <li class="nav-item">
                        <button id="toggleTheme" class="btn btn-outline-light">Toggle Theme</button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
 </nav>
 <script>
    const html = document.documentElement;
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
        html.setAttribute("data-bs-theme", savedTheme);
    }
    document.getElementById("toggleTheme").addEventListener("click", () => {
        const current = html.getAttribute("data-bs-theme");
        const next = current === "dark" ? "light" : "dark";
        html.setAttribute("data-bs-theme", next);
        localStorage.setItem("theme", next);
    });
 </script>
--- a/application/templates/new_navbar.html
+++ b/application/templates/new_navbar.html
@@ -0,0 +1,60 @@
 <!-- Navbar -->
 <nav class="navbar bg-body shadow-sm mb-2">
    <div class="container">
        <a class="navbar-brand" href="#">TaskManager</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('user.daily_log') }}">Daily Overview</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('user.dashboard') }}">Dashboard</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                {% if current_user.is_authenticated %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="accountDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        Account
                    </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="accountDropdown">
                        <li><a class="dropdown-item" href='{{ url_for("auth.change_pass") }}'>Change Password</a></li>
                        <li><a class="dropdown-item" href="#">Profile</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href='{{ url_for("auth.logout") }}'>Logout</a></li>
                    </ul>
                </li>
                {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="#">Login</a>
                </li>
                {% endif %}
                <li class="nav-item">
                    <button id="toggleTheme" class="btn btn-body-secondary bg-dark-subtle">Toggle Theme</button>
                </li>
            </ul>
        </div>
    </div>
 </nav>
 <script>
    const html = document.documentElement;
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme) {
        html.setAttribute("data-bs-theme", savedTheme);
    }
    document.getElementById("toggleTheme").addEventListener("click", () => {
        const current = html.getAttribute("data-bs-theme");
        const next = current === "dark" ? "light" : "dark";
        html.setAttribute("data-bs-theme", next);
        localStorage.setItem("theme", next);
    });
 </script>
--- a/application/user/templates/daily_log.html
+++ b/application/user/templates/daily_log.html
@@ -11,14 +11,14 @@
        <h5>Macros</h5>
        {% for macro in macros %}
        <div class="mb-2">
-            <span class="macro-text">{{ macro.name }}: {{ macro.current }} / {{ macro.target }}</span>
+            <span class="macro-text">{{ macro.name }}: {{ macro.current | int }} / {{ macro.target }}</span>
            <div class="progress rounded" style="height: 24px;">
                <div class="progress-bar bg-danger macro-bar" role="progressbar"
                    style="width: {{ macro.bar_width_overflow }}%">
-                    {{ (macro.current - macro.target) }}{{ macro.unit }}
+                    {{ (macro.current - macro.target) | int}}{{ macro.unit }}
                </div>
                <div class="progress-bar bg-success macro-bar" role="progressbar" style="width: {{ macro.bar_width }}%">
-                    {{ min(macro.current, macro.target) }}{{ macro.unit }}
+                    {{ min(macro.current, macro.target) | int }}{{ macro.unit }}
                </div>
            </div>
        </div>
@@ -30,15 +30,31 @@
        <h5>Items Eaten Today</h5>
        <div class="list-group list-group-flush">
            {% for log in logs %}
-            <div class="list-group-item item-row d-flex justify-content-between align-items-center">
+            <div class="list-group-item d-flex align-items-center">
-                <span>({{ log.amount }}g) {{ log.food_item.name }}</span>
+                <!-- Weight: fixed width, right-aligned -->
-                <span>{{ log.food_item.energy_100 * log.amount / 100 }} kcal</span>
+                <span class="text-end" style="width: 6ch; flex-shrink: 0;">
                    ({{ log.amount | int }}g)
                </span>
                <!-- Food name: flexible, truncates if too long -->
                <span class="text-truncate flex-grow-1"
                    style="min-width: 0; margin-left: 0.5rem; margin-right: 0.5rem;">
                    {{ log.food_item.name }}
                </span>
                <!-- kcal: fixed width, right-aligned, pushed to the right -->
                <span class="d-inline-block text-end ms-auto" style="width: 9ch; flex-shrink: 0;">
                    {{ (log.food_item.energy_100 * log.amount / 100) | int }} kcal
                </span>
            </div>
            {% endfor %}
        </div>
    </div>
 </div>
 <!-- Bottom Navigation Buttons -->
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,3 @@
 # For Python >=3.8, importlib-metadata backport is not needed
 python_version >= "3.12.10"
 # Package requirements
 alembic==1.16.4
 blinker==1.9.0
 click==8.2.1
Author	SHA1	Message	Date
Stef	88f553a08e	New webpage structure, not yet finished. Change password implemented again (#11 ) * Adjusted GUI of daily dashboard to better deal with float values * Change password + New base (#10) * created a new Base template to test with * Changed out the base and added a new password page * Password change works, UI needs redisgn	2025-10-08 15:38:40 +02:00
Stef	573437f4cf	Adjusted GUI of daily dashboard to better deal with float values (#9 )	2025-10-08 11:56:20 +02:00
Stef	4bc319c32a	Revert "Update requirements.txt" This reverts commit `24a1757166`.	2025-08-21 17:05:32 +02:00