forked from XimeX/usrspace-browser-addon
improve popup content
This commit is contained in:
parent
32a31de33f
commit
a195654b6b
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
<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>
|
||||
|
|
|
@ -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');
|
||||
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 = nextEvent.name;
|
||||
strongElement.textContent = nextEventDateEvent.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);
|
||||
// divElement.innerText = '';
|
||||
divElement.append(strongElement);
|
||||
divElement.append(document.createTextNode(' '));
|
||||
divElement.append(timeElement);
|
||||
timeElement.append(dateNode);
|
||||
if (nextEvent.location) {
|
||||
const locationNode = document.createTextNode(' (' + nextEvent.location + ')');
|
||||
calendarElement.append(locationNode);
|
||||
if (nextEventDateEvent.location) {
|
||||
const locationNode = document.createTextNode(' (' + nextEventDateEvent.location + ')');
|
||||
divElement.append(locationNode);
|
||||
}
|
||||
calendarElement.append(divElement);
|
||||
});
|
||||
};
|
||||
|
||||
const updateSpaceApiJson = (spaceApi) => {
|
||||
|
|
Loading…
Reference in New Issue