pythonのflaskでスケジュール付きTodolistを作る
こんなのができる
app.py
from flask import Flask, render_template, request, redirect
from flask_sqlalchemy import SQLAlchemy
import datetime
import sys
#port = int(sys.argv[1])
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///todo.db'
db = SQLAlchemy(app)
class Todo(db.Model):
id = db.Column(db.Integer, primary_key=True)
task = db.Column(db.String(255))
start_date = db.Column(db.Date, nullable=True)
start_time = db.Column(db.Time, nullable=True)
end_date = db.Column(db.Date, nullable=True)
end_time = db.Column(db.Time, nullable=True)
done = db.Column(db.Boolean, default=False)
@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
task = request.form['task']
if 'schedule_checkbox' in request.form and request.form['schedule_checkbox'] == 'on':
start_date = datetime.datetime.strptime(request.form['start_date'], '%Y-%m-%d')
start_time = datetime.time.fromisoformat(request.form['start_time'])
end_date = datetime.datetime.strptime(request.form['end_date'], '%Y-%m-%d')
if 'end_time' in request.form:
end_time = datetime.time.fromisoformat(request.form['end_time'])
else:
end_time = None
else:
start_date = None
start_time = None
end_date = None
end_time = None
new_todo = Todo(task=task,
start_date=start_date,
start_time=start_time,
end_date=end_date,
end_time=end_time
)
db.session.add(new_todo)
db.session.commit()
todos = Todo.query.all()
return render_template('index.html', todos=todos)
@app.route('/delete/<id>')
def delete(id):
todo = Todo.query.get(id)
db.session.delete(todo)
db.session.commit()
return redirect('/')
if __name__ == '__main__':
app.run(debug=True)
def main():
app.debug = True
app.run(port = port)
if __name__ == '__main__':
main()
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>To-Do List</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>To-Do List</h1>
<form action="/" method="post">
<input type="text" name="task" placeholder="Add a new task">
<input type="submit" value="Add">
<br>
Schedule?<input type="checkbox" name="schedule_checkbox" id="schedule_checkbox">
<br>
<input type="date" name="start_date" id="start_date" disabled>
<br>
<input type="time" name="start_time" id="start_time" disabled>
<br>
<input type="date" name="end_date" id="end_date" disabled>
<br>
<input type="time" name="end_time" id="end_time" disabled>
<br>
</form>
<ul>
{% for todo in todos %}
<li>
{{ todo.task }}
{% if todo.start_date %}
<br>
Start date: {{ todo.start_date }}
{% endif %}
{% if todo.start_time %}
<br>
Start time: {{ todo.start_time }}
{% endif %}
{% if todo.end_date %}
<br>
End date: {{ todo.end_date }}
{% endif %}
{% if todo.end_time %}
<br>
End time: {{ todo.end_time }}
{% endif %}
<a href="/delete/{{ todo.id }}">Delete</a>
</li>
{% endfor %}
</ul>
<script>
var scheduleCheckbox = document.getElementById("schedule_checkbox");
var startDate = document.getElementById("start_date");
var startTime = document.getElementById("start_time");
var endDate = document.getElementById("end_date");
var endTime = document.getElementById("end_time");
scheduleCheckbox.addEventListener("change", function() {
if (scheduleCheckbox.checked) {
startDate.removeAttribute("disabled");
startTime.removeAttribute("disabled");
endDate.removeAttribute("disabled");
endTime.removeAttribute("disabled");
} else {
startDate.setAttribute("disabled", "true");
startTime.setAttribute("disabled", "true");
endDate.setAttribute("disabled", "true");
endTime.setAttribute("disabled", "true");
}
});
</script>
</body>
</html>
これで、
export FLASK_APP = appflask shellfrom app import db, Tododb.create_all()