120 lines
3.0 KiB
JavaScript
120 lines
3.0 KiB
JavaScript
'use strict';
|
|
|
|
import $ from 'jquery';
|
|
|
|
import Events from '../_events';
|
|
|
|
const OpeningHoursUI = (($) => {
|
|
// Constants
|
|
const NAME = 'OpeningHoursUI';
|
|
|
|
class OpeningHoursUI {
|
|
// Static methods
|
|
|
|
static each(callback) {
|
|
$('.js-opening-hours').each((i, e) => {
|
|
callback(i, $(e));
|
|
});
|
|
}
|
|
|
|
static init() {
|
|
this.dispose();
|
|
|
|
console.log(`${NAME}: init ...`);
|
|
|
|
const hours = $.parseJSON($('.oppening-hours-json').html());
|
|
const date = new Date();
|
|
const dateYMD = this.Date_toYMD(date);
|
|
const weekday = [
|
|
'Sunday',
|
|
'Monday',
|
|
'Tuesday',
|
|
'Wednesday',
|
|
'Thursday',
|
|
'Friday',
|
|
'Saturday',
|
|
];
|
|
const today = weekday[date.getDay()];
|
|
let html =
|
|
'<b class="opening-hours-status opening-hours-status-closed">Closed today</b>';
|
|
|
|
if (
|
|
typeof hours['days'] !== 'undefined' &&
|
|
typeof hours['days'][today] !== 'undefined' &&
|
|
hours['days'][today].length
|
|
) {
|
|
html = 'Open today ';
|
|
$.each(hours['days'][today], (i, v) => {
|
|
if (v['DisplayStart'] || v['DisplayEnd']) {
|
|
if (
|
|
(v['DisplayStart'] &&
|
|
v['DisplayStart'] <= dateYMD &&
|
|
v['DisplayEnd'] &&
|
|
v['DisplayEnd'] >= dateYMD) ||
|
|
(v['DisplayStart'] &&
|
|
v['DisplayStart'] <= dateYMD &&
|
|
!v['DisplayEnd']) ||
|
|
(v['DisplayEnd'] &&
|
|
v['DisplayEnd'] >= dateYMD &&
|
|
!v['DisplayStart'])
|
|
) {
|
|
html = `Open today from ${v['From']} to ${v['Till']}`;
|
|
return false;
|
|
}
|
|
} else {
|
|
if (i > 0) {
|
|
html += ', <br/>';
|
|
}
|
|
html += `from ${v['From']} to ${v['Till']}`;
|
|
}
|
|
});
|
|
|
|
html += ' <b class="opening-hours-status"></b>';
|
|
}
|
|
|
|
if (
|
|
typeof hours['holidays'] !== 'undefined' &&
|
|
typeof hours['holidays'][dateYMD] !== 'undefined'
|
|
) {
|
|
html = `<b class="opening-hours-status opening-hours-status-closed">Closed today${
|
|
hours['holidays'][dateYMD] ? ` for ${hours['holidays'][dateYMD]}` : ''
|
|
}</b>`;
|
|
}
|
|
|
|
this.each((i, e) => {
|
|
const $e = $(e);
|
|
$e.html(html);
|
|
});
|
|
}
|
|
|
|
static Date_toYMD(date) {
|
|
var year, month, day;
|
|
year = String(date.getFullYear());
|
|
month = String(date.getMonth() + 1);
|
|
if (month.length == 1) {
|
|
month = `0${month}`;
|
|
}
|
|
day = String(date.getDate());
|
|
if (day.length == 1) {
|
|
day = `0${day}`;
|
|
}
|
|
return `${year}-${month}-${day}`;
|
|
}
|
|
|
|
static dispose() {
|
|
console.log(`${NAME}: dispose`);
|
|
this.each((i, e) => {
|
|
$(e).html('');
|
|
});
|
|
}
|
|
}
|
|
|
|
$(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
|
|
OpeningHoursUI.init();
|
|
});
|
|
|
|
return OpeningHoursUI;
|
|
})($);
|
|
|
|
export default OpeningHoursUI;
|