trungnd
/
iot-web-ui
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 3 Releases 0 Wiki Activity
Browse Source

fix icon and add text

pull/5/head
PhamY0601 1 year ago
parent
feecfcd553
commit
25d5574801
6 changed files with 333 additions and 64 deletions
Unified View Show Diff Stats
  1. +187
    -15
      src/app/app.constants.ts
  2. +22
    -0
      src/app/modules/overview/camera-stream/camera-stream.component.scss
  3. +20
    -20
      src/app/modules/overview/map/map.component.ts
  4. +69
    -21
      src/app/modules/overview/overall-ground/overall-ground.component.html
  5. +31
    -8
      src/app/modules/overview/overall-ground/overall-ground.component.scss
  6. +4
    -0
      src/app/modules/overview/overall-ground/overall-ground.component.ts

+ 187
- 15
src/app/app.constants.ts View File

export const ICON = { export const ICON = {
sensorOff: `<div style="display: flex; flex-direction: row; gap: 5px">
<img style="width: 30px; height: 30px;" src="assets/images/sensor-off.png">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</div>`,
sensorOn: `<div style="display: flex; flex-direction: row; gap: 5px">
<img style="width: 30px; height: 30px;" src="assets/images/sensor-on.png">
<img style="width: 30px; height: 30px;" src="assets/images/camera.png">
</div>`,
sensorOff: `<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="assets/images/sensor-off.png">
<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="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;
}
</style>`,
sensorOn: `<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="assets/images/sensor-on.png">
<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="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;
}
</style>`,
sensorActive: `<div> sensorActive: `<div>
<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="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;"></div>
border-radius: 20px; border-radius: 20px;
text-align: center; text-align: center;
width: 100px;">Sự cố cháy</div> width: 100px;">Sự cố cháy</div>
<a href="/overview/camera-stream">
<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"/>
<a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`, <a href="/overview/overall-ground" target="_blank">Xem chi tiết</a>`,


sensorActiveBK: ` sensorActiveBK: `
<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="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;"></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> <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;">
<img src="assets/images/sensor-on.png" style="width: 30px; height: 30px; z-index: 9;">
</div> </div>
<style>
@keyframes sensor-on {

<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: VIBRATION 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% { 100% {
transform: scale(2); transform: scale(2);
opacity: 0; opacity: 0;
} }
} }
</style>
`,
</style>`,
} }

+ 22
- 0
src/app/modules/overview/camera-stream/camera-stream.component.scss View File

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

+ 20
- 20
src/app/modules/overview/map/map.component.ts View File



sensorActiveIcon = L.divIcon({ sensorActiveIcon = L.divIcon({
html: this.sensorActive, html: this.sensorActive,
iconSize: [38, 48],
iconSize: [170, 48],
className: 'hidden-background' className: 'hidden-background'
}); });
//
// sensorOffIcon = L.divIcon({
// html: this.sensorOff,
// iconSize: [38, 38],
// className: 'hidden-background'
// });


// sensorOnIcon = L.divIcon({
// html: this.sensorOn,
// iconSize: [38, 38],
// className: 'hidden-background'
// });
sensorOffIcon = L.icon({
iconUrl: '../../../../assets/images/sensor-off.png',
iconSize: [38, 38],
sensorOffIcon = L.divIcon({
html: this.sensorOff,
iconSize: [150, 38],
className: 'hidden-background'
}); });


sensorOnIcon = L.icon({
iconUrl: '../../../../assets/images/sensor-on.png',
iconSize: [38, 38],
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; state5 = false;


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)})
.addTo(this.map) .addTo(this.map)
.bindPopup(popupContent);
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)})
.addTo(this.map) .addTo(this.map)
.bindPopup(fireContent);
} }


