Merge branch 'features/fix-title' of trungnd/iot-web-ui into master

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

@@ -1,5 +1,5 @@
 <div class="map-container">
-  <h2>ATMs Security Monitoring and Control</h2>
+  <h2>Security Monitoring and Control</h2>
   <div class="map-frame">
     <div id="map"></div>
   </div>

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

@@ -11,7 +11,6 @@ import {ICON} from "../../../app.constants";
 })
 export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   private map!: L.Map;
-  private featureGroup!: L.FeatureGroup;
   private statusSubscription?: Subscription;
   private messageSubscription?: Subscription;
   sensorOff = ICON.sensorOff;
@@ -30,29 +29,6 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
     iconSize: [170, 48],
     className: 'hidden-background'
   });
-
-  sensorOffIcon = L.divIcon({
-    html: this.sensorOff,
-    iconSize: [150, 38],
-    className: 'hidden-background'
-  });
-
-  sensorOnIcon = L.divIcon({
-    html: this.sensorOn,
-    iconSize: [150, 38],
-    className: 'hidden-background'
-  });
-  // sensorOffIcon = L.icon({
-  //   iconUrl: '../../../../assets/images/sensor-off.png',
-  //   iconSize:     [38, 38],
-  // });
-
-  // sensorOnIcon = L.icon({
-  //   iconUrl: '../../../../assets/images/sensor-on.png',
-  //   iconSize:     [38, 38],
-  // });
-
-
   state5 = false;
   state6 = false;
 
@@ -94,7 +70,6 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
       }).addTo(this.map);
 
-      this.featureGroup = L.featureGroup().addTo(this.map);
       this.addIconToMap();
     } else {
       console.error('Map container not found');
@@ -133,13 +108,79 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
     this.addIconToMap();
   }
 
-  applyIcon(state1: boolean, state2: boolean, type:any): L.Icon | L.DivIcon {
+
+  applyIcon(state1: boolean, state2: boolean, type:any) {
     if (state1 && state2) {
-     return type==='smoke' ? this.sensorSmokeIcon : this.sensorVibIcon;
+      return type === 'smoke' ? this.sensorSmokeIcon : this.sensorVibIcon;
     }
-    if (state1) {
-      return this.sensorOnIcon;
-    }
-    return this.sensorOffIcon;
+    const isOn = state1;
+    const systemName = type === 'smoke' ? 'Hệ thống báo động 1' : 'Hệ thống báo động 2';
+    const htmlContent = this.createSensorIconHTML(
+      systemName,
+      '120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh',
+      '10.8661° N, 106.8029° E',
+      '01:54, 16/05/2022',
+      isOn
+    );
+    return L.divIcon({
+      html: htmlContent,
+      iconSize: [150, 38],
+      className: 'hidden-background'
+    });
   }
+
+
+  createSensorIconHTML(systemName:any, location:any, coordinates:any, time:any, isOn:any) {
+    const imageUrl = isOn ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png';
+    return `<div style="display: flex; flex-direction: column; align-items: center">
+            <div style="display: flex; flex-direction: row; gap: 5px">
+              <div class="tooltip">
+                <img style="width: 30px; height: 30px;" src="${imageUrl}">
+                <div class="tooltiptext">
+                  <div style="display: flex; flex-direction: row; justify-content: space-between;">
+                    <div style="color: #F33152; padding: 5px 13px; background-color: rgba(243, 49, 82, 0.1); border-radius: 20px; text-align: center; width: 120px;">${systemName}</div>
+                    <a href="/overview/camera-stream">
+                      <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none">
+                        <g stroke="currentColor" stroke-width="2">
+                          <path d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
+                          <path stroke-linejoin="round" d="M20 7l-4 3v4l4 3V7z"/>
+                        </g>
+                      </svg>
+                    </a>
+                  </div>
+                  <div><strong>Địa điểm:</strong> ${location}</div>
+                  <div><strong>Tọa độ:</strong> ${coordinates}</div>
+                  <div><strong>Thời gian:</strong> ${time}</div>
+                  <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>
+                </div>
+              </div>
+              <a href="/overview/camera-stream" target="_blank">
+                <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
+              </a>
+            </div>
+          </div>
+          <style>
+            .tooltip {
+              position: relative;
+              display: inline-block;
+            }
+            .tooltip .tooltiptext {
+              visibility: hidden;
+              width: 300px;
+              padding: 10px;
+              background-color: #fff;
+              color: black;
+              border-radius: 6px;
+              position: absolute;
+              z-index: 1;
+              bottom: 100%;
+              left: 50%;
+              margin-left: -60px;
+            }
+            .tooltip:hover .tooltiptext {
+              visibility: visible;
+            }
+          </style>`;
+  }
+
 }