summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rwxr-xr-xbwLpStatus.py12
-rw-r--r--bwlpMonitor_template.html116
-rw-r--r--style.css47
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
diff --git a/style.css b/style.css
index 7fdccf8..836b155 100644
--- a/style.css
+++ b/style.css
@@ -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;
- }
-}