forked from XimeX/usrspace-browser-addon
101 lines
4.1 KiB
JavaScript
101 lines
4.1 KiB
JavaScript
const calendarSVG = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
|
|
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
|
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
|
</svg>
|
|
`;
|
|
const doorClosedSVG = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
|
|
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
|
|
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
|
|
</svg>
|
|
`;
|
|
const doorOpenSVG = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
|
|
<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
|
|
<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
|
|
</svg>
|
|
`;
|
|
|
|
async function linkElementClickListener(event) {
|
|
try {
|
|
const tab = await browser.tabs.create({url: event.currentTarget.dataset.url});
|
|
// console.log(tab);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
async function init() {
|
|
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();
|
|
|
|
function updateNextEvent(nextEvents) {
|
|
const calendarElement = document.getElementById('calendar');
|
|
calendarElement.innerText = '';
|
|
|
|
if (nextEvents.length === 0) {
|
|
const hintNode = document.createTextNode('Keine Termine in den nächsten 4 Wochen!');
|
|
const strongElement = document.createElement('strong');
|
|
strongElement.append(hintNode);
|
|
calendarElement.append(strongElement);
|
|
return;
|
|
}
|
|
|
|
const nextEventDate = nextEvents[0].begin.substr(0, 10);
|
|
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
|
|
|
|
nextEventDateEvents.forEach((nextEventDateEvent) => {
|
|
const divElement = document.createElement('div');
|
|
divElement.innerHTML = calendarSVG;
|
|
const beginDate = new Date(nextEventDateEvent.begin);
|
|
const strongElement = document.createElement('strong');
|
|
const timeElement = document.createElement('time');
|
|
strongElement.textContent = nextEventDateEvent.name;
|
|
timeElement.datetime = beginDate.toISOString();
|
|
const dateNode = document.createTextNode(beginDate.toLocaleString([], {dateStyle: "medium", timeStyle: "short"}));
|
|
// divElement.innerText = '';
|
|
divElement.append(strongElement, ' ', timeElement);
|
|
timeElement.append(dateNode);
|
|
if (nextEventDateEvent.location) {
|
|
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
|
|
divElement.append(locationNode);
|
|
}
|
|
calendarElement.append(divElement);
|
|
});
|
|
}
|
|
|
|
function updateSpaceApiJson(spaceApi) {
|
|
const spaceApiElement = document.querySelector('#space-api code');
|
|
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, ' ').replace(/\n/g, '<br/>');
|
|
spaceApiElement.innerHTML = json;
|
|
// const jsonNode = document.createTextNode(json);
|
|
// spaceApiElement.innerText = '';
|
|
// spaceApiElement.append(jsonNode);
|
|
}
|
|
|
|
function updateState(spaceApi) {
|
|
const stateElement = document.getElementById('state');
|
|
const since = new Date(spaceApi.state.lastchange * 1000);
|
|
const sinceStr = ` seit <time datetime="${since.toISOString()}">${since.toLocaleString([], {dateStyle: "medium", timeStyle: "short"})}</time>`;
|
|
if (spaceApi.state.open) {
|
|
stateElement.innerHTML = `${doorOpenSVG}Offen ${sinceStr}`;
|
|
} else {
|
|
stateElement.innerHTML = `${doorClosedSVG}Geschlossen ${sinceStr}`;
|
|
}
|
|
}
|