van fej

src/components/GlobalDeviceBuzgerator.vue

@@ -1,23 +1,49 @@
 <template>
-  <b-overlay :show="false" rounded="sm">
+  <b-overlay :show="actionPending" rounded="sm">
     <b-card
         title="All devices"
-        tag="all-devices"
         class="m-2"
     >
       <b-card-text>
         Control all devices
       </b-card-text>
 
-      <b-button variant="success" class="mr-1">Bring online</b-button>
-      <b-button variant="danger" class="mr-1">Bring offline</b-button>
+      <b-button @click="allOnline" variant="success" class="mr-1 mt-1">Bring online</b-button>
+      <b-button @click="allOffline" variant="danger" class="mr-1 mt-1">Bring offline</b-button>
     </b-card>
   </b-overlay>
 </template>
 
 <script>
 export default {
-  name: "GlobalDeviceBuzgerator"
+  name: "GlobalDeviceBuzgerator",
+  data() {
+    return {
+      actionPending: false
+    }
+  },
+  methods: {
+    performPostAndEverything(url) {
+      this.actionPending = true
+      this.$api.post(url).then(() => this.actionPending = false).catch((error) => {
+        if (!error.response) {
+          // network error happened
+          this.$showToast("Some network error happened.\nCheck logs!")
+        } else {
+          // server returned bruh moment
+          this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
+        }
+
+        this.actionPending = false
+      });
+    },
+    allOnline() {
+      this.performPostAndEverything("/devices/online")
+    },
+    allOffline() {
+      this.performPostAndEverything("/devices/offline")
+    }
+  }
 }
 </script>
 

src/components/SingleDeviceBuzgerator.vue

@@ -8,9 +8,9 @@
         Could not read device data!
       </b-card-text>
 
-      <b-button variant="success" class="mr-1">Bring online</b-button>
-      <b-button variant="danger" class="mr-1">Bring offline</b-button>
-      <b-button variant="warning" class="mr-1">Manual alert</b-button>
+      <b-button @click="bringOnline" variant="success" class="mr-1 mt-1">Bring online</b-button>
+      <b-button @click="bringOffline" variant="danger" class="mr-1 mt-1">Bring offline</b-button>
+      <b-button @click="doManualAlert" variant="warning" class="mr-1 mt-1">Manual alert</b-button>
     </b-card>
   </b-overlay>
 </template>
@@ -23,10 +23,40 @@ export default {
       type: String
     }
   },
+  data() {
+    return {
+      actionPending: false
+    }
+  },
   computed: {
     cardTitle() {
       return `Device: ${this.device_id}`
     }
+  },
+  methods: {
+    performPostAndEverything(url) {
+      this.actionPending = true
+      this.$api.post(url).then(() => this.actionPending = false).catch((error) => {
+        if (!error.response) {
+          // network error happened
+          this.$showToast("Some network error happened.\nCheck logs!")
+        } else {
+          // server returned bruh moment
+          this.$showToast(`The server returned error: ${error.response.status} ${error.response.statusText}\n${error.response.data}`)
+        }
+
+        this.actionPending = false
+      });
+    },
+    bringOffline() {
+      this.performPostAndEverything(`/devices/${this.device_id}/offline`)
+    },
+    bringOnline() {
+      this.performPostAndEverything(`/devices/${this.device_id}/online`)
+    },
+    doManualAlert() {
+      this.performPostAndEverything(`/devices/${this.device_id}/alert`)
+    }
   }
 }
 </script>