Most people are here at...
Time slots with the most meetings at the same time.
A monthly overview.
The total meeting time for each day of the selected month.
Are all rooms booked out?
The rooms with the most meeting hours.
`;
// TODO
// * fix table header row not sticky: table has overflow:auto, which does not work with sticky...
// * show small spinner during refresh: https://cssloaders.github.io/
// * maybe rework fetch for when only some rooms can be loaded
// * shareable deep links (date + tab)
// call init to start all scripts
init();
function init() {
document.documentElement.replaceChildren();
document.documentElement.innerHTML = page; // replace page with our own
// connect event handlers
document.getElementById("openTable").addEventListener("click", openTab);
document.getElementById("openTable").tabName = "timetable";
document.getElementById("openUsage").addEventListener("click", openTab);
document.getElementById("openUsage").tabName = "usageStats";
document.getElementById("prevDayBtn").addEventListener("click", selectPrevDay);
document.getElementById("nextDayBtn").addEventListener("click", selectNextDay);
document.getElementById("refreshBtn").addEventListener("click", refresh);
document.getElementById("dateinput").addEventListener("change", dateInputChanged);
document.getElementById("infoBtn").addEventListener("click", showInfos);
document.getElementById("infoCloseBtn").addEventListener("click", closeInfos);
// add keyboard events
document.addEventListener('keydown', (event) => {
switch (event.key) {
case "a": selectPrevDay(); break;
case "d": selectNextDay(); break;
}
});
createTable();
const now = new Date();
document.getElementById("dateinput").valueAsDate = now;
document.getElementById("openTable").click();
setInterval(timeTickRefresh, 10000); // refresh shown time every 10s
refreshData();
// try to scroll the current time to the center
const minutes = now.getHours() * 60 + now.getMinutes();
const width = document.getElementById("timetable").offsetWidth;
document.getElementById("timetable").scrollLeft = ((minutes - startTime) / timeStep * timeStepSize) - width / 2;
}
/** fetch data from OIC, create table and select today as date */
function refreshData() {
const fetcherror = document.getElementById("fetcherror");
fetcherror.style.display = "none";
lastRefresh = new Date();
timeTickRefresh(); // immediatly update refresh text
roomdata.bookings = {}; // clear any previous data
clearTable(); // remove events from table to indicate refresh
let nFetched = 0;
const toFetch = roomdata.rooms.length;
for (const [key, value] of Object.entries(roomdata.rooms)) {
fetch(baseUrl + roomdata.rooms[key].id + urlArgs)
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error("Could not fetch data");
})
.then(data => {
addEventsFromICS(data, key);
nFetched++;
if (nFetched == toFetch) {
selectDay(document.getElementById("dateinput").value);
}
})
.catch((error) => {
fetcherror.style.display = "block";
console.warn("There was an error while parsing data for room " + value.name + ": " + error);
});
}
}
function addEventsFromICS(icsData, roomid) {
const parseRes = ICAL.parse(icsData);
const comp = new ICAL.Component(parseRes);
const vevents = comp.getAllSubcomponents("vevent");
vevents.forEach(event => {
addBookingEvent(event, roomdata.bookings, roomid);
});
}
function addBookingEvent(event, bookingsData, roomid) {
const date = new Date();
date.setFullYear(date.getFullYear() + 1); // expand max 1 year into future
const rangeEnd = ICAL.Time.fromJSDate(date);
const start = event.getFirstPropertyValue("dtstart")
const expand = new ICAL.RecurExpansion({
component: event,
dtstart: start
});
let expanded = false;
let next; // next is always an ICAL.Time or null
while (next = expand.next()) {
expanded = true;
if (next.compare(rangeEnd) > 0) {
break;
}
addBookingTime(next, event, bookingsData, roomid);
}
if (!expanded) {
addBookingTime(start, event, bookingsData, roomid);
}
}
function addBookingTime(time, event, bookingsData, roomid) {
const current = time.toJSDate();
const summary = event.getFirstPropertyValue("summary");
const start = event.getFirstPropertyValue("dtstart").toJSDate();
const end = event.getFirstPropertyValue("dtend").toJSDate();
let duration = (end - start) / (1000 * 60); // ms to minutes
let currentEnd = new Date(current);
currentEnd = currentEnd.setMinutes(currentEnd.getMinutes() + duration);
while (current < currentEnd) {
const offset = current.getHours() * 60 + current.getMinutes();
const durationDay = Math.min(duration, endTime - offset); // clamp to end of current day
duration -= durationDay;
const dateKey = dateToString(current);
if (bookingsData[dateKey] === undefined) {
bookingsData[dateKey] = {};
}
if (bookingsData[dateKey][roomid] === undefined) {
bookingsData[dateKey][roomid] = [];
}
bookingsData[dateKey][roomid].push(
{"o": offset, "d": durationDay, "s": summary}
);
current.setHours(0, 0, 0, 0); // always begins at midnight for next days
current.setDate(current.getDate() + 1);
}
}
function showInfos() {
document.getElementById("infos").showModal();
}
function closeInfos() {
document.getElementById("infos").close();
}
/** update the "x minutes ago" and current time UI */
function timeTickRefresh() {
const now = new Date();
const diff = Math.abs(now - lastRefresh);
const minsAgo = Math.floor((diff / 1000) / 60);
let refreshText;
if (minsAgo < 1) {
refreshText = "just now";
} else {
refreshText = minsAgo + "m ago";
}
document.getElementById("lastRefresh").innerText = refreshText;
const minutes = now.getHours() * 60 + now.getMinutes();
timeDisplay.innerText = timeToString(minutes);
timeDisplay.style.left = time2Pixels(minutes - startTime);
timeMarkLine.style.left = time2Pixels(minutes - startTime);
}
/** create the main time table */
function createTable() {
const tbl = document.createElement('table');
tbl.id = "maintable";
// group rooms into buildings
for (let room in roomdata.rooms) {
const r = roomdata.rooms[room];
const bNo = r.building;
if (roomdata.buildings[bNo] == undefined) {
continue; // skip rooms that are not part of a valid building
}
if (buildings[bNo] == undefined) {
buildings[bNo] = {};
}
buildings[bNo][room] = r;
}
// add header row with time stamps
const tr = tbl.createTHead().insertRow();
const th = document.createElement("th");
tr.appendChild(th);
for (let i = startTime; i <= endTime; i += timeStep) {
tbl.createTHead();
if (i % 60 == 0) {
const th = document.createElement("th");
th.appendChild(document.createTextNode(i / 60));
tr.appendChild(th);
} else {
const small = document.createElement("small");
small.appendChild(document.createTextNode(i % 60));
const th = document.createElement("th");
th.appendChild(small);
tr.appendChild(th);
}
}
// add rows for each room
const tbody = tbl.createTBody();
for (let b in buildings) {
// add special building header row
const tr = tbody.insertRow();
const th = document.createElement("th");
tr.appendChild(th);
tr.classList.add("buildingTr");
const str = document.createElement("strong");
str.appendChild(document.createTextNode(roomdata.buildings[b]));
th.appendChild(str);
if (timeMarkLine === undefined) { // first building row has time marker line
const timeCell = tr.insertCell();
timeCell.style.visibility = "hidden";
createTimeMarkLine(timeCell);
}
// add room rows for this building
for (let r in buildings[b]) {
const rm = buildings[b][r];
const tr = tbody.insertRow();
const th = document.createElement("th");
tr.appendChild(th);
const span = document.createElement("span");
span.appendChild(document.createTextNode(rm.name));
th.appendChild(span);
th.appendChild(document.createElement("br"));
const small = document.createElement("small");
small.appendChild(document.createTextNode(rm.capacity));
small.classList.add("capacity");
th.appendChild(small);
const td = tr.insertCell();
td.colSpan = (endTime - startTime) / timeStep;
}
}
document.getElementById("timetable").appendChild(tbl);
}
function createTimeMarkLine(parent) {
timeMarkLine = document.createElement("div");
timeMarkLine.id = "timeMarkLine";
const height = roomdata.rooms.length * roomRowHeight + roomdata.buildings.length * buildingRowHeight;
timeMarkLine.style.height = height + "px";
parent.appendChild(timeMarkLine);
timeDisplay = document.createElement("div");
timeDisplay.id = "timeDisplay";
parent.appendChild(timeDisplay);
}
// === from HTML events
function dateInputChanged() {
const dateinput = document.getElementById("dateinput");
selectDay(dateinput.value);
}
function selectPrevDay() {
changeDay(-1);
}
function selectNextDay() {
changeDay(+1);
}
function refresh() {
refreshData();
}
// ===
function changeDay(offset) {
const dateinput = document.getElementById("dateinput");
const date = new Date(dateinput.value);
date.setDate(date.getDate() + offset);
dateinput.valueAsDate = date;
selectDay(dateinput.value);
}
/** select the date for which the data should be shown (in "YYYY-MM-DD" format) */
function selectDay(date) {
// only show current time when current day selected
if (dateToString(new Date()) == date) {
timeMarkLine.style.display = null; // CSS defined value
timeDisplay.style.display = null;
} else {
timeMarkLine.style.display = "none";
timeDisplay.style.display = "none";
}
const errorMsg = document.getElementById("inputerror");
if (!date) {
errorMsg.style.display = "block";
} else {
errorMsg.style.display = "none";
}
fillTable(date);
if (usageCreated) {
fillUsageStats(date);
}
}
/** fill the time table with booking data for the specified date (in "YYYY-MM-DD" format) */
function fillTable(date) {
const tbl = document.getElementById("maintable");
let rowIdx = 1; // ignore header row
for (let b in buildings) {
// skip building row
rowIdx++;
// add room rows for this building
for (let r in buildings[b]) {
const cell = tbl.rows[rowIdx].cells[1]; // ignore first column
rowIdx++;
cell.replaceChildren(); // clear prev events
// super secret easter egg code ;)
if (date.startsWith("2805")) {
const roomName = roomdata.rooms[r].name;
if (roomName == "Eve") {
addEventToRow({"o": 1080, "d": 120, "s": "Meet Wall-e today?"}, cell, r);
} else if (roomName == "Wall-e") {
addEventToRow({"o": 1080, "d": 120, "s": "Meet Eve today?"}, cell, r);
}
}
// end easter egg code
const day = roomdata.bookings[date];
if (day == undefined || Object.keys(day).length === 0) { // days with no slots are empty objects
continue;
}
for (let slot in day[r]) {
const event = day[r][slot];
addEventToRow(event, cell, r);
}
}
}
}
/** remove all booking data from the time table */
function clearTable() {
const tbl = document.getElementById("maintable");
let rowIdx = 1; // ignore header row
for (let b in buildings) {
rowIdx++; // skip building row
for (let r in buildings[b]) {
const cell = tbl.rows[rowIdx].cells[1]; // ignore first column
cell.replaceChildren(); // clear events
rowIdx++;
}
}
}
/** adds a div representing the event to the parent table row */
function addEventToRow(event, parent, roomKey) {
const titleStr = event.s && event.s.trim() ? event.s : "No Title";
const timeStr = timeToString(event.o) + " - " + timeToString(event.o + event.d);
const div = parent.appendChild(document.createElement("div"));
div.classList.add("event");
div.style.left = time2Pixels(event.o - startTime);
div.style.width = time2Pixels(event.d);
div.style.backgroundColor = roomdata.rooms[roomKey].color;
div.title = titleStr + "\n" + timeStr;
const title = div.appendChild(document.createElement("p"));
const time = div.appendChild(document.createElement("div"));
if (event.s && event.s.trim()) {
title.innerText = event.s; // use innerText to avoid injection
} else {
title.innerHTML = "