banner
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 202 KiB |
After Width: | Height: | Size: 204 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 198 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 203 KiB |
After Width: | Height: | Size: 205 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 204 KiB |
After Width: | Height: | Size: 201 KiB |
After Width: | Height: | Size: 204 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 201 KiB |
After Width: | Height: | Size: 205 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 207 KiB |
After Width: | Height: | Size: 201 KiB |
After Width: | Height: | Size: 203 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 205 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 162 KiB |
|
@ -5,5 +5,4 @@
|
||||||
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
|
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}" />
|
||||||
|
|
||||||
<script src="/js/jquery-3.7.1.min.js"></script>
|
<script src="/js/jquery-3.7.1.min.js"></script>
|
||||||
<script src="/js/href_handling.js"></script>
|
<script src="/js/banner.js"></script>
|
||||||
<script src="/js/door-status.js"></script>
|
|
||||||
|
|
|
@ -268,18 +268,13 @@ a.external:after {
|
||||||
/* .header-wrapper, .footer { width: 100vw; } */
|
/* .header-wrapper, .footer { width: 100vw; } */
|
||||||
.header {
|
.header {
|
||||||
/*background-image: url("/img/banner.png");*/
|
/*background-image: url("/img/banner.png");*/
|
||||||
background-image: url("/img/banner_unknown.jpg");
|
background-image: url("/img/banner/off.jpg");
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position-x: center ;
|
background-position-x: center ;
|
||||||
background-position-y: top ;
|
background-position-y: top ;
|
||||||
}
|
}
|
||||||
.door_open .header{
|
|
||||||
background-image: url("/img/banner_open.jpg");
|
|
||||||
}
|
|
||||||
.door_closed .header{
|
|
||||||
background-image: url("/img/banner_closed.jpg");
|
|
||||||
}
|
|
||||||
.header-wrapper,
|
.header-wrapper,
|
||||||
.footer {
|
.footer {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
|
|
|
@ -0,0 +1,99 @@
|
||||||
|
let online,percentage,status;
|
||||||
|
|
||||||
|
const update = function () {
|
||||||
|
let todo=3;
|
||||||
|
fetch("https://spaceapi.c3re.de/prusaxl_online.json")
|
||||||
|
.then(function (response) {
|
||||||
|
return response.json();
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
online=data
|
||||||
|
todo--;
|
||||||
|
if(todo===0){
|
||||||
|
run();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
fetch("https://spaceapi.c3re.de/prusaxl_status.json")
|
||||||
|
.then(function (response) {
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
status=data
|
||||||
|
todo--;
|
||||||
|
if(todo===0){
|
||||||
|
run();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
fetch("https://spaceapi.c3re.de/prusaxl_percentage.json")
|
||||||
|
.then(function (response) {
|
||||||
|
return response.text();
|
||||||
|
})
|
||||||
|
.then(function (data) {
|
||||||
|
|
||||||
|
percentage=parseInt(data)
|
||||||
|
todo--;
|
||||||
|
if(todo===0){
|
||||||
|
run();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
setInterval(update, 1000);
|
||||||
|
|
||||||
|
|
||||||
|
function run(){
|
||||||
|
if(!online){
|
||||||
|
setImage("OFF");
|
||||||
|
}else{
|
||||||
|
setImage(status,percentage);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//[ IDLE, BUSY, PRINTING, PAUSED, FINISHED, STOPPED, ERROR, ATTENTION, READY ]
|
||||||
|
|
||||||
|
function setImage(status,percentage){
|
||||||
|
let el=document.getElementsByClassName("header")[0];
|
||||||
|
let imagepath=getBannerPath(status,percentage);
|
||||||
|
if(imagepath) {
|
||||||
|
el.style.backgroundImage = "url('" + imagepath + "')";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBannerPath(status,percentage){
|
||||||
|
if(status === "IDLE") {
|
||||||
|
return "/img/banner/idle.jpg";
|
||||||
|
} else if(status === "BUSY") {
|
||||||
|
return null;
|
||||||
|
} else if(status === "PRINTING") {
|
||||||
|
|
||||||
|
percentage = parseInt(percentage);
|
||||||
|
percentage = Math.min(100, percentage);
|
||||||
|
percentage = Math.max(0, percentage);
|
||||||
|
percentage = Math.floor(percentage/5)*5;
|
||||||
|
return "/img/banner/"+percentage+".jpg";
|
||||||
|
|
||||||
|
} else if(status === "PAUSED") {
|
||||||
|
return null;
|
||||||
|
} else if(status === "FINISHED") {
|
||||||
|
return "/img/banner/100.jpg";
|
||||||
|
}
|
||||||
|
else if(status === "STOPPED") {
|
||||||
|
return "/img/banner/attention.jpg";
|
||||||
|
}
|
||||||
|
else if(status === "ERROR") {
|
||||||
|
return "/img/banner/attention.jpg";
|
||||||
|
}
|
||||||
|
else if(status === "ATTENTION") {
|
||||||
|
return "/img/banner/attention.jpg";
|
||||||
|
}
|
||||||
|
else if(status === "READY") {
|
||||||
|
return "/img/banner/idle.jpg";
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return "/img/banner/off.jpg";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
|
@ -1,87 +0,0 @@
|
||||||
const calRefresh=function () {
|
|
||||||
let url =
|
|
||||||
"https://ical2json.c3re.de/api/?url=https%3A%2F%2Fcloud.c3re.de%2Fremote.php%2Fdav%2Fpublic-calendars%2FRLKKkdjNYgXH8yEz%3Fexport&start=today&end=next+month&maxitems=10";
|
|
||||||
let xmlHttp = new XMLHttpRequest();
|
|
||||||
let zeropad = function (i) {
|
|
||||||
let o = "";
|
|
||||||
if (i <= 9) o += "0";
|
|
||||||
o += i;
|
|
||||||
return o;
|
|
||||||
};
|
|
||||||
xmlHttp.onreadystatechange = function () {
|
|
||||||
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
|
|
||||||
let cal = JSON.parse(xmlHttp.responseText);
|
|
||||||
let $ = jQuery;
|
|
||||||
let box = $("#calendar");
|
|
||||||
|
|
||||||
box.removeClass("loading");
|
|
||||||
try{
|
|
||||||
for( el of document.querySelectorAll("#calendar li")){
|
|
||||||
el.remove()
|
|
||||||
}
|
|
||||||
}catch(e){}
|
|
||||||
for (let item of cal) {
|
|
||||||
let li = $("<li/>");
|
|
||||||
//li.text(item.summary)
|
|
||||||
let startDate = new Date(item.start * 1000);
|
|
||||||
|
|
||||||
//check if the date is within today, not tomorrow, not yesterday
|
|
||||||
let today = new Date();
|
|
||||||
let todayString = today.getFullYear() + "-" + zeropad(today.getMonth() + 1) + "-" + zeropad(today.getDate());
|
|
||||||
let startDateString = startDate.getFullYear() + "-" + zeropad(startDate.getMonth() + 1) + "-" + zeropad(startDate.getDate());
|
|
||||||
let todayClass=""
|
|
||||||
if (todayString === startDateString) todayClass=" today";
|
|
||||||
|
|
||||||
|
|
||||||
let date = $("<span class='date row"+todayClass+"'/>");
|
|
||||||
date.text(
|
|
||||||
zeropad(startDate.getDate()) +
|
|
||||||
"." +
|
|
||||||
zeropad(1 + startDate.getMonth()) +
|
|
||||||
"." +
|
|
||||||
startDate.getFullYear() +
|
|
||||||
" - " +
|
|
||||||
zeropad(startDate.getHours()) +
|
|
||||||
":" +
|
|
||||||
zeropad(startDate.getMinutes())
|
|
||||||
);
|
|
||||||
date.appendTo(li);
|
|
||||||
let summary = $("<span class='summary row'/>");
|
|
||||||
summary.text(item.summary);
|
|
||||||
if (item.url) {
|
|
||||||
let a = $("<a/>");
|
|
||||||
a.attr("href", item.url);
|
|
||||||
a.attr("title", item.description);
|
|
||||||
a.append(summary);
|
|
||||||
a.appendTo(li);
|
|
||||||
} else {
|
|
||||||
summary.appendTo(li);
|
|
||||||
}
|
|
||||||
if (item.location) {
|
|
||||||
let loc = $("<span class='location'>📍</span>");
|
|
||||||
|
|
||||||
loc.attr("data-loc", item.location);
|
|
||||||
loc.attr("title", "Click to copy: " + item.location);
|
|
||||||
loc.appendTo(date);
|
|
||||||
}
|
|
||||||
|
|
||||||
li.attr("title", item.description);
|
|
||||||
li.appendTo(box);
|
|
||||||
}
|
|
||||||
try{
|
|
||||||
document.querySelector("#calendar .loading").remove();
|
|
||||||
}catch(e){}
|
|
||||||
|
|
||||||
$(".location", box).click(function () {
|
|
||||||
navigator.clipboard.writeText($(this).attr("data-loc"));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xmlHttp.open("GET", url, true); // true for asynchronous
|
|
||||||
xmlHttp.send();
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function(){
|
|
||||||
calRefresh();
|
|
||||||
setInterval(calRefresh, 1000*60*15);
|
|
||||||
});
|
|
|
@ -1,49 +0,0 @@
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
const update = function () {
|
|
||||||
fetch("https://spaceapi.c3re.de/")
|
|
||||||
.then(function (response) {
|
|
||||||
return response.json();
|
|
||||||
})
|
|
||||||
.then(function (data) {
|
|
||||||
let body=document.getElementsByTagName("body")[0];
|
|
||||||
let fav=document.querySelector("head link[rel='icon']");
|
|
||||||
if (data.state.open) {
|
|
||||||
body.classList.remove("door_closed");
|
|
||||||
body.classList.add("door_open");
|
|
||||||
fav.setAttribute("href", "img/favopen.png")
|
|
||||||
} else {
|
|
||||||
body.classList.remove("door_open");
|
|
||||||
body.classList.add("door_closed");
|
|
||||||
fav.setAttribute("href", "img/favclosed.png")
|
|
||||||
|
|
||||||
}
|
|
||||||
document
|
|
||||||
.getElementById("ds-img")
|
|
||||||
.setAttribute(
|
|
||||||
"src",
|
|
||||||
data.state.open ? data.state.icon.open : data.state.icon.closed
|
|
||||||
);
|
|
||||||
document.getElementById("ds-status").innerHTML = data.state.open
|
|
||||||
? "Geöffnet"
|
|
||||||
: "Geschlossen";
|
|
||||||
|
|
||||||
document.getElementById("ds-temp").innerHTML =
|
|
||||||
"" +
|
|
||||||
data.sensors.temperature[0].value +
|
|
||||||
data.sensors.temperature[0].unit;
|
|
||||||
const lastchange = new Date(data.state.lastchange * 1000);
|
|
||||||
document.getElementById("ds-date").innerHTML =
|
|
||||||
lastchange.getDate().toString().padStart(2, "0") +
|
|
||||||
"." +
|
|
||||||
(lastchange.getMonth() + 1).toString().padStart(2, "0") +
|
|
||||||
"." +
|
|
||||||
lastchange.getFullYear() +
|
|
||||||
" " +
|
|
||||||
lastchange.getHours().toString().padStart(2, "0") +
|
|
||||||
":" +
|
|
||||||
lastchange.getMinutes().toString().padStart(2, "0");
|
|
||||||
});
|
|
||||||
};
|
|
||||||
update();
|
|
||||||
setInterval(update, 10000);
|
|
||||||
});
|
|
|
@ -1,19 +0,0 @@
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
document.querySelectorAll("a").forEach(function (element) {
|
|
||||||
const myhost = window.location.hostname;
|
|
||||||
const linkhost = new URL(element.href).hostname;
|
|
||||||
if (myhost === linkhost) {
|
|
||||||
let prefetchUrl = new URL(element.href).toString();
|
|
||||||
// lest make a prefetch tag for this url
|
|
||||||
let link = document.createElement("link");
|
|
||||||
link.setAttribute("rel", "prefetch");
|
|
||||||
link.setAttribute("href", prefetchUrl);
|
|
||||||
link.setAttribute("as", "document");
|
|
||||||
document.head.appendChild(link);
|
|
||||||
element.classList.add("internal");
|
|
||||||
} else {
|
|
||||||
element.setAttribute("target", "_blank");
|
|
||||||
element.classList.add("external");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|