« back to all changes in this revision
Viewing changes to media/js/scheduling.js
- browse files at revision 480
- compare with another revision
- download diff
- download tarball
- view history from revision 480
- Committer: franku
- Author(s): trimard
- Date: 2018-02-17 10:52:15 UTC
- mfrom: (478.1.16 module_scheduling)
- Revision ID: somal@arcor.de-20180217105215-8luihqojg51ipu6j
merged the scheduling module by trimard
- files added:
- media/css/jquery-ui.multidatespicker.css
- templates/wlscheduling
- wlscheduling
- wlscheduling/management
- wlscheduling/management/commands
- wlscheduling/migrations
- files modified:
- settings.py
added
removed
media/js/scheduling.js
1
// global variables
2
var lastSelectedDates = []
3
4
// Create calender and return it as an object. Useful for callbacks.
5
function createCalendar() {
6
$('#scheduling-datepicker').multiDatesPicker({
7
dateFormat: "yy-mm-dd",
8
showAnim: "slideDown",
9
numberOfMonths: 3,
10
minDate: 0,
11
onSelect: function(date) {
12
selectedDate = date;
13
updateAvailableDate(date)
14
},
15
});
16
}
17
18
19
// Add warning in case of disparency between browser and profil timezone
20
function addTimeZoneWarningIfNeeded() {
21
var userTimeZone = document.getElementById('django-data').getAttribute('user-time-zone')
22
var browserTimeZone = - new Date().getTimezoneOffset()/60
23
if ( browserTimeZone != userTimeZone) {
24
document.getElementById('timezone-error').removeAttribute("hidden");
25
profilTime = document.getElementsByClassName('profil-time');
26
for (var element in profilTime) {
27
profilTime[element].innerHTML = cleanAndAddSign(userTimeZone);
28
}
29
document.getElementById('browser-time').innerHTML = cleanAndAddSign(browserTimeZone);
30
}
31
}
32
33
function addPreviousDateFromUser(calendar) {
34
// Populate the current date with already filled date by the user
35
old_availabilities_string_JSON = document.getElementById('django-data').getAttribute('day-to-fill')
36
old_availabilities_list = stringJSONtoJSList(old_availabilities_string_JSON)
37
if (old_availabilities_list == "") {
38
return;
39
}
40
dateToAdd = []
41
for (var date in old_availabilities_list) {
42
// Extract day of the date. See format in view.py.
43
dateString = old_availabilities_list[date].substring(1,11);
44
if (!existInList(dateToAdd, dateString)){
45
dateToAdd.push(dateString)
46
updateAvailableDate(dateString)
47
}
48
}
49
$('#scheduling-datepicker').multiDatesPicker('addDates', dateToAdd);
50
for (var date in old_availabilities_list) {
51
// Extract hour of the date. See format in view.py.
52
hourString = old_availabilities_list[date].substring(12,14);
53
// Extract day of the date. See format in view.py.
54
dateString = old_availabilities_list[date].substring(1,11);
55
hourString = removeZeroIfUnderTen(hourString);
56
displayHourForDate(dateString, hourString);
57
}
58
}
59
60
function addOtherUsersAvailabilities() {
61
// Populate the result area showing other users and their disponibilities
62
if (document.getElementById('django-data').getAttribute('users-to-fill')) {
63
var otherPlayerAvailabilitiesJSON = document.getElementById('django-data').getAttribute('users-to-fill');
64
otherPlayerAvailabilities = JSON.parse(otherPlayerAvailabilitiesJSON)
65
}
66
noOtherUser = true;
67
for (var user in otherPlayerAvailabilities) {
68
noOtherUser = false;
69
dateList = otherPlayerAvailabilities[user]
70
for (var date in dateList) {
71
createUserDivOrUpdateIt(user, dateList[date])
72
}
73
}
74
if (noOtherUser) {
75
document.getElementById('no-user-to-display').removeAttribute("hidden");
76
}
77
}
78
79
function sendDataAsForm(calendar) {
80
// Get informations from selected hours
81
var selectedDates = $( "#scheduling-datepicker" ).multiDatesPicker( "getDates" );
82
var selectedDatesList = [];
83
for (var d in selectedDates) {
84
// remove whitespace
85
var dateID = 'day-' + selectedDates[d];
86
dateObj = document.getElementById(dateID);
87
if (dateObj) {
88
hoursList = dateObj.getElementsByClassName('hours');
89
selectedHours = dateObj.getElementsByClassName('selected');
90
if (selectedHours[0]){
91
for (var h in hoursList) {
92
if (hasClass(hoursList[h] , 'selected')){
93
var hourAsDate = selectedDates[d] + "T" + addZeroIfUnderTen(h);
94
selectedDatesList.push(hourAsDate);
95
}
96
}
97
}
98
}
99
}
100
// Send informations to server
101
console.log(selectedDatesList);
102
post('.', selectedDatesList)
103
}
104
105
// Add or remove available dates in the ui.
106
function updateAvailableDate(date) {
107
newDateID = "day-" + date
108
dateAlreadyExist = !!document.getElementById(newDateID);
109
document.getElementById('second-step').removeAttribute('hidden');
110
if (dateAlreadyExist) {
111
document.getElementById(newDateID).remove();
112
} else {
113
var original = document.getElementById('day-template');
114
// We clone the date and fix different attributes
115
var newDate = original.cloneNode(true);
116
newDate.id = "day-" + date;
117
newDate.removeAttribute("hidden");
118
var textDate = new Date(date);
119
textDate = textDate.toDateString();
120
newDate.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>';
121
// We add the listeners to each hours One for the click event, the other for the hover when the mouse is pressed
122
hoursObj = newDate.getElementsByClassName('hours');
123
for (var i = 0; i < hoursObj.length; i++) {
124
hoursObj[i].addEventListener('click', updateHour, false);
125
hoursObj[i].addEventListener("mouseover", function(e){
126
if(e.buttons == 1 || e.buttons == 3){
127
updateHour(e);
128
}
129
})
130
}
131
// We look for the order the new date should be in
132
daysList = document.getElementById('days-wrapper').getElementsByClassName('days');
133
// We finally add the new date
134
document.getElementById('days-wrapper').appendChild(newDate);
135
}
136
137
}
138
139
function updateHour (event) {
140
var div = (event.fromElement ? event.fromElement : event.currentTarget);
141
isAlreadySelected = hasClass(div, 'selected');
142
if (isAlreadySelected) {
143
div.className = 'hours';
144
} else {
145
div.className += ' selected';
146
}
147
}
148
149
function displayHourForDate(date, hour, user) {
150
var dateDivID = 'day-' + date
151
if (user) {
152
dateDivID = user + '-day-' + date
153
}
154
dateDiv = document.getElementById(dateDivID);
155
156
// For the current user hours display
157
hourDiv = dateDiv.getElementsByClassName('hours');
158
for (var hourInDiv in hourDiv) {
159
if (hourInDiv == hour) {
160
hourDiv[hourInDiv].className += ' selected';
161
}
162
}
163
164
// For the other users hours display (the svg clock)
165
hoursArea = dateDiv.getElementsByClassName('hour-area');
166
for (var hourArea in hoursArea) {
167
if (hourArea == hour) {
168
hoursArea[hourArea].className.baseVal += ' active';
169
}
170
}
171
}
172
173
function createUserDivOrUpdateIt(user, availTime) {
174
if (!document.getElementById("user-" + user)){
175
var original = document.getElementById('other-user-template');
176
// We clone the date and fix different attributes
177
var otherUser = original.cloneNode(true);
178
otherUser.id = "user-" + user;
179
otherUser.removeAttribute("hidden");
180
181
var userTitle = otherUser.getElementsByClassName('title')[0];
182
button = userTitle.querySelector('button');
183
button.onclick = function(){
184
window.location.href = '/messages/compose/' + user;
185
}
186
187
var usernameP = userTitle.querySelector('p');
188
usernameP.innerHTML = user;
189
190
var showClockBtn = otherUser.getElementsByClassName('show-clock-btn')[0];
191
showClockBtn.onclick = function (){
192
otherUser.classList.toggle('hide');
193
var showClockText = '<i class="arrow"></i>Show clock';
194
var hideClockText = '<i class="arrow"></i>Hide clock';
195
if (showClockBtn.innerHTML == showClockText) {
196
showClockBtn.innerHTML = hideClockText;
197
} else {
198
showClockBtn.innerHTML = showClockText;
199
}
200
}
201
} else {
202
otherUser = document.getElementById("user-" + user);
203
}
204
var dtavailTime = new Date(availTime + ":00:00");
205
// Remove timezone offset which js automatically add...
206
js_offset = dtavailTime.getTimezoneOffset()/60
207
dtavailTime = dtavailTime.addHours(js_offset);
208
textDate = dtavailTime.toDateString();
209
var dateFormated = dtavailTime.getFullYear() + "-" + dtavailTime.getMonth() + '-' + dtavailTime.getDay()
210
var availTimeFormated = dtavailTime.getHours()
211
var originalDay = document.getElementById('other-day-template')
212
if (!document.getElementById(user + "-day-" + dateFormated)) {
213
var day = originalDay.cloneNode(true);
214
day.id = user + "-day-" + dateFormated;
215
day.removeAttribute("hidden");
216
day.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>';
217
otherUser.getElementsByClassName('other-days-container')[0].appendChild(day)
218
}
219
document.getElementById('other-users-wrapper').appendChild(otherUser);
220
displayHourForDate(dateFormated, availTimeFormated, user);
221
}
222
223
/*****************************/
224
/********* utilities *********/
225
/*****************************/
226
// From stackoverflow: https://stackoverflow.com/questions/5898656/test-if-an-element-contains-a-class
227
function hasClass(element, cls) {
228
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
229
}
230
231
// We need a custom function to submit a form because our data isn't formated as a form.
232
function post(path, params, method) {
233
method = method || "post"; // Set method to post by default if not specified.
234
// The rest of this code assumes you are not using a library.
235
// It can be made less wordy if you use one.
236
var form = document.createElement("form");
237
form.setAttribute("method", method);
238
form.setAttribute("action", path);
239
for(var key in params) {
240
var hiddenField = document.createElement("input");
241
hiddenField.setAttribute("type", "hidden");
242
hiddenField.setAttribute("name", key);
243
hiddenField.setAttribute("value", params[key]);
244
245
form.appendChild(hiddenField);
246
}
247
// CSRF token
248
var csrf_div = document.createElement("div");
249
csrf_div.innerHTML = document.getElementById('django-data').getAttribute('csrf-token')
250
form.appendChild(csrf_div);
251
document.body.appendChild(form);
252
form.submit();
253
}
254
255
function cleanJSONfromWhiteSpace(json) {
256
var name, newName;
257
for (var name in json) {
258
// Get the name without spaces
259
newName = name.replace(/ /g, "");
260
// If that's different...
261
if (newName != name) {
262
// Create the new property
263
json[newName] = json[name];
264
// Delete the old one
265
delete json[name];
266
}
267
}
268
return json;
269
}
270
271
function stringJSONtoJSList(json) {
272
// Removes brackets
273
json = json.substring(1, json.length-1);
274
var jsonList= json.split(",")
275
for (var i in jsonList){
276
jsonList[i] = jsonList[i].replace(/\s/g, '');
277
}
278
return jsonList
279
280
}
281
282
function addZeroIfUnderTen(number) {
283
return ('0' + number).slice(-2)
284
}
285
286
function removeZeroIfUnderTen(number) {
287
return parseInt(number, 10);
288
}
289
290
Date.prototype.addHours = function(h) {
291
this.setTime(this.getTime() + (h*60*60*1000));
292
return this;
293
}
294
295
function existInList(list, value) {
296
return list.indexOf(value) > -1
297
}
298
299
function cleanAndAddSign(number) {
300
if (number < 0) {
301
return ' ' + parseInt(number)
302
} else {
303
return '+ ' + parseInt(number)
304
}
305
}
b'\\ No newline at end of file'
Loggerhead is a web-based interface for Breezy
Version: 2.0.1