Skystalker
/
usrspace-browser-addon
forked from XimeX/usrspace-browser-addon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reformat code

This commit is contained in:
Thomas Rupprecht 2021-09-22 21:04:32 +02:00
parent a025fc9d36
commit cfc6e98097
7 changed files with 248 additions and 248 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
background/index.html
View File

@ -7,4 +7,4 @@
<script type="application/javascript" src="../config.js"></script> <script type="application/javascript" src="../config.js"></script>
<script type="application/javascript" src="index.js"></script> <script type="application/javascript" src="index.js"></script>
</head> </head>
</html> </html>

106
background/index.js
View File

@ -1,85 +1,85 @@
const fetchJson = (url) => { const fetchJson = (url) => {
return fetch(url).then((response) => (response.json())); return fetch(url).then((response) => (response.json()));
}; };
const fetchCalendar = (days = 28) => { const fetchCalendar = (days = 28) => {
let url = Config.calenderUrl + '?o=json'; let url = Config.calenderUrl + '?o=json';
if (days) { if (days) {
url += '&r=' + days; url += '&r=' + days;
} }
return fetchJson(url); return fetchJson(url);
}; };
const fetchSpaceApi = () => { const fetchSpaceApi = () => {
return fetchJson(Config.spaceApiUrl); return fetchJson(Config.spaceApiUrl);
}; };
const updateBadge = (open) => { const updateBadge = (open) => {
let badgeText, badgeColor; let badgeText, badgeColor;
if (open) { if (open) {
badgeText = browser.browserAction.setBadgeText({text: 'open'}); badgeText = browser.browserAction.setBadgeText({text: 'open'});
badgeColor = browser.browserAction.setBadgeBackgroundColor({color: Config.openColor}); badgeColor = browser.browserAction.setBadgeBackgroundColor({color: Config.openColor});
} else { } else {
badgeText = browser.browserAction.setBadgeText({text: ''}); badgeText = browser.browserAction.setBadgeText({text: ''});
badgeColor = browser.browserAction.setBadgeBackgroundColor({color: null}); badgeColor = browser.browserAction.setBadgeBackgroundColor({color: null});
} }
Promise.all([badgeText, badgeColor]) Promise.all([badgeText, badgeColor])
.then() .then()
.catch((error) => { .catch((error) => {
console.error(error); console.error(error);
}); });
}; };
const sendNotification = (open) => { const sendNotification = (open) => {
browser.notifications.create('notification-id', { browser.notifications.create('notification-id', {
type: 'basic', type: 'basic',
iconUrl: browser.runtime.getURL('icons/logo.svg'), iconUrl: browser.runtime.getURL('icons/logo.svg'),
title: 'Space Status', title: 'Space Status',
message: 'Space ist jetzt ' + (open ? 'offen' : 'geschlossen') + '.' message: 'Space ist jetzt ' + (open ? 'offen' : 'geschlossen') + '.'
}); });
}; };
const fetchNewData = () => { const fetchNewData = () => {
fetchCalendar().then((json) => { fetchCalendar().then((json) => {
window.calendar = json; window.calendar = json;
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
fetchSpaceApi().then((json) => { fetchSpaceApi().then((json) => {
if (window.spaceApi && window.spaceApi.state.open !== json.state.open) { if (window.spaceApi && window.spaceApi.state.open !== json.state.open) {
sendNotification(json.state.open) sendNotification(json.state.open)
} }
window.spaceApi = json; window.spaceApi = json;
updateBadge(window.spaceApi.state.open); updateBadge(window.spaceApi.state.open);
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
}; };
let intervalHandler = null; let intervalHandler = null;
const stopFetching = () => { const stopFetching = () => {
if (intervalHandler !== null) { if (intervalHandler !== null) {
clearInterval(intervalHandler); clearInterval(intervalHandler);
intervalHandler = null; intervalHandler = null;
} }
}; };
const startFetching = () => { const startFetching = () => {
fetchNewData(); fetchNewData();
if (intervalHandler === null) { if (intervalHandler === null) {
intervalHandler = setInterval(() => { intervalHandler = setInterval(() => {
fetchNewData(); fetchNewData();
}, Config.refreshTimeout); }, Config.refreshTimeout);
} }
}; };
window.addEventListener('offline', () => { window.addEventListener('offline', () => {
stopFetching(); stopFetching();
}); });
window.addEventListener('online', () => { window.addEventListener('online', () => {
startFetching(); startFetching();
}); });
if (window.navigator.onLine) { if (window.navigator.onLine) {
startFetching(); startFetching();
} }

60
config.js
View File

@ -1,32 +1,32 @@
window.Config = { window.Config = {
refreshTimeout: 1000 * 60 * 5, // 5min, refreshTimeout: 1000 * 60 * 5, // 5min,
spaceApiUrl: 'https://www.usrspace.at/spaceapi.json', spaceApiUrl: 'https://www.usrspace.at/spaceapi.json',
calenderUrl: 'https://www.usrspace.at/calendar.php', calenderUrl: 'https://www.usrspace.at/calendar.php',
openColor: '#33cc33', openColor: '#33cc33',
quickLinks: [ quickLinks: [
{ {
url: 'https://www.usrspace.at/', url: 'https://www.usrspace.at/',
img: 'icons/font-awesome/home-solid.svg', img: 'icons/font-awesome/home-solid.svg',
alt: 'Home', alt: 'Home',
text: 'Homepage' text: 'Homepage'
}, },
{ {
url: 'https://wiki.usrspace.at/', url: 'https://wiki.usrspace.at/',
img: 'icons/font-awesome/wikipedia-w-brands.svg', img: 'icons/font-awesome/wikipedia-w-brands.svg',
alt: 'Wiki', alt: 'Wiki',
text: 'Wiki' text: 'Wiki'
}, },
{ {
url: 'https://gitea.usrspace.at/', url: 'https://gitea.usrspace.at/',
img: 'icons/gitea-brands.svg', img: 'icons/gitea-brands.svg',
alt: 'Gitea', alt: 'Gitea',
text: 'Gitea' text: 'Gitea'
}, },
{ {
url: 'https://cloud.usrspace.at/', url: 'https://cloud.usrspace.at/',
img: 'icons/font-awesome/cloud-solid.svg', img: 'icons/font-awesome/cloud-solid.svg',
alt: 'Cloud', alt: 'Cloud',
text: 'Nextcloud' text: 'Nextcloud'
} }
] ]
}; };

66
manifest.json
View File

@ -1,35 +1,35 @@
{ {
"manifest_version": 2, "manifest_version": 2,
"name": "/usr/space", "name": "/usr/space",
"version": "0.6", "version": "0.6",
"description": "An Add-on for the Hacker-/Maker-Space /usr/space.", "description": "An Add-on for the Hacker-/Maker-Space /usr/space.",
"icons": { "icons": {
"48": "icons/logo.svg", "48": "icons/logo.svg",
"96": "icons/logo.svg" "96": "icons/logo.svg"
}, },
"background": { "background": {
"page": "background/index.html" "page": "background/index.html"
}, },
"browser_action": { "browser_action": {
"browser_style": true, "browser_style": true,
//"chrome_style": true, //"chrome_style": true,
"default_title": "/usr/space", "default_title": "/usr/space",
//"default_icon": "icons/logo.svg", //"default_icon": "icons/logo.svg",
"default_icon": { "default_icon": {
"16": "icons/logo.svg", "16": "icons/logo.svg",
"32": "icons/logo.svg" "32": "icons/logo.svg"
}, },
"default_area": "navbar", "default_area": "navbar",
"default_popup": "popup/index.html" "default_popup": "popup/index.html"
}, },
"permissions": [ "permissions": [
"https://www.usrspace.at/*", "https://www.usrspace.at/*",
"webRequest", "webRequest",
"notifications" "notifications"
], ],
"author": "Thomas Rupprecht" "author": "Thomas Rupprecht"
//"developer": { //"developer": {
// "name": "Thomas Rupprecht", // "name": "Thomas Rupprecht",
// "url": "https://blog.ximex.at/" // "url": "https://blog.ximex.at/"
//} //}
} }

46
popup/index.css
View File

@ -1,52 +1,52 @@
body { body {
width: 360px; width: 360px;
} }
h2 { h2 {
margin: 12px 8px 8px; margin: 12px 8px 8px;
} }
summary { summary {
margin: 12px 8px 8px; margin: 12px 8px 8px;
} }
summary > h2 { summary > h2 {
margin: 0; margin: 0;
display: inline-block; display: inline-block;
} }
.panel-list-item > .icon { .panel-list-item > .icon {
text-align: center; text-align: center;
width: 23px; width: 23px;
margin-right: 4px; margin-right: 4px;
} }
.panel-list-item > .icon > img { .panel-list-item > .icon > img {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
#state { #state {
margin: 0 8px; margin: 0 8px;
} }
#state > img { #state > img {
vertical-align: text-bottom; vertical-align: text-bottom;
margin-right: 4px; margin-right: 4px;
} }
#calendar { #calendar {
margin: 0 8px; margin: 0 8px;
} }
#calendar > div > img { #calendar > div > img {
vertical-align: text-bottom; vertical-align: text-bottom;
margin-right: 4px; margin-right: 4px;
} }
#space-api { #space-api {
margin: 0; margin: 0;
padding: 0 8px; padding: 0 8px;
height: 240px; height: 240px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
background-color: #ebebeb; background-color: #ebebeb;
} }
#space-api code { #space-api code {
font-family: monospace; font-family: monospace;
font-size: 10px; font-size: 10px;
} }

