iot-web-ui/src/app/modules/overview/overall-ground/overall-ground.component.html

<div class="p-3" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
  <div fxFlex="70" class="map-image">
    <div class="card-state">
      <img src="assets/images/ground.png">
      <p class="state t1" id="State1">{{ state1 ==  '' ? '%STATE%' : state1}}</p>
      <p class="state t2" id="State2">{{ state2 ==  '' ? '%STATE%' : state2}}</p>
      <p class="state t3" id="State3">{{ state3 ==  '' ? '%STATE%' : state3}}</p>
      <p class="state t4" id="State4">{{ state4 ==  '' ? '%STATE%' : state4}}</p>
      <p class="state t5" id="State5">{{ state5 ==  '' ? '%STATE%' : state5}}</p>
      <p class="state t6" id="State6">{{ state6 ==  '' ? '%STATE%' : state6}}</p>
    </div>
  </div>
  <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 ? 'ON' : 'OFF'}}</button></div>
    <div>Công tắc 2 <button [disabled]="!isConnected" mat-flat-button color="{{Sstate2 ? 'accent' : 'primary'}}" (click)="toggleState2()">{{ Sstate2 ? 'ON' : 'OFF'}}</button></div>
  </div>
</div>