はじめに

WEBで見える/更新できる、行き先掲示板を作ってみた
今後
コンボボックスで行き先を選択する
- 行き先はdbに持つ
- 行き先メンテナンスもしたい
時間をtimepikerで入力する
見栄え
ロジックがダサい

サンプル（IE11）

構成

│  app4svr.py
│  app4db.py ...事前にDB作成する用のpy
├─ templates
│  └─ app4.html
└─ static ...空

app

app4svr.py

# svr.py

from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy 

app = Flask(__name__)

# DB設定
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///app4.db'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = True
db = SQLAlchemy(app)


# db.Model を継承してクラスを定義
class Board(db.Model):
    __tablename__ = 'Board'
    
    #id
    #name        名前
    #destination 行き先
    #backtime    戻り予定
    #quittime    退社予定

    id = db.Column(db.String(3), primary_key=True)
    name = db.Column(db.String(20))
    destination = db.Column(db.String(20))
    backtime = db.Column(db.String(5))
    quittime = db.Column(db.String(5))

    #def __init__(self, id , name , destination , backtime , quittime ):
    def __init__(self, id , name  ):
        self.id = id
        self.name = name
        self.destination = ''
        self.backtime = ''
        self.quittime = ''
        #self.destination = destination
        #self.backtime = backtime
        #self.quittime = quittime


@app.route("/" , methods=["GET", "POST"])
def board():

    if request.method == "GET":
        # boardsをid昇順で取得
        boards = Board.query.order_by(Board.id).all()

        # テンプレートにwordsを渡す
        return render_template('app4.html', boards=boards)

    if request.method == "POST":


        def chkupd( id ):
            row = Board.query.get(id)

            #destination
            cellid = 'col' + id + 'b'
            if request.form[cellid] != row.destination :
                row.destination = request.form[cellid]
            #backtime
            cellid = 'col' + id + 'c'
            if request.form[cellid] != row.backtime :
                row.backtime = request.form[cellid]
            #quittime
            cellid = 'col' + id + 'd'
            if request.form[cellid] != row.quittime :
                row.quittime = request.form[cellid]

            db.session.commit() 

        # rowが更新ありかチェック
        chkupd( 'u1' )
        chkupd( 'u2' )
        chkupd( 'u3' )
        chkupd( 'u4' )
        chkupd( 'u5' )

        # 再表示
        # boardsをid昇順で取得
        boards = Board.query.order_by(Board.id).all()

        # テンプレートにwordsを渡す
        return render_template('app4.html', boards=boards)


if __name__ == '__main__':
    app.run(debug=True)

app4db.py

# db.py
from app4svr import db, Board

# テーブル作成
db.create_all()

# word のリストを作成
board_list = [('u1','user1'), \
              ('u2','user2'), \
              ('u3','user3'), \
              ('u4','user4'), \
              ('u5','user5')  \
              ]
boards = [Board(d[0],d[1]) for d in board_list]

# 複数行インサート
db.session.add_all(boards)
db.session.commit()

app4.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello,Alchemy World!</title>
</head>
<body>
  <div>
    <h1> DESTINATION BOARD </h1>
    <!-- ul でboardsを表示 -->
    <form method="post" action="/">
    <input type="submit" >
    <input type="button" value="reload" onclick="window.location.reload();" />
    <table border="1">

    <!-- #name        名前 -->
    <!-- #destination 行き先 -->
    <!-- #backtime    戻り予定 -->
    <!-- #quittime    退社予定 -->
      <tr>
        <th>name</th>
        <th>destination</th>
        <th>backtime</th>
        <th>quittime</th>
      </tr>

    <!-- 配列 boards の件数分、li の表示を繰り返す -->
    {% for board in boards %}
      <tr>
        <td>{{ board.name }}</td>
        <td><input type="text" name="col{{ board.id }}b" value="{{ board.destination }}"></td>
        <td><input type="text" name="col{{ board.id }}c" value="{{ board.backtime }}"></td>
        <td><input type="text" name="col{{ board.id }}d" value="{{ board.quittime }}"></td>
      </tr>
    {% endfor %}
    </table>
    </form>
  </div>
</body>
</html>