← Back to team overview

widelands-dev team mailing list archive

Re: [Merge] lp:~trimardio/widelands-website/scheduling_module into lp:widelands-website

 

Review: Needs Fixing

Did not test and could not finish the code review yet - my daughter woke up. I'll try to do it till the end of the weekend.

Diff comments:

> === added file 'media/css/kalendae.css'
> --- media/css/kalendae.css	1970-01-01 00:00:00 +0000
> +++ media/css/kalendae.css	2017-09-28 09:52:14 +0000
> @@ -0,0 +1,268 @@
> +/** Base container **/
> +.kalendae {
> +	display: inline-block;zoom:1;*display:inline;
> +	background:#eee;
> +	padding:10px;
> +	margin:5px;
> +	border-radius:5px;
> +	font-size:11px;
> +	font-family:'Helvetica Neue', 'Helvetica';
> +	cursor:default;
> +	position:relative;
> +	-moz-box-sizing: border-box;
> +	box-sizing: border-box;
> +}
> +
> +.kalendae * {
> +	-moz-box-sizing: border-box;
> +	box-sizing: border-box;
> +}
> +
> +/** Popup Container for Kalendae.Input **/
> +.kalendae.k-floating {
> +	position:absolute;
> +	top:0;
> +	left:0;
> +	z-index:100000;
> +	margin:0;
> +	box-shadow:0 1px 3px rgba(0,0,0,0.75);
> +}
> +
> +/** Kalendae.Input's popup close button **/
> +.kalendae .k-btn-close {
> +	position:absolute;
> +	top:-8px;
> +	right:-8px;
> +	width:20px;
> +	height:20px;
> +	background:white;
> +	border:2px solid #ccc;
> +	color:#999;
> +	line-height:17px;
> +	text-align:center;
> +	font-size:13px;
> +	border-radius:10px;
> +	box-shadow:0 1px 3px rgba(0,0,0,0.75);
> +	cursor:pointer;
> +	text-decoration:none;
> +}
> +.kalendae .k-btn-close:after {content:"\2716";}

