<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="vacation-schedule js-vacation-schedule">
<div class="vacation-schedule__header clearfix">
<button type="button" class="vacation-schedule__add left">Добавить сотрудника</button>
<div class="vacation-schedule__filter right">
<div class="filter-date__item">
<span class="filter-date__text">С:</span>
<input type="text" class="filter-date__input" data-date-format="dd.mm.yyyy" id="dateFrom">
</div>
<div class="filter-date__item">
<span class="filter-date__text">По:</span>
<input type="text" class="filter-date__input" data-date-format="dd.mm.yyyy" id="dateTo">
</div>
</div>
</div>
<div class="vacation-schedule__body">
<div class="vacation-table" id="timelineHeader">
</div>
</div>
</div>
<script type="text/x-handlebars-template" id="timespanHeader">
<div class="vacation-column vacation-column__employee" style="width: 400px;">
{{#each this}}
{{#if title}}
<div class="vacation-cell vacation-cell__header vacation-cell__employee">{{title}}</div>
{{else}}
{{#with info}}
<div class="vacation-cell vacation-cell__employee" data-index="{{@index}}">
<a href="<%= _Consts.UrlToProfile %>?user={{id}}" class="cell-employee__image"><img src="{{image}}" alt="" /></a>
<a href="<%= _Consts.UrlToProfile %>?user={{id}}" class="cell-employee__title">{{title}}</a>
<button type="button" class="cell-employee__btn js-remove-employee"></button>
</div>
{{/with}}
{{/if}}
{{/each}}
</div>
<div class="vacation-column vacation-cell__timespan js-timespan">
{{#each this}}
{{#if title}}
<div class="timespan-item timespan-item--header">
{{#each timespan}}
<div class="timespan-item__outer">
<div class="timespan-cell__month timespan-cell--half">{{month}}</div>
<ul class="vacation-cell__group timespan-cell--half">
{{#each days}}
<li class="timespan-cell timespan-cell__header{{#if isWeekend}} timespan-cell--weekend{{/if}}{{#if isToday}} timespan-cell--today js-timespan-today{{/if}}">{{day}}</li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{else}}
<div class="timespan-item" data-index="{{@index}}">
{{#each timespan}}
<div class="timespan-item__outer">
<ul class="vacation-cell__group">
{{#each days}}
<li class="timespan-cell timespan-cell__body{{#if isWeekend}} timespan-cell--weekend{{/if}}{{#if isToday}} timespan-cell--today{{/if}}{{#if isPast}} timespan-cell--past{{/if}}{{#if onVacation}} timespan-cell--vacation{{/if}}"></li>
{{/each}}
</ul>
</div>
{{/each}}
</div>
{{/if}}
{{/each}}
</div>
<div class="vacation-column vacation-column__count" style="width: 40px;" >
{{#each this}}
<div class="vacation-cell{{#if isHeader}} vacation-cell__header{{/if}}" data-index="{{@index}}">{{dayCount}}</div>
{{/each}}
</div>
</script>
var vacationSchedule = (function () {
moment.locale('ru');
var timespanHeaderTemplate = Handlebars.compile(document.getElementById('timespanHeader').innerHTML);
var data = [],
header = {};
var employees = [];
var timespan;
var startYear = moment().startOf('year');
var endYear = moment().endOf('year');
function getData() {
timespan = getTimespan();
header = {
title: "Сотрудники",
timespan: timespan,
dayCount: "Кол-во дней"
};
var dummyEmpDates1 = [
{ from: '01.01.2017', till: '10.01.2017' },
{ from: '11.09.2017', till: '20.09.2017' },
{ from: '02.11.2017', till: '20.11.2017' }];
var dummyEmpDates2 = [
{ from: '21.01.2017', till: '03.02.2017' },
{ from: '11.04.2017', till: '29.04.2017' }];
var dummyEmpDates3 = [
{ from: '27.02.2017', till: '01.03.2017' }];
employees = [
{
info: {
id: 4,
title: "Абаев Евгений Геннадьевич",
image: "/_layouts/15/WSSC.PRT.PNT6.Design/Img/GLB_default_user_photo.png"
},
timespan: parseEmployeeDates(timespan, dummyEmpDates1),
dayCount: 24
},
{
info: {
id: 4,
title: "Абакаров Хасан Рамазанович",
image: "/_layouts/15/WSSC.PRT.PNT6.Design/Img/GLB_default_user_photo.png"
},
timespan: parseEmployeeDates(timespan, dummyEmpDates2),
dayCount: 5
},
{
info: {
id: 4,
title: "Иванов Кирилл Александрович",
image: "/_layouts/15/WSSC.PRT.PNT6.Design/Img/GLB_default_user_photo.png"
},
timespan: parseEmployeeDates(timespan, dummyEmpDates3),
dayCount: 657
},
{
info: {
id: 4,
title: "Абдрахманов Ильшат Байрамгалеевич",
image: "/_layouts/15/WSSC.PRT.PNT6.Design/Img/GLB_default_user_photo.png"
},
timespan: timespan,
dayCount: 34
}
];
data.push(header);
data = data.concat(employees);
}
var Day = function (day, isWeekend, isPast) {
this.day = day;
this.isWeekend = isWeekend;
this.isToday = false;
this.onVacation = false;
this.isPast = isPast;
}
var Timespan = function (start, end) {
this.start = start;
this.end = end;
this.list = [];
}
Timespan.prototype.generate = function () {
var startDate = this.start.clone();
var endDate = this.end.clone();
if (startDate.year() == endDate.year()) {
this.list = this.list.concat(generateYear(startDate, endDate));
}
}
function generateYear(startDate, endDate) {
var list = [];
while (startDate < endDate && startDate < endDate) {
var startMonth = startDate.clone();
var endMonth = startMonth.month() == endDate.month() ? endDate.clone().add(1, 'days') : startDate.clone().endOf('month');
var month = startDate.format("MMMM");
var daysArr = [];
while (startMonth < endMonth) {
daysArr.push(new Day(startMonth.format('D')));
startMonth.add(1, 'days');
}
list.push({ month: month, days: daysArr });
startDate = startMonth;
}
return list;
}
Timespan.prototype.getList = function () {
return this.list;
}
function getTimespan() {
var start = startYear.clone();
var timespanList = [];
while (start < endYear) {
var startMonth = start.clone().startOf('month');
var endMonth = start.clone().endOf('month');
var month = startMonth.format("MMMM");
var daysArr = [];
while (startMonth < endMonth) {
daysArr.push(new Day(startMonth.format('D'), isWeekday(startMonth), isPastDate(startMonth)));
startMonth.add(1, 'days');
}
timespanList.push({ month: month, days: daysArr });
start.add(1, 'months');
}
setToday(timespanList);
return timespanList;
}
function setToday(list) {
list[moment().month()].days[moment().date() - 1].isToday = true;
}
function isWeekday(date) {
return date.weekday() == 0 || date.weekday() == 6;
}
function isPastDate(date) {
return moment().diff(date) > 0;
}
function parseEmployeeDates(arr, dates) {
var originalDates = JSON.parse(JSON.stringify(arr));
dates.forEach(function (date) {
var from = moment(date.from, "DD MM YYYY");
var till = moment(date.till, "DD MM YYYY");
if (from.month() == till.month()) {
for (var i = from.date() - 1; i < till.date() ; i++) {
originalDates[from.month()].days[i].onVacation = true;
}
} else {
var tillFrom = from.clone().endOf('month');
for (var i = from.date() - 1; i <= tillFrom.date() - 1 ; i++) {
originalDates[from.month()].days[i].onVacation = true;
}
for (var i = 0; i < till.date() ; i++) {
originalDates[till.month()].days[i].onVacation = true;
}
}
})
return originalDates;
}
function attachEvents() {
initDatepicker();
$('.js-vacation-schedule').on('click', '.js-remove-employee', function () {
if (confirm("Вы уверены, что хотите удалить сотрудника?")) {
var index = $(this).parent().data('index');
$("[data-index='" + index + "']").remove();
}
})
}
function onDateChange(date) {
console.log('date changed');
}
function initDatepicker() {
var datepickerOptions = {
autoclose: true,
format: 'dd.mm.yyyy'
};
$('#dateFrom').datepicker(datepickerOptions)
.on('changeDate', function () {
onDateChange(moment($('#dateFrom').val(), 'DD.MM.YYYY'));
})
$('#dateTo').datepicker(datepickerOptions);
}
function scrollToToday() {
if ($('.js-timespan-today').length) {
var containerOffset = $('.js-timespan').offset().left;
var todayOffset = $('.js-timespan-today').offset().left;
$('.js-timespan').scrollLeft(todayOffset - containerOffset);
}
}
function renderTable() {
$('#timelineHeader').html($(timespanHeaderTemplate(data)));
scrollToToday();
}
function init() {
attachEvents();
getData();
renderTable();
var b = moment('19.01.2017', "DD MM YYYY");
var e = moment('15.03.2017', "DD MM YYYY");
var t = new Timespan(b, e);
t.generate();
console.log(t.getList());
}
return {
init: init
}
})();
vacationSchedule.init();
