1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

pythonのflaskでスケジュール付きTodolistを作る

Posted at

こんなのができる
image.png

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>
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?