➕ Add placeholder Chart and functional table

web/src/App.vue

@@ -2,12 +2,22 @@
   <div>
     <Navbar />
     <Hero />
-    <div class="columns mt-6 mb-6 mx-4">
+    <div class="section">
-      <div class="column is-one-fifth mx-2">
+      <div class="notification is-primary is-light">
+        Welcome to Anchiale's Dashboard! On the <b>Devices</b> tab you can see
+        all the clients that are curently connected to the server. On the
+        <b>Points</b> tab you can display the points writen withing the last
+        hour to the database. Try fetching first and then display them on a
+        chart or a table! Keep in mind that the API may take some time to
+        respond, so be patient when fetching.
+      </div>
+    </div>
+    <div class="columns mb-6 mx-4">
+      <div class="column is-two-fifths mx-2">
         <Devices />
       </div>
       <div class="column mx-2">
-        <Chart />
+        <Points />
       </div>
     </div>
     <Footer />
@@ -19,7 +29,7 @@ import { Options, Vue } from 'vue-class-component';
 import Navbar from '@/components/Navbar.vue';
 import Hero from '@/components/Hero.vue';
 import Devices from '@/components/Devices.vue';
-import Chart from '@/components/Chart.vue';
+import Points from '@/components/Points.vue';
 import Footer from '@/components/Footer.vue';
 
 @Options({
@@ -27,7 +37,7 @@ import Footer from '@/components/Footer.vue';
     Navbar,
     Hero,
     Devices,
-    Chart,
+    Points,
     Footer,
   },
 })

web/src/components/Chart.vue

@@ -1,68 +0,0 @@
-<template>
-  <nav class="panel is-primary">
-    <p class="panel-heading">
-      Table
-    </p>
-    <div class="panel-block">
-      <div class="field is-grouped">
-        <p class="control">
-          <button class="button is-success is-outlined " v-on:click="getData">
-            Fetch Data
-          </button>
-        </p>
-        <p class="control">
-          <button class="button is-outlined" v-on:click="clearData">
-            Clear
-          </button>
-        </p>
-      </div>
-    </div>
-    <div v-if="hasPoint">
-      <div class="mx-4 py-2" v-for="(point, index) in points" :key="index">
-        {{ point }}
-      </div>
-    </div>
-    <div v-else-if="error">
-      <span class="panel-block">{{ error }}</span>
-    </div>
-    <div v-else>
-      <span class="panel-block">No data yet, try fetching!</span>
-    </div>
-  </nav>
-</template>
-
-<script lang="ts">
-import { Vue } from 'vue-class-component';
-import axios from 'axios';
-
-export default class Chart extends Vue {
-  private error = '';
-  private hasPoint = false;
-  private points = [];
-
-  getData() {
-    axios
-      .get(`${process.env.VUE_APP_SERVER_URL}/measurements`)
-      .then((response) => {
-        this.hasPoint = true;
-        this.points = response.data;
-      })
-      .catch((error) => {
-        this.error = error.message;
-      });
-  }
-
-  clearData() {
-    this.hasPoint = false;
-  }
-
-  createChart(chartId, chartData) {
-    const ctx = document.getElementById(chartId);
-    const myChart = new Chart(ctx, {
-      type: chartData.type,
-      data: chartData.data,
-      options: chartData.options,
-    });
-  }
-}
-</script>

web/src/components/Devices.vue

@@ -24,7 +24,7 @@
             <span class="icon is-medium">
               <i class="fab fa-raspberry-pi" />
             </span>
-            _id: {{ client }}
+            <p class="is-family-monospace">{{ client }}</p>
           </div>
           <div class="level-right">
             <a class="delete" v-on:Click="deleteClient(index)"></a>

web/src/components/Points.vue

