forked from XimeX/usrspace-browser-addon
improve popup content
This commit is contained in:
parent
32a31de33f
commit
a195654b6b
|
@ -5,6 +5,13 @@ body {
|
||||||
h2 {
|
h2 {
|
||||||
margin: 12px 8px 8px;
|
margin: 12px 8px 8px;
|
||||||
}
|
}
|
||||||
|
summary {
|
||||||
|
margin: 12px 8px 8px;
|
||||||
|
}
|
||||||
|
summary > h2 {
|
||||||
|
margin: 0;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
.panel-list-item > .icon {
|
.panel-list-item > .icon {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -26,7 +33,7 @@ h2 {
|
||||||
#calendar {
|
#calendar {
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
}
|
}
|
||||||
#calendar > img {
|
#calendar > div > img {
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
}
|
}
|
||||||
|
@ -34,7 +41,7 @@ h2 {
|
||||||
#space-api {
|
#space-api {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
height: 128px;
|
height: 240px;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
background-color: #ebebeb;
|
background-color: #ebebeb;
|
||||||
|
|
|
@ -6,10 +6,10 @@
|
||||||
<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>
|
||||||
|
@ -44,8 +44,10 @@
|
||||||
<div id="calendar">loading...</div>
|
<div id="calendar">loading...</div>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h2>Infos</h2>
|
<details>
|
||||||
<pre id="space-api"><code>loading...</code></pre>
|
<summary><h2>SpaceApi JSON</h2></summary>
|
||||||
|
<pre id="space-api"><code>loading...</code></pre>
|
||||||
|
</details>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<script type="application/javascript" src="../browser-polyfill.js"></script>
|
<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) => {
|
browser.runtime.getBackgroundPage().then((page) => {
|
||||||
updateNextEvent(page.calendar[0]);
|
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 = (nextEvent) => {
|
const updateNextEvent = (nextEvents) => {
|
||||||
const beginDate = new Date(nextEvent.begin);
|
const nextEventDate = nextEvents[0].begin.substr(0, 10);
|
||||||
|
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
|
||||||
|
|
||||||
const calendarElement = document.getElementById('calendar');
|
const calendarElement = document.getElementById('calendar');
|
||||||
const strongElement = document.createElement('strong');
|
calendarElement.innerText = '';
|
||||||
const timeElement = document.createElement('time');
|
|
||||||
strongElement.textContent = nextEvent.name;
|
nextEventDateEvents.forEach((nextEventDateEvent) => {
|
||||||
timeElement.datetime = beginDate.toISOString();
|
const divElement = document.createElement('div');
|
||||||
const dateNode = document.createTextNode(beginDate.toLocaleString());
|
divElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
|
||||||
// calendarElement.innerText = '';
|
const beginDate = new Date(nextEventDateEvent.begin);
|
||||||
calendarElement.innerHTML = '<img src="../icons/font-awesome/clock-regular.svg" width="19" height="19" alt="Clock" />';
|
const strongElement = document.createElement('strong');
|
||||||
calendarElement.append(strongElement);
|
const timeElement = document.createElement('time');
|
||||||
calendarElement.append(document.createTextNode(' '));
|
strongElement.textContent = nextEventDateEvent.name;
|
||||||
calendarElement.append(timeElement);
|
timeElement.datetime = beginDate.toISOString();
|
||||||
timeElement.append(dateNode);
|
const dateNode = document.createTextNode(beginDate.toLocaleString());
|
||||||
if (nextEvent.location) {
|
// divElement.innerText = '';
|
||||||
const locationNode = document.createTextNode(' (' + nextEvent.location + ')');
|
divElement.append(strongElement);
|
||||||
calendarElement.append(locationNode);
|
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) => {
|
const updateSpaceApiJson = (spaceApi) => {
|
||||||
|
|
Loading…
Reference in New Issue