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 fxLayout="row">
          <div
            class="sensor-off"
            [class.sensor-on]="state1 && state5 && status1"
          >
            <img
              [src]="
                state5 && status1
                  ? 'assets/images/sensor-on.png'
                  : 'assets/images/sensor-off.png'
              "
              style="width: 30px; height: 30px"
            />
          </div>
          <ng-container [ngTemplateOutlet]="camera"></ng-container>
        </div>
        <div
          *ngIf="state1 && state5 && status1"
          class="alarm-text"
          [ngClass]="{ 'alarm-text-on': state1 && state5 && status1 }"
        >
          FIRE ALARM
        </div>
      </div>

      <div class="state t3" id="State3">
        <div fxLayout="row">
          <div
            class="sensor-off"
            [class.sensor-on]="state2 && state5 && status2"
          >
            <img
              [src]="
                state5 && status2
                  ? 'assets/images/sensor-on.png'
                  : 'assets/images/sensor-off.png'
              "
              style="width: 30px; height: 30px"
            />
          </div>
          <ng-container [ngTemplateOutlet]="camera"></ng-container>
        </div>
        <div
          *ngIf="state2 && state5 && status2"
          class="alarm-text"
          [ngClass]="{ 'alarm-text-on': state2 && state5 && status2 }"
        >
          FENCE ALARM
        </div>
      </div>
      <div class="state t4" id="State4" fxLayout="row">
        <img [src]="getImageSource()" style="width: 30px; height: 30px" />
        <ng-container [ngTemplateOutlet]="camera"></ng-container>
      </div>
      <div class="state t5 tooltip" id="State5" fxLayout="row">
        <img [src]="getImageSource()" style="width: 30px; height: 30px" />
        <ng-container [ngTemplateOutlet]="camera"></ng-container>
      </div>
      <div class="state t6 tooltip" id="State6" fxLayout="row">
        <img [src]="getImageSource()" style="width: 30px; height: 30px" />
        <ng-container [ngTemplateOutlet]="camera"></ng-container>
      </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>
<ng-template #camera>
  <div (click)="openDialog()">
    <img
      style="width: 30px; height: 30px; cursor: pointer"
      src="assets/images/camera.png"
    />
  </div>
</ng-template>