Skip to content

Commit

Permalink
Finalize locked events method
Browse files Browse the repository at this point in the history
  • Loading branch information
@robinparisi
robinparisi committed Jul 26, 2017
1 parent 1cd298d commit 4671f4f
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 33 deletions.
75 changes: 60 additions & 15 deletions dist/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ var Calendar = function () {
mousedown: false,
start: null,
end: null,
stack: []
stack: [{
start: null,
end: null
}]
}
};

Expand All @@ -54,12 +57,12 @@ var Calendar = function () {
key: 'build',
value: function build() {
// handle date (build days and hours arrays)
var dateManager = new DateManager(this.options.currentDay);
dateManager.generateDays(this.options.numberOfDays);
dateManager.generateHours(this.options.dayStartHour, this.options.dayEndHour, this.options.slotDuration);
this.dateManager = new DateManager(this.options.currentDay);
this.dateManager.generateDays(this.options.numberOfDays);
this.dateManager.generateHours(this.options.dayStartHour, this.options.dayEndHour, this.options.slotDuration);

// build ui and add ID to cell
this.uiManager = new UIManager(this.target, this.options, this.events, dateManager);
this.uiManager = new UIManager(this.target, this.options, this.events, this.dateManager);
this.uiManager.build();
}
}, {
Expand Down Expand Up @@ -104,22 +107,20 @@ var Calendar = function () {
switch (mode) {
case ADD_MODE:
this.mode.current = ADD_MODE;
console.log('Entering add mode');
this.uiManager.showFooter('Choisissez une plage horaire libre', function () {
_this._switchMode(VIEW_MODE);
});
break;
case EDIT_MODE:
console.log('Entering edit mode');
break;
case LOCKED_MODE:
this.mode.current = LOCKED_MODE;
this.target.dataset.mode = LOCKED_MODE;

console.log('Entering locked mode');
this.uiManager.showFooter('Choisissez les plages horaires à bloquer', function () {
_this._switchMode(VIEW_MODE);
_this.resetMode();
});

break;
case VIEW_MODE:
this.target.dataset.mode = VIEW_MODE;
Expand Down Expand Up @@ -148,6 +149,12 @@ var Calendar = function () {
callback: null
};
break;
case LOCKED_MODE:
[].forEach.call(document.querySelectorAll('[data-locked-temp]'), function (cell) {
cell.classList.remove('calendar-lockedTemp');
cell.removeAttribute('data-locked-temp');
});
break;
}

this.uiManager.hideFooter();
Expand Down Expand Up @@ -175,6 +182,49 @@ var Calendar = function () {
value: function startLockedMode() {
this._switchMode(LOCKED_MODE);
}
}, {
key: 'commitLocked',
value: function commitLocked(callback) {
var colNumber = this.options.numberOfDays * this.options.columnsPerDay;
var lineNumber = this.dateManager.hours.length;
var samePeriod = false;
for (var i = 1; i <= colNumber; i++) {
for (var j = 1; j <= lineNumber; j++) {
var currentCell = document.querySelector('[data-coordinate="' + j + '#' + i + '"]');
var id = currentCell.dataset.id.split('#');
var lastItem = this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1];
if (currentCell.hasAttribute('data-locked-temp') && lastItem.start === null) {
lastItem.start = new Date(parseInt(id[0]));
} else if (!currentCell.hasAttribute('data-locked-temp') && lastItem.end === null && lastItem.start !== null) {
lastItem.end = new Date(parseInt(id[0]));
this.mode.LOCKED_MODE.stack.push({
start: null,
end: null
});
}
}
}

[].forEach.call(document.querySelectorAll('[data-locked-temp]'), function (el) {
el.classList.add('calendar-locked');
el.classList.remove('calendar-lockedTemp');
el.removeAttribute('data-locked-temp');
});

// TODO: refactoring
if (this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1].start === null) {
this.mode.LOCKED_MODE.stack.splice(-1, 1);
}

callback(this.mode.LOCKED_MODE.stack);

this.mode.LOCKED_MODE.stack = [{
start: null,
end: null
}];

this.resetMode();
}
}, {
key: 'startAddEventMode',
value: function startAddEventMode(duration, callback) {
Expand Down Expand Up @@ -325,20 +375,15 @@ var Calendar = function () {
var current = event.target.dataset.coordinate.split('#');

if (current[1] == start[1] && _this4.mode.LOCKED_MODE.mousedown) {
// TODO : cache cell
/*
[].forEach.call(document.querySelectorAll('.calendar-lockedTemp'), function(el) {
el.classList.remove('calendar-lockedTemp');
});*/

var startCell = parseInt(start[0]) < parseInt(current[0]) ? parseInt(start[0]) : parseInt(current[0]);
var endCell = parseInt(current[0]) > parseInt(start[0]) ? parseInt(current[0]) : parseInt(start[0]);

for (var _i = startCell; _i <= endCell; _i++) {
var cellToLocked = document.querySelector('[data-coordinate="' + _i + '#' + start[1] + '"]');
console.log(cellToLocked.dataset.type);
if (cellToLocked.dataset.type !== 'event' || cellToLocked.dataset.type !== 'locked') {
cellToLocked.classList.add('calendar-lockedTemp');
cellToLocked.dataset.lockedTemp = '';
}
}
}
Expand Down
13 changes: 10 additions & 3 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@
<button id="add">Add task</button>
<button id="edit">Edit task 1</button>
<button id="block">Blocked mode</button>
<button id="commit">Commit blocked cell</button>
<button id="reset">Reset</button>
</div>
<div id="calendar"></div>
Expand Down Expand Up @@ -128,7 +129,7 @@
alert('Event clicked: ' + eventId);
},
onLocked: function(start, end, callback) {
console.log(start + '->' + end);
//console.log(start + '->' + end);
setTimeout(() => {
// commit event
callback(null, {
Expand All @@ -139,8 +140,7 @@
}, 1000);
},
onPeriodChange: function(start, end) {
console.log(this);
console.log(start + ' ->', end);
//console.log(start + ' ->', end);
this.loadEvents(events, blockedEvents);
}
});
Expand Down Expand Up @@ -174,6 +174,13 @@
calendar.resetMode();
});


