const calendarSVG = `
`;
const doorClosedSVG = `
`;
const doorOpenSVG = `
`;
const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: "medium", timeStyle: "short"});
function setL10n() {
const loadingText = browser.i18n.getMessage('loading');
document.getElementById('state').textContent = loadingText;
document.getElementById('calendar').textContent = loadingText;
document.querySelector('#space-api > code').textContent = loadingText;
document.getElementById('currentState').textContent = browser.i18n.getMessage('currentState');
document.getElementById('links').textContent = browser.i18n.getMessage('links');
document.getElementById('nextEvent').textContent = browser.i18n.getMessage('nextEvent');
document.getElementById('spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson');
}
/**
* @param {Event} event
*/
async function linkElementClickListener(event) {
try {
await browser.tabs.create({url: event.currentTarget.dataset.url});
} catch (error) {
console.error(error);
}
}
async function init() {
setL10n();
const linkElements = Array.from(document.getElementsByClassName('link'));
linkElements.forEach((linkElement) => {
linkElement.addEventListener('click', linkElementClickListener);
});
try {
const page = await browser.runtime.getBackgroundPage();
updateNextEvent(page.calendar);
updateSpaceApiJson(page.spaceApi);
updateState(page.spaceApi);
} catch (error) {
console.error(error);
}
}
init();
/**
* @param {object} nextEvents
*/
function updateNextEvent(nextEvents) {
const calendarElement = document.getElementById('calendar');
calendarElement.innerText = '';
if (nextEvents.length === 0) {
const strongElement = document.createElement('strong');
strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
calendarElement.append(strongElement);
} else {
const nextEventDate = nextEvents[0].begin.substr(0, 10);
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
nextEventDateEvents.forEach((nextEventDateEvent) => {
const strongElement = document.createElement('strong');
strongElement.textContent = nextEventDateEvent.name;
const beginDate = new Date(nextEventDateEvent.begin);
const timeElement = document.createElement('time');
timeElement.dateTime = beginDate.toISOString();
timeElement.textContent = dateTimeFormat.format(beginDate);
const divElement = document.createElement('div');
divElement.innerHTML = calendarSVG;
divElement.append(strongElement, ' ', timeElement);
if (nextEventDateEvent.location) {
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
divElement.append(locationNode);
}
calendarElement.append(divElement);
});
}
}
/**
* @param {object} spaceApi
*/
function updateSpaceApiJson(spaceApi) {
const json = JSON.stringify(spaceApi, null, 2)
.replace(/ /g, ' ')
.replace(/\n/g, '
');
const spaceApiElement = document.querySelector('#space-api > code');
spaceApiElement.innerHTML = json;
// const jsonNode = document.createTextNode(json);
// spaceApiElement.innerText = '';
// spaceApiElement.append(jsonNode);
}
/**
* @param {object} spaceApi
*/
function updateState(spaceApi) {
const stateIcon = spaceApi.state.open ? doorOpenSVG : doorClosedSVG;
const stateTextNode = document.createTextNode(browser.i18n.getMessage(spaceApi.state.open ? 'openSince' : 'closedSince'));
const since = new Date(spaceApi.state.lastchange * 1000);
const timeElement = document.createElement('time');
timeElement.dateTime = since.toISOString();
timeElement.textContent = dateTimeFormat.format(since);
const stateElement = document.getElementById('state');
stateElement.innerHTML = stateIcon;
stateElement.append(stateTextNode, timeElement);
}