➕ Add API routes

client/src/class/ClientSocket.ts

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { exit } from 'process';
 import io from 'socket.io-client';
 
 export class ClientSocket {
@@ -27,12 +28,19 @@ export class ClientSocket {
     this.socket.on('disconnect', (reason: string) => {
       console.log(chalk.red('Lost connection!'));
 
-      if (reason === 'io server disconnect') {
+      if (reason === 'io server disconnect') this.socket.connect();
-        this.socket.connect();
+
+      if (reason === 'io client disconnect') {
+        console.log(chalk.red('Server kicked you out!'));
+        exit(1);
       }
 
       console.log(chalk.yellow('Reconecting...'));
     });
+
+    this.socket.on('closeConn', () => {
+      this.closeConn();
+    });
   }
 
   closeConn(): void {

server/src/class/Socket.ts

@@ -15,6 +15,10 @@ interface packet {
   pointName: string;
 }
 
+interface device {
+  device: string;
+}
+
 export class Socket<T> {
   private io!: server;
 
@@ -27,12 +31,12 @@ export class Socket<T> {
     this.initConn();
   }
 
-  private initSocket(): void {
+  initSocket(): void {
     this.io = require('socket.io')(this.server);
     console.log(chalk.yellow('Initialized Socket...'));
   }
 
-  private initConn(): void {
+  initConn(): void {
     this.io.on('connect', (socket: SocketIO.Socket) => {
       console.log(chalk.green('Client connected!'));
 
@@ -57,7 +61,6 @@ export class Socket<T> {
   get rooms(): Array<String> {
     let roomsArray: Array<String> = [];
     this.io.allSockets().then((msg: any) => {
-      console.log(msg);
       const iterator = msg.entries();
       for (const entry of iterator) {
         roomsArray.push(entry[0]);
@@ -66,9 +69,13 @@ export class Socket<T> {
     return roomsArray;
   }
 
+  removeDevice(deviceToRemove: device): boolean {
+    this.io.to(deviceToRemove.device).emit('closeConn');
+    return true;
+  }
+
   closeSocket(): void {
     console.log(chalk.red('Closing socket...'));
-    this.database.closeWrite();
     this.io.close();
   }
 }

server/src/routes/Routes.ts

@@ -13,11 +13,47 @@ export class Routes {
     this.app.get('/devices', async (req, res) => {
       const data = await this.service.socket.rooms;
       res.header('Content-Type', 'application/json');
-      res.send(JSON.stringify(data));
+      if (data) {
+        res.send(JSON.stringify(data));
+      } else {
+        res.send(JSON.stringify({}));
+      }
+    });
+
+    this.app.post('/devices', (req, res) => {
+      req.on('data', async (data) => {
+        const deviceToRemove = JSON.parse(data);
+        const status = await this.service.socket.removeDevice(deviceToRemove);
+
+        res.header('Content-Type', 'application/json');
+        if (status) {
+          res.send('done');
+        } else {
+          res.send('error');
+        }
+      });
+    });
+  }
+
+  private socket(): void {
+    this.app.post('/socket', (req, res) => {
+      req.on('data', async (data) => {
+        const reset = JSON.parse(data).action;
+        await this.service.socket.closeSocket();
+
+        if (reset === 'reset') {
+          await this.service.socket.initSocket();
+          await this.service.socket.initConn();
+        }
+
+        res.header('Content-Type', 'application/json');
+        res.send('done');
+      });
     });
   }
 
   public routes(): void {
     this.devices();
+    this.socket();
   }
 }

web/.env.template

@@ -1,3 +1,4 @@
+VUE_APP_SERVER_URL=XXXX
 VUE_APP_DB_URL=XXXX
 VUE_APP_DB_TOKEN=XXXX
 VUE_APP_DB_ORG=XXXX

web/src/components/Hero.vue

@@ -3,7 +3,10 @@
     <div class="hero-body">
       <div class="container">
         <h1 class="title">
-          Anchiale
+          <span class="icon">
+            <i class="fas fa-stream"></i>
+          </span>
+          <span> Anchiale </span>
         </h1>
         <h2 class="subtitle mt-3">
           Scalable IoT solution for temperature sampling with raspberry-pi

web/src/components/Panel.vue

@@ -7,34 +7,41 @@
       <div class="field is-grouped">
         <p class="control">
           <button class="button is-success is-outlined " v-on:click="getClient">
-            Get clients
+            Fetch clients
           </button>
         </p>
         <p class="control">
-          <button class="button">
+          <button class="button is-outlined" v-on:click="clearClient">
-            Cancel
+            Clear
+          </button>
+        </p>
+        <p class="control">
+          <button class="button is-danger is-outlined" v-on:click="resetSocket">
+            Close server socket
           </button>
         </p>
       </div>
     </div>
     <div v-if="hasClients">
-      <a class="panel-block " v-for="(client, index) in clients" :key="index">
+      <div class="mx-4 py-2" v-for="(client, index) in clients" :key="index">
-        <span class="panel-icon">
+        <nav class="level">
-          <i class="fab fa-raspberry-pi" />
+          <div class="level-left">
-        </span>
+            <span class="icon is-medium">
-        {{ client }}
+              <i class="fab fa-raspberry-pi" />
-      </a>
+            </span>
-    </div>
+            _id: {{ client }}
-    <div v-else>
+          </div>
-      <span class="panel-block">No clients yet!</span>
+          <div class="level-right">
+            <a class="delete" v-on:Click="deleteClient(index)"></a>
+          </div>
+        </nav>
+      </div>
     </div>
-    <div v-if="error">
+    <div v-else-if="error">
       <span class="panel-block">{{ error }}</span>
     </div>
-    <div class="panel-block">
+    <div v-else>
-      <button class="button is-link is-outlined is-fullwidth">
+      <span class="panel-block">No clients yet, try fetching!</span>
-        Reset all filters
-      </button>
     </div>
   </nav>
 </template>
@@ -50,7 +57,7 @@ export default class Panel extends Vue {
 
   getClient() {
     axios
-      .get('http://localhost:3000/devices')
+      .get(`${process.env.VUE_APP_SERVER_URL}/devices`)
       .then((response) => {
         this.hasClients = true;
         this.clients = response.data;
@@ -59,5 +66,37 @@ export default class Panel extends Vue {
         this.error = error.message;
       });
   }
+
+  clearClient() {
+    this.hasClients = false;
+  }
+
+  deleteClient(key: number) {
+    axios
+      .post(`${process.env.VUE_APP_SERVER_URL}/devices`, {
+        device: this.clients[key],
+      })
+      .then((res) => {
+        if (res.data === 'done') {
+          this.getClient();
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  resetSocket() {
+    axios
+      .post(`${process.env.VUE_APP_SERVER_URL}/socket`, {
+        action: 'close',
+      })
+      .then((res) => {
+        this.hasClients = false;
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
 }
 </script>