Dashboard: Add ?fullscreen=force GET parameter for tablet mode (#1883)

GladysAssistant · Sep 28, 2023 · 3760147 · 3760147
1 parent e223e3f
commit 3760147
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 28 deletions.
diff --git a/front/src/actions/dashboard/index.js b/front/src/actions/dashboard/index.js
@@ -0,0 +1,12 @@
+function createActions(store) {
+  const actions = {
+    setFullScreen(state, fullScreen) {
+      store.setState({
+        fullScreen
+      });
+    }
+  };
+  return actions;
+}
+
+export default createActions;
diff --git a/front/src/routes/dashboard/DashboardPage.jsx b/front/src/routes/dashboard/DashboardPage.jsx
@@ -41,17 +41,19 @@ const DashboardPage = ({ children, ...props }) => (
                 </div>
 
                 <div class="page-options d-flex align-content-between flex-wrap">
-                  {!props.dashboardNotConfigured && props.browserFullScreenCompatible && (
-                    <button onClick={props.toggleFullScreen} class={cx('btn btn-outline-secondary ml-2 btn-sm')}>
-                      <span>
-                        {!props.fullScreen && <Text id="dashboard.enableFullScreen" />}
-                        {props.fullScreen && <Text id="dashboard.disableFullScreen" />}{' '}
-                        {!props.fullScreen && <i class="fe fe-maximize-2" />}
-                        {props.fullScreen && <i class="fe fe-minimize-2" />}
-                      </span>
-                    </button>
-                  )}
-                  {props.currentDashboard && (
+                  {!props.dashboardNotConfigured &&
+                    props.browserFullScreenCompatible &&
+                    !props.hideExitFullScreenButton && (
+                      <button onClick={props.toggleFullScreen} class={cx('btn btn-outline-secondary ml-2 btn-sm')}>
+                        <span>
+                          {!props.fullScreen && <Text id="dashboard.enableFullScreen" />}
+                          {props.fullScreen && <Text id="dashboard.disableFullScreen" />}{' '}
+                          {!props.fullScreen && <i class="fe fe-maximize-2" />}
+                          {props.fullScreen && <i class="fe fe-minimize-2" />}
+                        </span>
+                      </button>
+                    )}
+                  {props.currentDashboard && !props.hideExitFullScreenButton && (
                     <button onClick={props.editDashboard} class={cx('btn btn-outline-primary ml-2')}>
                       <span class={style.editDashboardText}>
                         <Text id="dashboard.editDashboardButton" />

diff --git a/front/src/routes/dashboard/index.js b/front/src/routes/dashboard/index.js
@@ -4,6 +4,7 @@ import { route } from 'preact-router';
 
 import DashboardPage from './DashboardPage';
 import GatewayAccountExpired from '../../components/gateway/GatewayAccountExpired';
+import actions from '../../actions/dashboard';
 import get from 'get-value';
 
 class Dashboard extends Component {
@@ -76,6 +77,16 @@ class Dashboard extends Component {
     }
   };
 
+  checkIfFullScreenParameterIsHere = () => {
+    if (this.props.fullscreen === 'force') {
+      try {
+        this.switchToFullScreen();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
   init = async () => {
     await this.getDashboards();
     if (this.state.currentDashboardSelector) {
@@ -101,26 +112,34 @@ class Dashboard extends Component {
     return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
   };
 
+  switchToFullScreen = () => {
+    if (document.documentElement.requestFullscreen) {
+      // chrome & firefox
+      document.documentElement.requestFullscreen();
+    } else if (document.documentElement.webkitRequestFullscreen) {
+      // safari
+      document.documentElement.webkitRequestFullscreen();
+    }
+    this.props.setFullScreen(true);
+  };
+
+  exitFullScreen = () => {
+    if (document.exitFullscreen) {
+      // chrome & firefox
+      document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+      // safari
+      document.webkitExitFullscreen();
+    }
+    this.props.setFullScreen(false);
+  };
+
   toggleFullScreen = () => {
     const isFullScreen = this.isFullScreen();
     if (!isFullScreen) {
-      if (document.documentElement.requestFullscreen) {
-        // chrome & firefox
-        document.documentElement.requestFullscreen();
-      } else if (document.documentElement.webkitRequestFullscreen) {
-        // safari
-        document.documentElement.webkitRequestFullscreen();
-      }
-      this.props.setFullScreen(true);
+      this.switchToFullScreen();
     } else {
-      if (document.exitFullscreen) {
-        // chrome & firefox
-        document.exitFullscreen();
-      } else if (document.webkitExitFullscreen) {
-        // safari
-        document.webkitExitFullscreen();
-      }
-      this.props.setFullScreen(false);
+      this.exitFullScreen();
     }
   };
 
@@ -149,6 +168,7 @@ class Dashboard extends Component {
     document.addEventListener('webkitfullscreenchange', this.onFullScreenChange, false);
     document.addEventListener('mozfullscreenchange', this.onFullScreenChange, false);
     document.addEventListener('click', this.closeDashboardDropdown, true);
+    this.checkIfFullScreenParameterIsHere();
   }
 
   componentDidUpdate(prevProps) {
@@ -204,9 +224,10 @@ class Dashboard extends Component {
         editDashboard={this.editDashboard}
         toggleFullScreen={this.toggleFullScreen}
         fullScreen={props.fullScreen}
+        hideExitFullScreenButton={props.fullscreen === 'force'}
       />
     );
   }
 }
 
-export default connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', {})(Dashboard);
+export default connect('user,fullScreen,currentUrl,httpClient,gatewayAccountExpired', actions)(Dashboard);