From e44dfbc169ea8743f5dc71d42a6ab8864dd0fc09 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Wed, 20 May 2020 15:29:49 +0200
Subject: [PATCH] Added fullscreen support in webpanel and dashboard

---
 .../static/css/source/dashboard/index.scss    |  1 +
 .../static/css/source/webpanel/index.scss     |  1 +
 .../backend/http/static/js/application.js     | 33 ++++++++++++-
 platypush/backend/http/static/js/dashboard.js | 47 +------------------
 platypush/backend/http/static/js/utils.js     |  9 ++++
 .../backend/http/templates/js-common.html     |  1 +
 6 files changed, 45 insertions(+), 47 deletions(-)
 create mode 100644 platypush/backend/http/static/js/utils.js

diff --git a/platypush/backend/http/static/css/source/dashboard/index.scss b/platypush/backend/http/static/css/source/dashboard/index.scss
index 0784bcca3..fc0e28b23 100644
--- a/platypush/backend/http/static/css/source/dashboard/index.scss
+++ b/platypush/backend/http/static/css/source/dashboard/index.scss
@@ -27,6 +27,7 @@ body {
 }
 
 main {
+    background: $default-bg;
     display: flex;
     flex-flow: column;
     width: 100%;
diff --git a/platypush/backend/http/static/css/source/webpanel/index.scss b/platypush/backend/http/static/css/source/webpanel/index.scss
index f4784bc29..a1a3e4839 100644
--- a/platypush/backend/http/static/css/source/webpanel/index.scss
+++ b/platypush/backend/http/static/css/source/webpanel/index.scss
@@ -24,6 +24,7 @@ body {
     height: 100%;
 
     main {
+        background: $default-bg;
         margin: 0;
         flex: 1 1 auto;
         overflow: hidden;
diff --git a/platypush/backend/http/static/js/application.js b/platypush/backend/http/static/js/application.js
index cff27088c..be96f0272 100644
--- a/platypush/backend/http/static/js/application.js
+++ b/platypush/backend/http/static/js/application.js
@@ -20,15 +20,46 @@ window.vm = new Vue({
             config: window.config,
             selectedPlugin: undefined,
             now: new Date(),
+            fullscreen: false,
         };
     },
 
+    methods: {
+        enterFullScreen: function() {
+            const self = this;
+            enterFullScreen().then(() => {
+                self.fullscreen = true;
+            });
+        },
+
+        exitFullScreen: function() {
+            const self = this;
+            exitFullscreen().finally(() => {
+                self.fullscreen = false;
+            });
+        },
+
+        toggleFullScreen: function() {
+            if (this.fullscreen) {
+                this.exitFullScreen();
+            } else {
+                this.enterFullScreen();
+            }
+        },
+    },
+
     created: function() {
-        m = window.location.href.match('#([a-zA-Z0-9._]+)$');
+        let m = window.location.href.match('#([a-zA-Z0-9._]+)$');
         if (m) {
             this.selectedPlugin = m[1];
         }
 
+        m = window.location.href.match('[?&]fs=([01])');
+        if (m) {
+            this.fullscreen = !parseInt(m[1]);
+            this.toggleFullScreen();
+        }
+
         const self = this;
         setInterval(() => {
             self.now = new Date();
diff --git a/platypush/backend/http/static/js/dashboard.js b/platypush/backend/http/static/js/dashboard.js
index 1bba3fe07..2bb8857aa 100644
--- a/platypush/backend/http/static/js/dashboard.js
+++ b/platypush/backend/http/static/js/dashboard.js
@@ -24,52 +24,7 @@ window.vm = new Vue({
 
     created: function() {
         initEvents();
+        enterFullScreen();
     },
 });
 
-// $(document).ready(function() {
-//     var onEvent = function(event) {
-//         if (event.args.type == 'platypush.message.event.web.widget.WidgetUpdateEvent') {
-//             var $widget = $('#' + event.args.widget);
-//             delete event.args.widget;
-
-//             for (var key of Object.keys(event.args)) {
-//                 $widget.find('[data-bind=' + key + ']').text(event.args[key]);
-//             }
-//         } else if (event.args.type == 'platypush.message.event.web.DashboardIframeUpdateEvent') {
-//             var url = event.args.url;
-//             var $modal = $('#iframe-modal');
-//             var $iframe = $modal.find('iframe');
-//             $iframe.attr('src', url);
-//             $iframe.prop('width',  event.args.width  || '100%');
-//             $iframe.prop('height', event.args.height || '600');
-
-//             if ('timeout' in event.args) {
-//                 setTimeout(function() {
-//                     $iframe.removeAttr('src');
-//                     $modal.fadeOut();
-//                 }, parseFloat(event.args.timeout) * 1000);
-//             }
-
-//             $modal.fadeIn();
-//         }
-//     };
-
-//     var initDashboard = function() {
-//         if (window.config.dashboard.background_image) {
-//             $('body').css('background-image', 'url(' + window.config.dashboard.background_image + ')');
-//         }
-//     };
-
-//     var initEvents = function() {
-//         registerEventListener(onEvent);
-//     };
-
-//     var init = function() {
-//         initDashboard();
-//         initEvents();
-//     };
-
-//     init();
-// });
-
diff --git a/platypush/backend/http/static/js/utils.js b/platypush/backend/http/static/js/utils.js
new file mode 100644
index 000000000..be42f6a2a
--- /dev/null
+++ b/platypush/backend/http/static/js/utils.js
@@ -0,0 +1,9 @@
+function enterFullScreen() {
+    return document.getElementsByTagName('body')[0].requestFullscreen();
+}
+
+function exitFullScreen() {
+    const self = this;
+    return document.exitFullscreen();
+}
+
diff --git a/platypush/backend/http/templates/js-common.html b/platypush/backend/http/templates/js-common.html
index 1182782f9..b99394d1d 100644
--- a/platypush/backend/http/templates/js-common.html
+++ b/platypush/backend/http/templates/js-common.html
@@ -6,6 +6,7 @@
 
 <script type="text/javascript" src="{{ url_for('static', filename='js/lib/axios.min.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/api.js') }}"></script>
+<script type="text/javascript" src="{{ url_for('static', filename='js/utils.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/events.js') }}"></script>
 <script type="text/javascript" src="{{ url_for('static', filename='js/notifications.js') }}"></script>