« back to all changes in this revision
Viewing changes to media/js/scheduling.js
- browse files at revision 478.1.1
- compare with another revision
- download diff
- download tarball
- view history from revision 478.1.1
- Committer: gschmitlin at gmail
- Date: 2017-12-23 09:15:02 UTC
- mto: This revision was merged to the branch mainline in revision 480.
- Revision ID: gschmitlin@gmail.com-20171223091502-j1zscwdies0625nv
added scheduling module in a clean way
- files added:
- media/css/jquery-ui.multidatespicker.css
- templates/wlscheduling
- wlscheduling
- wlscheduling/migrations
- files modified:
- settings.py
added
removed
media/js/scheduling.js
1
// global variables
2
var lastSelectedDates = []
3
4
// Create calandar and return it as an object. Useful for callbacks.
5
function createCalandar() {
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
newDate.style.display = "inline-block";
119
var textDate = new Date(date);
120
textDate = textDate.toDateString();
121
newDate.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>';
122
//We add the listeners to each hours One for the click event, the other for the hover when the mouse is pressed
123
hoursObj = newDate.getElementsByClassName('hours');
124
for (var i = 0; i < hoursObj.length; i++) {
125
hoursObj[i].addEventListener('click', updateHour, false);
126
hoursObj[i].addEventListener("mouseover", function(e){
127
if(e.buttons == 1 || e.buttons == 3){
128
updateHour(e);
129
}
130
})
131
}
132
//we look for the order the new date should be in
133
daysList = document.getElementById('days-wrapper').getElementsByClassName('days');
134
//We finally add the new date
135
document.getElementById('days-wrapper').appendChild(newDate);
136
}
137
138
}
139
140
function updateHour (event) {
141
var div = (event.fromElement ? event.fromElement : event.currentTarget);
142
isAlreadySelected = hasClass(div, 'selected');
143
if (isAlreadySelected) {
144
div.className = 'hours';
145
} else {
146
div.className += ' selected';
147
}
148
}
149
150
function displayHourForDate(date, hour, user) {
151
var dateDivID = 'day-' + date
152
if (user) {
153
dateDivID = user + '-day-' + date
154
}
155
dateDiv = document.getElementById(dateDivID);
156
hourDiv = dateDiv.getElementsByClassName('hours');
157
for (var hourInDiv in hourDiv) {
158
if (hourInDiv == hour) {
159
hourDiv[hourInDiv].className += ' selected';
160
}
161
}
162
}
163
164
function createUserDivOrUpdateIt(user, availTime) {
165
if (!document.getElementById("user-" + user)){
166
var original = document.getElementById('other-user-template');
167
// We clone the date and fix different attributes
168
var otherUser = original.cloneNode(true);
169
otherUser.id = "user-" + user;
170
otherUser.removeAttribute("hidden");
171
var jsEventHTML = "/messages/compose/" + user
172
var imageHTML = '<img src="/wlmedia/forum/img/send_pm.png" alt="" class="middle"><span class="middle">Send PM</span>'
173
var userTitle = otherUser.children[0]
174
var button = document.createElement("button");
175
button.innerHTML = imageHTML;
176
button.onclick = function(){
177
window.location.href = '/messages/compose/' + user;
178
}
179
var usernameP = document.createElement('p')
180
usernameP.innerHTML = user;
181
userTitle.appendChild(usernameP)
182
userTitle.appendChild(button)
183
} else {
184
otherUser = document.getElementById("user-" + user);
185
}
186
var dtavailTime = new Date(availTime + ":00:00");
187
//Remove timezone offset which js automatically add...
188
js_offset = dtavailTime.getTimezoneOffset()/60
189
dtavailTime = dtavailTime.addHours(js_offset);
190
textDate = dtavailTime.toDateString();
191
var dateFormated = dtavailTime.getFullYear() + "-" + dtavailTime.getMonth() + '-' + dtavailTime.getDay()
192
var availTimeFormated = dtavailTime.getHours()
193
var originalDay = document.getElementById('other-day-template')
194
if (!document.getElementById(user + "-day-" + dateFormated)) {
195
var day = originalDay.cloneNode(true);
196
day.id = user + "-day-" + dateFormated;
197
day.removeAttribute("hidden");
198
day.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>';
199
otherUser.appendChild(day);
200
}
201
document.getElementById('other-users-wrapper').appendChild(otherUser);
202
displayHourForDate(dateFormated, availTimeFormated, user);
203
}
204
205
/*****************************/
206
/********* utilities *********/
207
/*****************************/
208
// read as "Stackoverflow coded this"
209
function hasClass(element, cls) {
210
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
211
}
212
213
//We need a custom function to submit a form because our data isn't formated as a form.
214
function post(path, params, method) {
215
method = method || "post"; // Set method to post by default if not specified.
216
// The rest of this code assumes you are not using a library.
217
// It can be made less wordy if you use one.
218
var form = document.createElement("form");
219
form.setAttribute("method", method);
220
form.setAttribute("action", path);
221
for(var key in params) {
222
var hiddenField = document.createElement("input");
223
hiddenField.setAttribute("type", "hidden");
224
hiddenField.setAttribute("name", key);
225
hiddenField.setAttribute("value", params[key]);
226
227
form.appendChild(hiddenField);
228
}
229
//CSRF token
230
var csrf_div = document.createElement("div");
231
csrf_div.innerHTML = document.getElementById('django-data').getAttribute('csrf-token')
232
form.appendChild(csrf_div);
233
document.body.appendChild(form);
234
form.submit();
235
}
236
237
function cleanJSONfromWhiteSpace(json) {
238
var name, newName;
239
for (var name in json) {
240
// Get the name without spaces
241
newName = name.replace(/ /g, "");
242
// If that's different...
243
if (newName != name) {
244
// Create the new property
245
json[newName] = json[name];
246
// Delete the old one
247
delete json[name];
248
}
249
}
250
return json;
251
}
252
253
function stringJSONtoJSList(json) {
254
//removes brackets
255
json = json.substring(1, json.length-1);
256
var jsonList= json.split(",")
257
for (var i in jsonList){
258
jsonList[i] = jsonList[i].replace(/\s/g, '');
259
}
260
return jsonList
261
262
}
263
264
function addZeroIfUnderTen(number) {
265
return ('0' + number).slice(-2)
266
}
267
268
function removeZeroIfUnderTen(number) {
269
return parseInt(number, 10);
270
}
271
272
Date.prototype.addHours = function(h) {
273
this.setTime(this.getTime() + (h*60*60*1000));
274
return this;
275
}
276
277
function existInList(list, value) {
278
return list.indexOf(value) > -1
279
}
280
281
function cleanAndAddSign(number) {
282
if (number < 0) {
283
return ' ' + parseInt(number)
284
} else {
285
return '+ ' + parseInt(number)
286
}
287
}
b'\\ No newline at end of file'
Loggerhead is a web-based interface for Breezy
Version: 2.0.1