add title and tooltip

src/app/app.constants.ts

@@ -14,7 +14,7 @@ export const ICON = {
                                                   background-color: rgba(243, 49, 82, 0.1);
                                                   border-radius: 20px;
                                                   text-align: center;
-                                                  width: 100px;">Sự cố cháy</div>
+                                                  width: 120px;">Hệ thống báo động 2</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">
@@ -74,7 +74,7 @@ export const ICON = {
                                                   background-color: rgba(243, 49, 82, 0.1);
                                                   border-radius: 20px;
                                                   text-align: center;
-                                                  width: 100px;">Sự cố cháy</div>
+                                                  width: 120px;">Hệ thống báo động 2</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">
@@ -180,8 +180,8 @@ export const ICON = {
                                                   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">
+                                                  width: 120px;">Hệ thống báo động 1</div>
+                          <a href="/overview/camera-stream" target="_blank">
                             <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"/>
@@ -253,8 +253,8 @@ export const ICON = {
                                                   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">
+                                                  width: 120px;">Hệ thống báo động 2</div>
+                          <a href="/overview/camera-stream" target="_blank">
                             <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"/>

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

@@ -5,7 +5,7 @@
 
       <div class="state t1" id="State1">
         <div>
-          <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+          <img [src]="getImageSource()" style="width: 30px; height: 30px">
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
@@ -14,7 +14,7 @@
 
       <div class="state t2" id="State2">
         <div>
-          <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+          <img [src]="getImageSource()" style="width: 30px; height: 30px">
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
@@ -23,7 +23,7 @@
 
       <div class="state t3" id="State3">
         <div>
-          <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+          <img [src]="getImageSource()" style="width: 30px; height: 30px">
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
@@ -31,13 +31,13 @@
       </div>
       <div class="state t4" id="State4">
         <div>
-          <img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
+          <img [src]="getImageSource()" style="width: 30px; height: 30px">
           <a href="/overview/camera-stream" target="_blank">
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
       </div>
-      <div class="state t5" id="State5" >
+      <div class="state t5 tooltip" id="State5" >
         <div>
           <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
                           'sensor-off':  !(Sstate1 && Sstate2)}">
@@ -47,13 +47,36 @@
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template *ngIf="Sstate1 && Sstate2">
-          <div class="alarm-text"
-               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
-        </ng-template>
+
+        <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
+        <div class="tooltiptext">
+          <div style="display: flex;
+                      flex-direction: row;
+                      justify-content: space-between;
+                      margin-bottom: 5px">
+            <div style="color: #F33152;
+                        padding: 5px 13px;
+                        background-color: rgba(243, 49, 82, 0.1);
+                        border-radius: 20px;
+                        text-align: center;
+                        width: 120px;">Hệ thống báo động 2</div>
+            <a href="/overview/camera-stream" target="_blank">
+              <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, 01/06/2024</div>
+        </div>
 
       </div>
-      <div class="state t6 " id="State6">
+      <div class="state t6 tooltip" id="State6">
         <div>
           <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
                           'sensor-off': !(Sstate1 && Sstate2)}">
@@ -63,11 +86,32 @@
             <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
           </a>
         </div>
-        <ng-template *ngIf="Sstate1 && Sstate2">
-          <div class="alarm-text"
-               [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
-        </ng-template>
-
+        <div *ngIf="Sstate1 && Sstate2" class="alarm-text"
+             [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
+        <div class="tooltiptext">
+          <div style="display: flex;
+                      flex-direction: row;
+                      justify-content: space-between;
+                      margin-bottom: 5px">
+            <div style="color: #F33152;
+                        padding: 5px 13px;
+                        background-color: rgba(243, 49, 82, 0.1);
+                        border-radius: 20px;
+                        text-align: center;
+                        width: 120px;">Hệ thống báo động 1</div>
+            <a href="/overview/camera-stream" target="_blank">
+              <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, 01/06/2024</div>
+        </div>
     </div>
 
 <!--      <div *ngFor="let state of states; let i = index"-->

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

@@ -197,3 +197,29 @@ p {
   }
 
 }
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+.tooltip .tooltiptext {
+  text-align: start;
+  font-size: 10px;
+  visibility: hidden;
+  width: 300px;
+  padding: 10px;
+  background-color: #eee;
+  color: black;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 1;
+  bottom: 100%;
+  left: -50%;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  cursor: pointer;
+}
+a{
+  color: blue;
+}