kfmc_website/src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.ts

import { ToastrService } from 'ngx-toastr';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';

@Component({
  selector: 'app-existing-report',
  templateUrl: './existing-report.component.html',
  styleUrls: ['./existing-report.component.css']
})
export class ExistingReportComponent implements OnInit {

  constructor(private route: ActivatedRoute,
    private authSer: AuthServiceService, 
    private toastr: ToastrService,
    private spinner: NgxSpinnerService,
    private http: HttpClient) { }

    vehicle_types: any[] =[];
    vehicle_models: any[]=[];
    vehiclesData: any[] = [];
    vehicleTypeId: number;
    vehicleModelId:number;
    showTableData:boolean = false;

  ngOnInit() {
    //init the values of permision boolean
    this.authSer.showAddBtn = false;
    this.authSer.showDeleteBtn = false;
    this.authSer.showEditBtn = false;
    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;
    localStorage.setItem('pageIdActive', '48');


    //get vehicles types 
    this.http.get(this.authSer.pathApi + '/get_vehicle_types_list').subscribe(
      (response) => {
        console.log(response);
        this.vehicle_types = response['types'];
        
      },
      (error) => {
        console.log(error);
      });

  }


  //change type vehicle 
  typeVehicle(event) {
    console.log(event.target.value);
    this.vehicleTypeId = event.target.value;
    this.http.get(this.authSer.pathApi + '/get_vehicle_models_by_type_id/' + this.vehicleTypeId).subscribe(
      (responce) => {
        console.log('models vehicle', responce);
        this.vehicle_models = responce['models'];
        if(this.vehicle_models.length == 0) {
          this.toastr.warning('لا يوجد موديلات لهذا النوع حاليا ');
        }
      },
      (error) => {
        console.log(error);
      }
    );
  };

  //get report when change model
  getReport(event) {
    this.spinner.show();
    console.log(event.target.value);
    this.vehicleModelId = event.target.value;
    this.http.get(this.authSer.pathApi + '/report_existing_vehicles/' + this.vehicleTypeId + '/' + this.vehicleModelId + '/all').subscribe(
      (responce) => {
        console.log('report data ', responce);
        this.vehiclesData = responce['vehicles'];
        if(this.vehiclesData.length > 0) {
          this.showTableData = true;
        } else {
          this.showTableData = false;
        }
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    );
  }

  //fillter data 
  getFillter(event) {
    console.log(event.target.value);
    this.spinner.show();
    this.http.get(this.authSer.pathApi 
      + '/report_existing_vehicles/' 
      + this.vehicleTypeId + '/' 
      + this.vehicleModelId 
      + '/' + event.target.value).subscribe(
      (responce) => {
        this.vehiclesData = [];
        console.log(responce);
        this.vehiclesData = responce['vehicles'];
        if(this.vehiclesData.length == 0) {
          this.toastr.warning('لا يوجد بيانات لعرضها حاليا');
        }
        if(this.vehiclesData.length > 0) {
          this.showTableData = true;
        } else {
          this.showTableData = false;
        }
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    )
  }

  //print function

    onPrint(): void {
      let printContents, popupWin;
      printContents = document.getElementById('print-section').innerHTML;
      popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
      popupWin.document.open();
      popupWin.document.write(`
        <html>
          <head>
            <title>تقرير المركبات الموجوده</title>
            <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
            <style>
              .row{
                display: flex;
                flex-wrap: wrap;
                margin-right: -15px;
                margin-left: -15px;
              }
              .col-6{
                float: right;
                flex: 0 0 50%;
                max-width: 50%
              }
              .col-12{
                flex-basis: 0;
                flex-grow: 1;
                max-width: 100%;
              }
              table {
                font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
                border-collapse: collapse;
                width: 100%;
                direction: rtl;
                text-align: center;
                
              }
              
              table td, table th {
                border: 1px solid #ddd;
                padding: 8px;
              }
              
              table tr:nth-child(even){background-color: #f2f2f2;}
              
              table tr:hover {background-color: #ddd;}
              
              table th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: center;
                background-color: #4CAF50;
                color: white;

              }
            </style>
          </head>
      <body onload="window.print();window.close()">
     <div class="row">
      <div class="col-6">
        <img class="logo1" src="../../assets/image/logo2.png">
        </div>
        <div class="col-6" style="float: right">
            <img  class="logo2" src="../../assets/image/logo1.png">
         </div>
      </div>
      <div class="row">
      <div class="col-12" style="width:100%;text-align: center">
      <h1>تقرير المركبات الموجوده</h1>
      </div>
      </div>
    
     <div class="row">
        <div class="col-12">
        ${printContents}
        </div>
     </div>
      </body>
        </html>`
      );
      popupWin.document.close();
  }


}