diff options
| -rwxr-xr-x | bwLpStatus.py | 12 | ||||
| -rw-r--r-- | bwlpMonitor_template.html | 116 | ||||
| -rw-r--r-- | style.css | 47 |
3 files changed, 107 insertions, 68 deletions
diff --git a/bwLpStatus.py b/bwLpStatus.py index 882ec1f..59f37b8 100755 --- a/bwLpStatus.py +++ b/bwLpStatus.py @@ -131,7 +131,7 @@ def thrift(name, ip, port, server): elif server == 'MASTER': masterserver = make_client(bwlp_thrift.MasterServer, ip, port, trans_factory=TFramedTransportFactory()) organisations = masterserver.getOrganizations() - print(organisations) + organisationList = [] for org in organisations: organisationList.append(Organisation(org.organizationId, org.displayName)) @@ -149,6 +149,7 @@ def thrift(name, ip, port, server): # Parses the log from the logfile. Fills the logEntries array. def parseLog(): + global logEntries if not (os.path.exists('bwLpStatusLog.txt')): return with open('bwLpStatusLog.txt', 'r') as log: @@ -157,6 +158,7 @@ def parseLog(): entry = line.split('\t') if len(entry) < 4: continue logEntries.append(LogEntry(entry[0], entry[1], entry[2], entry[3], '' if len(entry) < 5 else entry[4], [] if len(entry) < 6 else entry[5])) + global newLogIndex newLogIndex = len(logEntries) @@ -243,7 +245,13 @@ for status in statusList: # Generate the html code for the log. log = '\r\n' -for entry in reversed(logEntries): + +# Cut the log to the last n entries +n = 500 +cut_amount = 0 +if len(logEntries) >= n: + cut_amount = len(logEntries) - n +for entry in reversed(logEntries[cut_amount:]): log += ('<div class="log_item"><div class="log_item_part time"><div class="content_item_part_title">[' + entry.date + ']</div></div><div class="log_item_part service"><div class="content_item_part_title">[' + entry.service + ']</div></div><div class="log_item_part ' diff --git a/bwlpMonitor_template.html b/bwlpMonitor_template.html index 01bb0fb..ec61c48 100644 --- a/bwlpMonitor_template.html +++ b/bwlpMonitor_template.html @@ -1,21 +1,22 @@ <!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> <div id="header"> - <div id="header_left"> + <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"> + <div id="header_center" class="header_element"> <label id="header_label">Status Monitor</label> </div> - <div id="header_right"> + <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"> @@ -28,7 +29,7 @@ <div id="content"> %CONTENT% </div> - <div id="log_wrapper"> + <div id="log_wrapper" class="log_wrapper"> <div id="log"> %LOG% </div> @@ -41,55 +42,63 @@ <script> const urlParams = new URLSearchParams(window.location.search) + const horizontal = urlParams.get('horizontal') + const vertical = urlParams.get('vertical') + + // No header removes the header from the site. const noheader = urlParams.get('noheader') if (noheader != null) { document.getElementById('header').style.visibility = 'hidden' document.getElementById('body').style.marginTop = '0px' } - const borderless = urlParams.get('borderless') - if (borderless != null) { - const body = document.getElementById('body') - body.style.padding = '0px' - body.style.width = '100%' - body.style.height = '100%' - const logWrapper = document.getElementById('log_wrapper') - logWrapper.style.maxHeight = 'unset' - logWrapper.style.maxWidth = 'unset' - logWrapper.style.display = 'unset' - logWrapper.style.height = '100%' - logWrapper.style.boxShadow = 'unset' - logWrapper.style.margin = 'unset' + // Borderless mode for the 4k TV. + function borderless() { + const borderless = urlParams.get('borderless') + if (borderless != null) { + const body = document.getElementById('body') + body.style.padding = '0px' + body.style.width = '100%' + body.style.height = '100%' - const log = document.getElementById('log') - log.style.height = 'unset' - log.style.setProperty('--wrap', 'normal') + const logWrapper = document.getElementById('log_wrapper') + 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 content = document.getElementById('content') - content.style.height = '100%' - content.style.boxShadow = 'unset' - content.style.maxWidth = 'unset' + const log = document.getElementById('log') + log.style.height = 'unset' + log.style.setProperty('--wrap', 'normal') - var media = window.matchMedia("(min-width: 1500px)") - borderlessMedia(media, logWrapper, content) - media.addListener(borderlessMedia) - } + const content = document.getElementById('content') + content.style.height = '100%' + content.style.boxShadow = 'unset' + content.style.maxWidth = 'unset' + var media = window.matchMedia("(min-width: 1500px)") + borderlessMedia(media, logWrapper, content) + media.addListener(borderlessMedia) + } + } function borderlessMedia(media) { const logWrapper = document.getElementById('log_wrapper') const content = document.getElementById('content') - if (media.matches) { + if (horizontal != null || (media.matches && vertical === null)) { logWrapper.style.borderTop = 'unset' logWrapper.style.borderLeft = '3px solid #8a8a8a' content.style.flexWrap = 'nowrap' - } else { + } 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. var autorefresh = urlParams.get('autorefresh') var autorefresh = parseInt(autorefresh) if (Number.isInteger(autorefresh)) { @@ -97,4 +106,51 @@ 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) { + const body = document.getElementById('body') + const logWrapper = document.getElementsByClassName('log_wrapper')[0] + const content = document.getElementById('content') + if (vertical === null && (media.matches || horizontal != null)) { + 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 = 'calc(100vh - 120px)' + content.style.minHeight = '51px' + } else if (horizontal === null && (!media.matches || vertical != null)) { + 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 = '150px' + } else { + // Who uses horizontal and vertical at the same time! Lul. + body.style.transform = "rotate(-45deg)" + } + borderless() + } </script>
\ No newline at end of file @@ -34,30 +34,31 @@ a:hover { height: 60px; position: fixed; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); + --header-display: flex; + z-index: 1; } -#header_left { - display: flex; +.header_element { + display: var(--header-display); flex-direction: row; - justify-content: left; align-items: center; +} + +#header_left { + justify-content: left; width: 228px; } #header_center { display: flex; - flex-direction: row; justify-content: center; - align-items: center; margin-right: 16px; margin-left: 16px; + width: 100%; } #header_right { - display: flex; - flex-direction: row; justify-content: right; - align-items: center; margin-right: 8px; width: 228px; } @@ -147,7 +148,6 @@ a:hover { #log { display: flex; flex-direction: column; - background-color: #f5f5f5; white-space: nowrap; height: 100%; --wrap: nowrap; @@ -161,6 +161,8 @@ a:hover { box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); overflow: auto; max-width: 80vw; + background-color: #f5f5f5; + width: 100%; } .log_item { @@ -199,30 +201,3 @@ a:hover { .log_item:hover { background-color: #efeeee; } - -@media (min-width: 1500px) { - #body { - flex-direction: row; - } - - #log_wrapper { - margin-left: 40px; - margin-top: 0px; - max-width: 60vw; - max-height: calc(100vh - 120px); - } - #content { - width: 30%; - height: calc(100vh - 120px); - min-height: 51px; - } -} - -@media (max-width: 850px) { - #header_right { - visibility: collapse; - } - #header_left { - visibility: collapse; - } -} |