Untitled

<div class="container-fluid port-list p-0">
  <div class="row all-content">
    <div class="port-header">
      <label for="">Dashboard> </label>
    </div>
      <label for="" class="header-station pl-1"> Charging Station</label>    
    <div class="col-12 col-sm-12 col-md-12 row">
      <div class="col-12 col-sm-12 col-md-6 p-0 left-side-image">
        

        
        <img
          class="car-image"
          src="../../../../assets/Rectangle 621.png"
          alt=""
        />
        <div class="port-heading d-flex justify-content-between">
          <h4 class="station pt-2 pl-2">{{chargerstationName}}</h4>
          <button class="navigate-btn" (click)="showComponentNavigate()">
            <img src="../../../../assets/fi-rr-navigation.png" alt="" />
            Navigate
          </button>
        </div>
        <div class="row location-details pl-2">
          <div class="location pl-3">
            <img
              class="location-time-icon"
              src="../../../../assets/fi-rs-marker.svg"
              alt=""
            />
            <label class="detail-text-field pl-1">{{cityname}},{{countryname}}</label>
          </div>
          <div class="distance pl-5">
            <img
              class="location-time-icon"
              src="../../../../assets/fi-rs-marker.svg"
              alt=""
            />
            <label class="detail-text-field pl-1">{{kilometer}}</label>
          </div>
        </div>
        <div class="time pt-1 pl-2">
          <img
            class="location-timer-icon"
            src="../../../../assets/fi-rs-time-oclock.svg"
            alt=""
          />
          <label class="open-hours pl-1">Open 24 hours {{startDay}}-{{tolastDay}}</label>
        </div>
      </div>
    

    <!-- rightcontent -->
    <div class="col-12 col-sm-12 col-md-6 selecting-port-content">
      <div class="row">
        <div class="col-12 charging pt-2 pb-1">
          <h4>Select Charging Port</h4>
          <!-- <div class="charger">
            <label class="switch">
              <input type="checkbox" />
              <span class="slider"></span>
            </label>
            <label for="" class="text-charger pl-1"
              >Available Charger Only</label
            >
          </div> -->
        </div>
        <div class="col-12 pt-2">
          <i class="fa fa-square-o available mr-2" aria-hidden="true"></i>
          <label for="" class="charging-status">Available</label>
          <i class="fa fa-square-o On-use ml-4 mr-2" aria-hidden="true"></i>
          <label for="" class="charging-status">On Use</label>
          <i class="fa fa-square-o On-repair ml-3 mr-2" aria-hidden="true"></i>
          <label for="" class="charging-status">On repair</label>
        </div>
      </div>

      <div class="row">
        <div
          class="col-md-6 col-sm-6 col-lg-4 col-4 pt-4 card-view"
          *ngFor="let i of chargingPortList; let j = index" 
        >
        <mat-card
        (click)="Onselect(j)"
        class="cards d-flex"
        [class.isgrey]="i.status == 'On repair'"
        [class.card-selected]="i.selected"
       >
        <mat-card-title
          class="card-title"
          [class.title-selected]="i.selected"
          [ngClass]="{
            'card-title-green': i.status == 'AVAILABLE',
            'card-title-blue': i.status == 'ON USE',
            'card-title-grey': i.status == 'ON REPAIR' 
          }"
        >
        <div class="charger-title-name">

          {{ i.chargerName }} <br>
        </div>
          <div class="voltage">
          {{i.connectorDetails.voltage}} {{i.connectorDetails.connectorId.connectorName}}
          </div>
        </mat-card-title>

        <mat-card-content class="card-types-image">
          <img
            *ngIf="i.status == 'AVAILABLE' && !i.selected"
            class="type-figures img-fluid"
            src="../../../../assets/Group 2111 (2).svg"
            alt=""
          />
          <img
            *ngIf="i.status == 'ON USE' && !i.selected"
            class="type-figures img-fluid"
            src="../../../../assets/grey-typr.svg"
            alt=""
          />
          <img
            *ngIf="i.status == 'ON REPAIR' && !i.selected"
            class="type-figures img-fluid"
            src="../../../../assets/grey-typr.svg"
            alt=""
          />
          <i
            class="fa fa-check-circle check-success"
            *ngIf="i.selected"
            aria-hidden="true"
            [ngClass]="{
              'card-selected-check': i.selected && i.status != 'On repair'
            }"
          ></i>
        </mat-card-content>
        <mat-card-content class="card-price-time">
          {{ i.connectorDetails.rate.price | currency : "INR" : "symbol" }}
          <!-- {{i.price}} -->
          {{ '/' + i.connectorDetails.rate.hourly +' hour'}}
        </mat-card-content>
      </mat-card>

       <!-- </div> -->
         

          <mat-icon
            matBadge="{{ j + 1 }}"
            [ngClass]="{
              'badge-green': i.status == 'AVAILABLE',
              'badge-blue': i.status == 'ON USE',
              'badge-grey': i.status == 'On repair'
            }"
            matBadgeSize="medium"
            class="badge-icon-card"
          ></mat-icon>
       
      </div>
<br>
      </div>
      <div class="row">
        <div class="col-12  pt-5 pl-5 bookings">
          <button class="button-booking" (click)="openDialog()">
            Book A Slot Now
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-12 pl-4 pt-2" *ngIf="showComponent" >
      <app-googlemap></app-googlemap>
    </div>
  <div class="col-12 col-lg-12 pl-4 pt-2" *ngIf="!showComponent && loading">
      <app-progress-bar></app-progress-bar>
    </div>
  </div>
</div>