add fullscreen option

jensdenbraber · Sep 4, 2022 · 89a4c29 · 89a4c29
1 parent 5f93024
commit 89a4c29
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 83 deletions.
diff --git a/src/App.js b/src/App.js
@@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { Connector, useSubscription, useMqttState } from 'mqtt-react-hooks';
 import Status from './Status';
 
-// import { FullScreen, useFullScreenHandle } from "react-full-screen";
+import { FullScreen, useFullScreenHandle } from "react-full-screen";
 
 import Camper from "./Camper";
 
@@ -82,140 +82,160 @@ export default function App() {
   // const [temperatures, setTemperatures] = React.useState(false);
   // const [powerLevels, setPowerLevels] = React.useState(false);
 
+  const handle = useFullScreenHandle();
+
+  let [isFullScreen, setFullScreen] = React.useState(true);
+
+  const onButtonClick = (event) => {
+    console.log(isFullScreen)
+    if (isFullScreen) {
+      handle.enter()
+      setFullScreen(false)
+    }
+    else {
+      setFullScreen(true)
+      handle.exit()
+    }
+  }
+
   return (
+    <>
+      <FullScreen handle={handle}>
+        <Connector brokerUrl="ws://192.168.68.53:9001" options={{ keepalive: 0 }}>
+
+          {/* <TabPanel sx={{ position: 'fixed', bottom: 0, left: 0, top: 0 }} tabs={tabs} tab={value}></TabPanel> */}
+          {/* <Status /> */}
+          <Box sx={{
+            width: 1024,
+            height: 600,
+            display: 'grid',
+            columnGap: 3,
+            rowGap: 1,
+            gridTemplateColumns: 'repeat(2, 1fr)',
+            // justifyContent: 'space-evenly'
+          }}>
+            <WaterTankLevels />
+            <Boiler />
+            <Temperatures />
+            <Clock />
+            {/* <NightLight setOpen={open} /> */}
+            {/* <NightLight /> */}
+          </Box>
 
-    <Connector brokerUrl="ws://192.168.68.53:9001" options={{ keepalive: 0 }}>
-
-      {/* <TabPanel sx={{ position: 'fixed', bottom: 0, left: 0, top: 0 }} tabs={tabs} tab={value}></TabPanel> */}
-      {/* <Status /> */}
-      <Box sx={{
-        width: 1024,
-        height: 600,
-        display: 'grid',
-        columnGap: 3,
-        rowGap: 1,
-        gridTemplateColumns: 'repeat(2, 1fr)',
-        // justifyContent: 'space-evenly'
-      }}>
-        <WaterTankLevels />
-        <Boiler />
-        <Temperatures />
-        <Clock />
-        {/* <NightLight setOpen={open} /> */}
-        {/* <NightLight /> */}
-      </Box>
-
-      {/* {camper && <Camper />}
+          {/* {camper && <Camper />}
       {waterTankLevels && <WaterPumpContent />} */}
 
-      {/* <Camper display={{ camper }} /> */}
-      {/* <WaterTankLevels display={{ waterTankLevels }} /> */}
-      {/* {lpg && <Lpg />}
+          {/* <Camper display={{ camper }} /> */}
+          {/* <WaterTankLevels display={{ waterTankLevels }} /> */}
+          {/* {lpg && <Lpg />}
       {temperatures && <Temperatures />}
       {powerLevels && <PowerLevels />}
       {nightMode && <PowerLevels />} */}
 
-      {/* <Modal
+          {/* <Modal
         open={open}
         onClick={handleClose}
         onClose={handleClose}
         aria-labelledby="modal-modal-title"
         aria-describedby="modal-modal-description"
-      >
+        >
         <Box sx={style}>
-          <Box sx={styleSubBox}>
-            <Typography id="modal-modal-description" sx={styleTypography}>
+        <Box sx={styleSubBox}>
+        <Typography id="modal-modal-description" sx={styleTypography}>
               {moment(new Date()).format("dddd D MMMM HH:mm:ss")}
-            </Typography>
-            <Logo fill="#A7A9AB" stroke="#A7A9AB" height={120} />
-          </Box>
-        </Box>
-      </Modal> */}
+              </Typography>
+              <Logo fill="#A7A9AB" stroke="#A7A9AB" height={120} />
+              </Box>
+              </Box>
+            </Modal> */}
 
-      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
+          <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
 
 
 
-        {/* <Button onClick={() => {
+            {/* <Button onClick={() => {
           // alert('Camper');
           setCamper(!camper)
         }}> Camper</Button>
-
+        
         <Button onClick={() => {
           // alert('Water Tank Levels');
           // setWaterTankLevels(!waterTankLevels)
         }}
-        >Water Tank Levels</Button> */}
+      >Water Tank Levels</Button> */}
 
