Flask（Part.41）｜【レジ管理アプリケーションのプログラミング（３）】｜プログラミング学習おすすめ書籍情報発信パソコン初心者エンジニア希望者新人エンジニア IT業界への就職・転職希望者サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site

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

目標
レジ管理アプリケーションの作成
- レジ管理アプリケーションの作成（再掲載）
- レジ管理アプリケーションのプログラミング
ブックマークのすすめ

目標

注文された商品の提供・未提供を管理できる機能とテンプレートを実装する

レジ管理アプリケーションの作成

レジ管理アプリケーションの作成（再掲載）

ここからは、商店スタッフが利用するためのレジ管理アプリケーションを作成していきます。具体的には、全てのテーブル状況を確認できたり、各テーブルの注文状況を確認でき、ユーザー側では行えない注文済みの商品の取り消しや、会計を完了させる機能を実装します。

レジ管理アプリケーションのプログラミング

register_orders_status.htmlの編集（registerapp/templates内）

register_orders_status.html を次のように編集します。

{% extends 'register_base.html' %}

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

{% block content %}
<h1>注文一覧</h1>
<!-- リロードの停止/開始ボタン -->
<p>日時を設定する場合はリロードを停止してください。</p>
<button id="toggle-reload" type="button" class="reload-toggle-button">リロード停止（現在:リロード中）</button>
<hr>
<!-- 日付と時間でフィルタするフォーム -->
<form method="GET" action="{{ url_for('register.register_order_list') }}" class="filter-form">
    <label for="filter_date">日付と時間を選択:</label>
    <input type="datetime-local" id="filter_date" name="filter_date" value="{{ request.args.get('filter_date', '') }}">
    <button type="submit">フィルタ</button>
</form>

<!-- 一括更新フォーム -->
<table>
    <thead>
        <tr>
            <th>テーブル番号</th>
            <th>商品名</th>
            <th>数量</th>
            <th>注文時間</th>
            <th>ステータス</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="orders-table-body">
        {% for item in orders_with_jst %}
        <tr data-created-at="{{ item['created_at_jst'] }}">
            <td>{{ item['table_id'] }}</td> <!-- 注文のID -->
            <td>{{ item['product_name'] }}</td> <!-- 注文の製品名 -->
            <td>{{ item['quantity'] }}</td> <!-- 注文の数量 -->
            <td>{{ item['created_at_jst'] }}</td> <!-- JSTに変換された作成日時 -->
            <!-- <td>{{ item['bill_id'] }}</td> BillのID -->
            <td>{{ item['status'] }}</td> <!-- 注文のステータス -->
            <td>
                <a href="{{ url_for('register.update_order_status', order_id=item['order_id']) }}?filter_date={{ filter_date_str }}"
                    class="update-status-button" id="myLink">
                    {% if item['status'] == 'not_served' %}
                    <button class="status-button not-served">未提供</button>
                    {% else %}
                    <button class="status-button served">提供済み</button>
                    {% endif %}
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
<script>
    window.addEventListener('load', function () {
        var form = document.querySelector('form.filter-form');
        var reloadButton = document.getElementById('toggle-reload');
        var intervalId;
        var isReloading = true; // 初期状態ではリロードが有効

        function startAutoReload() {
            intervalId = setInterval(function () {
                form.submit();
            }, 2000);
            reloadButton.textContent = 'リロード停止（現在:リロード中）';  // ボタンのテキストを変更
        }

        function stopAutoReload() {
            clearInterval(intervalId);
            reloadButton.textContent = 'リロード開始（現在:　停止中）';  // ボタンのテキストを変更
        }

        // 初期状態でリロードを開始する
        startAutoReload();

        reloadButton.addEventListener('click', function () {
            if (isReloading) {
                stopAutoReload();
            } else {
                startAutoReload();
            }
            // isReloadingをトグル
            isReloading = !isReloading;
        });
    });
</script>
{% endblock %}