98
popup/index.html
View File

@ -1,57 +1,57 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>/usr/space</title> <title>/usr/space</title>
<link rel="stylesheet" href="index.css" /> <link rel="stylesheet" href="index.css" />
</head> </head>
<body> <body>
<!--<header class="panel-section panel-section-header"> <!--<header class="panel-section panel-section-header">
<div class="icon-section-header"><img src="../icons/logo.svg" width="32" height="32" alt="/usr/space" /></div> <div class="icon-section-header"><img src="../icons/logo.svg" width="32" height="32" alt="/usr/space" /></div>
<div class="text-section-header">/usr/space</div> <div class="text-section-header">/usr/space</div>
</header>--> </header>-->
<section> <section>
<h2>Aktueller Status</h2> <h2>Aktueller Status</h2>
<div id="state">loading...</div> <div id="state">loading...</div>
</section> </section>
<section> <section>
<h2>Links</h2> <h2>Links</h2>
<div class="panel-section panel-section-list"> <div class="panel-section panel-section-list">
<div class="panel-list-item link" data-url="https://www.usrspace.at/"> <div class="panel-list-item link" data-url="https://www.usrspace.at/">
<div class="icon"><img src="../icons/font-awesome/home-solid.svg" width="19" height="19" alt="Home" /></div> <div class="icon"><img src="../icons/font-awesome/home-solid.svg" width="19" height="19" alt="Home" /></div>
<div class="text">Homepage</div> <div class="text">Homepage</div>
<div class="text-shortcut"></div> <div class="text-shortcut"></div>
</div> </div>
<div class="panel-list-item link" data-url="https://wiki.usrspace.at/"> <div class="panel-list-item link" data-url="https://wiki.usrspace.at/">
<div class="icon"><img src="../icons/font-awesome/wikipedia-w-brands.svg" width="19" height="19" alt="Wiki" /></div> <div class="icon"><img src="../icons/font-awesome/wikipedia-w-brands.svg" width="19" height="19" alt="Wiki" /></div>
<div class="text">Wiki</div> <div class="text">Wiki</div>
<div class="text-shortcut"></div> <div class="text-shortcut"></div>
</div> </div>
<div class="panel-list-item link" data-url="https://gitea.usrspace.at/"> <div class="panel-list-item link" data-url="https://gitea.usrspace.at/">
<div class="icon"><img src="../icons/gitea-brands.svg" width="19" height="19" alt="Gitea" /></div> <div class="icon"><img src="../icons/gitea-brands.svg" width="19" height="19" alt="Gitea" /></div>
<div class="text">Gitea</div> <div class="text">Gitea</div>
<div class="text-shortcut"></div> <div class="text-shortcut"></div>
</div> </div>
<div class="panel-list-item link" data-url="https://cloud.usrspace.at/"> <div class="panel-list-item link" data-url="https://cloud.usrspace.at/">
<div class="icon"><img src="../icons/font-awesome/cloud-solid.svg" width="19" height="19" alt="Cloud" /></div> <div class="icon"><img src="../icons/font-awesome/cloud-solid.svg" width="19" height="19" alt="Cloud" /></div>
<div class="text">Nextcloud</div> <div class="text">Nextcloud</div>
<div class="text-shortcut"></div> <div class="text-shortcut"></div>
</div> </div>
</div> </div>
</section> </section>
<section> <section>
<h2>Nächster Termin</h2> <h2>Nächster Termin</h2>
<div id="calendar">loading...</div> <div id="calendar">loading...</div>
</section> </section>
<section> <section>
<details> <details>
<summary><h2>SpaceApi JSON</h2></summary> <summary><h2>SpaceApi JSON</h2></summary>
<pre id="space-api"><code>loading...</code></pre> <pre id="space-api"><code>loading...</code></pre>
</details> </details>
</section> </section>
<script type="application/javascript" src="../browser-polyfill.js"></script> <script type="application/javascript" src="../browser-polyfill.js"></script>
<script type="application/javascript" src="../config.js"></script> <script type="application/javascript" src="../config.js"></script>
<script type="application/javascript" src="index.js"></script> <script type="application/javascript" src="index.js"></script>
</body> </body>
</html> </html>

