van fej

.env

@@ -0,0 +1 @@
+VUE_APP_API_LOCATION=https://birb.k8s.kmlabz.com/

package-lock.json

@@ -2661,6 +2661,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5781,8 +5789,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
-      "dev": true
+      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
     },
     "for-in": {
       "version": "1.0.2",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "bootstrap": "^4.5.2",
     "bootstrap-vue": "^2.16.0",
     "core-js": "^3.6.5",

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>

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 
+import axios from 'axios'
+
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
 import 'bootstrap/dist/css/bootstrap.css'
@@ -13,6 +15,44 @@ Vue.use(IconsPlugin)
 
 Vue.config.productionTip = false
 
+Vue.prototype.$api = axios.create({
+  baseURL: process.env.VUE_APP_API_LOCATION
+});
+
+Vue.prototype.$showToast = function (text, type = 'error', local=true) {
+
+  let options = {}
+  switch (type) {
+    case "error":
+      options = {
+        title: "Error!",
+        variant: "danger"
+      }
+      break;
+    case "user_error":
+      options = {
+        title: "Oopsie woopsie",
+        variant: "warning"
+      }
+      break;
+    case "success":
+      options = {
+        title: "Success!",
+        variant: "success"
+      }
+      break;
+  }
+
+  const bvToast = local ? this.$bvToast : this.$root.$bvToast
+
+  bvToast.toast(text, {
+    ...options,
+    toaster: 'b-toaster-top-right',
+    solid: true,
+    appendToast: false
+  })
+}
+
 new Vue({
   router,
   store,