diff options
| -rwxr-xr-x | bwLpStatus.py | 2 | ||||
| -rw-r--r-- | bwlpMonitor_template.html | 62 | ||||
| -rw-r--r-- | style.css | 64 |
3 files changed, 108 insertions, 20 deletions
diff --git a/bwLpStatus.py b/bwLpStatus.py index 67e6531..d9c20c6 100755 --- a/bwLpStatus.py +++ b/bwLpStatus.py @@ -235,7 +235,7 @@ for entry in reversed(logEntries): + entry.service + ']</div></div><div class="log_item_part ' + entry.state + '"><div class="content_item_part_title">[' + entry.state + ']</div></div><div class="log_item_part"><div class="content_item_part_title">[' - + entry.host +']</div></div><div class="log_item_part"><div class="content_item_part_title">' + + entry.host +']</div></div><div class="log_item_part"><div class="content_item_part_title log_item_part_msg">' + entry.msg + '</div></div></div>') # Copy the .html file and replace the %CONTENT% to generate the final html file. diff --git a/bwlpMonitor_template.html b/bwlpMonitor_template.html index 6a41d66..19a804b 100644 --- a/bwlpMonitor_template.html +++ b/bwlpMonitor_template.html @@ -38,3 +38,65 @@ </body> </html> + +<script> + const urlParams = new URLSearchParams(window.location.search) + 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' + + const log = document.getElementById('log') + log.style.height = 'unset' + log.style.setProperty('--wrap', 'normal') + + 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) { + logWrapper.style.borderTop = 'unset' + logWrapper.style.borderLeft = '3px solid #8a8a8a' + content.style.flexWrap = 'nowrap' + } else { + logWrapper.style.borderLeft = 'unset' + logWrapper.style.borderTop = '3px solid #8a8a8a' + content.style.flexWrap = 'wrap' + } + } + + var autorefresh = urlParams.get('autorefresh') + var autorefresh = parseInt(autorefresh) + console.log(Number.isInteger(autorefresh)) + if (Number.isInteger(autorefresh)) { + console.log(autorefresh) + setTimeout(function() { + location.reload(); + }, autorefresh * 1000); + } +</script>
\ No newline at end of file @@ -11,6 +11,7 @@ body { align-items: center; justify-content: flex-start; margin: unset; + height: 100%; } a { @@ -32,7 +33,7 @@ a:hover { background-color: white; 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) !important; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); } #header_left { @@ -84,33 +85,33 @@ a:hover { #body { display: flex; flex-direction: column; - justify-content: center; align-items: center; - margin-top: 90px; + margin-top: 60px; min-height: 300px; + padding: 30px; } #content { display: flex; flex-direction: column; - width: 800px; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; + max-width: 800px; + min-width: 500px; + width: 100%; + box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); background-color: #f5f5f5; overflow: auto; - margin-top: 30px; min-height: 150px; flex-shrink: 1; } .content_item { display: flex; - flex-direction: row; - justify-content: center; - justify-items: stretch; - align-items: center; + align-items: stretch; min-height: 50px; - height: 80px; border-bottom: 1px solid #e2e2e2; + flex: 1; + border-left: 3px solid #8a8a8a; + margin-left: -3px; } .content_item:hover { @@ -118,17 +119,13 @@ a:hover { } .content_item_part { - height: 100%; width: 100%; display: flex; flex-direction: column; - justify-content: center; align-items: center; border-left: 1px solid #e2e2e2; border-right: 1px solid #e2e2e2; -} - -.content_item_part_title { + justify-content: center; } .content_item_part_subtitle { @@ -154,15 +151,15 @@ a:hover { background-color: #f5f5f5; white-space: nowrap; height: 100%; + --wrap: nowrap; } #log_wrapper { display: flex; min-height: 150px; - max-height: 600px; + max-height: 80vh; margin-top: 60px; - margin-bottom: 90px; - box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important; + 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; } @@ -187,6 +184,10 @@ a:hover { margin-right: 5px; } +.log_item_part_msg { + white-space: var(--wrap); +} + .time { color: #40bac8; padding-left: 10px; @@ -199,3 +200,28 @@ 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: 80vh; + } + #content { + width: 30%; + } +} + +@media (max-width: 850px) { + #header_right { + visibility: collapse; + } + #header_left { + visibility: collapse; + } +} |