trungnd
/
iot-web-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 3 Releases 0 Wiki Activity
Labels Milestones
New Pull Request

#7 add title and tooltip

Merged
trungnd merged 2 commits from features/fix-title into master 1 year ago
Conversation 0 Commits 2 Files Changed 3
3 changed files with 91 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View Show Diff Stats
  1. +6
    -6
      src/app/app.constants.ts
  2. +59
    -14
      src/app/modules/overview/overall-ground/overall-ground.component.html
  3. +26
    -0
      src/app/modules/overview/overall-ground/overall-ground.component.scss

+ 6
- 6
src/app/app.constants.ts View File

background-color: rgba(243, 49, 82, 0.1); background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px; border-radius: 20px;
text-align: center; 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"> <a href="/overview/camera-stream">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"> <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"> <g stroke="currentColor" stroke-width="2">
background-color: rgba(243, 49, 82, 0.1); background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px; border-radius: 20px;
text-align: center; 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"> <a href="/overview/camera-stream">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="none"> <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"> <g stroke="currentColor" stroke-width="2">
background-color: rgba(243, 49, 82, 0.1); background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px; border-radius: 20px;
text-align: center; 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"> <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"> <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 d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>
background-color: rgba(243, 49, 82, 0.1); background-color: rgba(243, 49, 82, 0.1);
border-radius: 20px; border-radius: 20px;
text-align: center; 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"> <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"> <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 d="M16 16V8a1 1 0 00-1-1H5a1 1 0 00-1 1v8a1 1 0 001 1h10a1 1 0 001-1z"/>

+ 59
- 14
src/app/modules/overview/overall-ground/overall-ground.component.html View File



<div class="state t1" id="State1"> <div class="state t1" id="State1">
<div> <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"> <a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>


<div class="state t2" id="State2"> <div class="state t2" id="State2">
<div> <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"> <a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>


<div class="state t3" id="State3"> <div class="state t3" id="State3">
<div> <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"> <a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>
</div> </div>
<div class="state t4" id="State4"> <div class="state t4" id="State4">
<div> <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"> <a href="/overview/camera-stream" target="_blank">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>
</div> </div>
</div> </div>
<div class="state t5" id="State5" >
<div class="state t5 tooltip" id="State5" >
<div> <div>
<div [ngClass]="{'sensor-on': Sstate1 && Sstate2, <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
'sensor-off': !(Sstate1 && Sstate2)}"> 'sensor-off': !(Sstate1 && Sstate2)}">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>
</div> </div>
<ng-template *ngIf="Sstate1 && Sstate2">
<div class="alarm-text"
<div *ngIf="Sstate1 && Sstate2" class="alarm-text"
[ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div> [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>VIBRATION ALERT</div>
</ng-template>
<!-- <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>
<div class="state t6 " id="State6">
<div class="state t6 tooltip" id="State6">
<div> <div>
<div [ngClass]="{'sensor-on': Sstate1 && Sstate2, <div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
'sensor-off': !(Sstate1 && Sstate2)}"> 'sensor-off': !(Sstate1 && Sstate2)}">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png"> <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</a> </a>
</div> </div>
<ng-template *ngIf="Sstate1 && Sstate2">
<div class="alarm-text"
<div *ngIf="Sstate1 && Sstate2" class="alarm-text"
[ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div> [ngClass]="{'alarm-text-on': Sstate1 && Sstate2 }">ALARM: <br>SMOKE ALERT</div>
</ng-template>

<!-- <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>


<!-- <div *ngFor="let state of states; let i = index"--> <!-- <div *ngFor="let state of states; let i = index"-->
<div fxFlex="30" fxLayout="column" fxLayoutGap="50px"> <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
<button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button> <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 [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>
<a style = "padding: 30px 50px;" mat-stroked-button color="primary" href="/overview/camera-stream" target="_blank"> LIVE CAMERA </a>

</div> </div>
</div> </div>

+ 26
- 0
src/app/modules/overview/overall-ground/overall-ground.component.scss View File

} }


} }
.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;
}

Write Preview
Loading…
Cancel
Save