document.querySelector('#commit').addEventListener('click', () => {
calendar.commitLocked((periods) => {
console.log(periods);
});
});

</script>
</body>
</html>
74 changes: 59 additions & 15 deletions src/js/calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ class Calendar {
mousedown: false,
start: null,
end: null,
stack: []
stack: [{
start: null,
end: null
}]
}
}

Expand All @@ -45,12 +48,12 @@ class Calendar {

build() {
// handle date (build days and hours arrays)
let dateManager = new DateManager(this.options.currentDay);
dateManager.generateDays(this.options.numberOfDays);
dateManager.generateHours(this.options.dayStartHour, this.options.dayEndHour, this.options.slotDuration);
this.dateManager = new DateManager(this.options.currentDay);
this.dateManager.generateDays(this.options.numberOfDays);
this.dateManager.generateHours(this.options.dayStartHour, this.options.dayEndHour, this.options.slotDuration);

// build ui and add ID to cell
this.uiManager = new UIManager(this.target, this.options, this.events, dateManager);
this.uiManager = new UIManager(this.target, this.options, this.events, this.dateManager);
this.uiManager.build();
}

Expand Down Expand Up @@ -89,22 +92,20 @@ class Calendar {
switch (mode) {
case ADD_MODE:
this.mode.current = ADD_MODE;
console.log('Entering add mode');
this.uiManager.showFooter('Choisissez une plage horaire libre', () => {
this._switchMode(VIEW_MODE);
});
break;
case EDIT_MODE:
console.log('Entering edit mode');
break;
case LOCKED_MODE:
this.mode.current = LOCKED_MODE;
this.target.dataset.mode = LOCKED_MODE;

console.log('Entering locked mode');
this.uiManager.showFooter('Choisissez les plages horaires à bloquer', () => {
this._switchMode(VIEW_MODE);
this.resetMode();
});

break;
case VIEW_MODE:
this.target.dataset.mode = VIEW_MODE;
Expand Down Expand Up @@ -133,6 +134,12 @@ class Calendar {
callback: null
}
break;
case LOCKED_MODE:
[].forEach.call(document.querySelectorAll('[data-locked-temp]'), function(cell) {
cell.classList.remove('calendar-lockedTemp');
cell.removeAttribute('data-locked-temp');
});
break;
}

this.uiManager.hideFooter();
Expand All @@ -159,6 +166,48 @@ class Calendar {
this._switchMode(LOCKED_MODE);
};

commitLocked(callback) {
let colNumber = this.options.numberOfDays * this.options.columnsPerDay;
let lineNumber = this.dateManager.hours.length;
let samePeriod = false;
for(let i = 1; i <= colNumber; i++) {
for(let j = 1; j <= lineNumber; j++ ) {
let currentCell = document.querySelector('[data-coordinate="' + j + '#' + i + '"]');
let id = currentCell.dataset.id.split('#');
let lastItem = this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1];
if(currentCell.hasAttribute('data-locked-temp') && lastItem.start === null) {
lastItem.start = new Date(parseInt(id[0]));
} else if (!currentCell.hasAttribute('data-locked-temp') && lastItem.end === null && lastItem.start !== null) {
lastItem.end = new Date(parseInt(id[0]));
this.mode.LOCKED_MODE.stack.push({
start: null,
end: null
})
}
}
}

[].forEach.call(document.querySelectorAll('[data-locked-temp]'), (el) => {
el.classList.add('calendar-locked');
el.classList.remove('calendar-lockedTemp');
el.removeAttribute('data-locked-temp');
});

// TODO: refactoring
if(this.mode.LOCKED_MODE.stack[this.mode.LOCKED_MODE.stack.length - 1].start === null) {
this.mode.LOCKED_MODE.stack.splice(-1, 1);
}

callback(this.mode.LOCKED_MODE.stack);

this.mode.LOCKED_MODE.stack = [{
start: null,
end: null
}];

this.resetMode();
}

startAddEventMode(duration, callback) {

// switch to, add mode
Expand Down Expand Up @@ -302,20 +351,15 @@ class Calendar {
let current = event.target.dataset.coordinate.split('#');

if(current[1] == start[1] && this.mode.LOCKED_MODE.mousedown) {
// TODO : cache cell
/*
[].forEach.call(document.querySelectorAll('.calendar-lockedTemp'), function(el) {
el.classList.remove('calendar-lockedTemp');
});*/

let startCell = parseInt(start[0]) < parseInt(current[0]) ? parseInt(start[0]) : parseInt(current[0]);
let endCell = parseInt(current[0]) > parseInt(start[0]) ? parseInt(current[0]) : parseInt(start[0]);

for(let i = startCell; i <= endCell; i++) {
let cellToLocked = document.querySelector('[data-coordinate="' + i + '#' + start[1] + '"]');
console.log(cellToLocked.dataset.type);
if(cellToLocked.dataset.type !== 'event' || cellToLocked.dataset.type !== 'locked') {
cellToLocked.classList.add('calendar-lockedTemp');
cellToLocked.dataset.lockedTemp = '';
}
}
}
Expand Down

0 comments on commit 4671f4f

Please sign in to comment.