forked from XimeX/usrspace-browser-addon
add l10n
This commit is contained in:
parent
50d97a681e
commit
241715e7ac
43
_locales/de/messages.json
Normal file
43
_locales/de/messages.json
Normal 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
43
_locales/en/messages.json
Normal 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"
|
||||||
|
}
|
||||||
|
}
|
|
@ -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",
|
||||||
|
|
|
@ -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')
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
55
src/popup.js
|
@ -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, ' ').replace(/\n/g, '<br/>');
|
.replace(/ /g, ' ')
|
||||||
|
.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);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue