Add horizontal / vertical param

Small design bugfixes. Add horizontal param: Overrides min-width >1500px media Add vertical param: Overrides max-width 850px media Remove images in the header when the side gets to small
author: Jannik Schönartz 2019-01-31 19:25:54 +0100
committer: Jannik Schönartz 2019-01-31 19:25:54 +0100
commit: c6b1ee42d14d360d88361737ac94cb576cfcb185 (patch)
tree: f90f2932be422be77812d8662e95e9c72ee714fc
parent: Seperate config from the python script (diff)
download: bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.tar.gz
bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.tar.xz
bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.zip
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;
-  }
-}
author	Jannik Schönartz	2019-01-31 19:25:54 +0100
committer	Jannik Schönartz	2019-01-31 19:25:54 +0100
commit	c6b1ee42d14d360d88361737ac94cb576cfcb185 (patch)
tree	f90f2932be422be77812d8662e95e9c72ee714fc
parent	Seperate config from the python script (diff)
download	bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.tar.gz bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.tar.xz bwlp-monitoring-c6b1ee42d14d360d88361737ac94cb576cfcb185.zip