change text

src/app/app.constants.ts

@@ -35,7 +35,6 @@ export const ICON = {
                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                 </a>
               </div>
-              <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>
             </div>
             <style>
             .tooltip {
@@ -96,7 +95,7 @@ export const ICON = {
                   <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
                 </a>
               </div>
-              <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>
+<!--              <div style="font-size: 11px"><b>ALARM: SMOKE ALERT</b></div>-->
             </div>
             <style>
             .tooltip {
@@ -160,7 +159,80 @@ export const ICON = {
             <div><strong>Thời gian:</strong> 01:54, 16/05/2022</div>
             <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`,
 
-  sensorActiveBK: `
+  sensorActiveSmoke: `
+            <div style="display: flex;
+                flex-direction: column;
+                align-items: center">
+              <div style="display: flex; flex-direction: row;  gap: 39px;width: 100%; justify-content: center;">
+                <div class="tooltip">
+                 <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>
+
+                  <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: 100px;">Sự cố cháy</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> 120 Xa Lộ Hà Nội, Thành Phố, Thủ Đức, Thành phố Hồ Chí Minh</div>
+                        <div><strong>Tọa độ:</strong> 10.8661° N, 106.8029° E</div>
+                        <div><strong>Thời gian:</strong> 01:54, 16/05/2022</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="background: #F11E1E; color: #FFF; padding: 2px 3px; font-size: 11px"><b>ALARM: SMOKE ALERT</b></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;
+              }
+               @keyframes sensor-on {
+                    100% {
+                      transform: scale(2);
+                      opacity: 0;
+                    }
+                  }
+          </style>`,
+  sensorActiveVib: `
             <div style="display: flex;
                 flex-direction: column;
                 align-items: center">

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

@@ -16,10 +16,17 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
   private messageSubscription?: Subscription;
   sensorOff = ICON.sensorOff;
   sensorOn = ICON.sensorOn;
-  sensorActive = ICON.sensorActiveBK;
+  sensorSmoke = ICON.sensorActiveSmoke;
+  sensorVib =  ICON.sensorActiveVib;
 
-  sensorActiveIcon = L.divIcon({
-    html: this.sensorActive,
+  sensorSmokeIcon = L.divIcon({
+    html: this.sensorSmoke,
+    iconSize: [170, 48],
+    className: 'hidden-background'
+  });
+
+  sensorVibIcon = L.divIcon({
+    html: this.sensorVib,
     iconSize: [170, 48],
     className: 'hidden-background'
   });
@@ -106,10 +113,10 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
 
     const fireContent = ICON.fireContent;
 
-    L.marker([10.8356, 106.8300], {icon: this.applyIcon(this.state5, this.state6)})
+    L.marker([10.8356, 106.8300], {icon: this.applyIcon(this.state5, this.state6, 'smoke')})
       .addTo(this.map)
 
-    L.marker([10.8661, 106.8029], {icon: this.applyIcon(this.state5, this.state6)})
+    L.marker([10.8661, 106.8029], {icon: this.applyIcon(this.state5, this.state6, 'vib')})
       .addTo(this.map)
 
   }
@@ -124,9 +131,9 @@ export class MapComponent implements OnInit, AfterViewInit, OnDestroy {
     this.addIconToMap();
   }
 
-  applyIcon(state1: boolean, state2: boolean): L.Icon | L.DivIcon {
+  applyIcon(state1: boolean, state2: boolean, type:any): L.Icon | L.DivIcon {
     if (state1 && state2) {
-      return this.sensorActiveIcon;
+     return type==='smoke' ? this.sensorSmokeIcon : this.sensorVibIcon;
     }
     if (state1) {
       return this.sensorOnIcon;

src/app/modules/overview/overall-ground/overall-ground.component.html

@@ -1,4 +1,4 @@
-<div class="p-3" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
+<div class="px-3 py-5" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
   <div fxFlex="50" class="map-image">
     <div class="card-state">
       <img src="assets/images/ground.png">
@@ -6,40 +6,36 @@
       <div class="state t1" id="State1">
         <div>
           <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div class="alarm-text alarm-text-off">ALARM: SMOKE ALERT</div>
       </div>
 
       <div class="state t2" id="State2">
         <div>
           <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div  class="alarm-text alarm-text-off">ALARM: SMOKE ALERT</div>
       </div>
 
       <div class="state t3" id="State3">
         <div>
           <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div  class="alarm-text alarm-text-off">ALARM: SMOKE ALERT</div>
       </div>
       <div class="state t4" id="State4">
         <div>
           <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div class="alarm-text alarm-text-off" >ALARM: SMOKE ALERT</div>
       </div>
       <div class="state t5" id="State5" >
         <div>
@@ -47,13 +43,15 @@
                           'sensor-off':  !(Sstate1 && Sstate2)}">
             <img [src]="getImageSource()"  style="width: 30px; height: 30px">
           </div>
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2,
-                         'alarm-text-off':  !(Sstate1 && Sstate2)}">{{title}}</div>
+        <ng-template [ngIf]="Sstate1 && Sstate2">
+          <div class="alarm-text"
+               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
+        </ng-template>
+
       </div>
       <div class="state t6 " id="State6">
         <div>
@@ -61,13 +59,15 @@
                           'sensor-off': !(Sstate1 && Sstate2)}">
             <img [src]="getImageSource()"  style="width: 30px; height: 30px">
           </div>
-          <a href="/overview/camera-stream">
+          <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <div class="alarm-text"
-             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2,
-                         'alarm-text-off':  !(Sstate1 && Sstate2)}">{{title}}</div>
+        <ng-template [ngIf]="Sstate1 && Sstate2">
+          <div class="alarm-text"
+               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
+        </ng-template>
+
     </div>
 
 <!--      <div *ngFor="let state of states; let i = index"-->
@@ -82,6 +82,5 @@
     <button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button>
     <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'TURN OFF WARNING' : 'TURN ON WARNING'}}</button>
     <button mat-stroked-button color="primary" [routerLink]="'/overview/camera-stream'" target="_blank"> LIVE CAMERA </button>
-
   </div>
 </div>

src/app/modules/overview/overall-ground/overall-ground.component.scss

@@ -183,7 +183,9 @@ p {
 .alarm-text{
   font-size: 10px;
   padding: 2px 4px;
-  width: 70px;
+  width: 100px;
+  margin-top: 10px;
+  margin-left: -22px;
   border-radius: 2px;
   &-off {
     background: #bfe9f4;