
目標
- QRコード生成画面でテーブルの「利用中」表示がpendingで消えるバグ修正を行う
- ダッシュボードのボタンの色を管理者権限の有無で分ける
- ダッシュボードをテーブルを利用して見た目を整える
QRコード生成画面のバグ修正
ここでは、QRコード生成画面でテーブルの「利用中」表示がpendingで消えるバグの修正を行います。修正用のブランチ release-qrcodeブランチを作成します。次のコマンドでブランチを作成します。
$ git checkout -b release-qrcode
apps/qrcodeapp/app.py
apps/qrcodeapp/app.pyに次の部分に修正を加えます。
ルート:qrcode_generate
修正前
for table in tables:
existing_token = (
db.session.query(TableAccessToken)
.filter(
TableAccessToken.table_id == table.id,
TableAccessToken.bill_id.is_(None), # ← 会計がまだ(≒注文中)
TableAccessToken.expires_at > datetime.now(timezone.utc), # ← 有効期限内(まだ使われている)
)
.first()
)
# selectable は「利用可能かどうか」=「未会計トークンが存在しない」
selectable = existing_token is None or existing_token is True
修正後
for table in tables:
# すでに有効なトークン(未会計のもの)が存在するか確認
existing_token = (
db.session.query(TableAccessToken)
.filter(
TableAccessToken.table_id == table.id,
TableAccessToken.expires_at > datetime.now(timezone.utc), # 有効期限内
TableAccessToken.bill.has(
Bill.status.in_(["Order in progress", "pending"])
),
)
.first()
)
# 「有効なトークン」かつ「注文中・保留中の伝票がある」場合は利用中とみなし、選択不可
selectable = existing_token is None
追加:次のインポートが必要です。
from apps.ordersapp.models import Bill
ルート:qrcode_generateの全体
import os
import secrets
from datetime import datetime, timedelta, timezone
import qrcode
from flask import (
Blueprint,
render_template,
request,
)
from flask_login import login_required
from apps.common.db import db
from apps.ordersapp.models import Bill
from apps.qrcodeapp.models import TableAccessToken
from apps.tablesapp.models import Table
qrcode_bp = Blueprint(
"qrcode",
__name__,
template_folder=os.path.join(os.getcwd(), "apps", "qrcodeapp", "templates"),
static_folder=os.path.join(os.getcwd(), "apps", "qrcodeapp", "static"),
static_url_path="/static",
)
def create_qrcode_app(app):
"""Blueprintを新規作成し、登録する関数"""
return qrcode_bp
@qrcode_bp.route("/generate", methods=["GET", "POST"])
@login_required
def qrcode_generate():
qr_image_url = None
selected_table_id = None
tables = Table.query.all()
table_options = []
for table in tables:
# すでに有効なトークン(未会計のもの)が存在するか確認
existing_token = (
db.session.query(TableAccessToken)
.filter(
TableAccessToken.table_id == table.id,
TableAccessToken.expires_at > datetime.now(timezone.utc), # 有効期限内
TableAccessToken.bill.has(
Bill.status.in_(["Order in progress", "pending"])
),
)
.first()
)
# 「有効なトークン」かつ「注文中・保留中の伝票がある」場合は利用中とみなし、選択不可
selectable = existing_token is None
table_options.append(
{
"id": table.id,
"selectable": selectable,
}
)
if request.method == "POST":
table_id = int(request.form.get("table_id"))
# すでに有効なトークン(未会計のもの)が存在するか確認
existing_token = (
db.session.query(TableAccessToken)
.filter(
TableAccessToken.table_id == table_id,
TableAccessToken.bill_id.is_(None), # 未会計
TableAccessToken.expires_at > datetime.now(timezone.utc), # 有効期限内
)
.first()
)
if existing_token:
# 既存のトークンがあるのでそれを使う
token = existing_token.token
else:
# トークンが無い or 有効期限切れ or 会計済 → 新規作成
token = create_token_for_table(table_id)
generate_qr_url(table_id, token)
# 表示用にQRコード画像パスを設定(再生成の有無に関わらず)
qr_image_url = f"/static/qrcodes/table_{table_id}.png"
selected_table_id = table_id
return render_template(
"qrcode_generate.html",
table_options=table_options,
qr_image_url=qr_image_url,
selected_table_id=selected_table_id,
title="QRコード生成",
)
def create_token_for_table(table_id, valid_days=7):
token = secrets.token_urlsafe(16)
expires_at = datetime.now(timezone.utc) + timedelta(days=valid_days)
new_token = TableAccessToken(
table_id=table_id, token=token, expires_at=expires_at, bill_id=None
)
db.session.add(new_token)
db.session.commit()
return token
def generate_qr_url(table_id, token):
url = f"http://192.168.2.151:5000/orders/order/table/{table_id}?token={token}"
img = qrcode.make(url)
# 保存先ディレクトリを作成(なければ)
save_path = os.path.join("apps", "qrcodeapp", "static", "qrcodes")
os.makedirs(save_path, exist_ok=True)
img.save(os.path.join(save_path, f"table_{table_id}.png"))
以上の編集で、QRコード生成画面には、会計が完全に完了していないテーブルに対して「利用中」の表示が行われるようになります。
ステータスがPendingとなっている3番の伝票があります。

QRコード生成画面で「利用中」と表示されています。

Gitでコミットし、developブランチへマージします。
$ git status
$ git add .
$ git status
$ git commit –no-verify
Fix: QRコード生成画面のバグ修正(20250423)
QRコード生成画面でテーブルの「利用中」表示がpendingで消えるバグの修正を行っていす。
上書き保存をしてCOMMIT_EDITMSGファイルを閉じます。
その後、developブランチへマージして、 release-qrcodeブランチは削除します。
git checkout developコマンドでブランチをdevelopブランチへ切り替えます。
git merge release-qrcodeコマンドでdevelopブランチへマージします。
次のようなエラーが表示される場合は git restore instance/main.db コマンドでmain.dbを削除します。

利用コマンド
$ git restore instance/main.db

最後にgit branch -d release-qrcodeコマンドで release-qrcodeブランチを削除します。
ダッシュボードの修正
ここでは、ダッシュボードのボタンの色を管理者権限の有無で分け、更にダッシュボードの見た目をテーブルタグを利用して整えます。
修正用のブランチ release-dashboardブランチを作成します。次のコマンドでブランチを作成します。
$ git checkout -b release-dashboard
ダッシュボードのボタンの色
次のボタンの class を修正します。
<ul>
<li><a href="{{ url_for('qrcode.qrcode_generate') }}" class="button-link">QRコード生成</a></li>
</ul>
修正後
<ul>
<li><a href="{{ url_for('qrcode.qrcode_generate') }}" class="register-link">QRコード生成</a></li>
</ul>
次のように見た目が変わります。

今回は以上になります。

ブックマークのすすめ
「ほわほわぶろぐ」を常に検索するのが面倒だという方はブックマークをお勧めします。ブックマークの設定は別記事にて掲載しています。


この続きはNoteとなります。