Merge branch 'features/custom-map' of trungnd/iot-web-ui into master

angular.json

@@ -31,7 +31,8 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": [],
             "allowedCommonJsDependencies": [
@@ -98,7 +99,8 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css"
             ],
             "scripts": []
           }

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "ng serve -o",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"

src/app/app.component.ts

@@ -1,10 +1,16 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {SocketService} from "./shared/services/socket.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
   title = 'Iot-web-ui';
+  constructor(private socketService$: SocketService) {
+  }
+  ngOnInit() {
+    this.socketService$.connect();
+  }
 }

src/app/modules/overview/map/map.component.ts

@@ -1,12 +1,14 @@
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import {AfterViewInit, Component, OnDestroy, OnInit} from '@angular/core';
 import * as L from 'leaflet';
+import {Subscription} from "rxjs";
+import {SocketService} from "../../../shared/services/socket.service";
 
 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss']
 })
-export class MapComponent implements OnInit, AfterViewInit {
+export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   private map: any;
    houseIcon = L.icon({
      iconUrl: '../../../../assets/images/icon.png',
@@ -17,9 +19,64 @@ export class MapComponent implements OnInit, AfterViewInit {
      iconUrl: '../../../../assets/images/fire.gif',
      iconSize:     [38, 48],
    })
-  constructor() { }
+  sensorOnIcon = L.divIcon({
+    className: '',
+     html:'<div style="width: 30px; height: 30px; position: absolute; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(#ff0000, #C70039);">'+
+     '  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite;"></div>'+
+     '  <div style="position: absolute !important; width: 100%; height: 100%; background: #ff0000; border-radius: 50%; z-index: 1; animation: sensor-on 2s ease-out infinite; animation-delay: 1s;"></div>'+
+     '  <img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">'+
+     '</div>'+
+     '<style>'+
+     '@keyframes sensor-on {'+
+     '  100% {'+
+     '    transform: scale(2);'+
+     '    opacity: 0;'+
+     '  }'+
+     '}'+
+     '</style>',
+      iconSize: [38, 48]
+  });
+
+  sensorOffIcon = L.icon({
+    iconUrl: '../../../../assets/images/sensor-off.png',
+    iconSize:     [38, 38],
+  })
+
+  state5 = false;
+  state6 = false;
+
+  private statusSubscription?: Subscription;
+  private messageSubscription?: Subscription;
+
+  constructor(private socketService$: SocketService) {}
+
 
   ngOnInit() {
+    this.statusSubscription = this.socketService$.status$.subscribe(isConnected => {
+      if (isConnected) {
+        this.messageSubscription =  this.socketService$.messages$.subscribe(message => {
+          this.onMessage(message);
+        });
+      }
+    });
+  }
+  ngOnDestroy(): void {
+    if (this.statusSubscription) {
+      this.statusSubscription.unsubscribe();
+    }
+    if (this.messageSubscription) {
+      this.messageSubscription.unsubscribe();
+    }
+
+    this.socketService$.close();
+  }
+
+  onMessage(message: any) {
+    if (message.id == '0' && message.type === 'get') {
+      this.state5 = message.state5 === '1';
+      this.state6 = message.state6 === '1' ;
+      this.updateIcons();
+    }
   }
 
   ngAfterViewInit(): void {
@@ -41,11 +98,18 @@ export class MapComponent implements OnInit, AfterViewInit {
       });
 
       tiles.addTo(this.map);
-      //add marker
-      let popupContent = `<div>Vinhome quận 9</div>
+      this.addIconToMap()
+    } else {
+      console.error('Map container not found');
+    }
+  }
+
+  addIconToMap() {
+    //add marker
+    let popupContent = `<div>Vinhome quận 9</div>
                                 <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`;
 
-      let fireContent =   `<div style="color: #F33152;
+    let fireContent =   `<div style="color: #F33152;
                                               padding: 2px 13px;
                                               background-color: rgba(243, 49, 82, 0.1);
                                               border-radius: 20px;
@@ -59,14 +123,21 @@ export class MapComponent implements OnInit, AfterViewInit {
                                     <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
 
                                  <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`
-      L.marker([10.8356, 106.8300], {icon: this.houseIcon})
-                                 .addTo(this.map)
-                                  .bindPopup(popupContent);
-      L.marker([10.8661, 106.8029], {icon: this.fireIcon})
-        .addTo(this.map)
-        .bindPopup(fireContent);
-    } else {
-      console.error('Map container not found');
-    }
+    L.marker([10.8356, 106.8300], {icon: this.state5 ? this.sensorOnIcon : this.sensorOffIcon})
+      .addTo(this.map)
+      .bindPopup(popupContent);
+    L.marker([10.8661, 106.8029], {icon: this.state6 ? this.sensorOnIcon : this.sensorOffIcon})
+      .addTo(this.map)
+      .bindPopup(fireContent);
+  }
+
+  updateIcons(): void {
+    this.map.eachLayer((layer:any) => {
+      if (layer instanceof L.Marker) {
+        this.map.removeLayer(layer);
+      }
+    });
+
+    this.addIconToMap();
   }
 }

src/index.html

@@ -9,7 +9,6 @@
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
   <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
 </head>
 <body class="mat-typography">