mirror of
https://github.com/StefBuwalda/cal_counter.git
synced 2025-10-30 11:19:59 +00:00
Add meal v2 flow and user timezone support
Introduces a new add_meal_v2 blueprint with barcode scanning, item search, and improved meal logging UI. Adds user timezone support: login form now captures timezone, User model and database schema updated, and timezone is set on login. Refactors templates and forms to support these changes, and removes the old login template.
This commit is contained in:
187
application/add_meal_v2/routes.py
Normal file
187
application/add_meal_v2/routes.py
Normal file
@@ -0,0 +1,187 @@
|
||||
from flask import (
|
||||
Blueprint,
|
||||
redirect,
|
||||
url_for,
|
||||
render_template,
|
||||
session,
|
||||
request,
|
||||
jsonify,
|
||||
abort,
|
||||
)
|
||||
from flask_login import current_user
|
||||
from forms import FoodItemForm, FoodLogForm
|
||||
from application import db
|
||||
from models import FoodItem, FoodLog
|
||||
from sqlalchemy import and_, or_
|
||||
from datetime import datetime, timedelta, timezone
|
||||
from sqlalchemy.sql.elements import BinaryExpression
|
||||
from typing import cast
|
||||
|
||||
bp = Blueprint(
|
||||
"add_meal_v2",
|
||||
__name__,
|
||||
url_prefix="/add_meal_v2",
|
||||
template_folder="templates",
|
||||
)
|
||||
|
||||
|
||||
@bp.before_request
|
||||
def login_required():
|
||||
if not current_user.is_authenticated:
|
||||
return redirect(url_for("auth.login"))
|
||||
|
||||
|
||||
@bp.route("/select_meal/<int:meal_type>", methods=["GET"])
|
||||
def step1(meal_type: int):
|
||||
assert type(meal_type) is int
|
||||
assert 0 <= meal_type <= 3
|
||||
session["meal_type"] = meal_type
|
||||
return redirect(url_for("add_meal.step2"))
|
||||
|
||||
|
||||
@bp.route("/get_barcode", methods=["GET"])
|
||||
def step2():
|
||||
return render_template("scan_barcode.html")
|
||||
|
||||
|
||||
@bp.route("/step3/<string:input>", methods=["GET"])
|
||||
def step3(input: str):
|
||||
# check if meal_type cookie is set
|
||||
if "meal_type" not in session:
|
||||
return redirect("/")
|
||||
|
||||
# Check if input is a barcode
|
||||
if input.isdigit():
|
||||
item = current_user.food_items.filter_by(barcode=input).first()
|
||||
|
||||
else:
|
||||
item = current_user.food_items.filter_by(name=input).first()
|
||||
|
||||
if item is None:
|
||||
# Does not exist, add item
|
||||
return redirect(url_for("add_meal.step3_alt1", input=input))
|
||||
|
||||
# Track item to add and continue to next step
|
||||
session["item_id"] = item.id
|
||||
return redirect(url_for("add_meal.step4"))
|
||||
|
||||
|
||||
@bp.route("/step3_alt1/<string:input>", methods=["GET"])
|
||||
def step3_alt1(input: str):
|
||||
form = FoodItemForm()
|
||||
|
||||
if input.isdigit():
|
||||
form.barcode.data = input
|
||||
else:
|
||||
form.name.data = input
|
||||
return render_template("add_item.html", form=form)
|
||||
|
||||
|
||||
@bp.route("/step3_alt1/<string:input>", methods=["POST"])
|
||||
def step3_alt1_post(input: str):
|
||||
form = FoodItemForm()
|
||||
|
||||
if form.validate_on_submit():
|
||||
# Form has valid input
|
||||
barcode = form.barcode.data
|
||||
name = form.name.data
|
||||
assert name
|
||||
assert form.energy.data is not None
|
||||
assert form.protein.data is not None
|
||||
assert form.carbs.data is not None
|
||||
assert form.fat.data is not None
|
||||
|
||||
# Check if name or barcode already exists
|
||||
name_filter = cast(BinaryExpression, FoodItem.name == name)
|
||||
barcode_filter = cast(BinaryExpression, FoodItem.barcode == barcode)
|
||||
filter_exp = or_(name_filter, barcode_filter)
|
||||
item = current_user.food_items.filter(filter_exp).first()
|
||||
|
||||
if item is None:
|
||||
# Item does not exist, add to DB
|
||||
barcode = (
|
||||
barcode if barcode else None
|
||||
) # Turn empty strings into None
|
||||
db.session.add(
|
||||
FoodItem(
|
||||
name=name,
|
||||
owner_id=current_user.id,
|
||||
energy=form.energy.data,
|
||||
protein=form.protein.data,
|
||||
carbs=form.carbs.data,
|
||||
fat=form.fat.data,
|
||||
barcode=barcode,
|
||||
saturated_fat=form.saturated_fat.data,
|
||||
sugar=form.sugar.data,
|
||||
)
|
||||
)
|
||||
db.session.commit()
|
||||
print("[DEBUG] New FoodItem Added")
|
||||
input = barcode if barcode else name # update input
|
||||
else:
|
||||
print(f"Item exists: {item.barcode} {item.name}")
|
||||
|
||||
# Item added or already present, return to step 3.
|
||||
return redirect(url_for("add_meal.step3", input=input))
|
||||
else:
|
||||
print("[DEBUG] Form Invalid")
|
||||
return redirect(url_for("add_meal.step3_alt1", input=input))
|
||||
|
||||
|
||||
@bp.route("/step4", methods=["GET", "POST"])
|
||||
def step4():
|
||||
if "item_id" not in session:
|
||||
return redirect(url_for("add_meal.step2"))
|
||||
form = FoodLogForm()
|
||||
item = db.session.get(FoodItem, session["item_id"])
|
||||
|
||||
offset = session["offset"]
|
||||
if offset is None or item is None:
|
||||
abort(404)
|
||||
|
||||
today = datetime.now(timezone.utc).date()
|
||||
day = today + timedelta(days=offset)
|
||||
|
||||
if form.validate_on_submit():
|
||||
assert form.amount.data
|
||||
db.session.add(
|
||||
FoodLog(
|
||||
food_item_id=item.id,
|
||||
user_id=current_user.id,
|
||||
amount=form.amount.data,
|
||||
part_of_day=session["meal_type"],
|
||||
date_=day,
|
||||
)
|
||||
)
|
||||
db.session.commit()
|
||||
session.pop("meal_type")
|
||||
session.pop("item_id")
|
||||
return redirect(url_for("user.daily_log", offset=offset))
|
||||
|
||||
match session["meal_type"]:
|
||||
case 0:
|
||||
tod = "Breakfast"
|
||||
case 1:
|
||||
tod = "Lunch"
|
||||
case 2:
|
||||
tod = "Dinner"
|
||||
case 3:
|
||||
tod = "Snack"
|
||||
case _:
|
||||
tod = "Unknown"
|
||||
return render_template("step4.html", tod=tod, item=item, form=form)
|
||||
|
||||
|
||||
@bp.route("/query", methods=["GET"])
|
||||
def query():
|
||||
q = request.args.get("q", "").strip().lower()
|
||||
if not q:
|
||||
return jsonify([])
|
||||
|
||||
words = q.split()
|
||||
filters = [
|
||||
FoodItem.name.ilike(f"%{word}%") for word in words # type: ignore
|
||||
]
|
||||
|
||||
results = current_user.food_items.filter(and_(*filters)).all()
|
||||
return jsonify([item.name for item in results])
|
||||
49
application/add_meal_v2/templates/add_item.html
Normal file
49
application/add_meal_v2/templates/add_item.html
Normal file
@@ -0,0 +1,49 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<form method="POST">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.barcode.label(class="form-label") }}
|
||||
{{ form.barcode(class="form-control-plaintext", readonly=true) }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.name.label(class="form-label") }}
|
||||
{{ form.name(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.energy.label(class="form-label") }}
|
||||
{{ form.energy(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.fat.label(class="form-label") }}
|
||||
{{ form.fat(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.saturated_fat.label(class="form-label") }}
|
||||
{{ form.saturated_fat(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.carbs.label(class="form-label") }}
|
||||
{{ form.carbs(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.sugar.label(class="form-label") }}
|
||||
{{ form.sugar(class="form-control") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.protein.label(class="form-label") }}
|
||||
{{ form.protein(class="form-control") }}
|
||||
</div>
|
||||
|
||||
{{ form.submit(class="btn btn-primary") }}
|
||||
</form>
|
||||
{% endblock%}
|
||||
134
application/add_meal_v2/templates/scan_barcode.html
Normal file
134
application/add_meal_v2/templates/scan_barcode.html
Normal file
@@ -0,0 +1,134 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container py-5">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-4">
|
||||
<h1 class="fw-bold">Barcode Scanner</h1>
|
||||
<p class="text-muted">Use your camera to scan barcodes</p>
|
||||
</div>
|
||||
|
||||
<!-- Video preview -->
|
||||
<div class="d-flex justify-content-center mb-4">
|
||||
<video id="video" class="border rounded shadow-sm" style="width: 100%; max-width: 500px;" autoplay
|
||||
muted></video>
|
||||
</div>
|
||||
|
||||
<!-- Start/Stop buttons -->
|
||||
<div class="d-flex justify-content-center gap-3 mb-4">
|
||||
<button id="startButton" class="btn btn-primary px-4">Start Scanning</button>
|
||||
<button id="stopButton" class="btn btn-danger px-4">Stop</button>
|
||||
</div>
|
||||
|
||||
<!-- Search box and suggestions -->
|
||||
<div class="d-flex justify-content-center mt-4">
|
||||
<div class="w-100 position-relative" style="max-width: 500px;">
|
||||
<!-- Input group (search + go button) -->
|
||||
<div class="input-group">
|
||||
<input type="text" id="search-box" class="form-control" placeholder="Search..." autocomplete="off">
|
||||
<button id="go-button" class="btn btn-success">Go</button>
|
||||
</div>
|
||||
|
||||
<!-- Suggestions -->
|
||||
<ul id="suggestions" class="list-group position-absolute w-100 mt-1" style="z-index: 1000;"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Suggestions list -->
|
||||
<div class="d-flex justify-content-center">
|
||||
<ul id="suggestions" class="list-group position-absolute mt-1 w-100" style="max-width: 500px; z-index: 1000;">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
const searchBox = document.getElementById('search-box');
|
||||
const suggestionsBox = document.getElementById('suggestions');
|
||||
const goButton = document.getElementById('go-button');
|
||||
|
||||
searchBox.addEventListener('input', function () {
|
||||
const query = searchBox.value;
|
||||
if (query.length < 2) {
|
||||
suggestionsBox.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`{{url_for("add_meal.query")}}?q=${encodeURIComponent(query)}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
suggestionsBox.innerHTML = '';
|
||||
data.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = item;
|
||||
|
||||
// Apply Bootstrap classes
|
||||
li.classList.add('list-group-item', 'list-group-item-action', 'cursor-pointer');
|
||||
|
||||
// Add click behavior
|
||||
li.addEventListener('click', () => {
|
||||
searchBox.value = item;
|
||||
suggestionsBox.innerHTML = '';
|
||||
});
|
||||
|
||||
// Add to suggestions box
|
||||
suggestionsBox.appendChild(li);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// ✅ Redirect when the "Go" button is clicked
|
||||
goButton.addEventListener('click', () => {
|
||||
const value = searchBox.value.trim();
|
||||
if (value) {
|
||||
const baseURL = "{{url_for('add_meal.step3', input='!')}}";
|
||||
window.location.href = baseURL.replace("!", encodeURIComponent(value));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="module">
|
||||
import { BrowserMultiFormatReader } from 'https://cdn.jsdelivr.net/npm/@zxing/library@0.21.3/+esm';
|
||||
|
||||
// constants
|
||||
const codeReader = new BrowserMultiFormatReader();
|
||||
const videoElement = document.getElementById('video');
|
||||
|
||||
|
||||
// Start scanning for barcode
|
||||
document.getElementById('startButton').addEventListener('click', async () => {
|
||||
console.log('[DEBUG] Start button clicked')
|
||||
try {
|
||||
await navigator.mediaDevices.getUserMedia({ video: true });
|
||||
} catch (err) {
|
||||
alert("No camera found or no camera permission");
|
||||
console.error("Could not access the camera:", err);
|
||||
return;
|
||||
}
|
||||
console.log('[DEBUG] Permission given and at least one device present');
|
||||
const devices = await codeReader.listVideoInputDevices();
|
||||
console.log('[DEBUG] Cameras found:', devices);
|
||||
const rearCamera = devices.find(device => device.label.toLowerCase().includes('back'))
|
||||
|| devices.find(device => device.label.toLowerCase().includes('rear'))
|
||||
|| devices[0]; // fallback
|
||||
|
||||
const selectedDeviceId = rearCamera?.deviceId;
|
||||
await codeReader.decodeFromVideoDevice(selectedDeviceId, videoElement, async (result, err) => {
|
||||
if (result) {
|
||||
// Result found, this should post the barcode
|
||||
const codeText = result.getText();
|
||||
const baseURL = "{{url_for('add_meal.step3', input='!')}}";
|
||||
window.location.href = baseURL.replace("!", encodeURIComponent(codeText));
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
document.getElementById('stopButton').addEventListener('click', () => {
|
||||
codeReader.reset();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
23
application/add_meal_v2/templates/step4.html
Normal file
23
application/add_meal_v2/templates/step4.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<p>{{ tod }}</p>
|
||||
<p>{{ item.name }}</p>
|
||||
|
||||
<form method="POST">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-control-plaintext">
|
||||
{{item_id}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
{{ form.amount.label(class="form-label") }}
|
||||
{{ form.amount(class="form-control") }}
|
||||
</div>
|
||||
|
||||
{{ form.submit(class="btn btn-primary") }}
|
||||
</form>
|
||||
{% endblock%}
|
||||
Reference in New Issue
Block a user