From 0fbd8375158ae3e6af04e260bc423ca64f929cc0 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Wed, 18 Nov 2020 17:39:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20axios?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added axios and displaying the active devices to the side panel
---
 web/package-lock.json        | 21 ++++++++++++--
 web/package.json             |  1 +
 web/src/components/Hero.vue  | 20 +-------------
 web/src/components/Panel.vue | 53 +++++++++++++++++++++++++++++++-----
 4 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 7e373e9..1c8614e 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@influxdata/influxdb-client": "^1.8.0",
+        "axios": "^0.21.0",
         "bulma": "^0.9.1",
         "vue": "^3.0.0",
         "vue-class-component": "^8.0.0-0"
@@ -1677,6 +1678,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "dependencies": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "node_modules/babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -5254,7 +5263,6 @@
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
       "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -15855,6 +15863,14 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "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",
@@ -18773,8 +18789,7 @@
     "follow-redirects": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-      "dev": true
+      "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
     },
     "for-in": {
       "version": "1.0.2",
diff --git a/web/package.json b/web/package.json
index 2df5e66..70d2eed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@influxdata/influxdb-client": "^1.8.0",
+    "axios": "^0.21.0",
     "bulma": "^0.9.1",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0"
diff --git a/web/src/components/Hero.vue b/web/src/components/Hero.vue
index aef7487..782c11e 100644
--- a/web/src/components/Hero.vue
+++ b/web/src/components/Hero.vue
@@ -5,25 +5,7 @@
         <h1 class="title">
           Welcome to the admin panel for anchiale
         </h1>
-        <h2 class="subtitle mt-3">
-          <div class="field is-grouped">
-            <p class="control">
-              <button class="button is-primary is-inverted">
-                Get clients
-              </button>
-            </p>
-            <p class="control">
-              <button class="button">
-                Cancel
-              </button>
-            </p>
-            <p class="control">
-              <button class="button is-danger">
-                Delete post
-              </button>
-            </p>
-          </div>
-        </h2>
+        <h2 class="subtitle mt-3"></h2>
       </div>
     </div>
   </section>
diff --git a/web/src/components/Panel.vue b/web/src/components/Panel.vue
index 9981695..df22d2e 100644
--- a/web/src/components/Panel.vue
+++ b/web/src/components/Panel.vue
@@ -3,12 +3,34 @@
     <p class="panel-heading">
       Devices
     </p>
-    <a class="panel-block is-active">
-      <span class="panel-icon">
-        <i class="fab fa-raspberry-pi" />
-      </span>
-      bulma
-    </a>
+    <div class="panel-block">
+      <div class="field is-grouped">
+        <p class="control">
+          <button class="button is-success is-outlined " v-on:click="getClient">
+            Get clients
+          </button>
+        </p>
+        <p class="control">
+          <button class="button">
+            Cancel
+          </button>
+        </p>
+      </div>
+    </div>
+    <div v-if="hasClients">
+      <a class="panel-block " v-for="(client, index) in clients" :key="index">
+        <span class="panel-icon">
+          <i class="fab fa-raspberry-pi" />
+        </span>
+        {{ client }}
+      </a>
+    </div>
+    <div v-else>
+      <span class="panel-block">No clients yet!</span>
+    </div>
+    <div v-if="error">
+      <span class="panel-block">{{ error }}</span>
+    </div>
     <div class="panel-block">
       <button class="button is-link is-outlined is-fullwidth">
         Reset all filters
@@ -19,6 +41,23 @@
 
 <script lang="ts">
 import { Vue } from 'vue-class-component';
+import axios from 'axios';
+
+export default class Panel extends Vue {
+  private error = '';
+  private hasClients = false;
+  private clients: Array<string> = [];
 
-export default class Panel extends Vue {}
+  getClient() {
+    axios
+      .get('http://localhost:3000/devices')
+      .then((response) => {
+        this.hasClients = true;
+        this.clients = response.data;
+      })
+      .catch((error) => {
+        this.error = error.message;
+      });
+  }
+}
 </script>