Untitled

import { Router } from '@angular/router';
import { Component, ViewChild, OnInit, OnDestroy, ChangeDetectorRef, Injector } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Subscription } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { DevicesService } from '../../services/devices.service';
import { Title } from '@angular/platform-browser';
import { SharedService } from 'src/app/shared/services/shared.service';
import { MatPaginator } from '@angular/material/paginator';
import { MonitoringAppHeaderService } from 'src/app/shared/services/monitoring-app-header.service';
import { DevicePopupComponent } from '../device-popup/device-popup.component';
import { DeviceNotificationConfigPopupComponent } from '../device-notification-config-popup/device-notification-config-popup.component';
import { RoleManagementService } from 'src/app/modules/preferences/services/role-management.service';
import { DataFromDashboard } from '../../models/device-details.model';
import { EnvService } from 'src/app/core/services/env.service';
import { getConcatenatedInterfacestoSpot } from 'src/app/core/helpers/helper.functions';



@Component({
  selector: 'app-devices',
  templateUrl: './devices.component.html',
  styleUrls: ['./devices.component.scss']
})
export class DevicesComponent implements OnInit,OnDestroy {
  THRESHOLD_UP_COUNT = 9;
  dataSource: any;
  updateSubscription: Subscription | any;
  refreshFrequency: any;
  isProvisioned: boolean = false;
  isLoading: boolean = true;
  siteIdFetched?: string;
  displayedJetson: string[] = ['interface_name','location' ,'application_status', 'lastUpdatedTimeStamp','setting'];
  @ViewChild(MatSort, { static: false }) sort!: MatSort;
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  selectedSiteSpot: any[]=[];
  pageNumber:any;
  interfaces: any;
  isChipList: boolean = false;
  isDataAvail: boolean = true;
  totalPageCount:number = 1;
  itemsPerPage!: number;
  isSiteSelected:boolean= false;
  pageObj:any = {};
  selectedPageSize!:number;
  siteHierarchySubscription?:Subscription;
  configModule:string = 'devices'
  configType:string = 'pagination'
  pageSizeOptions:number[] = [];
  isDenied:boolean = false;
  selectedIndex?:number;
  not_available:string = 'No Connected device Available';
  in_active:string = 'Inactive Devices';
  active:string = 'Active Devices';
  siteSpotDetailFromDashboard:DataFromDashboard = {
    isClick:false,
    status : null,
    location:[]
  };
  isRestricted: boolean = false;
  vmsViewEnable:boolean=false;
  sideNavSubscription?:Subscription;
  isSettingEnabled: boolean = false;
  envService: EnvService;
  constructor(public devicesService: DevicesService,private sharedService:SharedService, public injector : Injector,
    private dialog: MatDialog, private title: Title,private _monitoringHeaderService:MonitoringAppHeaderService,
    private roleManagementService: RoleManagementService,private router :Router, private cdr: ChangeDetectorRef) {
      this.envService = injector.get<EnvService>(EnvService);
      this.pageSizeOptions = this.sharedService.pageSizeOptions;
      this.selectedPageSize = this.sharedService.pageSizeOptions[0];
      if(this.router.getCurrentNavigation()?.extras.state?.isClick){
        this.siteSpotDetailFromDashboard = {
          isClick : this.router.getCurrentNavigation()?.extras.state?.isClick,
          status : this.router.getCurrentNavigation()?.extras.state?.status,
          location: this.router.getCurrentNavigation()?.extras.state?.location
        };
      }
      this.sharedService.siteDataSub.subscribe((haveData:boolean)=>{
        this.isRestricted = !haveData;
      })
  }

