Aquarius.component.define('Frontend/Calendar/SessionCalendar', function ($element, options) {
var defaults = {};
function SessionCalendar() {
}
SessionCalendar.prototype = {
init: function () {
var self = this;
this.$element = $element;
this.options = Aquarius.extend(defaults, options);
this.modal = $('#event-modal');
const sessionType = 'group';
this.modal.find('[data-deficit], [data-apply], [data-resign]').hide();
self.setupCalendar(sessionType);
this.events();
},
events: function() {
var self = this;
$('.calendar-filter_btn').on('change', function(e) {
const filterType = e.target.id;
self.setupCalendar(filterType);
});
this.modal.find('.modal-backdrop').on('click', () => {
self.closeModal();
});
$('.modal-close').on('click', () => {
self.closeModal();
});
},
setupCalendar: function(sessionType) {
var self = this;
var websiteId = self.$element.find('.calendar-session').data('website');
let filteredSessions = [];
Aquarius.ajax(`/api/v1/companies/1053/timetables/${websiteId}/${sessionType}`)
.done(function(sessions) {
sessions.map((session) => {
const startDate = new Date(session.startDate + ' ' + session.startTime).toJSON();
const endDate = new Date(session.endDate + ' ' + session.endTime).toJSON();
const participants = (session.eventApplications && session.eventApplications.length > 0) ? session.eventApplications[0].numberOfParticipants : 0
const applicationId = (session.eventApplications && session.eventApplications.length > 0) ? session.eventApplications[0].id : 0;
let coach = '';
let coachProfile = '';
if (session.coach) {
coach = session.coach.userCoach.name;
coachProfile = `${coach}`;
}
var entry = {
id: session.id,
title: session.workoutType.title,
start: startDate,
end: endDate,
backgroundColor: session.workoutType.color,
textColor: session.workoutType.fontColor,
classNames: ['event-block'],
extendedProps: {
websiteId: session.website.id,
status: session.status,
coach: coach,
coachProfile: coachProfile,
duration: session.duration,
startDate: session.startDate,
startTime: session.startTime,
minParticipants: session.minParticipants,
maxParticipants: session.maxParticipants,
groupOccasionCredit: session.workoutType.groupOccasionCredit,
roomUsageCredit: session.workoutType.roomUsageCredit,
resignationTime: session.workoutType.resignationTime,
applicationTime: session.workoutType.applicationTime,
content: session.workoutType.content,
description: session.trainingPlan,
sumParticipants: session.sumParticipants,
participants: participants,
applicationId: applicationId,
},
}
filteredSessions.push(entry);
});
const calendarEl = document.getElementById('calendar-session');
const calendar = new FullCalendar.Calendar(calendarEl, {
schedulerLicenseKey: '0261724582-fcs-1719490405',
timeZone: 'local',
locale: 'hu-HU',
firstDay: 1,
slotMinTime: '5:00',
slotMaxTime: '21:30',
height: 840,
allDaySlot: false,
editable: false,
selectable: false,
forceEventDuration: true,
displayEventEnd: false,
nowIndicator: true,
dayMaxEvents: true,
eventTimeFormat: {
hour: '2-digit',
minute: '2-digit',
},
initialView: $(window).width() > 980 ? 'timeGridWeek' : 'timeGridDay',
events: filteredSessions,
eventClick: function(info) {
self.showModal(info);
},
eventDidMount: function(e) {
const coach = e.event.extendedProps.coach;
const duration = e.event.extendedProps.duration;
$(e.el).find('.fc-event-time').append(` '${duration}`);
$(e.el).find('.fc-event-title').append(`${coach}`);
},
buttonText: {
today: 'Ma',
week: 'Hét',
day: 'Nap',
list: 'Lista',
},
headerToolbar: {
left: 'title',
center: $(window).width() > 980 ? 'today' : '',
right: $(window).width() < 980 ? 'today,next' : 'timeGridWeek,timeGridDay next',
},
});
calendar.render();
})
.fail(function(err) {
console.log(err);
});
},
calculateHours: function(min) {
let time = '';
let hours = Math.floor(min / 60);
let minutes = min % 60;
if (hours < 1) {
time = min + ' perccel';
} else if (hours >= 1 && minutes === 0) {
time = hours + ' órával';
} else if (hours >= 1 && minutes > 0) {
time = hours + ' órával és ' + minutes + ' perccel';
}
return time + ' korábban';
},
closeModal: function() {
this.modal.removeClass('active');
$('body, html').removeClass('modal-is-active');
this.modal.find('[data-deficit], [data-apply], [data-resign]').hide();
this.modal.find('[data-id]')
.attr('data-id', '')
.attr('data-event', '')
.attr('data-state', '')
.attr('data-application', '');
location.reload();
},
showModal: function (props) {
var self = this;
this.modal.addClass('active');
$('body, html').addClass('modal-is-active');
const sessionData = props.event;
const userOpenBoxCredit = this.modal.find('[data-user-actions]').data('openbox-credit');
const groupCredit = this.modal.find('[data-user-actions]').data('group-credit');
const currentDate = new Date();
const startDate = new Date(`${sessionData.extendedProps.startDate} ${sessionData.extendedProps.startTime}`);
const calculatedResignationTime = new Date(startDate.getTime() + -(sessionData.extendedProps.resignationTime * 60000));
const calculatedApplicationTime = new Date(startDate.getTime() + -(sessionData.extendedProps.applicationTime * 60000));
const applicationTime = self.calculateHours(sessionData.extendedProps.applicationTime);
const resignationTime = self.calculateHours(sessionData.extendedProps.resignationTime);
this.modal.find('[data-session-name]').html(sessionData.title + '
Díja: ' + sessionData.extendedProps.groupOccasionCredit + ' CS és ' + sessionData.extendedProps.roomUsageCredit + ' T ');
this.modal.find('[data-date-time]').text(sessionData.extendedProps.startDate + ' ' + sessionData.extendedProps.startTime);
this.modal.find('[data-duration]').text(sessionData.extendedProps.duration);
this.modal.find('[data-coach]').html(sessionData.extendedProps.coachProfile);
this.modal.find('[data-room]').text(sessionData.extendedProps.roomUsageCredit);
this.modal.find('[data-group]').text(sessionData.extendedProps.groupOccasionCredit);
this.modal.find('[data-participants]').text('min. ' + sessionData.extendedProps.minParticipants + ' - max. ' + sessionData.extendedProps.maxParticipants);
this.modal.find('[data-application-sum]').text(sessionData.extendedProps.sumParticipants);
this.modal.find('[data-application-time]').text(applicationTime);
this.modal.find('[data-resignation]').text(resignationTime);
this.modal.find('[data-description]').html(sessionData.extendedProps.description);
this.modal.find('[data-content]').html(sessionData.extendedProps.content);
this.modal.find('[data-id]')
.attr('data-id', sessionData.extendedProps.websiteId)
.attr('data-event', sessionData.id)
.attr('data-state', sessionData.extendedProps.status)
.attr('data-application', sessionData.extendedProps.applicationId);
if (userOpenBoxCredit < sessionData.extendedProps.roomUsageCredit
|| groupCredit < sessionData.extendedProps.groupOccasionCredit ) {
this.modal.find('[data-deficit]').show();
} else {
if (sessionData.extendedProps.participants > 0) {
this.modal.find('[data-resign]').show();
this.modal.find('[data-applicant]').text(sessionData.extendedProps.participants);
if (currentDate >= calculatedResignationTime) {
this.modal.find('[data-resign] .content').text('Az edzésre szóló lemondási idő lejárt.');
this.modal.find('[data-resign] button').hide();
}
} else {
this.modal.find('[data-apply]').show();
if (currentDate >= calculatedApplicationTime) {
this.modal.find('[data-apply] .title.main').text('A jelentkezési határidő lejárt.');
this.modal.find('[data-apply] .apply').hide();
} else {
this.modal.find('[data-apply] .title.main').text('Jelentkezés az órára:');
this.modal.find('[data-apply] .apply').show();
}
}
}
}
}
return SessionCalendar
})