@@ -0,0 +1,182 @@
+<template>
+  <nav class="panel is-primary">
+    <p class="panel-heading">
+      Points
+    </p>
+    <div class="panel-block">
+      <div class="field is-grouped">
+        <p class="control">
+          <button class="button is-success is-outlined" v-on:click="getData">
+            Fetch Data
+          </button>
+        </p>
+        <p class="control">
+          <button
+            class="button is-success is-outlined"
+            v-on:click="createChart"
+          >
+            Create Chart
+          </button>
+        </p>
+        <p class="control">
+          <button
+            class="button is-success is-outlined"
+            v-on:click="createTable"
+          >
+            Create Table
+          </button>
+        </p>
+        <p class="control">
+          <button class="button is-outlined" v-on:click="clearData">
+            Clear
+          </button>
+        </p>
+      </div>
+    </div>
+    <div v-if="isChart">
+      <canvas id="chart"></canvas>
+    </div>
+    <div v-if="isTable">
+      <table
+        class="table 
+        table is-striped
+        table is-hoverable
+        has-text-left
+        table is-fullwidth"
+      >
+        <thead>
+          <tr>
+            <th><abbr title="Device">Device id</abbr></th>
+            <th><abbr title="Time">Time</abbr></th>
+            <th><abbr title="Temp">Measurement</abbr></th>
+          </tr>
+        </thead>
+        <tr v-for="(point, index) in points" :key="index">
+          <td class="is-family-monospace">{{ point.client }}</td>
+          <td>{{ new Date(point.time).toLocaleString() }}</td>
+          <td>{{ point.value }}°C</td>
+        </tr>
+      </table>
+    </div>
+    <div v-else-if="hasData">
+      <span class="panel-block"
+        >Fetched data, try creating a chart or table!</span
+      >
+    </div>
+    <div v-else-if="error">
+      <span class="panel-block">{{ error }}</span>
+    </div>
+    <div v-else>
+      <span class="panel-block">No data yet, try fetching!</span>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import axios from 'axios';
+import Chart from 'chart.js';
+import ChartFormat from '../class/ChartFormat';
+
+export default class Points extends Vue {
+  private error = '';
+  private isChart = false;
+  private isTable = false;
+  private hasData = false;
+  private points = [];
+  private formatedPoints = [];
+  private clients: Array<string> = [];
+
+  getData() {
+    axios
+      .get(`${process.env.VUE_APP_SERVER_URL}/measurements`)
+      .then((response) => {
+        this.hasData = true;
+        this.points = response.data;
+      })
+      .catch((error) => {
+        this.error = error.message;
+      });
+  }
+
+  clearData() {
+    this.isChart = false;
+    this.isTable = false;
+  }
+
+  getClient() {
+    axios
+      .get(`${process.env.VUE_APP_SERVER_URL}/devices`)
+      .then((response) => {
+        this.clients = response.data;
+      })
+      .catch((error) => {
+        this.error = error.message;
+      });
+  }
+
+  createChart() {
+    const formatedData = new ChartFormat(this.points);
+    this.isTable = false;
+    this.isChart = true;
+    const ctx = document.getElementById('chart') as HTMLCanvasElement;
+    const myChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: [
+          '-60m',
+          '-55m',
+          '-50m',
+          '-45m',
+          '-40m',
+          '-35m',
+          '-30m',
+          '-25m',
+          '-20m',
+          '-15m',
+          '-10m',
+          '-5m',
+        ],
+        datasets: [
+          {
+            // one line graph
+            label: 'Number of Moons',
+            data: [0, 0, 1, 2, 37, 42, 27, 14, null, 10, 10, 55],
+
+            borderColor: [
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+              '#36495d',
+            ],
+            borderWidth: 3,
+          },
+        ],
+      },
+      options: {
+        responsive: true,
+        scales: {
+          yAxes: [
+            {
+              ticks: {
+                beginAtZero: true,
+                padding: 5,
+                max: 60,
+              },
+            },
+          ],
+        },
+      },
+    });
+  }
+
+  createTable() {
+    this.isChart = false;
+    this.isTable = true;
+  }
+}
+</script>

web/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "es6",
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",
@@ -12,20 +12,11 @@
     "allowSyntheticDefaultImports": true,
     "sourceMap": true,
     "baseUrl": ".",
-    "types": [
+    "types": ["webpack-env"],
-      "webpack-env"
-    ],
     "paths": {
-      "@/*": [
+      "@/*": ["src/*"]
-        "src/*"
-      ]
     },
-    "lib": [
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
   },
   "include": [
     "src/**/*.ts",
@@ -34,7 +25,5 @@
     "tests/**/*.ts",
     "tests/**/*.tsx"
   ],
-  "exclude": [
+  "exclude": ["node_modules"]
-    "node_modules"
-  ]
 }