118
popup/index.js
View File

@ -1,77 +1,77 @@
Array.from(document.getElementsByClassName('link')).forEach((element) => { Array.from(document.getElementsByClassName('link')).forEach((element) => {
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
const newTab = browser.tabs.create({ const newTab = browser.tabs.create({
url: event.currentTarget.dataset.url url: event.currentTarget.dataset.url
}); });
newTab.then((data) => { newTab.then((data) => {
// console.log(data); // console.log(data);
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
}); });
}); });
browser.runtime.getBackgroundPage().then((page) => { browser.runtime.getBackgroundPage().then((page) => {
updateNextEvent(page.calendar); updateNextEvent(page.calendar);
updateSpaceApiJson(page.spaceApi); updateSpaceApiJson(page.spaceApi);
updateState(page.spaceApi); updateState(page.spaceApi);
}).catch((error) => { }).catch((error) => {
console.error(error); console.error(error);
}); });
const updateNextEvent = (nextEvents) => { const updateNextEvent = (nextEvents) => {
const calendarElement = document.getElementById('calendar'); const calendarElement = document.getElementById('calendar');
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 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.append(hintNode);
calendarElement.append(strongElement); calendarElement.append(strongElement);
return; return;
} }
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 divElement = document.createElement('div'); const divElement = document.createElement('div');
divElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />'; divElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
const beginDate = new Date(nextEventDateEvent.begin); const beginDate = new Date(nextEventDateEvent.begin);
const strongElement = document.createElement('strong'); const strongElement = document.createElement('strong');
const timeElement = document.createElement('time'); const timeElement = document.createElement('time');
strongElement.textContent = nextEventDateEvent.name; strongElement.textContent = nextEventDateEvent.name;
timeElement.datetime = beginDate.toISOString(); timeElement.datetime = beginDate.toISOString();
const dateNode = document.createTextNode(beginDate.toLocaleString()); const dateNode = document.createTextNode(beginDate.toLocaleString());
// divElement.innerText = ''; // divElement.innerText = '';
divElement.append(strongElement); divElement.append(strongElement);
divElement.append(document.createTextNode(' ')); divElement.append(document.createTextNode(' '));
divElement.append(timeElement); divElement.append(timeElement);
timeElement.append(dateNode); 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);
} }
calendarElement.append(divElement); calendarElement.append(divElement);
}); });
}; };
const updateSpaceApiJson = (spaceApi) => { const updateSpaceApiJson = (spaceApi) => {
const spaceApiElement = document.querySelector('#space-api code'); 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/>');
spaceApiElement.innerHTML = json; spaceApiElement.innerHTML = json;
// const jsonNode = document.createTextNode(json); // const jsonNode = document.createTextNode(json);
// spaceApiElement.innerText = ''; // spaceApiElement.innerText = '';
// spaceApiElement.append(jsonNode); // spaceApiElement.append(jsonNode);
}; };
const updateState = (spaceApi) => { const updateState = (spaceApi) => {
const stateElement = document.getElementById('state'); const stateElement = document.getElementById('state');
const since = new Date(spaceApi.state.lastchange * 1000); const since = new Date(spaceApi.state.lastchange * 1000);
const sinceStr = ' seit <time datetime="' + since.toISOString() + '">' + since.toLocaleString() + '</time>'; const sinceStr = ' seit <time datetime="' + since.toISOString() + '">' + since.toLocaleString() + '</time>';
if (spaceApi.state.open) { if (spaceApi.state.open) {
stateElement.innerHTML = '<img src="../icons/font-awesome/lock-open-solid.svg" width="19" height="19" alt="Offen" />Offen' + sinceStr; stateElement.innerHTML = '<img src="../icons/font-awesome/lock-open-solid.svg" width="19" height="19" alt="Offen" />Offen' + sinceStr;
} else { } else {
stateElement.innerHTML = '<img src="../icons/font-awesome/lock-solid.svg" width="19" height="19" alt="Geschlossen" />Geschlossen' + sinceStr; stateElement.innerHTML = '<img src="../icons/font-awesome/lock-solid.svg" width="19" height="19" alt="Geschlossen" />Geschlossen' + sinceStr;
} }
}; };