11-Flask

Flask(Part.79)| 【アプリケーションの微調整】

python| まとめ | 現役エンジニア&プログラミングスクール講師「python」のまとめページです。pythonに関して抑えておきたい知識や文法やにについて記事をまとめています。まとめページの下部には「おすすめの学習書籍」「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中...

目標

  • 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となります。

今回は以上になります。

「python」おすすめ書籍 ベスト3 | 現役エンジニア&プログラミングスクール講師「python」の学習でお勧めしたい書籍をご紹介しています。お勧めする理由としては、考え方、イメージなどを適切に捉えていること、「生のpython」に焦点をあてて解説をしている書籍であることなどが理由です。勿論、この他にも良い書籍はありますが、特に質の高かったものを選んで記事にしています。ページの下部には「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中。...

ブックマークのすすめ

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

「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】「お気に入り」の登録・削除方法【Google Chrome / Microsoft Edge】について解説している記事です。削除方法も掲載しています。...
【パソコン選び】失敗しないための重要ポイント | 現役エンジニア&プログラミングスクール講師【パソコン選び】失敗しないための重要ポイントについての記事です。パソコンのタイプと購入時に検討すべき点・家電量販店で見かけるCPUの見方・購入者が必要とするメモリ容量・HDDとSSDについて・ディスプレイの種類・バッテリーの持ち時間や保証・Officeソフト・ウィルス対策ソフトについて書いています。...
RELATED POST
11-Flask

Flask(Part.51)| 【日計表示・月次表示アプリケーションへの預金出納帳表示追加】

2025年4月13日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask(Part.40)| 【レジ管理アプリケーションのプログラミング(2)】

2025年4月2日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask(Part.46)| 【経費管理アプリケーションのプログラミング(2)】

2025年4月8日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask(Part.65)| 【QRコードアプリケーションのカスタマイズ(2)】

2025年4月27日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask(Part.18)| 【画像のアップロードと利用(実装編)】

2025年3月11日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site
11-Flask

Flask(Part.52)| 【現金と売掛金を考慮した残高表示への修正】

2025年4月14日
プログラミング学習 おすすめ書籍情報発信 パソコン初心者 エンジニア希望者 新人エンジニア IT業界への就職・転職希望者 サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site