Offen/Geschlossen-Info schön im Pop-Up

This commit is contained in:
Peter 2018-12-27 17:26:05 +01:00
parent 428c37496c
commit 103167a6f1
Signed by untrusted user: pludi
GPG Key ID: CFBA360E696EDC99
5 changed files with 25 additions and 1 deletions

View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="lock-open" class="svg-inline--fa fa-lock-open fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M423.5 0C339.5.3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z"></path></svg>

After

Width:  |  Height:  |  Size: 497 B

View File

@ -0,0 +1 @@
<svg aria-hidden="true" data-prefix="fas" data-icon="lock" class="svg-inline--fa fa-lock fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>

After

Width:  |  Height:  |  Size: 422 B

View File

@ -15,6 +15,14 @@ h2 {
vertical-align: text-bottom;
}
#state {
margin: 0 8px;
}
#state > img {
vertical-align: text-bottom;
margin-right: 4px;
}
#calendar {
margin: 0 8px;
}
@ -34,4 +42,4 @@ h2 {
#space-api code {
font-family: monospace;
font-size: 10px;
}
}

View File

@ -10,6 +10,8 @@
<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>
<h2>Aktueller Status</h2>
<div id="state">loading...</div>
<h2>Links</h2>
<div class="panel-section panel-section-list">
<div class="panel-list-item link" data-url="https://usrspace.at/">

View File

@ -14,6 +14,7 @@ Array.from(document.getElementsByClassName('link')).forEach((element) => {
browser.runtime.getBackgroundPage().then((page) => {
updateNextEvent(page.calendar[0]);
updateSpaceApiJson(page.spaceApi);
updateState(page.spaceApi);
}).catch((error) => {
console.error(error);
});
@ -41,3 +42,14 @@ const updateSpaceApiJson = (spaceApi) => {
// spaceApiElement.innerText = '';
// spaceApiElement.append(jsonNode);
};
const updateState = (spaceApi) => {
const stateElement = document.getElementById('state');
const isOpen = spaceApi.state.open;
const since = new Date(spaceApi.state.lastchange * 1000);
const sinceStr = ' seit <time datetime="' + since.toISOString() + '">' + since.toLocaleString() + '</time>';
if (isOpen)
stateElement.innerHTML = '<div class="icon"><img src="../icons/font-awesome/lock-open-solid.svg" width="19" height="19" alt="Offen" />Offen' + sinceStr;
else
stateElement.innerHTML = '<div class="icon"><img src="../icons/font-awesome/lock-solid.svg" width="19" height="19" alt="Geschlossen" />Geschlossen' + sinceStr;
};