  ngOnInit(): void {
    this.sideNavSubscription = this.sharedService.vmsSideNavEnable.subscribe((visible:any)=> {
      this.vmsViewEnable = visible;
      this.cdr.detectChanges();
    })
    this.roleManagementService.getPermissions().then((permittedEndpoints:any)=>{
      if(!permittedEndpoints["devices"] || !permittedEndpoints["devices"]["read"])
      {
          this.isDenied = true;
      }
      if(permittedEndpoints["devices"]["write"])
      {
        this.isSettingEnabled = permittedEndpoints["devices"]["write"];
      }
      this.getSiteHeirarchyData();
    })
    // ----------Hide and Show-- generic siteButton-----START---- @author Amrutha chandran K M *--@date 27-05-2022--//
    this.sharedService.homeUrl = {
      showSite :true
    }
    this.sharedService.nextUrl();
    this.title.setTitle("Devices")
  }
 /**
  * @author : Amrutha Chandran K M
  * @emailId : amrutha.chandran@quantiphi.com
  * @desc : 'function for filter interface data by location names and device statuses from dashboard
  * @param  {*} arr
  * @return
  * @memberof DevicesComponent
  */
 filterByDevicestatuses(arr:any){
  const locationSet = new Set(this.siteSpotDetailFromDashboard.location);
  const statusIsDown = this.siteSpotDetailFromDashboard.status === 'DOWN';

  return arr.filter((el: any) => {
    if (locationSet.has(el.location)) {
      if (statusIsDown) return el.downDevices.length > 0;
      else return el.upDevices.length > 0;
    }
    return false;
  });
 }

  /**
    * @author Aditya Pandya
    * @date 05-05-2022
    * @description Subscribe to site Heirarchy Observable to get latest selected Site Heirarchy
    * @memberof HomeComponent
    */
   getSiteHeirarchyData(){
    this.siteHierarchySubscription=this._monitoringHeaderService.getHeirarchyData()
    .subscribe((siteData:any)=>{
     if(siteData)
      {
        this.resetSiteData(siteData.siteData);
        
        if((this.sharedService.sitesIdSpotId ?? false) && (this.sharedService.sitesIdSpotId.length>0)){
          this.selectedSiteSpot= this.sharedService.sitesIdSpotId;
        }
        else{
          const viewData = JSON.parse(this.envService.getStorageData('selectedView') || '{}');
          const vmsAllRetain = JSON.parse(this.envService.getStorageData('vmsAllViewRetain')) || {};
          if (Object.keys(vmsAllRetain).length > 0 && viewData?.viewName === 'All Device') {
            this.selectedSiteSpot = this.generateSiteSpotData(vmsAllRetain?.retainSiteSpot);
          } else {
            this.selectedSiteSpot = this.generateSiteSpotData(siteData.siteData);
          }
        }
          if(this.selectedSiteSpot.length>0){
           this.isDataAvail = true;
            const deviceConfig = {
              module: 'device',
              fromDashboard:this.siteSpotDetailFromDashboard.isClick
            }
             this.devicesService.getInterfacesBySiteAndSpotId(this.selectedSiteSpot, deviceConfig).subscribe((res:any)=>{
               res.data = getConcatenatedInterfacestoSpot(res.data);
               if(this.siteSpotDetailFromDashboard.isClick){
                this.siteSpotDetailFromDashboard.isClick = false;
                this.interfaces = this.filterByDevicestatuses(res.data);
               }else{
                 this.interfaces =res.data;
               }

               this.sortData({ active: 'lastUpdatedTimeStamp', direction: 'desc' });
             })
          }else{
           this.dataSource = new MatTableDataSource([]);
            this.isDataAvail = false;
            this.isLoading = false;
            this.totalPageCount = Number('');
            this.itemsPerPage = Number('');
          }
     } else {
       this.dataSource = new MatTableDataSource([]);
       this.isDataAvail = false;
       this.isLoading = false;
       this.totalPageCount = Number('');
       this.itemsPerPage = Number('');
     }
    })
  }

  generateSiteSpotData(siteData:any) {
    // Use Map because using set we need to first convert objects into string
    const uniqueSiteSpots = new Map<string, { siteId: number; spotId: number }>();
    siteData.forEach((obj: any) => {
      const key = ${obj.siteId}-${obj.spotId};
      if (!uniqueSiteSpots.has(key)) {
        uniqueSiteSpots.set(key, { siteId: obj.siteId, spotId: obj.spotId });
      }
    });
    return Array.from(uniqueSiteSpots.values());
  }

