report1

src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.css

@@ -0,0 +1,17 @@
+input, select {
+    font-size: 12px;
+    background-color: #f9f9f9;
+    border: 2px solid #bda380;
+}
+
+.title {
+    float: right;
+    margin: 20px 0;
+    color: #ef1c1c;
+    font-size: 15px;
+}
+
+.hr {
+    height: 2px;
+    background-color: #bda380;
+}

src/app/dashboard/reports-existing-vehicles/existing-report/existing-report.component.html

@@ -1,3 +1,80 @@
-<p>
-  existing-report works!
-</p>
+
+<div class="addHospital-w">
+  <div class="container">
+
+    <div class="row" style="margin-bottom: 30px;">
+        <div class="col-12">
+          <ul class="list-unstyled titileLi-w">
+            <li class="headingText-w">خدمه التدريب</li>
+            <li class="headingText-w">تقارير المركبات الموجوده</li>
+          </ul>
+        </div>
+    </div>
+
+      <div class="containerContent-w">
+      
+        <div class="row">
+          <div class="col-12 col-sm-12 col-md-4">
+            <div class="form-group">
+              <label style="float: right;margin-right: 5px">نوع المركبه</label>
+              <select class="form-control" (input)="typeVehicle($event)">
+                <option>أختر نوع المركبه</option>
+                <option class="form-control" *ngFor="let type of vehicle_types" name="type" [value]="type.id">{{type.name}}</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4" *ngIf="vehicleTypeId">
+            <div class="form-group">
+              <label style="float: right;margin-right: 5px">نوع الموديل</label>
+              <select class="form-control" (input)="getReport($event)">
+                <option>أختر نوع الموديل</option>
+                <option class="form-control" *ngFor="let model of vehicle_models" name="model" [value]="model.id">{{model.name}}</option>
+              </select>
+            </div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-4" *ngIf="vehicleModelId">
+            <div class="form-group">
+              <label style="float: right;margin-right: 5px">الحاله</label>
+              <select class="form-control" (input)="getFillter($event)">
+                <option>أختر الحاله</option>
+                <option value="new">جديد</option>
+                <option value="used">مستعمل</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div class="row" *ngIf="vehicleModelId">
+          <div class="col-12">
+            <table class="table table-bordered">
+                <thead class="headBackground-w">
+                  <tr>
+                    <th>نوع المركيه</th>
+                    <th>موديل المركبه</th>
+                    <th>رقم اللوحه</th>
+                    <th>الحاله</th>
+                    <th>رقم الهيكل</th>
+                    <th>اللون</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr *ngFor="let data of vehiclesData">
+                    <td>{{data.vehicle_type_name}}</td>
+                    <td>{{data.vehicle_model_name}}</td>
+                    <td>{{data.plate_number}}</td>
+                    <td>{{data.vehicle_status == 'used' ? 'مستعمل' : 'جديد'}}</td>
+                    <td>{{data.structure_number}}</td>
+                    <td>{{data.color}}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+
+      </div>
+
+
+    </div>
+ </div>
+  

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

@@ -1,3 +1,7 @@
+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';
 
 @Component({
@@ -7,9 +11,85 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExistingReportComponent implements OnInit {
 
-  constructor() { }
+  constructor(private route: ActivatedRoute,
+    private authSer: AuthServiceService, 
+    private toastr: ToastrService,
+    private http: HttpClient) { }
+
+    vehicle_types: any[] =[];
+    vehicle_models: any[]=[];
+    vehiclesData: any[] = [];
+    vehicleTypeId: number;
+    vehicleModelId:number;
 
   ngOnInit() {
+    
+    
+
+    //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'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  };
+
+  //get report when change model
+  getReport(event) {
+    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'];
+      },
+      (error) => {
+        console.log(error);
+      }
+    );
+  }
+
+  //fillter data 
+  getFillter(event) {
+    console.log(event.target.value);
+    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('لا يوجد بيانات لعرضها حاليا');
+        }
+      },
+      (error) => {
+        console.log(error);
+      }
+    )
   }
 
 }

src/app/dashboard/service-item/service-item.component.ts

@@ -390,6 +390,8 @@ export class ServiceItemComponent implements OnInit {
       this.router.navigate(['vehicleMaintenanceList/' + dataPage.id], {relativeTo: this.route});
     } else if(dataPage.id == 47) {
       this.router.navigate(['registerMovementVehicleList/' + dataPage.id], {relativeTo: this.route});
+    } else if(dataPage.id == 48) {
+      this.router.navigate(['existingReportVehicle'], {relativeTo: this.route});
     }
   }
 

src/app/servicesItems/services.component.ts

@@ -212,6 +212,8 @@ getDataService(dataService){
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/vehicleMaintenanceList/' + this.pages[0].id]);
           } else if(this.pages[0].id == 47) {
             this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/registerMovementVehicleList/' + this.pages[0].id]);
+          } else if(this.pages[0].id == 48) {
+            this.router.navigate(['/service/' + this.idUser + '/' + dataService.id + '/existingReportVehicle']);
           }
         },
         (error) => {