➕ Add components

web/src/Class/Query.ts

@@ -0,0 +1,32 @@
+import { InfluxDB, QueryApi } from '@influxdata/influxdb-client';
+
+export class Query {
+  private client!: InfluxDB;
+  private queryApi!: QueryApi;
+
+  constructor() {
+    this.initDatabase();
+  }
+
+  private initDatabase(): void {
+    this.client = new InfluxDB({
+      url: process.env.VUE_APP_DB_URL!,
+      token: process.env.VUE_APP_DB_TOKEN!,
+    });
+    this.queryApi = this.client.getQueryApi(process.env.VUE_APP_DB_ORG!);
+  }
+
+  async query(filter: string) {
+    const query = `from(bucket: "${process.env.VUE_APP_DB_BUCKET}") |> range(start: -1h) |> filter(fn: (r) => r._measurement == "${filter}") |> aggregateWindow(every: 10m, fn: mean)`;
+
+    try {
+      const data = await this.queryApi.collectRows(query);
+      console.log('\nCollect ROWS SUCCESS');
+      return data;
+    } catch (error) {
+      console.error(error);
+      console.log('\nCollect ROWS ERROR');
+      return [{ Error: 'Error occured' }];
+    }
+  }
+}

web/src/components/Footer.vue

@@ -3,14 +3,14 @@
     <div class="content has-text-centered">
       <p>
         <strong>Anciale</strong> by
-        <a href="https://github.com/xrazis">xrazis</a>.
+        <a href="https://github.com/xrazis">xrazis</a>
       </p>
     </div>
   </footer>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 
 export default class Footer extends Vue {}
 </script>

web/src/components/Hero.vue

@@ -5,8 +5,24 @@
         <h1 class="title">
           Welcome to the admin panel for anchiale
         </h1>
-        <h2 class="subtitle">
-          Primary bold subtitle
+        <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>
       </div>
     </div>
@@ -14,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 
 export default class Hero extends Vue {}
 </script>

web/src/components/Navbar.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 
 export default class Navbar extends Vue {}
 </script>

web/src/components/Panel.vue

@@ -1,63 +1,14 @@
 <template>
   <nav class="panel is-primary">
     <p class="panel-heading">
-      Repositories
-    </p>
-    <div class="panel-block">
-      <p class="control has-icons-left">
-        <input class="input" type="text" placeholder="Search" />
-        <span class="icon is-left">
-          <i class="fas fa-search" aria-hidden="true"></i>
-        </span>
-      </p>
-    </div>
-    <p class="panel-tabs">
-      <a class="is-active">All</a>
-      <a>Public</a>
-      <a>Private</a>
-      <a>Sources</a>
-      <a>Forks</a>
+      Devices
     </p>
     <a class="panel-block is-active">
       <span class="panel-icon">
-        <i class="fas fa-book" aria-hidden="true"></i>
+        <i class="fab fa-raspberry-pi" />
       </span>
       bulma
     </a>
-    <a class="panel-block">
-      <span class="panel-icon">
-        <i class="fas fa-book" aria-hidden="true"></i>
-      </span>
-      marksheet
-    </a>
-    <a class="panel-block">
-      <span class="panel-icon">
-        <i class="fas fa-book" aria-hidden="true"></i>
-      </span>
-      minireset.css
-    </a>
-    <a class="panel-block">
-      <span class="panel-icon">
-        <i class="fas fa-book" aria-hidden="true"></i>
-      </span>
-      jgthms.github.io
-    </a>
-    <a class="panel-block">
-      <span class="panel-icon">
-        <i class="fas fa-code-branch" aria-hidden="true"></i>
-      </span>
-      daniellowtw/infboard
-    </a>
-    <a class="panel-block">
-      <span class="panel-icon">
-        <i class="fas fa-code-branch" aria-hidden="true"></i>
-      </span>
-      mojs
-    </a>
-    <label class="panel-block">
-      <input type="checkbox" />
-      remember me
-    </label>
     <div class="panel-block">
       <button class="button is-link is-outlined is-fullwidth">
         Reset all filters
@@ -67,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import { Options, Vue } from 'vue-class-component';
+import { Vue } from 'vue-class-component';
 
 export default class Panel extends Vue {}
 </script>