-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontacts.html
371 lines (348 loc) · 21.8 KB
/
contacts.html
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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Join contacts</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="57x57" href="./favicon/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="./favicon/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="./favicon/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="./favicon/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="./favicon/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="./favicon/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="./favicon/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="./favicon/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="./favicon/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="./favicon/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<!-- Responsive, mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!-- CSS -->
<link rel="stylesheet" href="./styles/globals.css" />
<link rel="stylesheet" href="./styles/helpers.css" />
<link rel="stylesheet" href="./styles/fonts.css" />
<link rel="stylesheet" href="./styles/colors.css" />
<link rel="stylesheet" href="./styles/frame.css" />
<link rel="stylesheet" href="styles/contacts.css" />
<link rel="stylesheet" href="styles/add_task.css" />
<!-- Script -->
<script src="./scripts/globals.js" defer></script>
<script src="./scripts/mini_backend.js"></script>
<script src="./scripts/frame.js" defer></script>
<script src="./scripts/sign_up.js" defer></script>
<script src="./scripts/add_task_templates.js" defer></script>
<script src="./scripts/add_task_part1.js" defer></script>
<script src="./scripts/add_task_part2.js" defer></script>
<script src="./scripts/contacts_templates.js" defer></script>
<script src="./scripts/contacts.js" defer></script>
</head>
<body onload="initContacts()">
<!-- Overlays -->
<!-- Add Task overlay -->
<div id="add-task-overlay" class="add-task-overlay overlay">
<div class="add-task-container-board">
<div class="heading-container heading-board-overlay">
<div class="title">Add Task</div>
<button onclick="closeAddTaskInContacts()" id="close-btn" class="close-btn" type="button" title="Close">
<img src="./assets/icons/cancel.png" alt="" />
</button>
</div>
<form novalidate>
<div class="add-task-container">
<div class="add-task-top">
<!-- Enter title -->
<div class="form-group">
<label for="formGroupExampleInput">Title</label>
<input type="text" class="form-control" id="add-task-title" placeholder="Enter a title" autocomplete="off" />
<div id="required-title" class="invalid-feedback">This is a required field</div>
</div>
<!-- Enter a Description -->
<div class="form-group">
<label for="exampleFormControlTextarea1">Description</label>
<textarea class="form-control" id="add-task-description" rows="3" placeholder="Enter a description"></textarea>
<div id="required-description" class="invalid-feedback">This is a required field</div>
</div>
<!-- Select Category -->
<div class="form-group">
<label for="exampleFormControlSelect1">Category</label>
<div class="input-container dropdown">
<div class="outer-input-btn-container">
<div id="category-input" class="form-control assign-input dropdown-toggle input-category" type="text">
<div id="category-color-container" class="category-color-container d-flex">
<span id="selected-category" class="category-title">Select a Category</span>
<span id="selected-color" class="category-badge"></span>
</div>
<input id="new-category-input" class="form-control assign-input dropdown-toggle d-none p-0" type="text" placeholder="New catergory name" autocomplete="off" />
</div>
<div class="input-btn-container">
<div id="category-drop-down" class="add-subtaks-plus">
<img src="./assets/icons/drop-down-btn.png" alt="" />
</div>
<div onclick="confirmNewCatergory()" id="cancel-confirm-category" class="cancel-confirm-category d-none">
<div id="cancel-category" role="button" class="cancel-confirm-subtask-btn">
<img src="./assets/icons/cancel.png" alt="cancel" />
</div>
<div class="vertical-divider"></div>
<div id="confirm-catergory" role="button" class="cancel-confirm-subtask-btn">
<img src="./assets/icons/confirm.png" alt="confirm" />
</div>
</div>
</div>
</div>
<div id="drop-down-list-category" class="dropdown-menu container drop-down-list"></div>
</div>
<div id="required-category" class="invalid-feedback">This is a required field</div>
<div id="color-options" class="btn-toolbar d-none" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2 color-options-container" role="group" aria-label="First group">
<button onclick="chooseColor(0)" id="0" type="button" class="btn btn-secondary color-options" style="background-color: blue"></button>
<button onclick="chooseColor(1)" id="1" type="button" class="btn btn-secondary color-options" style="background-color: red"></button>
<button onclick="chooseColor(2)" id="2" type="button" class="btn btn-secondary color-options" style="background-color: green"></button>
<button onclick="chooseColor(3)" id="3" type="button" class="btn btn-secondary color-options" style="background-color: pink"></button>
<button onclick="chooseColor(4)" id="4" type="button" class="btn btn-secondary color-options" style="background-color: purple"></button>
<button onclick="chooseColor(5)" id="5" type="button" class="btn btn-secondary color-options" style="background-color: orangered"></button>
</div>
</div>
</div>
<!-- Assigned To -->
<div class="form-group">
<label for="exampleFormControlSelect1">Assigned To</label>
<div class="input-container dropdown">
<div class="outer-input-btn-container">
<input id="assign-input" class="form-control assign-input dropdown-toggle" type="text" placeholder="Select contacts to assign" disabled />
<div class="input-btn-container">
<div id="assigned-drop-down" class="add-subtaks-plus">
<img src="./assets/icons/drop-down-btn.png" alt="add a subtask" />
</div>
<div id="cancel-confirm-subtask" class="cancel-confirm-subtask">
<div class="cancel-confirm-subtask-btn">
<img src="./assets/icons/cancel.png" alt="cancel" />
</div>
<div class="vertical-divider"></div>
<div class="cancel-confirm-subtask-btn">
<img src="./assets/icons/confirm.png" alt="confirm" />
</div>
</div>
</div>
</div>
<div id="drop-down-list-assigned-to" class="dropdown-menu container drop-down-list">
<div id="1.-coworker-box" class="coworker-checkbox-container">
<label id="coworker-name" class="form-check-label" for="1.-coworker-check">Christian Greenfield</label>
<input class="form-check-input" type="checkbox" value="" id="1.-coworker-check" />
</div>
</div>
</div>
<div id="required-assigned-to" class="invalid-feedback">This is a required field</div>
<div id="taskforce-badge-container" class="container taskforce-badge-container"></div>
</div>
</div>
<div class="add-task-bottom">
<!-- Due date -->
<div class="form-group">
<label for="exampleFormControlSelect1">Due date</label>
<input id="due-date-add-task-input" min="2023-01-01" class="form-control" type="date" name="date" />
<div id="required-dueDate" class="invalid-feedback">This is a required field</div>
</div>
<!-- Priority -->
<div class="form-group">
<label for="exampleFormControlSelect1">Prio</label>
<div class="container prio-btns-container p-0">
<button onclick="selectPriority('add-task','urgent', '#ff3d00')" id="select-urgent-add-task" type="button" class="btn btn-outline-secondary even-width prio-btn">
<div class="inner-btn-container">
<span id="urgent-text-add-task" class="prio-text">Urgent</span>
<svg id="urgent-svg-add-task" class="urgent-svg" width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.4043 14.755C19.1696 14.7554 18.9411 14.6805 18.7522 14.5414L10.5001 8.45824L2.24809 14.5414C2.13224 14.627 2.00066 14.6889 1.86086 14.7237C1.72106 14.7584 1.57577 14.7653 1.43331 14.7439C1.29084 14.7226 1.15397 14.6734 1.03053 14.5992C0.907083 14.525 0.799474 14.4272 0.713845 14.3114C0.628216 14.1957 0.566244 14.0642 0.531467 13.9245C0.49669 13.7848 0.48979 13.6396 0.51116 13.4973C0.554319 13.2097 0.71001 12.9511 0.943982 12.7783L9.84809 6.20786C10.0368 6.06826 10.2654 5.99292 10.5001 5.99292C10.7349 5.99292 10.9635 6.06826 11.1522 6.20786L20.0563 12.7783C20.2422 12.9153 20.3801 13.1074 20.4503 13.3272C20.5204 13.5471 20.5193 13.7835 20.4469 14.0027C20.3746 14.2219 20.2349 14.4126 20.0476 14.5477C19.8604 14.6828 19.6352 14.7554 19.4043 14.755Z"
fill="currentColor"
/>
<path
d="M19.4043 9.00581C19.1696 9.00621 18.9411 8.93136 18.7522 8.79226L10.5002 2.7091L2.2481 8.79226C2.01412 8.96507 1.72104 9.03793 1.43331 8.9948C1.14558 8.95167 0.886785 8.7961 0.713849 8.5623C0.540914 8.3285 0.468006 8.03563 0.511165 7.74811C0.554324 7.4606 0.710015 7.20199 0.943986 7.02919L9.8481 0.45871C10.0368 0.319119 10.2654 0.243774 10.5002 0.243774C10.7349 0.243774 10.9635 0.319119 11.1522 0.45871L20.0563 7.02919C20.2422 7.1661 20.3801 7.35822 20.4503 7.5781C20.5204 7.79797 20.5193 8.03438 20.447 8.25356C20.3746 8.47274 20.2349 8.6635 20.0476 8.79859C19.8604 8.93368 19.6352 9.0062 19.4043 9.00581Z"
fill="currentColor"
/>
</svg>
</div>
</button>
<button onclick="selectPriority('add-task','medium', '#ffa800')" id="select-medium-add-task" type="button" class="btn btn-outline-secondary even-width prio-btn">
<div class="inner-btn-container">
<span id="medium-text-add-task" class="prio-text">Medium</span>
<svg id="medium-svg-add-task" class="medium-svg" width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M18.9041 8.22552H1.09589C0.805242 8.22552 0.526498 8.10922 0.320979 7.90221C0.11546 7.6952 0 7.41443 0 7.12167C0 6.82891 0.11546 6.54814 0.320979 6.34113C0.526498 6.13412 0.805242 6.01782 1.09589 6.01782H18.9041C19.1948 6.01782 19.4735 6.13412 19.679 6.34113C19.8845 6.54814 20 6.82891 20 7.12167C20 7.41443 19.8845 7.6952 19.679 7.90221C19.4735 8.10922 19.1948 8.22552 18.9041 8.22552Z"
fill="currentColor"
/>
<path
d="M18.9041 2.98223H1.09589C0.805242 2.98223 0.526498 2.86594 0.320979 2.65892C0.11546 2.45191 0 2.17114 0 1.87839C0 1.58563 0.11546 1.30486 0.320979 1.09785C0.526498 0.890834 0.805242 0.774536 1.09589 0.774536L18.9041 0.774536C19.1948 0.774536 19.4735 0.890834 19.679 1.09785C19.8845 1.30486 20 1.58563 20 1.87839C20 2.17114 19.8845 2.45191 19.679 2.65892C19.4735 2.86594 19.1948 2.98223 18.9041 2.98223Z"
fill="currentColor"
/>
</svg>
</div>
</button>
<button onclick="selectPriority('add-task','low','#7ae229')" id="select-low-add-task" type="button" class="btn btn-outline-secondary even-width prio-btn">
<div class="inner-btn-container">
<span id="low-text-add-task" class="prio-text">Low</span>
<svg id="low-svg-add-task" class="low-svg" width="21" height="15" viewBox="0 0 21 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5 9.00614C10.2654 9.00654 10.0369 8.9317 9.84802 8.79262L0.944913 2.22288C0.829075 2.13733 0.731235 2.02981 0.65698 1.90647C0.582724 1.78313 0.533508 1.64638 0.51214 1.50404C0.468986 1.21655 0.541885 0.923717 0.714802 0.689945C0.887718 0.456173 1.14649 0.300615 1.43418 0.257493C1.72188 0.21437 2.01493 0.287216 2.24888 0.460004L10.5 6.54248L18.7511 0.460004C18.867 0.374448 18.9985 0.312529 19.1383 0.277782C19.2781 0.243035 19.4234 0.236141 19.5658 0.257493C19.7083 0.278844 19.8451 0.328025 19.9685 0.402225C20.092 0.476425 20.1996 0.574193 20.2852 0.689945C20.3708 0.805697 20.4328 0.937168 20.4676 1.07685C20.5023 1.21653 20.5092 1.36169 20.4879 1.50404C20.4665 1.64638 20.4173 1.78313 20.343 1.90647C20.2688 2.02981 20.1709 2.13733 20.0551 2.22288L11.152 8.79262C10.9631 8.9317 10.7346 9.00654 10.5 9.00614Z"
fill="currentColor"
/>
<path
d="M10.5 14.7547C10.2654 14.7551 10.0369 14.6802 9.84802 14.5412L0.944913 7.97142C0.710967 7.79863 0.555294 7.54005 0.51214 7.25257C0.468986 6.96509 0.541886 6.67225 0.714802 6.43848C0.887718 6.20471 1.14649 6.04915 1.43418 6.00603C1.72188 5.96291 2.01493 6.03575 2.24888 6.20854L10.5 12.291L18.7511 6.20854C18.9851 6.03575 19.2781 5.96291 19.5658 6.00603C19.8535 6.04915 20.1123 6.20471 20.2852 6.43848C20.4581 6.67225 20.531 6.96509 20.4879 7.25257C20.4447 7.54005 20.289 7.79863 20.0551 7.97142L11.152 14.5412C10.9631 14.6802 10.7346 14.7551 10.5 14.7547Z"
fill="currentColor"
/>
</svg>
</div>
</button>
</div>
<div id="required-priority" class="invalid-feedback">This is a required field</div>
</div>
<!-- Subtaks -->
<div class="form-group">
<label for="exampleFormControlSelect1">Subtasks</label>
<div class="input-container">
<input id="subtasks-input" placeholder="Add new subtask" class="form-control" type="text" autocomplete="off" />
<div class="input-btn-container">
<div onclick="addSubTask()" id="add-subtask" class="add-subtaks-plus">
<img src="./assets/icons/add-plus.png" alt="add a subtask" />
</div>
<div id="cancel-confirm-subtask" class="cancel-confirm-subtask">
<div class="cancel-confirm-subtask-btn">
<img src="./assets/icons/cancel.png" alt="cancel" />
</div>
<div class="vertical-divider"></div>
<div class="cancel-confirm-subtask-btn">
<img src="./assets/icons/confirm.png" alt="confirm" />
</div>
</div>
</div>
</div>
<div id="subtask-container" class="subtask-container"></div>
</div>
<div id="addtask-btn-container" class="addtask-add-task-bottom__button-container">
<button onclick="clearAddTaskFormular()" type="button" class="btn btn-primary btn-ordinary clear-button">
<span class="btn-name">Clear</span>
<svg class="cancel-task-svg" width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.50106 6.50008L11.7441 11.7431M1.25806 11.7431L6.50106 6.50008L1.25806 11.7431ZM11.7441 1.25708L6.50006 6.50008L11.7441 1.25708ZM6.50006 6.50008L1.25806 1.25708L6.50006 6.50008Z" stroke="#091931" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button onclick="createTask(workflow,subtaskOnDisplay = false)" id="create-task" type="button" class="btn btn-primary btn-ordinary create-add-task-btn-contacts">
<span class="btn-name">Create</span>
<img src="./assets/icons/checkmark_addTask.png" />
</button>
</div>
<img id="task-added-feedback" class="feedback-add-task" src="./assets/img/feedback_task-added-to-board.png" title="You task has been added to the board" alt="" />
</div>
</div>
</form>
</div>
</div>
<!-- Add Contact Overlay -->
<div id="overlay" class="overlay">
<div id="new-contacts-card" class="card contacts-overlay-card p-0 overflow-hidden border-0" style="width: 18rem">
<button id="close-new-contact-btn" type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<div class="card-body dark-blue">
<div class="outer-heading-container">
<div class="heading-container-cards">
<h1>Add Contact</h1>
<span class="subtitle-newContactCard">Task are better with a team!</span>
</div>
</div>
</div>
<div class="card-body card-body-bottom">
<form onsubmit="checkAddNewContactForm(); return false">
<div class="form-group-btn-container">
<div class="input-field-container-new-contact-card">
<div class="form-group">
<input placeholder="Name" type="text" class="form-control" id="name-new-contact" />
<div id="new-contact-name" class="invalid-feedback">NA</div>
</div>
<div class="form-group">
<input placeholder="Email" type="email" class="form-control" id="email-new-contact" />
<div id="new-contact-email" class="invalid-feedback">Email not available</div>
</div>
<div class="form-group">
<input placeholder="Phone" type="tel" class="form-control" id="phone-new-contact" />
<div id="new-contact-phone" class="invalid-feedback">NA</div>
</div>
</div>
<button type="submit" class="btn btn-ordinary">Submit</button>
</div>
</form>
</div>
<img class="contact-created-message" id="contact-created-message" src="./assets/img/feedback_contact-created.png" title="Your new contact has been created" alt="Your new contact has been created" />
</div>
</div>
<!-- Edit Contact Overlay -->
<div id="edit-contact-overlay" class="overlay">
<div id="new-contacts-card" class="card contacts-overlay-card p-0 overflow-hidden border-0" style="width: 18rem">
<button onclick="closeEditContact()" id="close-new-contact-btn" type="button" class="btn-close btn-close-white" aria-label="Close"></button>
<div class="card-body dark-blue">
<div class="outer-heading-container">
<div class="heading-container-cards">
<h1>Edit Contact</h1>
</div>
</div>
</div>
<div class="card-body card-body-bottom">
<form onsubmit="checkEditContactForm(editContactId); return false">
<div class="form-group-btn-container">
<div class="input-field-container-new-contact-card">
<div class="form-group">
<input placeholder="Name" type="text" class="form-control" id="name-edit-contact" />
<div id="edit-name" class="invalid-feedback">NA</div>
</div>
<div class="form-group">
<input placeholder="Email" type="email" class="form-control" id="email-edit-contact" placeholder="email@example.com" minlength="5" maxlength="64" autocomplete="on" required />
<div id="edit-email" class="invalid-feedback">Passwords do not match.</div>
</div>
<div class="form-group">
<input placeholder="Phone" type="tel" class="form-control" id="phone-edit-contact" />
<div id="edit-name" class="invalid-feedback">NA</div>
</div>
</div>
<button type="submit" class="btn btn-ordinary">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div id="side-menu" class="side-menu" w3-include-html="assets/templates/side-menu.html"></div>
<div class="main-container" id="main-container">
<nav class="navbar navbar-expand-lg bg-body-tertiary" w3-include-html="assets/templates/header.html"></nav>
<div id="content" class="main-content-outer-container">
<div class="new-contact-button-container">
<button id="open-new-contact-btn" type="button" class="btn btn-primary btn-ordinary">
<span class="btn-name">New contact</span>
<img src="./assets/icons/new-contact_icon.png" alt="" />
</button>
</div>
<div id="contact-list" class="contact-list-inner-container"></div>
<div class="overlay-details" id="overlay-details">
<div id="contact-details-card" class="container display-contact-details-section">
<!-- Heading Section -->
<img id="back-to-contact-list" class="back-to-contact-list" src="./assets/icons/back_logo_black.png" alt="back to contact list" />
<div class="heading-container">
<span class="description-heading">Kanban Project Management Tool</span>
<div class="title">Contacts</div>
<div class="subtitle">Better with a team</div>
</div>
<!-- Contact Details -->
<div id="contact-on-display" class="wrapper-details"></div>
</div>
</div>
</div>
</div>
<!-- Bottom Menu (for mobile devices) -->
<div id="bottom-menu" class="bottom-menu-btn-container" w3-include-html="assets/templates/bottom-menu.html"></div>
</body>
</html>