Flask（Part.80）｜ 【利用中の全てのテーブルのメニュー画面を店員側から操作できる機能】

@qrcode_bp.route("/in_use", methods=["GET"])
@login_required
def qrcode_in_use_tables():
    now = datetime.now(timezone.utc)
    # 有効なトークンがあるテーブルを取得（Billが会計前）
    in_use_tokens = (
        db.session.query(TableAccessToken)
        .filter(
            TableAccessToken.expires_at > now,
            TableAccessToken.bill.has(
                Bill.status.in_(["Order in progress", "pending"])
            ),
        )
        .all()
    )

    # テーブルと対応するトークンを抽出
    in_use_tables = [
        {"table_id": token.table_id, "token": token.token} for token in in_use_tokens
    ]

    return render_template(
        "eachtable.html", in_use_tables=in_use_tables, title="利用中のテーブル一覧"
    )

{% extends "qrcode_base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block header %}
<ul>
    <li><a href="{{ url_for('common.admin_dashboard') }}" class="button-link">管理業務一覧</a></li>
</ul>
{% endblock %}

{% block content %}
<div class="qr-container">
    <h1 class="qr-title">利用中のテーブル一覧</h1>
    {% if in_use_tables %}
    <ul class="table-list">
        {% for table in in_use_tables %}
        <li>
            テーブル {{ table.table_id }} |
            <a href="/orders/order/table/{{ table.table_id }}?token={{ table.token }}">
                テーブルへ移動
            </a>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p>現在利用中のテーブルはありません。</p>
    {% endif %}
</div>
{% endblock %}

/* テーブルリストのスタイル */
.table-list {
    font-size: 20px;
    text-align: center;
    margin: 0;
    list-style: none;
}

/* スマホ用レスポンシブデザイン */
@media screen and (max-width: 767px) {

    /* QRコードコンテナのスタイル */
    .qr-container {
        padding: 20px;
        margin: 0;
    }

    /* タイトルのスタイル */
    .qr-title {
        font-size: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    /* テーブルリストのスタイル */
    .table-list {
        font-size: 16px;
        text-align: center;
    }

    /* 管理業務一覧ボタン */
    header ul {
        padding: 0;
        text-align: center;
        margin-top: 20px;
    }

    header li {
        display: inline-block;
        margin: 5px;
    }

    /* 空きテーブルのメッセージ */
    .qr-container p {
        text-align: center;
        font-size: 16px;
        color: #555;
    }
}