Add LCARS2 display

webclient/src/App.js

@@ -29,7 +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';
+import { LCARS1Display, LCARS2Display } from './Display.js';
 
 const APP_VERSION = 5;  // TODO: automate this
 
@@ -130,6 +130,10 @@ function App() {
 					<LCARS1Display token={token} />
 				</Route>
 
+				<Route exact path='/display/lcars2'>
+					<LCARS2Display token={token} />
+				</Route>
+
 				<Route path='/'>
 					<Container>
 						<div className='hero'>

webclient/src/Debug.js

@@ -28,6 +28,8 @@ export function Debug(props) {
 
 			<p><Link to='/display/lcars1'>LCARS1 Display</Link></p>
 
+			<p><Link to='/display/lcars2'>LCARS2 Display</Link></p>
+
 
 		</Container>
 	);

webclient/src/Display.js

@@ -50,6 +50,47 @@ export function LCARS1Display(props) {
 	);
 };
 
+export function LCARS2Display(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 className='display-scores'>
+					<DisplayScores />
+				</div>
+
+				<div className='display-scores'>
+					<DisplayHosting />
+				</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;