pludi/usrspace-browser-addon
1
0
Fork 0
forked from XimeX/usrspace-browser-addon
Code Issues Pull requests Releases Wiki Activity

add l10n

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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"
}
}

1
manifest.json
View file

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

5
src/background.js
View file

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

14
src/popup.html
View file

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

55
src/popup.js
View file

@ -19,6 +19,17 @@ const doorOpenSVG = `
const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: "medium", timeStyle: "short"}); 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 * @param {Event} event
*/ */
@ -31,6 +42,8 @@ async function linkElementClickListener(event) {
} }
async function init() { async function init() {
setL10n();
const linkElements = Array.from(document.getElementsByClassName('link')); const linkElements = Array.from(document.getElementsByClassName('link'));
linkElements.forEach((linkElement) => { linkElements.forEach((linkElement) => {
linkElement.addEventListener('click', linkElementClickListener); linkElement.addEventListener('click', linkElementClickListener);
@ -56,26 +69,25 @@ function updateNextEvent(nextEvents) {
calendarElement.innerText = ''; calendarElement.innerText = '';
if (nextEvents.length === 0) { if (nextEvents.length === 0) {
const hintNode = document.createTextNode('Keine Termine in den nächsten 4 Wochen!');
const strongElement = document.createElement('strong'); const strongElement = document.createElement('strong');
strongElement.append(hintNode); strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
calendarElement.append(strongElement); calendarElement.append(strongElement);
} else { } else {
const nextEventDate = nextEvents[0].begin.substr(0, 10); const nextEventDate = nextEvents[0].begin.substr(0, 10);
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate))); const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
nextEventDateEvents.forEach((nextEventDateEvent) => { 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'); const divElement = document.createElement('div');
divElement.innerHTML = calendarSVG; 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); divElement.append(strongElement, ' ', timeElement);
timeElement.append(dateNode);
if (nextEventDateEvent.location) { if (nextEventDateEvent.location) {
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`); const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
divElement.append(locationNode); divElement.append(locationNode);
@ -89,8 +101,10 @@ function updateNextEvent(nextEvents) {
* @param {object} spaceApi * @param {object} spaceApi
*/ */
function updateSpaceApiJson(spaceApi) { function updateSpaceApiJson(spaceApi) {
const spaceApiElement = document.querySelector('#space-api code'); const json = JSON.stringify(spaceApi, null, 2)
const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, '&nbsp;').replace(/\n/g, '<br/>'); .replace(/ /g, '&nbsp;')
.replace(/\n/g, '<br/>');
const spaceApiElement = document.querySelector('#space-api > code');
spaceApiElement.innerHTML = json; spaceApiElement.innerHTML = json;
// const jsonNode = document.createTextNode(json); // const jsonNode = document.createTextNode(json);
// spaceApiElement.innerText = ''; // spaceApiElement.innerText = '';
@ -101,12 +115,15 @@ function updateSpaceApiJson(spaceApi) {
* @param {object} spaceApi * @param {object} spaceApi
*/ */
function updateState(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 since = new Date(spaceApi.state.lastchange * 1000);
const sinceStr = ` seit <time datetime="${since.toISOString()}">${dateTimeFormat.format(since)}</time>`; const timeElement = document.createElement('time');
if (spaceApi.state.open) { timeElement.dateTime = since.toISOString();
stateElement.innerHTML = `${doorOpenSVG}Offen ${sinceStr}`; timeElement.textContent = dateTimeFormat.format(since);
} else {
stateElement.innerHTML = `${doorClosedSVG}Geschlossen ${sinceStr}`; const stateElement = document.getElementById('state');
} stateElement.innerHTML = stateIcon;
stateElement.append(stateTextNode, timeElement);
} }