Update

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"
@@ -75,7 +81,6 @@ Vue.component('RaspberryDisplay', {
               </div>
             </div>
           </div>
-        </div>
       </div>
     `,
 
@@ -89,9 +94,21 @@ Vue.component('RaspberryDisplay', {
     }, methods: {
         async rebootRaspberry(displayID) {
             this.loading = true;
-            await axios.get(`${window['TT_CONFIG']["BASE_URL"]}/api?do=reboot`, {
+            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: {
-                    displayID: displayID
+                    state: state
                 }
             });
             this.loading = false;
@@ -113,7 +130,9 @@ Vue.component('RaspberryDisplay', {
             });
         }, disableDisplayURLEditMode(displayID, displayURL) {
             this.displaysURLEditMode = null;
-            this.submitChanges(displayID, 'display_url', displayURL);
+            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`, {