summaryrefslogblamecommitdiffstats
path: root/bwlpMonitor_template.html
blob: ec61c4882f9ba7e1e0ec4f7b470d936695020ae9 (plain) (tree)
1
2
3
4
5
6
7
8
9
10


               
                                                                                                                       





                                                                
                                                       



                                                                                    
                                                     

                                                           
                                                        











                                                                                                   
                                                                  
                      
     

                                      




          


                                                                     



                                                      




                                                                             
 







                                                                    
 






                                                                                 
 


                                                                  
 



                                                                          
 




                                                                            



                                                                         
                                                                                 


                                                                         
                                                                                         





                                                                        
                                

                                                      
                                            



                                          














































                                                                                         
        
<!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" 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>

  </body>

</html>

<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'
	}

	// 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 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 (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.
	var autorefresh = urlParams.get('autorefresh')
	var autorefresh = parseInt(autorefresh)
	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) {
		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>