latest updates @APR 20, 2022

src/app/fuel-objectcomponent/fuel-objectcomponent.component.html

@@ -0,0 +1,39 @@
+<div style="height: 535px;">
+  <div class="row" no-padding>
+    <div class="col-9" no-padding>
+        <h4 style="text-align: center; margin-left: 25%;">{{'FUEL EVENTS' | translate}}</h4>
+    </div>
+    <div class="col-3" style="text-align: right" no-padding>
+        <button md-raised-button style="width: 90px; background: red; color: white;text-align: right;margin-bottom: 10%;" (click)="cancel()">{{'CANCEL' | translate}}</button>
+    </div>  
+  </div>
+  <div class="loading" *ngIf="Load">Loading&#8230;</div>
+  <div>
+    <table id='test_history' class="table table-striped table-hover" style="overflow-y: hidden;
+      overflow-x: hidden;font-size:12px">
+      <thead>
+        <tr>
+          <th style="text-align:center">{{'Vehicle Name' | translate}}</th>
+          <th style="text-align:center">{{'Event' | translate}}</th>
+          <th style="text-align:center">{{'Fuel Change (L)' | translate}}</th>
+          <th style="text-align:center">{{'Time' | translate}}</th>
+          <th style="text-align:center">{{'Location' | translate}}</th>
+      </thead>
+      <tbody>
+        <tr *ngFor="let flobj of fuelObject">
+          <td style="text-align: center">{{flobj.vehicleName}}</td>
+          <td style="text-align: center">{{flobj.pour}}</td>
+          <td style="text-align: center">{{flobj.litres}}</td>
+          <td style="text-align: center">{{flobj.timestamp | date :  'd/M/yyyy, h:mm a'}}</td>
+          <td style="text-align: center;cursor:pointer">
+              <div>
+                  <img style="width: 25px" src='../../../assets/image/addressICON.png' (click)="getAddress(flobj)" md-tooltip="Click to get device's last location">
+                  <span style="margin-top:2px;">{{flobj.locationAddress}}</span>
+                </div>  
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+ 
+</div>

src/app/fuel-objectcomponent/fuel-objectcomponent.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FuelObjectcomponentComponent } from './fuel-objectcomponent.component';
+
+describe('FuelObjectcomponentComponent', () => {
+  let component: FuelObjectcomponentComponent;
+  let fixture: ComponentFixture<FuelObjectcomponentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FuelObjectcomponentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FuelObjectcomponentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/fuel-objectcomponent/fuel-objectcomponent.component.ts

@@ -0,0 +1,127 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { ContactService } from '../contact.service';
+import { Router } from '@angular/router';
+import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material';
+
+declare var google:any;
+
+@Component({
+  selector: 'app-fuel-objectcomponent',
+  templateUrl: './fuel-objectcomponent.component.html',
+  styleUrls: ['./fuel-objectcomponent.component.scss']
+})
+export class FuelObjectcomponentComponent implements OnInit {
+  populateHistory:any=[];
+  fuelobjectdata: any;
+  Load : boolean = false;
+  fuelObject: any=[];
+  longitude: any;
+  lattitude: any;
+
+  address_show: any;
+  constructor(private contactService: ContactService,private router: Router,public dialogRef: MdDialogRef<FuelObjectcomponentComponent>,
+    @Inject(MD_DIALOG_DATA) public data: any) { 
+      console.log(data);
+      this.fuelobjectdata = data;
+    }
+
+  ngOnInit() {
+      this.eventCall();
+  }
+
+  eventCall(){
+    // this.Load = true;
+  // "start_time":"2019-08-02T13:22:06.118Z",
+  // "end_time":"2019-08-07T06:22:06.118Z",
+  // "imei":"352094089196627",
+  // "event":"IN"
+  this.fuelObject = [];
+    console.log(this.fuelobjectdata);
+
+    var fuelPayLoad = {
+      "start_time":this.fuelobjectdata.start_time,
+      "end_time":this.fuelobjectdata.end_time,
+      "imei":this.fuelobjectdata.imei,
+    }
+
+    if(this.fuelobjectdata.event == "in"){
+      fuelPayLoad['event'] = "IN"
+    }
+
+    if(this.fuelobjectdata.event == "out"){
+      fuelPayLoad['event'] = "OUT"
+    }    
+
+  // http://localhost:3000/gps/getFuelNotifs
+    this.Load = true;
+  this.contactService.fueleventCall(fuelPayLoad).subscribe(res=>{
+    console.log(res);
+    this.Load = false;
+    if(res.message=="no event found"){
+      this.Load = false;
+    }else{
+
+      this.fuelObject = res;
+      this.Load = false;
+    }
+  },err=>{
+    this.Load = false;
+  })
+  }
+
+  cancel(){
+    this.dialogRef.close();
+  }
+
+
+  locationAddress: any;
+  getAddress(flobj) {
+  
+    var outerThis = this;
+    if (flobj == undefined) {
+      this.lattitude = null;
+      this.longitude = null;
+    } else {
+        this.lattitude = flobj.lat;
+        this.longitude = flobj.long;    
+    }
+
+
+    var geocoder = new google.maps.Geocoder();
+    var latlng = new google.maps.LatLng(this.lattitude, this.longitude);
+
+    var request = {
+      latLng: latlng
+    };
+
+
+
+    geocoder.geocode(request, function (data, status) {
+     
+      if (status == google.maps.GeocoderStatus.OK) {
+        if (data[0] != null) {
+          outerThis.address_show = data[0].formatted_address;
+        
+          flobj.locationAddress = outerThis.address_show;
+         
+
+        } else {
+       
+          flobj.locationAddress = "No address available";
+             
+        }
+      }
+      else {
+
+        outerThis.address_show = outerThis.lattitude + ", " + outerThis.longitude;
+       
+        flobj.locationAddress = outerThis.address_show;
+       
+
+      }
+
+    })
+  }
+
+
+}