OneQlik/src/app/device-report/geofancing-report/geofancing-report.component.html

<app-all-menus></app-all-menus>
<div class="topDiv">
  <div class="row" style="text-align: center; background: #426E86; padding-top: 10px; padding-bottom: 10px; color: white;box-shadow:3px 1px 5px 0px rgb(178, 176, 174)">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <h4>{{'Geofencing Report' | translate}}</h4>
    </div>
  </div>  
  <!-- <div class="row rowStyle" >
    <div class="col-sm-12 col-md-12 col-lg-12">
      <app-report-filter></app-report-filter>
    </div>
  </div> -->
  <div class="row rowStyle">
    <div class="col-sm-3 col-md-3 col-lg-3" style="padding-left: 20px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px;">
      <div class="row" style="margin:0px;height: 84vh;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding:0px">
            <app-report-filter (onReportFIlter)= "getReport($event)" [componentIdentifier]="identifier"></app-report-filter>
        </div>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-lg-9" style="padding-left: 5px; padding-right: 20px; padding-top: 5px;">
      <div class="row" style="margin:0px;height: 84vh;padding-top:10px;padding-bottom:5px;background: white;box-shadow: 3px 1px 5px 0px #b2b0ae;">
        <div class="col-sm-12 col-md-12 col-lg-12">
          <div *ngIf="Load" class="loading">Loading&#8230;</div>
          <div style="width: 100%;height:84vh;">
            <table id="deviceTable" cellspacing="0" style="width: 100%;font-size: 14px;">
                <thead style="background-color:#e0e0e0;color: #444444;">
                    <tr>
                      <th style="text-align: left;">{{'Vehicle Name' | translate}}</th>
                      <th style="text-align: left;">{{'In/Out' | translate}}</th>
                      <th style="text-align: left;">{{'Datetime' | translate}}</th>
                      <th style="text-align: left;">{{'Location' | translate}}</th>
                      <th style="text-align: left;">{{'GeoFence Name' | translate}}</th>
                    </tr>
                </thead>  
            </table>
        </div> 
        </div>
      </div> 
    </div>
  </div>
</div>



<!-- 
      <app-all-menus></app-all-menus>


  <div style="float:left; width: 100%; padding-top:6%;min-height: 100vh;">
    <p class="headStyle">{{'Geofencing Report' | translate}}</p>
    <div class="loading" *ngIf="Load">Loading&#8230;</div> 
    <div class="InputStyle">
      <div class="row">
        <div class="col-md-3">
          <md-select class="selecStyle" [name]="'typdev'" [(ngModel)]="option" placeholder="--{{'Select Geofencing' | translate}}--"  ngDefaultControl>
            <md-option *ngFor="let option of geo_status" [value]="option">
              {{ option.geoname }}
            </md-option>
          </md-select>
        </div>
        <div class="col-md-3">
          <span>{{'From Date' | translate}}</span>
          <owl-date-time [(ngModel)]="Fromdate" [hourFormat]="'12'" [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3">
          <span>{{'To Date' | translate}}</span>
          <owl-date-time [(ngModel)]="todate" [hourFormat]="'12'"  [dateFormat]="'DD/MM/YYYY hh:mm:a'" [autoClose]="true"></owl-date-time>
        </div>
        <div class="col-md-3" style="top: 16px;">
            <button style="background-color: #484848;color:#fdfdfd" md-raised-button class="btn btn-primary w3-button/" (click)="geofancing_Report(Fromdate,todate,option)">{{'SEARCH' | translate}}</button>
            <button style="background-color: #d81111;color:#fdfdfd;" md-raised-button class="btn btn-primary w3-button/" (click)="exportExcel()">{{'Export to excel' | translate}}</button>
          </div>
      </div>
    </div>
    <table  class="table table-striped table-hover " style="overflow-y: hidden;
           overflow-x: hidden;font-size:12px">

      <thead style="background-color:#A2C523;color: white;">
        <tr>
          <th style="text-align: center;">{{'Vehicle Name' | translate}}</th>
          <th style="text-align: center;">{{'In/Out' | translate}}</th>
          <th style="text-align: center;">{{'Datetime' | translate}}</th>
          <th style="text-align: center;">{{'Location' | translate}}</th>
          <th style="text-align: center;">{{'GeoFence Name' | translate}}</th>
        </tr>
      </thead>

      <tbody>

        <tr *ngFor="let device of geofence">

          <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>

          <td style="cursor:pointer;text-align:center">{{device.direction}}</td>

          <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>

          <td style="cursor:pointer;text-align:center">
            <p *ngIf="device.address != undefined">{{device.address}}</p>
            <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"></a>
         
          </td>

          <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>
        </tr>
      </tbody>
    </table>
    <table id="test" class="table table-striped table-hover " style="display:none">

<thead style="background-color:#A2C523;color: white;">
 <tr>
   <th style="text-align: center;">Vehicle Name</th>
   <th style="text-align: center;">In/Out</th>
   <th style="text-align: center;">Datetime</th>
   <th style="text-align: center;">Location</th>
   <th style="text-align: center;">GeoFence Name</th>
 </tr>
</thead>

<tbody>

 <tr *ngFor="let device of geofence">

   <td style="cursor:pointer;text-align:center">{{device.vehicleName}}</td>

   <td style="cursor:pointer;text-align:center">{{device.direction}}</td>

   <td style="cursor:pointer;text-align:center">{{device.timestamp|date:'short'}}</td>

   <td style="cursor:pointer;text-align:center">
     <p *ngIf="device.address != undefined">{{device.address}}</p>
     <a *ngIf="device.address == undefined" href={{addressLink}} target="_blank" (click)= getlink(device) md-tooltip="Click to get device's last location"><img height="20px" width="20px" src="../../../assets/image/addressICON.png"><a href={{getlink(device)}} target="_blank">Click here to get address</a></a>
  
   </td>

   <td style="cursor:pointer;text-align:center">{{device.geoid.geoname}}</td>

 
 

 </tr>
</tbody>
</table>



  </div>
 -->