-        <Button onClick={() => window.location.reload()}>Refresh page</Button>
-        {/* <div onClick={() => setOpen(true)}>Night mode</div> */}
+            <Button onClick={() => window.location.reload()}>Refresh page</Button>
+            <Button onClick={onButtonClick}>Full screen</Button>
+            {/* <div onClick={() => setOpen(true)}>Night mode</div> */}
 
-        {/*
+            {/*
 
-        <BottomNavigation
-          showLabels
-          value={value}
-          onChange={(event, newValue) => {
+<BottomNavigation
+showLabels
+value={value}
+onChange={(event, newValue) => {
             console.log("newValue: " + newValue)
-
+            
             switch (newValue) {
-
+              
               case "camper":
                 setCamper(!camper)
                 break
 
-              case "waterTankLevels":
+                case "waterTankLevels":
                 setWaterTankLevels(!waterTankLevels)
                 break
 
-              case "lpg":
-                setLpg(!lpg)
-                break
-
-              case "temperatures":
-                setTemperatures(!temperatures)
-                break
-
-              case "power":
-                setPowerLevels(!powerLevels)
-                break
-
-              // case "nightMode":
-              //   setCamper(nightMode)
-              //   break
-
-              // default:
-              //   null
-
-            }
+                case "lpg":
+                  setLpg(!lpg)
+                  break
+                  
+                  case "temperatures":
+                    setTemperatures(!temperatures)
+                    break
+                    
+                    case "power":
+                      setPowerLevels(!powerLevels)
+                    break
+                    
+                    // case "nightMode":
+                    //   setCamper(nightMode)
+                    //   break
+              
+                    // default:
+                    //   null
+                    
+                  }
 
             // console.log("tabs.length: " + tabs.length)
             // if (-1 < newValue && newValue < tabs.length) {
-            //   setValue(newValue);
-            //   console.log("newValue: " + newValue)
-            // }
-            // if (newValue == tabs.length) {
-            //   handleOpen()
+              //   setValue(newValue);
+              //   console.log("newValue: " + newValue)
+              // }
+              // if (newValue == tabs.length) {
+                //   handleOpen()
             //   console.log("nightmode")
             // }
           }}
         >
-          <BottomNavigationAction label="Camper" value="camper" icon={<Home />} />
-          <BottomNavigationAction label="Water tank levels" value="waterTankLevels" icon={<WaterIcon />} />
-          <BottomNavigationAction label="LPG" value="lpg" icon={<PropaneTankIcon />} />
-          <BottomNavigationAction label="Temperatures" value="temperature" icon={<CloudIcon />} />
-          <BottomNavigationAction label="Power" value="power" icon={<BoltIcon />} />
+        <BottomNavigationAction label="Camper" value="camper" icon={<Home />} />
+        <BottomNavigationAction label="Water tank levels" value="waterTankLevels" icon={<WaterIcon />} />
+        <BottomNavigationAction label="LPG" value="lpg" icon={<PropaneTankIcon />} />
+        <BottomNavigationAction label="Temperatures" value="temperature" icon={<CloudIcon />} />
+        <BottomNavigationAction label="Power" value="power" icon={<BoltIcon />} />
           <BottomNavigationAction label="NightMode" value="nightMode" icon={<ModeNightIcon />} />
-
+          
           {/* <BottomNavigationAction label="Camper" value="0" icon={<Home />} />
           <BottomNavigationAction label="Water tank levels" value="1" icon={<WaterIcon />} />
           <BottomNavigationAction label="LPG" value="2" icon={<PropaneTankIcon />} />
           <BottomNavigationAction label="Temperatures" value="3" icon={<CloudIcon />} />
           <BottomNavigationAction label="Power" value="4" icon={<BoltIcon />} />
           <BottomNavigationAction label="NightMode" value="5" icon={<ModeNightIcon />} /> 
-        </BottomNavigation>
+          </BottomNavigation>
         */}
-      </Paper>
-    </Connector >
+          </Paper>
+        </Connector >
+      </FullScreen>
+    </>
   )
 }
diff --git a/src/index.css b/src/index.css
@@ -56,4 +56,9 @@ input {
 
 .hideTab {
   display: none;
+}
+
+:fullscreen,
+::backdrop {
+  background-color: rgba(255, 255, 255, 0);
 }