-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
144 lines (137 loc) · 8.04 KB
/
index.html
File metadata and controls
144 lines (137 loc) · 8.04 KB
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
141
142
143
144
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Manager</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<h1>Task Manager</h1>
<!--Forma sa inputom i dugmetom za dodavanje zadatka-->
<form id="task-form" class="row mb-3">
<div class="col-12 col-md-10 mb-2 mb-md-0" id="taskDiv">
<input type="text" id="task-input" class="form-control" placeholder="Enter new task" required>
</div>
<div class="col-12 col-md-2 d-grid" id="btnDiv">
<button id="addTaskBtn" type="submit" class="btn btn-dark"><i class="fas fa-plus"></i> Add Task</button>
</div>
</form>
<!--DropDown za filtriranje (All,Completed,Pending)-->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-2">
<div class="filter-buttons col-12 col-md-3 order-1 order-md-1">
<div class="dropdown">
<button class="btn btn-secondary filter-btn dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Filter Tasks
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#" id="filter-all">All</a></li>
<li><a class="dropdown-item" href="#" id="filter-completed">Completed</a></li>
<li><a class="dropdown-item" href="#" id="filter-pending">Pending</a></li>
</ul>
</div>
</div>
<!--Search bar-->
<div class="search-bar col-12 col-md-6 order-3 order-md-2 text-md-center">
<form class="d-flex">
<input id="search-input" class="form-control me-2" type="search" placeholder="Search tasks" aria-label="Search">
</form>
</div>
<!--DropDown za sortiranje po datumu i prioritetu-->
<div class="sort-buttons col-12 col-md-3 order-2 order-md-3 text-md-end">
<div class="dropdown">
<button class="btn btn-secondary sort-btn dropdown-toggle" type="button" id="dropdownSortButton" data-bs-toggle="dropdown" aria-expanded="false">
Sort Tasks
</button>
<ul class="dropdown-menu" id="sortList" aria-labelledby="dropdownSortButton">
<!--Sekicja za sortiranje po datumu-->
<li><a class="dropdown-item" href="#" id="sort-default">Default</a></li>
<li class="dropdown-header">Date</li>
<li><a class="dropdown-item" href="#" id="sort-newest">Newest</a></li>
<li><a class="dropdown-item" href="#" id="sort-oldest">Oldest</a></li>
<!-- Sekcija za sortiranje po prioritetu -->
<li class="dropdown-header">Priority</li>
<li><a class="dropdown-item" href="#" id="sort-highest">Highest</a></li>
<li><a class="dropdown-item" href="#" id="sort-lowest">Lowest</a></li>
</ul>
</div>
</div>
</div>
<!-- Prikaz poruke o nepodudaranju pretrage -->
<div id="no-results-message"></div>
<!-- Skrolabilni deo -->
<div class="scrollable-content">
<div id="task-list" class="row"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="taskModal" tabindex="-1" aria-labelledby="taskModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<input type="text" id="taskModalLabel" class="modal-title form-control">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="edit-task-form">
<input type="hidden" id="edit-task-id">
<div class="mb-3">
<label for="edit-task-desc" class="form-label">Description</label>
<textarea class="form-control" id="edit-task-desc" rows="3" required></textarea>
</div>
<div class="mb-3">
<fieldset>
<legend class="form-label" id="prior">Priority</legend>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" value="No Priority">
<label class="btn btn-outline-secondary" for="btnradio1">No Priority</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" value="Low">
<label class="btn btn-outline-success" for="btnradio2">Low</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off" value="Medium">
<label class="btn btn-outline-warning" for="btnradio3">Medium</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio4" autocomplete="off" value="High">
<label class="btn btn-outline-danger" for="btnradio4">High</label>
</div>
</fieldset>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeBtn">Close</button>
<button type="button" class="btn btn-primary" id="saveBtn">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Toast -->
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
<div id="emptyInputToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto text-danger">Warning</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Task "<strong>Task Name</strong>" cannot be created with an empty input. Please enter a valid task name.
</div>
</div>
</div>
<!-- Toast za nesacuvane poruke -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="unsavedChangesToast" class="toast custom-toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto text-danger">Unsaved Changes</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
You have unsaved changes. Please save your changes before closing the modal. Click 'Close' or click outside the modal again to discard the changes.
</div>
</div>
</div>
<script type="module" src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>