ToDo-App/index.php at main · felipeverse/ToDo-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<?php
require __DIR__ . '/tasks/tasks.php';

$tasks = getTasks();
$tasksToDo = [];
$tasksDone = [];
foreach ($tasks as $id => $task) {
    $task['completed'] ? $tasksDone[$id] = $task : $tasksToDo[$id] = $task;
}

if ($_GET['errors']) {
    $errors = json_decode($_GET['errors'], true);
}

?>

<?php include __DIR__ . '/partials/header.php' ?>

    <div class="container justify-contents-center">

        <div class="my-3 mx-2">

            <?php if($errors['text']): ?>
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <?php echo $errors['text']; ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            <?php endif; ?>

            <?php if ($_POST['id'] && $_POST['action'] == 'edit'): ?>
                <form class="d-flex" action="/tasks/update.php" method="POST">
                    <input type="hidden" name="id" value="<?php echo $_POST['id'] ?>">
                    <input class="form-control me-2" type="text" name="text" placeholder="Enter your ToDo" value="<?php echo $tasks[$_POST['id']]['text']; ?>" required>
                    <button class="btn btn-primary" type="submit" >
                        <i class="bi bi-arrow-repeat"></i>
                    </button>
                </form>
            <?php else: ?>
                <form class="d-flex" action="/tasks/new.php" method="POST">
                    <input class="form-control me-2" type="text" name="text" placeholder="Enter your ToDo" required>
                    <button class="btn btn-primary" type="submit" >
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </form>
            <?php endif; ?>
        </div>

        <!-- Tasks To Do -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <i class="bi bi-list-task"></i><b> To Do</b>
            </li>
        </ul>

        <?php if (count($tasksToDo) == 0): ?>
            <p class="text-center">Nothing to see here.</p>
        <?php endif; ?>

        <?php foreach ($tasksToDo as $id => $task): ?>
            <div class="card my-2 mx-2">
                <div class="card-body d-flex flex-row align-items-center">
                    <form class="form-check" action="/tasks/change_status.php" method="POST" style="display: inline-block">
                        <input type="hidden" name="id" value="<?php echo $id ?>">
                        <input class="form-check-input" style="border-radius: 50%;" type="checkbox" name="" id="" name="todo_check" <?php echo $task['completed'] ? 'checked':'' ?> >
                    </form>
                    <span class="card-text flex-grow-1 mx-2"><?php echo $task['text'] ?></span>
                    <div class="">
                        <!-- Button edit task -->
                        <form id="editTask<?php echo $id; ?>" action="" method="POST" style="display: inline-block">
                            <input type="hidden" name="id" id="id" value="<?php echo $id ?>">
                            <input type="hidden" name="action" value="edit">
                            <a href="javascript:{}" onclick="document.getElementById('editTask<?php echo $id; ?>').submit();" class="text-success ms-3" href="#"><i class="bi bi-pencil-fill"></i></a>
                        </form>
                        <!-- Button trigger delete modal -->
                        <a class="text-danger ms-3 deleteButton" data-toggle="modal" data-target="#deleteModal" data-id="<?php echo $id?>" href="#"><i class="bi bi-trash2-fill"></i></a>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>

        <!-- Done Tasks -->
        <ul class="list-group list-group-flush">
            <li class="list-group-item">
                <i class="bi bi-check2-all"></i><b> Done</b>
            </li>
        </ul>

        <?php if (count($tasksDone) == 0): ?>
            <p class="text-center">Nothing to see here.</p>
        <?php endif; ?>

        <?php foreach ($tasksDone as $id => $task): ?>
            <div class="card my-2 mx-2">
                <div class="card-body d-flex flex-row align-items-center">
                    <form class="form-check" action="/tasks/change_status.php" method="POST" style="display: inline-block">
                        <input type="hidden" name="id" value="<?php echo $id ?>">
                        <input class="form-check-input" style="border-radius: 50%;" type="checkbox" name="" id="" name="todo_check" <?php echo $task['completed'] ? 'checked':'' ?> >
                    </form>
                    <span class="card-text flex-grow-1 mx-2"><del><?php echo $task['text'] ?></del></span>
                    <div class="">
                        <!-- Button edit task -->
                        <form id="editTask<?php echo $id; ?>" action="" method="POST" style="display: inline-block">
                            <input type="hidden" name="id" id="id" value="<?php echo $id ?>">
                            <input type="hidden" name="action" value="edit">
                            <a href="javascript:{}" onclick="document.getElementById('editTask<?php echo $id; ?>').submit();" class="text-success ms-3" href="#"><i class="bi bi-pencil-fill"></i></a>
                        </form>
                        <!-- Button trigger delete modal -->
                        <a class="text-danger ms-3 deleteButton" data-toggle="modal" data-target="#deleteModal" data-id="<?php echo $id?>" href="#"><i class="bi bi-trash2-fill"></i></a>

                    </div>
                </div>
            </div>
        <?php endforeach; ?>

    </div>

    <!-- Scripts -->
    <script type="text/javascript">
        // check tasks actions
        const checkBoxes = document.querySelectorAll('input[type=checkbox]');
        checkBoxes.forEach(ch => {
            ch.onclick = function () {
                this.parentNode.submit();
            };
        });

        // delete tasks actions
        // const trashActions = document.querySelectorAll('a.deleteButtom');
        // trashActions.forEach(ta => {
        //     ta.onclick = function () {
        //         this.parentNode.submit();
        //     }
        // });

    </script>


<?php include __DIR__ . '/partials/footer.php' ?>
<?php include __DIR__ . "/_deleteModal.php" ?>