diff --git a/_locales/de/messages.json b/_locales/de/messages.json
new file mode 100644
index 0000000..6d8dc6c
--- /dev/null
+++ b/_locales/de/messages.json
@@ -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"
+ }
+}
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
new file mode 100644
index 0000000..81b5a70
--- /dev/null
+++ b/_locales/en/messages.json
@@ -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"
+ }
+}
diff --git a/manifest.json b/manifest.json
index 678c1d0..e44403d 100644
--- a/manifest.json
+++ b/manifest.json
@@ -22,6 +22,7 @@
"default_area": "navbar",
"default_popup": "src/popup.html"
},
+ "default_locale": "de",
"permissions": [
"https://www.usrspace.at/*",
"webRequest",
diff --git a/src/background.js b/src/background.js
index e4aa7a3..1b55f1f 100644
--- a/src/background.js
+++ b/src/background.js
@@ -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')
});
}
diff --git a/src/popup.html b/src/popup.html
index 808cbac..8327f74 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -7,11 +7,11 @@
- Aktueller Status
- loading...
+
+
- Links
+
-
@@ -53,13 +53,13 @@
- Nächster Termin
- loading...
+
+
- SpaceApi JSON
- loading...
+
+
diff --git a/src/popup.js b/src/popup.js
index ff369a9..7ba5d6d 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -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, ' ').replace(/\n/g, '
');
+ 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 = '';
@@ -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
`;
- 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);
}