iot-web-ui/src/app/modules/homepage/security-system-details/security-system-details.component.html

<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">
      <div class="state t2" id="State2">
        <div>
          <div class="sensor-off" [class.sensor-on]="(state1 && state5 && isReady)">
            <img [src]="state5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
          </div>
          <a href="/overview/camera-stream" target="_blank">
            <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
          </a>
        </div>
        <div *ngIf="(state1 && state5 && isReady)" class="alarm-text"
             [ngClass]="{'alarm-text-on': (state1 && state5 && isReady) }">FIRE ALARM</div>
      </div>

      <div class="state t3" id="State3">
        <div>
          <div  class="sensor-off" [class.sensor-on]="(state2 && state5 && isReady)">
            <img [src]="state5 ? 'assets/images/sensor-on.png' : 'assets/images/sensor-off.png'"  style="width: 30px; height: 30px">
          </div>
          <a href="/overview/camera-stream" target="_blank">
            <img style="width: 30px; height: 30px;" src="assets/images/camera.png">
          </a>
        </div>
        <div *ngIf="(state2 && state5 && isReady)" class="alarm-text"
             [ngClass]="{'alarm-text-on': (state2 && state5 && isReady) }">FENCE ALARM</div>
      </div>
      <div class="state t4" id="State4">
        <div>
          <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 tooltip" id="State5" >
        <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 class="state t6 tooltip" id="State6">
        <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>
  <div fxFlex="30" fxLayout="column" fxLayoutGap="50px">
    <button [disabled]="!isConnected" mat-flat-button color="{{switchArm ? 'accent' : 'primary'}}" (click)="toggleState1()">{{ switchArm ? 'DISARM' : 'ARM'}}</button>

  </div>
</div>