-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (95 loc) · 3.77 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Calendar matcher</title>
</head>
<body>
<form id="form" onsubmit="showAvailableSlots(event)">
<div>
<label style="display: block;" for="start">Pick up the interval when you are available:</label>
<input type="datetime-local" id="start" required />
<input type="datetime-local" id="end" required />
</div>
<div>
<label style="display: block;" for="duration">Type the event duration (minutes):</label>
<input type="number" id="duration" required />
</div>
<div>
<label style="display: block;" for="participants">Choose participants:</label>
<select id="participants" multiple required>
<option value="John">John</option>
<option value="Michael">Michael</option>
<!--<option value="Jack">Jack</option>-->
</select>
</div>
<div id="error" style="color: #db2835"></div>
<div>
<button id="show" type="submit">Search free slots</button>
</div>
</form>
<div id="freeSlots"></div>
</body>
<script>
function validate() {
const start = new Date(document.getElementById('start').value)
const end = new Date(document.getElementById('end').value)
const duration = document.getElementById('duration').value
const errorElement = document.getElementById('error')
if (start.getFullYear() !== end.getFullYear() ||
start.getMonth() !== end.getMonth() ||
start.getDate() !== end.getDate()) {
errorElement.innerText = 'Start and end should be with the same day'
return false;
} else if (start > end) {
errorElement.innerText = 'End date should be after the start date';
return false;
} else if (end.getTime() - start.getTime() < duration * 60 * 1000) {
errorElement.innerText = 'Difference between start and end should be grater than the duration';
return false;
} else if (duration <= 0) {
errorElement.innerText = 'Duration should be a positive number';
return false;
}
errorElement.innerText = null;
return true;
}
function showAvailableSlots(event) {
event.preventDefault();
if (!validate()) {
return;
}
const start = new Date(document.getElementById('start').value).toISOString()
const end = new Date(document.getElementById('end').value).toISOString()
const duration = document.getElementById('duration').value
const participants = [...document.getElementById('participants').options].filter(option => option.selected).map(option => option.value)
const resultElement = document.getElementById('freeSlots');
resultElement.innerText = null;
fetch('http://localhost:3000/free-slots', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
start,
end,
duration,
participants,
}),
}).then(response => response.json())
.then(response => {
if (!response.length) {
resultElement.innerHTML = '<h5>No free slots found</h5>'
return;
}
let body = '<h3>Free slots:</h3>'
response.forEach(slot => {
const start = new Date(slot[0])
const end = new Date(slot[1])
body += `<p>${start.toLocaleDateString()} ${start.toLocaleTimeString()} - ${end.toLocaleDateString()} ${end.toLocaleTimeString()}</p>`
})
resultElement.innerHTML = body
})
}
</script>
</html>