html5-infobeamer-aalen-geek.../assets/js/custom/dom/schedule.js
2023-11-01 01:59:19 +01:00

145 lines
3.8 KiB
JavaScript

'use strict';
import * as sol from "../../solight/sol.js";
import * as serv from "../services/general.js";
const html = htm.bind(preact.h);
const dt = luxon.Duration.fromObject({minutes: 10});
const max_events = 5;
const title_string = 'Program:';
const local_room = 'Here';
const this_room = (config) => sol.optional(config.roomName);
const is_stale = (event, time) =>
!sol.isFutureEvent(event, time);
const is_lapse = (event, time) =>
serv.is_soon(sol.eventStartDate(event).plus(dt), time, 5);
const stale_class = (event, time) => is_stale(event, time) ? 'stale' : '';
const lapse_class = (event, time) => is_lapse(event, time) ? 'lapse' : '';
const this_location = (config) => {
const here = this_room(config);
return sol.defined(here) ? html`@${here}` : html``;
};
const schedule_table_header = () =>
html`
<div class="schedule">
<div class="title">${title_string}</div>
</div>`;
const event_time = (event, time) => {
const esd = sol.eventStartDate(event);
const timeString = esd.setLocale('de').toLocaleString(luxon.DateTime.TIME_24_SIMPLE);
return html`<div class="event-time ${stale_class(event, time)}">${timeString}</div>`;
};
const event_location = (event, config) => {
const here_room = this_room(config);
const event_room = sol.eventRoomName(event);
let inner;
if (sol.defined(here_room) && (event_room === here_room)) {
inner = html`<div class="event-location this-room">${local_room}</div>`;
} else {
inner = html`<div class="event-location">${event_room}</div>`;
}
return inner;
};
const event_title = (event, time) => {
const title = serv.fix_dash(sol.eventTitle(event));
return html`<div class="event-title ${stale_class(event, time)}">${title}</div>`;
};
const event_speaker = (event, time) => {
const speaker = serv.fix_dash(serv.person_names_concat(sol.eventPersons(event)));
return html`<div class="event-speaker ${stale_class(event, time)}">${speaker}</div>`;
};
const schedule_table_event = (event, time, config) => {
const ti = serv.type_index(sol.eventType(event));
return html`
<div class="event ${lapse_class(event, time)}">
${event_time(event, time)}
<div class="event-info type-${ti}">
${event_title(event, time)}
${event_speaker(event, time)}
</div>
</div>`;
};
const schedule_table_events = (events, time, config) =>
html`
<div class="events">
${events.map(e => schedule_table_event(e, time, config))}
</div>`;
const schedule_table = (events, time, config) =>
html`
${schedule_table_header()}
${schedule_table_events(events, time, config)}`;
const header = (config) =>
html`<div class="room-location">${this_location(config)}</div>`;
const update_main_slide = (data, time, config) => {
// console.group("Updating Main Slide with:");
// console.info(data);
// console.info(time);
// console.info(config);
// console.groupEnd();
if (sol.defined(data.scheduleData)) {
const schedule = data.scheduleData;
const events = sol.allEvents(schedule);
const startedEvents = sol.startedEvents(events, time, dt);
const futureEvents = sol.futureEvents(events, time);
const upcomingEvents = sol.distinctEvents(startedEvents.concat(futureEvents));
const upcomingEventsSorted = sol.sortEventsByStartDate(upcomingEvents);
const nextEvents = upcomingEventsSorted.slice(0, max_events);
// Assemble dom
const inner = html`
<div class="slide">
${header(config)}
${schedule_table(nextEvents, time, config)}
</div>`;
// Add main slide to frame
const anchorElId = "main";
const el = document.getElementById(anchorElId);
preact.render(inner, el);
};
};
export {
update_main_slide
};