|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="state t2" id="State2"> |
|
|
<div class="state t2" id="State2"> |
|
|
<div> |
|
|
<div> |
|
|
<div [ngClass]="{'sensor-on': Sstate3, |
|
|
|
|
|
'sensor-off': !(Sstate3)}"> |
|
|
|
|
|
|
|
|
<div class="sensor-off" [class.sensor-on]="(Sstate3 && Sstate1)"> |
|
|
<img [src]="Sstate3 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'" style="width: 30px; height: 30px"> |
|
|
<img [src]="Sstate3 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'" style="width: 30px; height: 30px"> |
|
|
</div> |
|
|
</div> |
|
|
<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 *ngIf="Sstate3" class="alarm-text" |
|
|
|
|
|
[ngClass]="{'alarm-text-on': Sstate3 }">ALARM: <br>VIBRATION ALERT</div> |
|
|
|
|
|
|
|
|
<div *ngIf="(Sstate3 && Sstate1)" class="alarm-text" |
|
|
|
|
|
[ngClass]="{'alarm-text-on': (Sstate3 && Sstate1) }">ALARM: <br>VIBRATION ALERT</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="state t3" id="State3"> |
|
|
<div class="state t3" id="State3"> |
|
|
<div> |
|
|
<div> |
|
|
<div [ngClass]="{'sensor-on': Sstate4, |
|
|
|
|
|
'sensor-off': !(Sstate4)}"> |
|
|
|
|
|
|
|
|
<div class="sensor-off" [class.sensor-on]="(Sstate4 && Sstate1)"> |
|
|
<img [src]="Sstate4 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'" style="width: 30px; height: 30px"> |
|
|
<img [src]="Sstate4 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'" style="width: 30px; height: 30px"> |
|
|
</div> |
|
|
</div> |
|
|
<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 *ngIf="Sstate4" class="alarm-text" |
|
|
|
|
|
[ngClass]="{'alarm-text-on': Sstate4 }">ALARM: <br>DOOR OPENING</div> |
|
|
|
|
|
|
|
|
<div *ngIf="(Sstate4 && Sstate1)" class="alarm-text" |
|
|
|
|
|
[ngClass]="{'alarm-text-on': (Sstate4 && Sstate1) }">ALARM: <br>DOOR OPENING</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="state t4" id="State4"> |
|
|
<div class="state t4" id="State4"> |
|
|
<div> |
|
|
<div> |