  /**
   * @description reset the site details initiated from dashboard
   * @date 27/06/2023
   * @author [Pranlin Prakash K]
   * @param siteData 
   */

  resetSiteData(siteData = []):void{
    if(siteData.length == 0){
      this.siteSpotDetailFromDashboard.isClick = false;
      this.sharedService.sitesIdSpotId = [];
      this.sharedService.nextSitesIdSpotIdStore();
    }
  }

  /**
   * @description go to a particular page
   * @author Vinayak V S
   * @date 20/06/2022
   * @memberof DevicesComponent
   */
  goToPage(){
    let gtp = this.sharedService.goToPage(this.paginator,this.pageNumber);
    this.paginator = gtp.paginator;
    this.pageNumber = gtp.pageNumber;
  }

  /**
   * @description to get details pop up
   * @author Vinayak V S
   * @date 20/06/2022
   * @param {*} deviceDetails
   * @memberof DevicesComponent
   */
  detailsPopup(deviceDetails: any,index:any) {
    this.selectedIndex = index;
    if((deviceDetails.upCount > 0) || (deviceDetails.downCount > 0)){
      this.dialog.open(DevicePopupComponent, {
        width: '1000px',
        height: '490px',
        data: {
          connected_devices: deviceDetails.connected_devices,
          interface_id: deviceDetails.interface_id,
          interface_name: deviceDetails.interface_name,
          interface_alias_name: deviceDetails.interface_alias_name,
          provisioned: deviceDetails.provisioned,
          spot_name: deviceDetails.spot_name,
          software_version:deviceDetails.software_version
        },
        // disableClose: true,
        panelClass: 'device-pop-up-class'
      });
    }
  }

  /**
   * @description to get connected devices
   * @author Vinayak V S
   * @date 20/06/2022
   * @param {*} devices
   * @param {*} element
   * @param {*} i
   * @memberof DevicesComponent
   */
  getConnectedDevice(element:any,flag:any){
    let devices = element;
    if(flag==='UP'){
      devices=element.upDevices;
    }else if(flag==='DOWN'){
      devices =element.downDevices
    }
    this.isChipList = true;
    this.dialog.open(DevicePopupComponent, {
      width: '1000px',
      height: '490px',
      data: {
        connected_devices: devices,
        interface_name: element.interface_name,
        interface_id:element.interface_id,
        software_version:element.software_version,
        chipList:this.isChipList,
      },
      // disableClose: true,
      panelClass: 'device-pop-up-class'
    });
  }


  /**
   * @description to sort data of table
   * @author Vinayak V S
   * @date 21/06/2022
   * @param {Sort} sort
   * @returns {*}
   * @memberof SiteDeviceMappingComponent
   */
   sortData(sort: Sort) {
    if(this.interfaces.length === 0){
      this.isDataAvail = false;
     }
    const data = this.interfaces;
    this.interfaces = data.sort((a: any, b: any) => {
      const isAsc = (sort.direction === 'asc');
      sort = sort.direction === '' ? {active: 'lastUpdatedTimeStamp', direction: 'desc'} : sort;
      switch (sort.active) {
        case 'application_status':
         
          if(sort.direction === 'asc'){
            const one = a.upCount;
            const two = b.upCount;
            return two - one;
          } else {
            const one = a.downCount; 
            const two = b.downCount;
            return two - one;
          }
        case 'interface_name':
          if(sort.direction === 'asc')
            return a.interface_alias_name.toLowerCase().localeCompare(b.interface_alias_name.toLowerCase());
          else if(sort.direction === 'desc')
            return b.interface_alias_name.toLowerCase().localeCompare(a.interface_alias_name.toLowerCase());
          else
            return 0;
        case 'location':
          return this.compare(a.location.toLowerCase(), b.location.toLowerCase(), isAsc);
        case 'lastUpdatedTimeStamp':
          return this.compare(a.creation_timestamp, b.creation_timestamp, isAsc);
        default:
          return 0;
      }
    });
    this.sharedService.getUserAttributes(this.sharedService.getDevicesConfigId(),this.sharedService.getPaginationConfigId()).subscribe((configData:any) => {
      if(configData.length > 0){
        this.pageObj = configData[0]?.config_value;
        this.selectedPageSize = this.pageObj?.selected_items_per_page;
      }
      this.dataSource = new MatTableDataSource(this.interfaces);
      this.paginator.pageSize = this.selectedPageSize;
      this.dataSource.paginator = this.paginator;
      this.itemsPerPage = this.paginator.pageSize;
      this.totalPageCount = Math.ceil(this.interfaces.length/this.paginator.pageSize)
      this.isLoading = false;
    })
  }

