Merge branch 'feature/improve-rpi-display' into 'master'

Update

See merge request fronk/thetool!388

application/RaspberryDisplay/RaspberryDisplayController.php

@@ -31,9 +31,15 @@ class RaspberryDisplayController extends mfBaseController {
             case "reboot":
                 $return = $this->restartRaspberryPi($this->request->displayID);
                 break;
+            case "rebootAll":
+                $return = $this->restartAllRaspberryPis();
+                break;
             case "getConfig":
                 $return = $this->getConfig();
                 break;
+            case "displayPower":
+                $return = $this->displayPower();
+                break;
             default:
                 $return = false;
                 break;
@@ -95,6 +101,21 @@ class RaspberryDisplayController extends mfBaseController {
         return true;
     }
 
+    protected function restartAllRaspberryPis() {
+        $displays = RaspberryDisplayModel::getAll();
+        $ipAddresses = [];
+        foreach ($displays as $display) {
+            if (in_array($display->ip_address, $ipAddresses)) {
+                continue;
+            }
+            $ipAddresses[] = $display->ip_address;
+            $ssh = new SSH2($display->ip_address, $this->port);
+            $ssh->login($this->username, $this->password);
+            $ssh->exec('sudo reboot now');
+        }
+        return true;
+    }
+
     protected function getConfig() {
         $hostname = $this->request->hostname;
 
@@ -129,5 +150,26 @@ class RaspberryDisplayController extends mfBaseController {
         $this->layout()->setTemplate("VueViews/Vue");
     }
 
+    private function displayPower(): bool
+    {
+        $state = $this->request->state;
+        $displays = RaspberryDisplayModel::getAll();
+        $ipAddresses = [];
+        foreach ($displays as $display) {
+            if (in_array($display->ip_address, $ipAddresses)) {
+                continue;
+            }
+            $ipAddresses[] = $display->ip_address;
+            $ssh = new SSH2($display->ip_address, $this->port);
+            $ssh->login($this->username, $this->password);
+            if ($state === "on") {
+                $ssh->exec('sudo bash /root/on.sh');
+            } else {
+                $ssh->exec('sudo bash /root/off.sh');
+            }
+        }
+        return true;
+    }
+
 
 }

public/js/pages/RaspberryDisplay/RaspberryDisplay.js

@@ -6,14 +6,20 @@ Vue.filter('cleanupURL', function (value) {
 Vue.component('RaspberryDisplay', {
     //language=Vue
     template: `
-      <div>
-        <tt-page-title :title="window['TT_CONFIG']['PAGE_TITLE']" :path="window['TT_CONFIG']['PATH']"></tt-page-title>
-
         <div class="card">
           <tt-loader v-if="loading"></tt-loader>
 
           <div class="p-2">
-            <h3>8322 Studenzen NOC Displays</h3>
+            <div style="display: grid; grid-template-columns: auto auto; justify-items: center;">
+            <h3 style="justify-self: start;">8322 Studenzen NOC Displays</h3>
+              <!-- Add turn on and turn off button here -->
+              <div>
+                <button class="btn btn-primary" @click="fetchDisplays">Refresh</button>
+                <button class="btn btn-warning" @click="rebootRaspberry('all')">Reboot</button>
+                <button class="btn btn-success" @click="displayPower('on')">Turn on</button>
+                <button class="btn btn-danger" @click="displayPower('off')">Turn off</button>
+              </div>
+            </div>
 
             <div class="display-grid">
               <div v-for="display in displays" :key="display.id"
@@ -76,7 +82,6 @@ Vue.component('RaspberryDisplay', {
             </div>
           </div>
       </div>
-      </div>
     `,
 
     data() {
@@ -89,10 +94,22 @@ Vue.component('RaspberryDisplay', {
     }, methods: {
         async rebootRaspberry(displayID) {
             this.loading = true;
+            if (displayID === 'all') {
+                await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=rebootAll`);
+            } else {
                 await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=reboot`, {
                     params: {
                         displayID: displayID
                     }
+                })
+            }
+            this.loading = false;
+        }, async displayPower(state) {
+            this.loading = true;
+            await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=displayPower`, {
+                params: {
+                    state: state
+                }
             });
             this.loading = false;
         }, async fetchDisplays() {
@@ -113,7 +130,9 @@ Vue.component('RaspberryDisplay', {
             });
         }, disableDisplayURLEditMode(displayID, displayURL) {
             this.displaysURLEditMode = null;
+            if (this.displays.find(d => d.id === displayID).display_url !== displayURL) {
                 this.submitChanges(displayID, 'display_url', displayURL);
+            }
         }, async submitChanges(displayID, field, value) {
             this.loading = true;
             await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=change`, {

public/plugins/vue/tt-components/tt-table.js

@@ -144,7 +144,7 @@ Vue.component('tt-table', {
                   (column.filter === 'dateRange' ? 'min-width: 260px;' : '') + 
                   (originalColumnWidths[column.key] ? 'width: ' + originalColumnWidths[column.key] + 'px;' : '')"
             >
-              <div style="text-align:center; white-space: nowrap;word-break: keep-all;"
+              <div style="text-align:center; white-space: nowrap;word-break: keep-all;user-select: none;"
                    :style="{ 'cursor': column.sortable ? 'pointer' : 'default' }"
                    @click="column.sortable ? setOrder(column.key) : undefined">
                 {{ column.text }}
@@ -775,3 +775,18 @@ Vue.component('tt-table', {
         window.removeEventListener('resize', this.debounce(this.handleResponsiveColumns, 100));
     }
 })
+
+Vue.config.errorHandler = function(err, vm, info) {
+    // still log errors to the console
+    console.error(info, err, vm);
+
+    if (typeof vm.config.key === 'string') {
+        // check if document.querySelector table.tt-table exists aswell if it has atleast 3 <tr> elements
+        const table = document.querySelector('table.tt-table');
+        if (!table || !table.querySelectorAll('tr').length > 2) {
+            // localStorage.removeItem(`tt-table-${vm.config.key}`);
+            // window.location.reload();
+        }
+    }
+}
+