import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { scheduleOnce } from '@ember/runloop';
import { observer } from '@ember/object';
import SmartViewMixin from 'client/mixins/smart-view-mixin';
export default Component.extend(SmartViewMixin, {
selectedAvailability: null,
availableSlotsCollection: null,
this.set('availableSlotsCollection', this.store.peekAll('collection').findBy('name', 'availableSlots'));
// update displayed events when new records are retrieved
onRecordsChange: observer('records.[]', function () {
onConfigurationChange: observer('selectedDate', 'selectedDuration', function () {
this.searchAvailabilities();
this.filters.forEach(condition => {
if (condition.operator === 'is after') {
this.set('conditionAfter', condition);
} else if (condition.operator === 'is before') {
this.set('conditionBefore', condition);
scheduleOnce('afterRender', this, function () {
this.set('calendarId', `${this.elementId}-calendar`);
// retrieve fullCalendar script to build the calendar view
const calendarEl = document.getElementById(this.calendarId);
const calendar = new FullCalendar.Calendar(calendarEl, {
eventClick: (event, jsEvent, view) => {
// persist the selected event information when an event is clicked
this.set('selectedAvailability', event.event);
const eventStart = event.event.start;
const selectedDate = `${eventStart.getDate().toString()}/${(eventStart.getMonth() + 1).toString()}/${eventStart.getFullYear().toString()}`;
// persist the selected event's date to be displayed in the view
this.set('selectedDate', selectedDate);
// define logic to be triggered when the user navigates between date ranges
// define params to query the relevant records from the database based on the date range
filters: JSON.stringify({
timezone: 'Europe/Paris',
// query the records from the availableDates collection
return this.store.query('forest-available-date', params)
this.set('records', records);
this.set('records', null);
alert('We could not retrieve the available dates');
this.set('_calendar', calendar);
this.set('loaded', true);
const headElement = document.getElementsByTagName('head')[0];
const cssLink = document.createElement('link');
cssLink.type = 'text/css';
cssLink.rel = 'stylesheet';
headElement.appendChild(cssLink);
// create calendar event objects for each availableDates record
if (!this.records || !this.loaded) { return; }
this._calendar.getEvents().forEach((event) => event.remove());
this.records.forEach((availability) => {
if (availability.get('forest-opened') === true) {
id: availability.get('id'),
start: availability.get('forest-date'),
if (availability.get('forest-pricingPremium') === 'high') {
event.textColor = 'white';
event.backgroundColor = '#FB6669';
event.title = 'Available';
this._calendar.addEvent(event);
// retrieve record from the availableSlots collection when an event has been selected
if (this.selectedAvailability) {
return this.store.query('forest-available-slot', {
date: this.selectedAvailability.start,
duration: this.selectedDuration,
this.set('availableSlots', slots);
this.set('availableSlots', null);
alert('We could not retrieve the available slots');