  /**
   * @description supporting function for sort procedure
   * @author Vinayak V S
   * @date 21/06/2022
   * @param {(number | string | boolean)} a
   * @param {(number | string | boolean)} b
   * @param {boolean} isAsc
   * @returns {*}
   * @memberof SiteDeviceMappingComponent
   */
  compare(
    a: number | string | boolean,
    b: number | string | boolean,
    isAsc: boolean
  ) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
  }

   /**
   * @description Handles pagination event and updates total number of pages
   * @author Vivek Sharma
   * @date 16/06/2022
   * @memberof SiteDeviceMappingComponent
   */
    public handlePage(e: any) {
      let pgObj = this.sharedService.handlePage(this.itemsPerPage,this.paginator,this.pageNumber,e);
      this.totalPageCount = pgObj.totalcount;
      this.itemsPerPage = pgObj.itemsPerPage;
      this.paginator = pgObj.paginator;
      this.pageNumber = pgObj.pageNumber;
      this.sharedService.setPageSizeInDB(this.sharedService.getDevicesConfigId(),this.pageObj,e.pageSize)
    }


    handleSettingButtonClick(event: Event, element: any): void {
      if (!this.isSettingEnabled) {
        event.stopPropagation();
        return;
      }
      // Call the existing function
      this.openNotificationConfig(element);
      // Stop propagation to avoid undesired behavior
      event.stopPropagation();
    }    

      /**
   * @description to open notification configuration
   * @author Vinayak V S
   * @date 08/06/2022
   * @memberof DevicePopupComponent
   */
  openNotificationConfig(element:any) {
    this.dialog.open(DeviceNotificationConfigPopupComponent, {
      width: '650px',
      minHeight: '440px',
      data: {
        connected_device_id: element.interface_id,
        connected_device_name : element.interface_name,
        interface_alias_name : element.interface_alias_name
      },
      panelClass: 'config-notify',
    });
  }

  /**
   * @description Unsubscribe from all active subject and observable subscriptions
   * @author Dhinesh Ravisankar
   * @date 26/09/2022
   * @memberof DevicesComponent
   */
  ngOnDestroy(): void {
    if((this.sharedService.sitesIdSpotId ?? false) && (this.sharedService.sitesIdSpotId.length > 0)){
      this.siteSpotDetailFromDashboard.isClick = false;
      this.siteSpotDetailFromDashboard.status = null;
      this.siteSpotDetailFromDashboard.location = [];
      this.sharedService.sitesIdSpotId =[];
      this.sharedService.nextSitesIdSpotIdStore();
    }
    this.siteHierarchySubscription?.unsubscribe();
    this.sharedService.vmsSideNavEnable.next(false);
    this.sideNavSubscription?.unsubscribe();
  }

  /**
   * @description To open down devices and up devices pop up seperately
   * @author Vinayak V S
   * @date 15/11/2022
   * @param {*} element
   * @param {number} id
   * @memberof DevicesComponent
   */
  openUpDownDialog(element:any,id:number, event: Event){
    event.stopPropagation();
    if(id===1){
      this.getConnectedDevice(element,'UP');
    }else{
      this.getConnectedDevice(element,'DOWN');
    }
  }

  openVMSView(){
    this.sharedService.vmsSideNavEnable.next(true);
  }
  closeSidenav() {
    this.sharedService.vmsSideNavEnable.next(false);
  }

  }


this is ts file now wanted to improve this as well 
unused variable remove avoided neested if else and all 

can you give poiters with given code sample and refactore code example