Begin display page

webclient/src/App.js

@@ -29,6 +29,7 @@ import { NotFound, PleaseLogin } from './Misc.js';
 import { Debug } from './Debug.js';
 import { Garden } from './Garden.js';
 import { Footer } from './Footer.js';
+import { LCARS1Display } from './Display.js';
 
 const APP_VERSION = 3;  // TODO: automate this
 
@@ -124,6 +125,10 @@ function App() {
 					<Usage token={token} />
 				</Route>
 
+				<Route exact path='/display/lcars1'>
+					<LCARS1Display token={token} />
+				</Route>
+
 				<Route path='/'>
 					<Container>
 						<div className='hero'>

webclient/src/Display.js

@@ -0,0 +1,87 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import moment from 'moment-timezone';
+import { Button, Container, Header } from 'semantic-ui-react';
+import { requester } from './utils.js';
+import { TrotecUsage } from './Usage.js';
+
+const deviceNames = {
+	'trotec': {title: 'Trotec', device: 'TROTECS300'},
+};
+
+export function LCARS1Display(props) {
+	const { token } = props;
+	const [fullElement, setFullElement] = useState(false);
+	const ref = useRef(null);
+
+	const goFullScreen = () => {
+		if ('wakeLock' in navigator) {
+			navigator.wakeLock.request('screen');
+		}
+
+		ref.current.requestFullscreen({ navigationUI: 'hide' }).then(() => {
+			setFullElement(true);
+		});
+	};
+
+	return (
+		<Container>
+			<div className='display' ref={ref}>
+
+				{!fullElement &&
+					<p>
+						<Button onClick={goFullScreen}>Fullscreen</Button>
+					</p>
+				}
+
+				<div></div>
+
+				<div className='display-usage'>
+					<DisplayUsage token={token} name={'trotec'} />
+				</div>
+			</div>
+		</Container>
+	);
+};
+
+export function DisplayUsage(props) {
+	const { token, name } = props;
+	const title = deviceNames[name].title;
+	const device = deviceNames[name].device;
+	const [usage, setUsage] = useState(false);
+
+	const getUsage = () => {
+		requester('/stats/usage_data/?device='+device, 'GET', token)
+		.then(res => {
+			setUsage(res);
+		})
+		.catch(err => {
+			console.log(err);
+			setUsage(false);
+		});
+	};
+
+	useEffect(() => {
+		getUsage();
+		const interval = setInterval(getUsage, 60000);
+		return () => clearInterval(interval);
+	}, []);
+
+	const showUsage = usage && usage.track.username === usage.username;
+
+	return (
+		<>
+			{showUsage ?
+				<TrotecUsage usage={usage} />
+			:
+				<>
+					<Header size='medium'>Trotec Usage</Header>
+
+					<p className='stat'>
+						Waiting for job
+					</p>
+				</>
+			}
+		</>
+	);
+};

webclient/src/light.css

@@ -167,23 +167,42 @@ body {
 	border: 2px solid black;
 }
 
+.display {
+	display: flex;
+	justify-content: space-between;
+	height: 100vh;
+	background-color: black;
+	color: white;
+	font-size: 1em;
+}
+
+.display-usage {
+	border: 1px solid white;
+	padding: 0.5em;
+	align-self: flex-end;
+	width: 240px;
+	height: 383px;
+}
+
 .usage {
 	height: 100vh;
 	background-color: black;
 	color: white;
 	padding: 0.5em;
 	font-size: 2.5em;
-	cursor: none;
 }
 
+.display .ui.header,
 .usage .ui.header {
 	color: white;
+	margin-top: 0.5em;
 	margin-bottom: 0em;
 }
 
+.display .stat,
 .usage .stat {
 	font-size: 2em;
-	margin-bottom: 0.5em;
+	margin-bottom: 0;
 }
 
 .nowrap-stat {