updateIcons(): void { updateIcons(): void {

+ 69
- 21
src/app/modules/overview/overall-ground/overall-ground.component.html View File

<div class="card-state"> <div class="card-state">
<img src="assets/images/ground.png"> <img src="assets/images/ground.png">


<p class="state t1" id="State1">
<img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
</p>
<p class="state t2" id="State2">
<img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
</p>
<p class="state t3" id="State3">
<img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
</p>
<p class="state t4" id="State4">
<img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
</p>
<p class="state t5" id="State5" [ngClass]="{'sensor-on': Sstate1 && Sstate2}">
<img [src]="getImageSource()" style="width: 30px; height: 30px">
</p>
<p class="state t6 " id="State6" [ngClass]="{'sensor-on': Sstate1 && Sstate2}">
<img [src]="getImageSource()" style="width: 30px; height: 30px">
</p>
<div class="state t1" id="State1">
<div>
<img src="assets/images/sensor-off.png" style="width: 30px; height: 30px">
<a href="/overview/camera-stream">
<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">
<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">
<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">
<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>
<div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
'sensor-off': !(Sstate1 && Sstate2)}">
<img [src]="getImageSource()" style="width: 30px; height: 30px">
</div>
<a href="/overview/camera-stream">
<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>
</div>
<div class="state t6 " id="State6">
<div>
<div [ngClass]="{'sensor-on': Sstate1 && Sstate2,
'sensor-off': !(Sstate1 && Sstate2)}">
<img [src]="getImageSource()" style="width: 30px; height: 30px">
</div>
<a href="/overview/camera-stream">
<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>
</div>


<!-- <div *ngFor="let state of states; let i = index"--> <!-- <div *ngFor="let state of states; let i = index"-->
<!-- [ngClass]="{'sensor-on': Sstate1 && Sstate2}"--> <!-- [ngClass]="{'sensor-on': Sstate1 && Sstate2}"-->
</div> </div>
</div> </div>
<div fxFlex="30" fxLayout="column" fxLayoutGap="50px"> <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
<div>Công tắc 1 <button [disabled]="!isConnected" mat-flat-button color="{{Sstate1 ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ Sstate1 ? 'DISARM' : 'ARM'}}</button></div>
<div>Công tắc 2 <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'TẮT CẢNH BÁO' : 'BẬT CẢNH BÁO'}}</button></div>
<div>Live Camera <button mat-stroked-button color="primary" [routerLink]="'/overview/camera-stream'"> Xem chi tiết </button></div>
<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>
</div> </div>

+ 31
- 8
src/app/modules/overview/overall-ground/overall-ground.component.scss View File

position: absolute; position: absolute;
color: red; color: red;
&.t1{ &.t1{
top: 8%;
top: 5%;
left: 10%; left: 10%;
} }
&.t2{ &.t2{
top: 8%;
left: 47%;
top: 5%;
left: 42%;
} }
&.t3{ &.t3{
top: 8%;
top: 5%;
right: 12%; right: 12%;
} }
&.t4{ &.t4{
} }
&.t5{ &.t5{
top: 88%; top: 88%;
left: 47%;
left: 42%;
width: 100px;
.alarm-text-off{
width: 100px !important;
}
} }
&.t6{ &.t6{
top: 47%; top: 47%;
left: 10%;
left: 5%;
width: 100px;
.alarm-text-off{
width: 100px !important;
}
} }
} }


height: 30px; height: 30px;
position: absolute; position: absolute;
background: linear-gradient(#ff0000, #C70039); background: linear-gradient(#ff0000, #C70039);
display: flex;
display: flex !important;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
border-radius: 50%; border-radius: 50%;
animation: sensor-on 2s 1s ease-out infinite; animation: sensor-on 2s 1s ease-out infinite;
} }
} }
.sensor-off{
display: inline-block;
}
@keyframes sensor-on{ @keyframes sensor-on{
100%{ 100%{
transform: scale(2); transform: scale(2);
} }
} }
} }
.button-on {
.alarm-text{
font-size: 10px;
padding: 2px 4px;
width: 70px;
border-radius: 2px;
&-off {
background: #bfe9f4;
color: #004aad;
}
&-on{
background: #F11E1E;
color: #FFF;
}


} }

+ 4
- 0
src/app/modules/overview/overall-ground/overall-ground.component.ts View File

Sstate1 = false; Sstate1 = false;
Sstate2 = false; Sstate2 = false;
imageIcon = 'assets/images/sensor-off.png'; imageIcon = 'assets/images/sensor-off.png';
title = 'ALARM: SMOKE ALERT'
private statusSubscription?: Subscription; private statusSubscription?: Subscription;
private messageSubscription?: Subscription; private messageSubscription?: Subscription;
private intervalId: any; private intervalId: any;
} }
this.Sstate1 = this.state5 === 'ON'; this.Sstate1 = this.state5 === 'ON';
this.Sstate2 = this.state6 === 'ON'; this.Sstate2 = this.state6 === 'ON';
if(this.Sstate1 && this.Sstate2)
this.title = 'ALARM: VIBRATION ALERT'

} }


} }

Write Preview
Loading…
Cancel
Save