XimeX
/
usrspace-browser-addon
3
3
Fork 2
Code Issues 4 Pull Requests Releases 14 Activity

improve popup content

This commit is contained in:
Thomas Rupprecht 2019-10-04 21:58:48 +02:00
parent 32a31de33f
commit a195654b6b
3 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
popup/index.css
View File

@ -5,6 +5,13 @@ body {
h2 {
margin: 12px 8px 8px;
}
summary {
margin: 12px 8px 8px;
}
summary > h2 {
margin: 0;
display: inline-block;
}
.panel-list-item > .icon {
text-align: center;
@ -26,7 +33,7 @@ h2 {
#calendar {
margin: 0 8px;
}
#calendar > img {
#calendar > div > img {
vertical-align: text-bottom;
margin-right: 4px;
}
@ -34,7 +41,7 @@ h2 {
#space-api {
margin: 0;
padding: 0 8px;
height: 128px;
height: 240px;
overflow-x: hidden;
overflow-y: scroll;
background-color: #ebebeb;

10
popup/index.html
View File

@ -6,10 +6,10 @@
<link rel="stylesheet" href="index.css" />
</head>
<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="text-section-header">/usr/space</div>
</header>
</header>-->
<section>
<h2>Aktueller Status</h2>
<div id="state">loading...</div>
@ -44,8 +44,10 @@
<div id="calendar">loading...</div>
</section>
<section>
<h2>Infos</h2>
<pre id="space-api"><code>loading...</code></pre>
<details>
<summary><h2>SpaceApi JSON</h2></summary>
<pre id="space-api"><code>loading...</code></pre>
</details>
</section>
<script type="application/javascript" src="../browser-polyfill.js"></script>

44
popup/index.js
View File

@ -12,32 +12,40 @@ Array.from(document.getElementsByClassName('link')).forEach((element) => {
});
browser.runtime.getBackgroundPage().then((page) => {
updateNextEvent(page.calendar[0]);
updateNextEvent(page.calendar);
updateSpaceApiJson(page.spaceApi);
updateState(page.spaceApi);
}).catch((error) => {
console.error(error);
});
const updateNextEvent = (nextEvent) => {
const beginDate = new Date(nextEvent.begin);
const updateNextEvent = (nextEvents) => {
const nextEventDate = nextEvents[0].begin.substr(0, 10);
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
const calendarElement = document.getElementById('calendar');
const strongElement = document.createElement('strong');
const timeElement = document.createElement('time');
strongElement.textContent = nextEvent.name;
timeElement.datetime = beginDate.toISOString();
const dateNode = document.createTextNode(beginDate.toLocaleString());
// calendarElement.innerText = '';
calendarElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
calendarElement.append(strongElement);
calendarElement.append(document.createTextNode(' '));
calendarElement.append(timeElement);
timeElement.append(dateNode);
if (nextEvent.location) {
const locationNode = document.createTextNode(' (' + nextEvent.location + ')');
calendarElement.append(locationNode);
}
calendarElement.innerText = '';
nextEventDateEvents.forEach((nextEventDateEvent) => {
const divElement = document.createElement('div');
divElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
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(beginDate.toLocaleString());
// divElement.innerText = '';
divElement.append(strongElement);
divElement.append(document.createTextNode(' '));
divElement.append(timeElement);
timeElement.append(dateNode);
if (nextEventDateEvent.location) {
const locationNode = document.createTextNode(' (' + nextEventDateEvent.location + ')');
divElement.append(locationNode);
}
calendarElement.append(divElement);
});
};
const updateSpaceApiJson = (spaceApi) => {