４０代おっさん面会予約アプリを作ってみる⑤

## 本記事について

この記事はプログラミング初学者の私が学んでいく中でわからない単語や概要を分かりやすくまとめたものです。
もし不正などありましたらコメントにてお知らせいただければ幸いです。

## 前回の記事

<https://qiita.com/kou1121/items/bea7575176b07bd16bb9>
<https://qiita.com/kou1121/items/94ff8d65976dab98dfc8>
<https://qiita.com/kou1121/items/318fe6cc0e0564e533b4>
<https://qiita.com/kou1121/items/0226693e93937f9e375b>

## 面会室予約画面の予約一覧表示

```python
import streamlit as st
import datetime # 時刻を扱うため
import requests
import json
import pandas as pd

#  サイドバーを作って各ページを用意
page = st.sidebar.selectbox('ページを選択してください', ['ユーザー登録', '面会室登録', '面会予約'])

if page == 'ユーザー登録':

    st.title('登録画面')

    with st.form(key='user'):
        # user_id: int = random.randint(0, 10)
        username: str = st.text_input('ユーザー名', max_chars=12) # 12字しか入力できなくなる。
        data = {
            # 'user_id': user_id,
            'username': username
        }
        submit_button = st.form_submit_button(label='ユーザー登録') # form専用のボタン

    if submit_button: # ボタンが押されたされる処理
        st.write('## レスポンス結果')
        url = 'http://127.0.0.1:8000/users'
        res = requests.post(
            url,
            data=json.dumps(data)
        )
        if res.status_code == 200:
            st.success('ユーザー登録完了')
        st.write(res.status_code) # レスポンスのステータスコード
        st.json(res.json())

elif page == '面会室登録':
    st.title('面会室登録画面')

    with st.form(key='room'):
        # room_id: int = random.randint(0, 10)
        room_name: str = st.text_input('面会室名', max_chars=12) # 12字しか入力できなくなる。
        capacity: int = st.number_input('定員', step=1) # 定員　１刻みで入力
        data = {
            # 'room_id': room_id,
            'room_name': room_name,
            'capacity': capacity
        }
        submit_button = st.form_submit_button(label='面会室登録') # form専用のボタン

    if submit_button: # ボタンが押されたされる処理
        st.write('## レスポンス結果')
        url = 'http://127.0.0.1:8000/rooms'
        res = requests.post(
            url,
            data=json.dumps(data)
        )
        if res.status_code == 200:
            st.success('面会室登録完了')
        st.write(res.status_code) # レスポンスのステータスコード
        st.json(res.json())

elif page == '面会予約':
    st.title('面会室予約画面')
    # ユーザー一覧を取得
    url_users = 'http://127.0.0.1:8000/users'
    res = requests.get(url_users)
    users = res.json() # usersのリストが返ってくる
    # ユーザー名をキー、ユーザーIDをバリュー
    users_name = {}
    for user in users:
        users_name[user['username']] = user['user_id']

    # 面会室一覧の取得
    url_rooms = 'http://127.0.0.1:8000/rooms'
    res = requests.get(url_rooms)
    rooms = res.json() 
    rooms_name = {}
    for room in rooms:
        rooms_name[room['room_name']] = {
            'room_id': room['room_id'],
            'capacity': room['capacity']
        }

    st.warning('### 面会室一覧')
    df_rooms = pd.DataFrame(rooms)
    df_rooms.columns = ['面会室名', '定員', '会議室ID']
    st.table(df_rooms)

    #  予約一覧
    url_bookings = 'http://127.0.0.1:8000/bookings'
    res = requests.get(url_bookings)
    bookings = res.json() # bookingsのリストが返ってくる
    df_bookings = pd.DataFrame(bookings)

    users_id = {}
    for user in users:
        users_id[user['user_id']] = user['username']

    rooms_id = {}
    for room in rooms:
        rooms_id[room['room_id']] = {
            'room_name': room['room_name'],
            'capacity': room['capacity'],
        }

    #  IDを各値に変更
    to_username = lambda x: users_id[x]
    to_room_name = lambda x: rooms_id[x]['room_name']
    to_datetime = lambda x: datetime.datetime.fromisoformat(x).strftime('%Y/%m/%d %H:%M')

    # 特定の列に適用

    df_bookings['user_id'] = df_bookings['user_id'].map(to_username)
    df_bookings['room_id'] = df_bookings['room_id'].map(to_room_name)
    df_bookings['start_datetime'] = df_bookings['start_datetime'].map(to_datetime)
    df_bookings['end_datetime'] = df_bookings['end_datetime'].map(to_datetime)
    
    df_bookings = df_bookings.rename(columns={
        'user_id': '予約者名',
        'room_id': '面会者名',
        'booked_num': '人数',
        'start_datetime': '開始時間',
        'end_datetime': '終了時刻',
        'booking_id': '予約番号'
    })

    st.write('### 予約一覧')
    st.table(df_bookings)
    
    with st.form(key='booking'):
        username: str = st.selectbox('予約者名', users_name.keys()) # users_dict.keys()で名前を取ってこれる
        room_name: str = st.selectbox('面会室名', rooms_name.keys()) # rooms_dict.keys()で面会室名を取ってこれる
        booked_num: int = st.number_input('予約人数', step=1, min_value=1) # 予約人数　１刻みで入力
        date = st.date_input('日付: ', min_value=datetime.date.today()) # 最小値（min）に今日（today）の日付を設定
        start_time = st.time_input('面会開始時刻: ', value=datetime.time(hour=9, minute=0))
        end_time = st.time_input('面会終了時刻: ', value=datetime.time(hour=20, minute=0))
        
        submit_button = st.form_submit_button(label='予約登録') # form専用のボタン

    if submit_button: # ボタンが押されたされる処理
        user_id: int = users_name[username]
        room_id: int = rooms_name[room_name]['room_id']
        capacity: int = rooms_name[room_name]['capacity']

        data = {
            
            'user_id': user_id,
            'room_id': room_id,
            'booked_num': booked_num,
            'start_datetime': datetime.datetime( 
                year=date.year,
                month=date.month,
                day=date.day,
                hour=start_time.hour,
                minute=start_time.minute
            ).isoformat(), # str型でないとダメなため
            'end_datetime': datetime.datetime( 
                year=date.year,
                month=date.month,
                day=date.day,
                hour=end_time.hour,
                minute=end_time.minute
            ).isoformat()
            
        }
        # 定員以下の予約人数の場合
        if booked_num <= capacity:
            # 面会室予約
            url = 'http://127.0.0.1:8000/bookings'
            res = requests.post(
                url,
                data=json.dumps(data)
            )
            if res.status_code == 200:
                st.success('予約完了しました')
            st.json(res.json())

        else:
            st.error(f'{room_name}の定員は、{capacity}名です。')
```

すいません。
分かりにくいですが
少し変わっております。
また予約一覧などが入っております。

## 参考

https://www.udemy.com/course/python-fastapi