please format consistently, i.e. newline after { and indent next line.

> +.kalendae .k-btn-close:hover {
> +	color:#7EA0E2;
> +	background:white;
> +	border-color:#7EA0E2;
> +}
> +
> +/** Month Container **/
> +.kalendae .k-calendar {display: inline-block;zoom:1;*display:inline;width:155px;vertical-align:top;}

please format consistently. Also several below, I did not leave comments for all of them.

> +
> +/** Month Separator **/
> +.kalendae .k-separator {
> +	display: inline-block;zoom:1;*display:inline;
> +	width:2px;
> +	vertical-align:top;
> +	background:#ddd;
> +	height:155px;
> +	margin:0px 10px;
> +}
> +
> +/** Month Title Row **/
> +.kalendae .k-title {text-align:center;white-space:nowrap;position:relative;height:18px;}
> +.kalendae .k-caption {font-size:12px;line-height:18px;}
> +
> +
> +/** Month and Year Buttons **/
> +.kalendae .k-btn-previous-month,
> +.kalendae .k-btn-next-month,
> +.kalendae .k-btn-previous-year,
> +.kalendae .k-btn-next-year {
> +	width:16px;
> +	height:23px;
> +	cursor:pointer;
> +	position:absolute;
> +	top:-3px;
> +	color:#777;
> +	font-size:32px;
> +	line-height: 18px;
> +	font-weight: bold;
> +	font-family: arial;
> +	text-decoration:none;
> +}
> +
> +.kalendae .k-btn-previous-year {left:0;}
> +.kalendae .k-btn-previous-month {left:16px;}
> +.kalendae .k-btn-next-month {right:16px;}
> +.kalendae .k-btn-next-year {right:0;}
> +
> +.kalendae .k-btn-previous-month:after {content:"\2039";}
> +.kalendae .k-btn-next-month:after {content:"\203A";}
> +
> +.kalendae .k-btn-previous-year:after {content:"\00AB";}
> +.kalendae .k-btn-next-year:after {content:"\00BB";}
> +
> +.kalendae .k-btn-previous-month:hover,
> +.kalendae .k-btn-next-month:hover {color:#7EA0E2;}
> +
> +.kalendae .k-btn-previous-year:hover,
> +.kalendae .k-btn-next-year:hover {color:#6FDF81;}
> +
> +/** Remove extra buttons when calendar shows multiple months **/
> +.kalendae .k-first-month .k-btn-next-month,
> +.kalendae .k-middle-month .k-btn-next-month,
> +.kalendae .k-middle-month .k-btn-previous-month,
> +.kalendae .k-last-month .k-btn-previous-month,
> +.kalendae .k-first-month .k-btn-next-year,
> +.kalendae .k-middle-month .k-btn-next-year,
> +.kalendae .k-middle-month .k-btn-previous-year,
> +.kalendae .k-last-month .k-btn-previous-year {display:none;}
> +
> +/** Disable year nav option **/
> +.kalendae .k-title.k-disable-year-nav .k-btn-next-year,
> +.kalendae .k-title.k-disable-year-nav .k-btn-previous-year { display: none; }
> +.kalendae .k-title.k-disable-year-nav .k-btn-next-month { right: 0; }
> +.kalendae .k-title.k-disable-year-nav .k-btn-previous-month { left: 0; }
> +
> +/** Force specific width for month container contents **/
> +.kalendae .k-title,
> +.kalendae .k-header,
> +.kalendae .k-days {
> +	width:154px;
> +	display:block;
> +	overflow:hidden;
> +}
> +
> +
> +/** Hide unusable buttons **/
> +.kalendae.k-disable-next-month-btn .k-btn-next-month,
> +.kalendae.k-disable-previous-month-btn .k-btn-previous-month,
> +.kalendae.k-disable-next-year-btn .k-btn-next-year,
> +.kalendae.k-disable-previous-year-btn .k-btn-previous-year {
> +	display:none;
> +}
> +
> +
> +/** Week columns and day cells **/
> +.kalendae .k-header span,
> +.kalendae .k-days span {
> +	float:left;
> +	margin:1px 1px 2px 1px;
> +}
> +
> +.kalendae .k-header span {
> +	text-align:center;
> +	font-weight:bold;
> +	width:20px;
> +	padding:1px 0;
> +	color:#666;
> +}
> +
> +.kalendae .k-header.k-active span {
> +	cursor: pointer;
> +	border-radius:3px;
> +}
> +
> +.kalendae .k-days span {
> +	text-align:right;
> +	width:20px;
> +	height:1.5em;
> +	line-height:1em;
> +	padding:2px 3px 2px 2px;
> +	border:1px solid transparent;
> +	border-radius:3px;
> +	color:#999;
> +}
> +
> +/** Today **/
> +.kalendae .k-today {
> +	text-decoration:underline;
> +}
> +
> +/** Days inside of the month view **/
> +.kalendae .k-days span.k-in-month.k-active {
> +	border-color:#ddd;
> +	background-color:#fff;
> +	color:#333;
> +}
> +/** Days outside of the month view (before the first day of the month, after the last day of the month) **/
> +.kalendae .k-days span.k-out-of-month {color:#ddd;}
> +
> +/** Selectable  **/
> +.kalendae .k-days span.k-active {
> +	cursor:pointer;
> +}
> +
> +/** Selected day, when outside the selectable area **/
> +.kalendae .k-days span.k-selected {
> +	border-color:#1072A5;
> +	color:#1072A5;
> +}
> +
> +/** Selected day, when inside the selectable area **/
> +.kalendae .k-days span.k-selected.k-active,
> +.kalendae .k-header.k-active span.k-selected {
> +	background:#7EA0E2;
> +	color:white;
> +}
> +
> +/** Days between the start and end points on a range, outside of the selectable area **/
> +.kalendae .k-days span.k-range {
> +	background:none;
> +	border-color:#6DD4FE;
> +}
> +
> +/** Days between the start and end points on a range, inside of the selectable area **/
> +.kalendae .k-days span.k-range.k-in-month {
> +	background:#C4D4F1;
> +	border-color:#19AEFE;
> +	color:#333;
> +}
> +
> +/** Selectable day, hovered **/
> +.kalendae .k-days span.k-active:hover,
> +.kalendae .k-days span.k-active.k-day-hover-active {
> +	border-color:#666;
> +}
> +
> +/** Selectable week, hovered **/
> +.kalendae .k-week:hover span.k-active {
> +	border-color:#666;
> +}
> +
> +.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
> +
> +/*-------------------------------------IE8 ONLY CODE BELOW THIS LINE--------------------------------------------*/
> +
> +.kalendae.ie8.k-floating {
> +	border:1px solid #ccc;
> +}
> +
> +.kalendae.ie8 .k-btn-close {
> +	width:20px;
> +	height:20px;
> +	border:none;
> +	background:url('close.png') no-repeat top left;
> +}
> +.kalendae.ie8 .k-btn-close:after {display:none;}
> +
> +.kalendae.ie8 .k-btn-previous-month,
> +.kalendae.ie8 .k-btn-next-month,
> +.kalendae.ie8 .k-btn-previous-year,
> +.kalendae.ie8 .k-btn-next-year {width:16px;height:16px;cursor:pointer;background:#777 url('arrows.png') no-repeat center left;position:absolute;top:0;}
> +
> +.kalendae.ie8 .k-btn-next-month,
> +.kalendae.ie8 .k-btn-next-year {background-position:center right;}
> +
> +.kalendae.ie8 .k-btn-previous-month:hover,
> +.kalendae.ie8 .k-btn-next-month:hover {background-color:#7EA0E2;}
> +
> +.kalendae.ie8 .k-btn-previous-year,
> +.kalendae.ie8 .k-btn-next-year {background-color:#333;}
> +
> +.kalendae.ie8 .k-btn-previous-year:hover,
> +.kalendae.ie8 .k-btn-next-year:hover {background-color:#6FDF81;}
> +
> +.kalendae.ie8 .k-btn-previous-month:after,
> +.kalendae.ie8 .k-btn-next-month:after,
> +.kalendae.ie8 .k-btn-previous-year:after,
> +.kalendae.ie8 .k-btn-next-year:after {display:none;}
> +
> 
> === added file 'media/css/scheduling.css'
> --- media/css/scheduling.css	1970-01-01 00:00:00 +0000
> +++ media/css/scheduling.css	2017-09-28 09:52:14 +0000
> @@ -0,0 +1,211 @@
> +/* Main */
> +
> +.main-choices {
> +    display: flex;
> +    justify-content: space-around;
> +    margin-top: 40px;
> +}
> +
> +.main-choices button {
> +    padding: 40px;
> +    font-size: 1em;
> +}
> +
> +/* actual scheduling module */
> +#calandar {
> +    display: flex;
> +    justify-content: center;
> +}
> +
> +/*  Hours of each day display for the user  */
> +.day {
> +    margin-bottom: 15px;
> +    background-image: url("../img/black50.png");
> +    padding: 10px;
> +}
> +
> +.day-title h3{
> +    color:white;
> +    font-weight: bold;
> +    margin-top: 0;
> +}
> +
> +.hours-wrapper {
> +    display: flex;
> +}
> +
> +.hours-title-wrapper {
> +    display: flex;
> +    width: 100%;
> +}
> +
> +.hours-title-wrapper p{
> +    width: 42px;
> +    user-select: none;
> +}
> +
> +.hours {
> +    border: 1px solid #909090;
> +    height:40px;
> +    width: 40px;
> +    cursor: pointer;
> +}
> +
> +.hours.selected {
> +    background-color:#118811;

please format consistently: space after :

> +}
> +
> +.hours:hover {
> +    background-color:lightgreen;

same here

> +}
> +
> +.hidden-hour {
> +    height:40px;

space after colomn

> +    width: 40px;
> +}
> +
> +
> +/*  Display for the other users  */
> +
> +#other-users-wrapper {
> +    display: flex;
> +    flex-wrap: wrap;
> +    padding: 1%;
> +}
> +
> +.other-user-div{
> +    width: 29%;
> +    border: 1px solid black;
> +    background-image: url("../img/black50.png");
> +    padding: 11px;
> +    margin-top: 5px;
> +    margin-right: 5px;
> +}
> +
> +.other-user-div > div {
> +    margin-top: 14px;
> +}
> +
> +.other-user-div .hours{
> +    height: 10px;
> +    width: 20px;
> +}
> +
> +.other-user-div .title {
> +    height: 36px;
> +    display: flex;
> +    justify-content: space-between;
> +    margin-top: 0;
> +}
> +
> +.other-user-div .title p {
> +    font-size:20px;
> +    margin-top: 5px;
> +    text-transform: capitalize;
> +    white-space: nowrap;
> +    overflow: hidden !important;
> +    text-overflow: ellipsis;
> +    color:  #feea72;;
> +    font-weight: bold;
> +}
> +
> +.other-user-div .title button {
> +    min-width: 114px;
> +}
> +
> +.other-user-div .title button:hover {
> +    background-color:#118811;;
> +}
> +
> +.other-user-div .title img {
> +    margin-right: 4px;
> +}
> +
> +/* btn */
> +
> +#validate-btn {
> +    margin-top: 10px;
> +}
> +
> +
> +/* Calandar stuff */
> +.kalendae {
> +    background: none;
> +    background-image: url("../img/black50.png");
> +    width: 100%;
> +    height: 260px;
> +    display: flex;
> +    justify-content: center;
> +}
> +
> +.kalendae .k-calendar {
> +    width: 650px;
> +    height: 191px;
> +    margin-top: 25px;
> +}
> +
> +.kalendae .k-caption {
> +    font-size: 23px;
> +}
> +
> +.kalendae a.k-btn-next-month,
> +.kalendae a.k-btn-next-year,
> +.kalendae a.k-btn-previous-month,
> +.kalendae a.k-btn-previous-year {
> +    color:#118811;
> +    font-size: 40px;
> +     width: 23px;
> +
> +}
> +
> +.kalendae .k-title {
> +    width: 100%;
> +    margin-bottom: 14px;
> +}
> +
> +.kalendae .k-header{
> +    display: flex;
> +    width: 100%;
> +}
> +
> +.kalendae .k-header span {
> +    width: 100%;
> +    font-size: 17px;
> +    color: #118811;
> +}
> +
> +.kalendae .k-days {
> +    display: flex;
> +    width: 100%;
> +    flex-wrap: wrap;
> +    justify-content: space-around;
> +    height: 168px;
> +    align-content: space-around;
> +}
> +
> +.kalendae .k-days span {
> +    width: calc(13% + 4px);
> +    text-align: center;
> +    font-size: 16px;
> +    border-radius: 0;
> +}
> +
> +
> +.kalendae .k-in-month,
> +.kalendae .k-out-of-month {
> +    opacity: 0;
> +}
> +
> +.kalendae .k-active {
> +    opacity: 1;
> +}
> +
> +.kalendae .k-days span.k-selected.k-active {
> +    background-color:  #118811;
> +    border: 1px solid black;
> +}
> +
> +.kalendae .k-days span.k-active:hover,
> +.kalendae .k-days span.k-active.k-day-hover-active {
> +    background-color: #6eed6e;
> +}
> \ No newline at end of file
> 
> === added file 'media/js/sheduling.js'

typo in filename: sheduling -> scheduling

> --- media/js/sheduling.js	1970-01-01 00:00:00 +0000
> +++ media/js/sheduling.js	2017-09-28 09:52:14 +0000
> @@ -0,0 +1,387 @@
> +
> +var lastSelectedDates = []
> +
> +document.addEventListener('DOMContentLoaded', function(){ 

Can't you use django templates to only include this javascript in the scheduling page? And the other snippet everywhere else? This is more performant and makes the code simpler by removing the conditional pageIsScheduling()

> +    pageIsScheduling = !!document.getElementById('day-template');
> +    pageIsMain = !!document.getElementById('main-choices');
> +
> +    if (pageIsScheduling) {
> +        var calendar = createCalandar();
> +        addTimeZoneWarningIfNeeded();
> +        addPreviousDateFromUser(calendar);
> +        addOtherUsersAvailabilities();
> +        
> +        //Validate btn
> +        document.getElementById('validate-btn').onclick = function () {
> +            sendDataAsForm(calendar);
> +        }
> +    } else if (pageIsMain) {
> +       console.log('this is main, no js to execute')
> +    } else {
> +         addTimeZoneWarningIfNeeded();
> +         addOtherUsersAvailabilities();
> +    }
> +

remove empty lines?

> +
> +
> +}, false);
> +
> +
> +function createCalandar() {
> +    return new Kalendae('calandar', {
> +        mode: 'multiple',
> +        direction: 'today-future',
> +        subscribe: {
> +            'change': function (date) {
> +                selectedDate = this.getSelected().split(",");
> +            
> +                //Cleanup of whitespace
> +                for (var i in selectedDate) {
> +                    selectedDate[i] = selectedDate[i].replace(' ' , '');
> +                }
> +

one empty line only? also a few times below

> +                
> +                dateToUpdate = array_diff(lastSelectedDates, selectedDate);
> +
> +                
> +                updateAvailableDate(dateToUpdate[0])
> +                lastSelectedDates = selectedDate;
> +            }
> +        }
> +    });
> +}
> +
> +//Add warning in case of disparency between system and profil timezone
> +function addTimeZoneWarningIfNeeded() {
> +    var userTimeZone = document.getElementById('django-data').getAttribute('user-time-zone')
> +    var systemTimeZone = - new Date().getTimezoneOffset()/60
> +    if ( systemTimeZone != userTimeZone) {
> +        document.getElementById('timezone-error').removeAttribute("hidden");
> +
> +
> +        profilTime = document.getElementsByClassName('profil-time');
> +        for (var element in profilTime) {
> +            profilTime[element].innerHTML = cleanAndAddSign(userTimeZone);
> +        }
> +        document.getElementById('system-time').innerHTML = cleanAndAddSign(systemTimeZone);
> +    }
> +}
> +
> +function addPreviousDateFromUser(calendar) {
> +    //Populate the current date with already filled date by the user
> +    old_availabilities_string_JSON = document.getElementById('django-data').getAttribute('day-to-fill')
> +    old_availabilities_list = stringJSONtoJSList(old_availabilities_string_JSON)
> +    
> +    if (!old_availabilities_list[0] == ""){

better: if (old_availabilities_list == "") {
  return;
}

then dedent the code below.

> +        dateToAdd = []
> +        for (var hour in old_availabilities_list) {
> +            dateString = old_availabilities_list[hour].substring(1,11);

Add a comment what the substring(1,11) is supposed to cut out. Is this localization safe, i.e. will this also work for turkish users?

> +            if (!existInList(dateToAdd, dateString)){
> +                dateToAdd.push(dateString)
> +            }
> +            
> +        }
> +        dateStringList = dateToAdd.join(',')
> +
> +        calendar.setSelected(dateStringList);
> +
> +        for (var hour in old_availabilities_list) {
> +            hourString = old_availabilities_list[hour].substring(12,14);
> +            dateString = old_availabilities_list[hour].substring(1,11);
> +            hourString = removeZeroIfUnderTen(hourString);
> +            displayHourForDate(dateString, hourString);
> +        }
> +
> +    }
> +}
> +
> +
> +function addOtherUsersAvailabilities() {
> +    //Populate the result area showing other users and their disponibilities
> +    if (document.getElementById('django-data').getAttribute('users-to-fill')) {
> +        var otherPlayeravailabilitiesJSON = document.getElementById('django-data').getAttribute('users-to-fill');
> +        otherPlayeravailabilities = JSON.parse(otherPlayeravailabilitiesJSON)

consistency: otherPlayeravailabilities => otherPlayerAvailabilities

> +    }
> +    
> +    noOtherUser = true;
> +    for (var user in otherPlayeravailabilities) {
> +        noOtherUser = false;
> +        dateList = otherPlayeravailabilities[user]
> +        for (var hour in dateList) {
> +            createUserDivOrUpdateIt(user, dateList[hour])
> +        }
> +        
> +    }
> +    if (noOtherUser) {
> +        document.getElementById('no-user-to-display').removeAttribute("hidden");
> +    }
> +

remove empty lines.

> +    
> +}
> +
> +
> +function sendDataAsForm(calendar) {
> +    //Get informations from selected hours
> +    var selectedDates = calendar.getSelected().split(",");
> +    var selectedDatesList = [];
> +    for (var d in selectedDates) {
> +        //remove whitespace
> +        selectedDates[d] = selectedDates[d].replace(" ", "");
> +
> +        var dateID = 'day-' + selectedDates[d];
> +        dateObj = document.getElementById(dateID);
> +        if (dateObj) {
> +            hoursList = dateObj.getElementsByClassName('hours');
> +            selectedHours = dateObj.getElementsByClassName('selected');
> +            if (selectedHours[0]){
> +                for (var h in hoursList) {
> +                    if (hasClass(hoursList[h] , 'selected')){
> +                        var hourAsDate = new Date(selectedDates[d] + "T" + addZeroIfUnderTen(h) + ":00:00")
> +                        // we remove the from js because we consider that it is false for now
> +
> +                        // we get the hour in utc time and remove unneeded informations
> +                        stringDate = hourAsDate.toISOString().slice(0,13)
> +                        selectedDatesList.push(stringDate);
> +                    }
> +                }
> +            } 
> +        }
> +    }
> +
> +    //Send informations to server
> +    post('.', selectedDatesList)
> +}
> +
> +//Add or remove available dates in the ui.
> +function updateAvailableDate(date) {
> +    newDateID = "day-" + date
> +    dateAlreadyExist = !!document.getElementById(newDateID);
> +    document.getElementById('second-step').removeAttribute('hidden');
> +
> +    if (dateAlreadyExist) {
> +        document.getElementById(newDateID).remove();
> +    } else {
> +        var original = document.getElementById('day-template');
> +        
> +        // We clone the date and fix different attributes
> +        var newDate = original.cloneNode(true);
> +        newDate.id = "day-" + date;
> +        newDate.removeAttribute("hidden");
> +        var textDate = new Date(date);
> +        textDate = textDate.toDateString();
> +        newDate.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>';
> +        
> +        //We add the listeners to each hours One for the click event, the other for the hover when the mouse is pressed
> +        hoursObj = newDate.getElementsByClassName('hours');
> +        for (var i = 0; i < hoursObj.length; i++) {
> +            hoursObj[i].addEventListener('click', updateHour, false);
> +            hoursObj[i].addEventListener("mouseover", function(e){
> +                if(e.buttons == 1 || e.buttons == 3){
> +                    updateHour(e);
> +                }
> +            })
> +        }
> +
> +        //we look for the order the new date should be in
> +        daysList = document.getElementById('days-wrapper').getElementsByClassName('days');
> +
> +
> +        //We finally add the new date
> +        document.getElementById('days-wrapper').appendChild(newDate);
> +    }
> +
> +}
> +
> +function updateHour (event) {
> +    var div = (event.fromElement ? event.fromElement : event.currentTarget);
> +
> +    isAlreadySelected = hasClass(div, 'selected');
> +
> +    if (isAlreadySelected) {
> +        div.className = 'hours';
> +    } else {
> +        div.className += ' selected';
> +    }
> +}
> +
> +function displayHourForDate(date, hour, user) {
> +    var dateDivID = 'day-' + date
> +    if (user) {
> +        dateDivID = user + '-day-' + date
> +    }
> +    dateDiv = document.getElementById(dateDivID);
> +    hourDiv = dateDiv.getElementsByClassName('hours');
> +    for (var hourInDiv in hourDiv) {
> +        if (hourInDiv == hour) {
> +            hourDiv[hourInDiv].className += ' selected';
> +        }
> +    }
> +}
> +
> +
> +function createUserDivOrUpdateIt(user, availTime) {
> +
> +    if (!document.getElementById("user-" + user)){
> +        var original = document.getElementById('other-user-template');
> +    
> +        // We clone the date and fix different attributes
> +        var otherUser = original.cloneNode(true);
> +        otherUser.id = "user-" + user;
> +        otherUser.removeAttribute("hidden");
> +        
> +        var jsEventHTML = "/messages/compose/" + user
> +        var imageHTML = '<img src="/wlmedia/forum/img/send_pm.png" alt="" class="middle"><span class="middle">Send PM</span>'
> +        //var usernameTitle = '<button onclick="window.location.href='  + jsEventHTML + ';">' + imageHTML + '</button>'
> +
> +        var userTitle = otherUser.children[0]
> +        var button =  document.createElement("button");
> +        button.innerHTML = imageHTML;
> +        button.onclick = function(){
> +            window.location.href = '/messages/compose/' + user;
> +        }
> +        var usernameP = document.createElement('p')
> +        usernameP.innerHTML = user;
> +        userTitle.appendChild(usernameP)
> +        userTitle.appendChild(button)
> +    } else {
> +        otherUser = document.getElementById("user-" + user);
> +    }
> +
> +    var dtavailTime = new Date(availTime + ":00:00");
> +    //Remove timezone offset which js automatically add...
> +    js_offset = dtavailTime.getTimezoneOffset()/60
> +    dtavailTime = dtavailTime.addHours(js_offset);
> +
> +    textDate = dtavailTime.toDateString();
> +    var dateFormated = dtavailTime.getFullYear() + "-" + dtavailTime.getMonth() + '-' + dtavailTime.getDay()
> +    var availTimeFormated = dtavailTime.getHours()
> +
> +    var originalDay = document.getElementById('other-day-template')
> +
> +    if (!document.getElementById(user + "-day-" + dateFormated)) {
> +        var day = originalDay.cloneNode(true);
> +        day.id = user + "-day-" + dateFormated;
> +        day.removeAttribute("hidden");
> +        day.getElementsByClassName('day-title')[0].innerHTML = '<h3>' + textDate + '</h3>'; 
> +        otherUser.appendChild(day);
> +    }
> +    
> +    document.getElementById('other-users-wrapper').appendChild(otherUser);
> +    displayHourForDate(dateFormated, availTimeFormated, user);
> +    
> +}
> +
> +/*****************************/
> +/********* utilities *********/
> +/*****************************/
> +// read as "Stackoverflow coded this"
> +
> +//Return diff between two list
> +function array_diff(a1, a2) {
> +    var a = [], diff=[];
> +
> +    for (var i = 0; i < a1.length; i++) {
> +        a[a1[i]] = true;
> +    }
> +
> +    for (var i=0; i < a2.length; i++) {
> +        if (a[a2[i]]) {
> +            delete a[a2[i]];
> +        } else {
> +            a[a2[i]] = true;
> +        }
> +    }
> +
> +    for (var k in a) {
> +        diff.push(k)
> +    }
> +
> +    return diff
> +}
> +
> +function hasClass(element, cls) {
> +    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
> +}
> +
> +//We need a custom function to submit a form because our data isn't formated as a form.
> +function post(path, params, method) {
> +    method = method || "post"; // Set method to post by default if not specified.
> +
> +    // The rest of this code assumes you are not using a library.
> +    // It can be made less wordy if you use one.
> +    var form = document.createElement("form");
> +    form.setAttribute("method", method);
> +    form.setAttribute("action", path);
> +
> +
> +    for(var key in params) {
> +            var hiddenField = document.createElement("input");
> +            hiddenField.setAttribute("type", "hidden");
> +            hiddenField.setAttribute("name", key);
> +            hiddenField.setAttribute("value", params[key]);
> +
> +            form.appendChild(hiddenField);
> +    }
> +
> +    //CSRF token
> +    var csrf_div = document.createElement("div");
> +    csrf_div.innerHTML = document.getElementById('django-data').getAttribute('csrf-token')
> +    form.appendChild(csrf_div);
> +
> +    document.body.appendChild(form);
> +    form.submit();
> +}
> +
> +function cleanJSONfromWhiteSpace(json) {
> +    var name, newName;
> +    for (var name in json) {
> +        // Get the name without spaces
> +        newName = name.replace(/ /g, "");
> +        // If that's different...
> +        if (newName != name) {
> +            // Create the new property
> +            json[newName] = json[name];
> +            // Delete the old one
> +            delete json[name];
> +        }
> +    }
> +    return json;
> +}
> +
> +function stringJSONtoJSList(json) {
> +    //removes brackets
> +    json = json.substring(1, json.length-1);
> +    var jsonList= json.split(",")
> +
> +    for (var i in jsonList){
> +        jsonList[i] = jsonList[i].replace(/\s/g, '');
> +    }
> +
> +    return jsonList
> +
> +}
> +
> +function addZeroIfUnderTen(number) {
> +    return ('0' + number).slice(-2)
> +}
> +
> +function removeZeroIfUnderTen(number) {
> +    return parseInt(number, 10);
> +}
> +
> +Date.prototype.addHours = function(h) {    
> +   this.setTime(this.getTime() + (h*60*60*1000)); 
> +   return this;   
> +}
> +
> +function existInList(list, value) {
> +    return list.indexOf(value) > -1
> +}
> +
> +function cleanAndAddSign(number) {
> +    if (number < 0) {
> +        return '- ' + parseInt(number)
> +    } else {
> +        return '+ ' + parseInt(number)
> +    }
> +}
> \ No newline at end of file


-- 
https://code.launchpad.net/~trimardio/widelands-website/scheduling_module/+merge/331477
Your team Widelands Developers is subscribed to branch lp:widelands-website.


References