This commit is contained in:
Thomas Rupprecht 2022-12-24 21:23:31 +01:00
parent 50d97a681e
commit 241715e7ac
6 changed files with 133 additions and 28 deletions

43
_locales/de/messages.json Normal file
View File

@ -0,0 +1,43 @@
{
"loading": {
"message": "Lädt…"
},
"currentState": {
"message": "Akuteller Status"
},
"links": {
"message": "Links"
},
"nextEvent": {
"message": "Nächstes Event"
},
"spaceApiJson": {
"message": "Space-API JSON"
},
"noEventsInNext4Weeks": {
"message": "Keine Termine in den nächsten 4 Wochen!"
},
"openSince": {
"message": "Offen seit "
},
"closedSince": {
"message": "Geschlossen seit "
},
"stateNotificationTitle": {
"message": "Space Status"
},
"stateNotificationMessage": {
"message": "Space ist jetzt $STATE$.",
"placeholders": {
"STATE" : {
"content" : "$1"
}
}
},
"open": {
"message": "offen"
},
"closed": {
"message": "geschlossen"
}
}

43
_locales/en/messages.json Normal file
View File

@ -0,0 +1,43 @@
{
"loading": {
"message": "Loading…"
},
"currentState": {
"message": "Current State"
},
"links": {
"message": "Links"
},
"nextEvent": {
"message": "Next Event"
},
"spaceApiJson": {
"message": "Space-API JSON"
},
"noEventsInNext4Weeks": {
"message": "No Events in the next 4 weeks!"
},
"openSince": {
"message": "Open since "
},
"closedSince": {
"message": "Closed since "
},
"stateNotificationTitle": {
"message": "Space State"
},
"stateNotificationMessage": {
"message": "Space is now $STATE$.",
"placeholders": {
"STATE" : {
"content" : "$1"
}
}
},
"open": {
"message": "open"
},
"closed": {
"message": "closed"
}
}

View File

@ -22,6 +22,7 @@
"default_area": "navbar",
"default_popup": "src/popup.html"
},
"default_locale": "de",
"permissions": [
"https://www.usrspace.at/*",
"webRequest",

View File

@ -43,10 +43,11 @@ async function fetchNewData() {
await browser.browserAction.setBadgeText({text: spaceApiJson.state.open ? 'open' : ''});
if (window.spaceApi && window.spaceApi.state.open !== spaceApiJson.state.open) {
const state = browser.i18n.getMessage(spaceApiJson.state.open ? 'open' : 'closed');
await browser.notifications.create('status-change', {
type: 'basic',
title: 'Space Status',
message: `Space ist jetzt ${spaceApiJson.state.open ? 'offen' : 'geschlossen'}.`,
title: browser.i18n.getMessage('stateNotificationTitle'),
message: browser.i18n.getMessage('stateNotificationMessage', state),
iconUrl: browser.runtime.getURL('src/icons/favicon.svg')
});
}

View File

@ -7,11 +7,11 @@
</head>
<body>
<section>
<h2>Aktueller Status</h2>
<div id="state">loading...</div>
<h2 id="currentState"></h2>
<div id="state"></div>
</section>
<section>
<h2>Links</h2>
<h2 id="links"></h2>
<ul class="panel-section panel-section-list">
<li class="panel-list-item link" data-url="https://www.usrspace.at/">
<div class="icon">
@ -53,13 +53,13 @@
</ul>
</section>
<section>
<h2>Nächster Termin</h2>
<div id="calendar">loading...</div>
<h2 id="nextEvent"></h2>
<div id="calendar"></div>
</section>
<section class="no-padding">
<details>
<summary><h2>SpaceApi JSON</h2></summary>
<pre id="space-api"><code>loading...</code></pre>
<summary><h2 id="spaceApiJson"></h2></summary>
<pre id="space-api"><code></code></pre>
</details>
</section>

View File

@ -19,6 +19,17 @@ 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
*/
@ -31,6 +42,8 @@ async function linkElementClickListener(event) {
}
async function init() {
setL10n();
const linkElements = Array.from(document.getElementsByClassName('link'));
linkElements.forEach((linkElement) => {
linkElement.addEventListener('click', linkElementClickListener);
@ -56,26 +69,25 @@ function updateNextEvent(nextEvents) {
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);
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;
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(dateTimeFormat.format(beginDate));
// divElement.innerText = '';
divElement.append(strongElement, ' ', timeElement);
timeElement.append(dateNode);
if (nextEventDateEvent.location) {
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
divElement.append(locationNode);
@ -89,8 +101,10 @@ function updateNextEvent(nextEvents) {
* @param {object} spaceApi
*/
function updateSpaceApiJson(spaceApi) {
const spaceApiElement = document.querySelector('#space-api code');
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, '&nbsp;').replace(/\n/g, '<br/>');
const json = JSON.stringify(spaceApi, null, 2)
.replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>');
const spaceApiElement = document.querySelector('#space-api > code');
spaceApiElement.innerHTML = json;
// const jsonNode = document.createTextNode(json);
// spaceApiElement.innerText = '';
@ -101,12 +115,15 @@ function updateSpaceApiJson(spaceApi) {
* @param {object} spaceApi
*/
function updateState(spaceApi) {
const stateElement = document.getElementById('state');
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 sinceStr = ` seit <time datetime="${since.toISOString()}">${dateTimeFormat.format(since)}</time>`;
if (spaceApi.state.open) {
stateElement.innerHTML = `${doorOpenSVG}Offen ${sinceStr}`;
} else {
stateElement.innerHTML = `${doorClosedSVG}Geschlossen ${sinceStr}`;
}
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);
}