Untitled

import { Component, EventEmitter, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BookingslotdialogComponent } from '../bookingslotdialog/bookingslotdialog.component';
import { StationService } from 'src/app/Services/station.service';
import { SharedService } from 'src/app/Services/shared.service';

@Component({
  selector: 'app-portlist',
  templateUrl: './portlist.component.html',
  styleUrls: ['./portlist.component.scss']
})
export class PortlistComponent {

  constructor(public dialog: MatDialog, private stationservice: StationService, 
              private sharedService: SharedService) { }

  chargerIdSelected = new EventEmitter<any>();

  lat: any;
  lng: any;
  showComponent: boolean = false;
  loading: boolean = false
  sample = false;
  portlist: { listtitle: string, location: string, distance: string, time: string }[] = [
    {
      listtitle: 'NeST Charging Station', location: 'Edappaly,Ernakulam', distance: '6KM Away', time: 'Monday-Friday'
    }
  ]
  chargerBody = {
    "stationId": "",
    "connector": "",
  }

  showComponentNavigate() {
    this.showComponent = true
    this.loading = true
    let latlng = {
      lat: this.lat,
      lng: this.lng
    }
    this.stationservice.latLng.emit(latlng);
  }
  value = true;  
  chargingPortList: charger[] = []
  imageSrc = ""
  varOne = '../../../../assets/Group 2111-1.png'
  varTwo = 'two';

  cardcount = 5;
  selectedCard: any = null
  selectedData: any
  chargername: any
  chargerstationName = '';
  cityname = ''
  countryname = ''
  startDay = ""
  tolastDay = ''
  stationid: any;
  chargerid: any
  connectorID: any
  kilometer: any
  ChargerFees: any
  BookingFee: any
  ConnectorName: any
  VehicleID: any
  currency: any;

  ngOnInit() {
    this.Portsdetail();
    this.GetAvailablePorts();
    this.Onselect;
  }

  Portsdetail() {
    this.stationservice.singlechargerData.subscribe((response: any) => {
      console.log("Jithin data", response);

      this.chargerstationName = response.stationDetails.stationName;
      this.cityname = response.stationDetails.city
      this.countryname = response.stationDetails.country
      this.startDay = response.stationDetails.fromDay
      this.tolastDay = response.stationDetails.toDay
      this.chargerBody.stationId = response.stationDetails._id
      this.lat = response.stationDetails.lat;
      this.lng = response.stationDetails.lon;
      this.stationid = response.stationDetails._id;
      this.kilometer = response.stationDetails.navigation.distance;
      this.VehicleID = response.vehicleDetails._id
    })
  }

  GetAvailablePorts() {
    this.stationservice.getChargers(this.chargerBody).subscribe((response: any) => {
      this.chargingPortList = response.result;

      this.chargingPortList.forEach((x: any) => {
        x.status = x.connectorDetails.statusDetails.status;
      })
    });
  }

  Onselect(index: number) {

    if (this.chargingPortList[index].connectorDetails
      .statusDetails.status == 'AVAILABLE') {
      this.chargingPortList.forEach((x: any) => {

        if (this.chargingPortList.indexOf(x) != index) {
          x.selected = false;
        }
        else {
          this.chargingPortList[index].selected = !this.chargingPortList[index].selected;
        }
      });
      this.sharedService.selectedChargerId.next(this.chargerid)
    }
  }

  openDialog() {
    if (this.chargingPortList.every((x: any) => !x.selected)) {
      return;
    }

    let selectedSlot = this.chargingPortList.find((x: any) => x.selected);
    const dialogRef = this.dialog.open(BookingslotdialogComponent, {
      width: '50%',
      data: {
        chargerFee: selectedSlot?.connectorDetails.rate.price,
        ChargerId: selectedSlot?._id,
        ConnectorID: selectedSlot?.connectorDetails.connectorId._id,
        Vehicleid: this.VehicleID,
        stationId: selectedSlot?.stationId,
        connectorname: selectedSlot?.connectorDetails.connectorId.ConnectorName,
        currency: selectedSlot?.currency
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('Dialog result :${result}');
    })
  }
}

export interface charger {
  _id: string,
  stationId: string,
  chargerName: string,
  connectorDetails: any;
  currency: any,
  photo: any,
  selected: boolean
  status: any
}

export interface IndividualConnector {
  rate: ConnectorRate,
  statusDetails: ConnectorStatusInfo,
  connectorId: ConnectorBasicInfo,
  voltage: any
}

export interface ConnectorRate {
  price: any,
  hourly: any
}

export interface ConnectorStatusInfo {
  status: any,
  reason: any
}

export interface ConnectorBasicInfo {
  _id?: any,
  connectorName: any,
  createdAt: any,
  updatedAt: any,
  __v: any
}