← Back to branch summary

~widelands-dev/widelands-website/django_staticfiles

« back to all changes in this revision

Viewing changes to wlscheduling/static/js/scheduling.js

  • Committer: Holger Rapp
  • Date: 2009-02-20 12:25:18 UTC
  • Revision ID: holgerrapp@gmx.net-20090220122518-feaq34ta973snnct
Imported wikiapp into our repository, because we did some local changes (users must be logged in to edit wiki pages)

Show diffs side-by-side

added added

removed removed

Lines of Context:
wlscheduling/static/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'