2019-06-13 13:50:17 +02:00
|
|
|
let ajaxurl = 'ajax/read';
|
2019-05-20 22:26:46 +02:00
|
|
|
|
|
|
|
|
|
|
|
let tableWrapper = $('#tablePlanning');
|
|
|
|
let cellHeight = 50;
|
|
|
|
let startHour = 8;
|
|
|
|
|
|
|
|
let activityList = [];
|
|
|
|
|
|
|
|
let dayNames =
|
|
|
|
['Horaires',
|
|
|
|
'Lundi',
|
|
|
|
'Mardi',
|
|
|
|
'Mercredi',
|
|
|
|
'Jeudi',
|
|
|
|
'Vendredi',
|
2019-06-13 13:54:15 +02:00
|
|
|
'Weekend',];
|
2019-05-20 22:26:46 +02:00
|
|
|
|
2018-03-25 14:19:53 +02:00
|
|
|
$(document).ready(function () {
|
2019-05-20 22:26:46 +02:00
|
|
|
generateTable();
|
|
|
|
});
|
2018-03-26 14:22:35 +02:00
|
|
|
|
2019-05-20 22:26:46 +02:00
|
|
|
function getDayActivities(day, callback) {
|
|
|
|
let object = {
|
|
|
|
"function": 'get_activities_of_day',
|
|
|
|
'day': day,
|
|
|
|
};
|
|
|
|
$.get(
|
|
|
|
ajaxurl,
|
|
|
|
object,
|
|
|
|
callback,
|
|
|
|
);
|
|
|
|
}
|
2018-03-26 14:22:35 +02:00
|
|
|
|
2019-05-20 22:26:46 +02:00
|
|
|
function getDataOfElement($elem) {
|
|
|
|
let id = $elem.attr('id');
|
|
|
|
let day = $elem.parent().attr('id').replace('day_', '');
|
|
|
|
let data = undefined;
|
|
|
|
for (let i = 0; i < activityList[day].length; i++) {
|
|
|
|
if (activityList[day][i]['ID'] === id) {
|
|
|
|
data = activityList[day][i];
|
|
|
|
break;
|
2018-03-25 13:22:28 +02:00
|
|
|
}
|
2019-05-20 22:26:46 +02:00
|
|
|
}
|
|
|
|
return data;
|
|
|
|
}
|
|
|
|
|
|
|
|
function clicked($elem){
|
|
|
|
let data = getDataOfElement($elem);
|
|
|
|
console.log(data);
|
|
|
|
$.alert({
|
|
|
|
title: data['full_title'],
|
|
|
|
theme: 'supervan',
|
|
|
|
content: data['description'],
|
2018-03-25 13:22:28 +02:00
|
|
|
});
|
2019-05-20 22:26:46 +02:00
|
|
|
}
|
2018-03-25 13:22:28 +02:00
|
|
|
|
2019-05-20 22:26:46 +02:00
|
|
|
|
|
|
|
function generateTable() {
|
|
|
|
tableWrapper.html(''); // Reset the table
|
|
|
|
generateHours();
|
2019-06-13 13:54:15 +02:00
|
|
|
for (let i = 1; i <= 6; i++) { // Iterate over the days
|
2019-05-20 22:26:46 +02:00
|
|
|
tableWrapper.append('<div class="day-column" id="day_' + i + '"><div class="planning-header">' + dayNames[i] + '</div></div>');
|
|
|
|
let $dayColumn = $('#day_'+i);
|
|
|
|
getDayActivities(i, function (data) {
|
|
|
|
activityList[i] = data;
|
|
|
|
for (let j = 0; j < data.length; j++) {
|
|
|
|
addActivityToColumn($dayColumn, data[j]);
|
|
|
|
}
|
|
|
|
});
|
2018-03-25 13:22:28 +02:00
|
|
|
}
|
2019-05-20 22:26:46 +02:00
|
|
|
}
|
2018-03-25 13:22:28 +02:00
|
|
|
|
2019-05-20 22:26:46 +02:00
|
|
|
function addActivityToColumn($col, act) {
|
|
|
|
let offsetTop = $col.find('.planning-header').outerHeight(true);
|
|
|
|
$col.append('<div class="event ' + act['small_title'] +'" + id="' + act['ID'] +'">' +
|
|
|
|
'<div class="event-color">' +
|
|
|
|
'<div class="event-text">' +
|
|
|
|
act['small_title'] +
|
|
|
|
'</div>' +
|
|
|
|
'</div>' +
|
|
|
|
'</div>');
|
|
|
|
let position = (act['start'] - startHour);
|
|
|
|
$('#' + act['ID']).css('top', offsetTop + position * cellHeight);
|
|
|
|
$('#' + act['ID']).css('height', act['length'] * cellHeight);
|
|
|
|
$('#' + act['ID']).find('.event-color').css('background-color', act['color']);
|
|
|
|
$('#' + act['ID']).on('click', function () {
|
|
|
|
clicked($(this));
|
|
|
|
});
|
|
|
|
}
|
2018-03-25 13:22:28 +02:00
|
|
|
|
2019-05-20 22:26:46 +02:00
|
|
|
|
|
|
|
function generateHours() {
|
|
|
|
tableWrapper.append('<div id="hoursColumn"><div class="planning-header">Horaires</div></div>')
|
|
|
|
for (let i = startHour; i < 24; i++) {
|
|
|
|
tableWrapper.find('#hoursColumn').append('<div class="horaires">' + i + 'h</div>')
|
|
|
|
}
|
|
|
|
tableWrapper.find('.horaires').css('height', cellHeight);
|
|
|
|
}
|