blob: 4e7623f1df78feaea455be0c658989a2e167f542 (
plain) (
tree)
|
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">
<title>bwLp Status Monitor</title>
</head>
<body class="%PULSE%">
<div id="header">
<div id="header_left" class="header_element">
<a href="">
<img id="header_image" src="img/logo_bwlehrpool.png" alt="bwLehrpool">
</a>
</div>
<div id="header_center" class="header_element">
<label id="header_label">Status Monitor</label>
</div>
<div id="header_right" class="header_element">
<div>
<a href="https://www.bwlehrpool.de/doku.php/start">
<img id="header_wiki" src="img/wiki_bwlehrpool.png" alt="bwLehrpool">
</a>
</div>
<a id="header_wiki_label" href="https://www.bwlehrpool.de/doku.php/start">bwlp Wiki</a>
</div>
</div>
<div id="body">
<div id="content">
%CONTENT%
</div>
<div id="log_wrapper" class="log_wrapper">
<div id="log">
%LOG%
</div>
</div>
</div>
<div class="now-footer">%NOW%</div>
</body>
</html>
<script>
const urlParams = new URLSearchParams(window.location.search)
const horizontal = urlParams.get('horizontal')
const vertical = urlParams.get('vertical')
const noheader = urlParams.get('noheader')
const nofooter = urlParams.get('nofooter')
var autorefresh = urlParams.get('autorefresh')
var autorefresh = parseInt(autorefresh)
// Parameter for testing the pulsing background
const offline = urlParams.get('offline')
if (offline !== null) document.body.className += ' pulse'
// Often used elements
const body = document.getElementById('body')
const logWrapper = document.getElementById('log_wrapper')
const content = document.getElementById('content')
// No header removes the header from the site.
if (noheader != null) {
document.getElementById('header').style.visibility = 'hidden'
document.getElementById('body').style.marginTop = '0px'
}
// No footer removes the footer from the site.
if (nofooter != null) {
document.getElementsByClassName('now-footer')[0].style.display = 'none'
}
// Borderless mode for the 4k TV.
function borderless() {
const borderless = urlParams.get('borderless')
if (borderless != null) {
body.style.padding = '0px'
body.style.width = '100%'
body.style.height = '100%'
logWrapper.style.maxHeight = 'unset'
logWrapper.style.maxWidth = 'unset'
logWrapper.style.display = 'unset'
logWrapper.style.height = '100%'
logWrapper.style.boxShadow = 'unset'
logWrapper.style.margin = 'unset'
const log = document.getElementById('log')
log.style.height = 'unset'
log.style.setProperty('--wrap', 'normal')
content.style.height = '100%'
content.style.boxShadow = 'unset'
content.style.maxWidth = 'unset'
content.style.minHeight = '150px'
var media = window.matchMedia("(min-width: 1500px)")
borderlessMedia(media, logWrapper, content)
media.addListener(borderlessMedia)
}
}
function borderlessMedia(media) {
if (horizontal != null || (media.matches && vertical === null)) {
logWrapper.style.borderTop = 'unset'
logWrapper.style.borderLeft = '3px solid #8a8a8a'
content.style.flexWrap = 'nowrap'
} else if (vertical != null || (!media.matches && horizontal === null)) {
logWrapper.style.borderLeft = 'unset'
logWrapper.style.borderTop = '3px solid #8a8a8a'
content.style.flexWrap = 'wrap'
}
}
// Autorefresh the site.
if (Number.isInteger(autorefresh)) {
setTimeout(function() {
location.reload();
}, autorefresh * 1000);
}
// Remove images in the header if the windows is to small.
var mediaMaxWidth = window.matchMedia("(max-width: 850px)")
maxWidth(mediaMaxWidth)
mediaMaxWidth.addListener(maxWidth)
function maxWidth(media) {
const header = document.getElementById('header')
if (media.matches) {
header.style.setProperty('--header-display', 'none')
} else {
header.style.setProperty('--header-display', 'flex')
}
}
// Side By Side / OU modes & media querys.
var mediaMinWidth = window.matchMedia('(min-width: 1500px)')
minWidth(mediaMinWidth)
mediaMinWidth.addListener(minWidth)
function minWidth(media) {
if (vertical === null && (media.matches || horizontal != null)) {
// Side by side
body.style.flexDirection = 'row'
logWrapper.style.marginLeft = '40px'
logWrapper.style.marginTop = '0px'
logWrapper.style.maxWidth = '60vw'
logWrapper.style.maxHeight = 'calc(100vh - 120px)'
content.style.width = '30%'
content.style.height = 'unset'
content.style.minHeight = '51px'
body.style.alignItems = 'normal'
}
borderless()
}
var mediaOU = window.matchMedia('(max-width: 1500px)')
overUnder(mediaOU)
mediaOU.addListener(overUnder)
function overUnder(media) {
if (horizontal === null && (media.matches || vertical != null)) {
// Over / under
body.style.flexDirection = 'column'
logWrapper.style.marginLeft = '0px'
logWrapper.style.marginTop = '60px'
logWrapper.style.maxWidth = '80vw'
logWrapper.style.maxHeight = '80vh'
content.style.width = '100%'
content.style.height = 'unset'
content.style.minHeight = 'fit-content'
body.style.alignItems = 'center'
}
borderless()
}
if (horizontal !== null && vertical !== null) {
// Who uses horizontal and vertical at the same time! Lul.
body.style.transform = "rotate(-45deg)"
}
var mediaSmall = window.matchMedia("(max-width: 871px)")
smallWidth(mediaSmall)
mediaSmall.addListener(smallWidth)
function smallWidth(media) {
if (media.matches) {
logWrapper.style.removeProperty('max-width')
logWrapper.style.removeProperty('margin-top')
}
borderless()
}
</script>
|
