
<div style="float:left; width: 100%; padding-top: 6%;">
    <br><br>
    <div *ngIf="Load"  >
      <div class="loading">Loading&#8230;</div>
    </div>
    <h5>Trip Details:<div  style="float:right;    font-size: 13px;">
        <owl-date-time ngDefaultControl [name]="'date1'" [(ngModel)]="date1" [hourFormat]="'12'" [type]="'calendar'"  [autoClose]="true"></owl-date-time>    </div> </h5>
        <!-- [dateFormat]="'DD/MM/YYYY'"  (ngModelChange)="table1ch()" -->
        <!--  <button  title="Add Devices" style="border:1px solid transparent; background-color: transparent;">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon>
           
         </button> -->
    <!--    <button md-tooltip="Add Device" style="border:1px solid transparent; background-color: transparent;margin-top:29px" (click)="adddev()">   <md-icon style="float: right;width:30px;height:30px;">add</md-icon></button> -->
           <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>From Date</th>
               <th>Form location</th>
               <th>To Date</th>
               <th>To Location</th>
               <th>
                 <span>
                  Distance
                 </span>
                 <span style="margin-left:2px;">
                   (Km/hr)
                 </span>
               </th>
          
             </tr>
           </thead>
         
           <tbody>
      
        <tr *ngFor="let device of trip_detail_log">

              <td   style="cursor:pointer">{{device.startTime}}</td>

               <td  style="cursor:pointer">{{device.start_address}}</td>

               <td  style="cursor:pointer" >{{device.endTime}}</td>

               <td  style="cursor:pointer" ></td>

              <td  style="cursor:pointer">{{device.distance}}</td>
          
          

            <!--    <td>
                <md-slide-toggle 
                [(ngModel)]="device.maintenance"
                (change)="onChange($event,device._id)" 
                ></md-slide-toggle>
              </td -->

             <!--  <td>
                
                  <p><button md-tooltip="Edit" style="border:1px solid transparent; background-color: transparent;"(click)="openDialog2(device._id,device.Device_Des,device.sim_number,device.Device_Name)">   
                 
                      <md-icon>edit</md-icon></button></p>
              </td> -->
              <!--  <td> <p><button md-tooltip="Remove Device" style="border:1px solid transparent; background-color: transparent;"(click)="delete(device.Device_ID)">   
                 
                <md-icon>delete</md-icon></button></p>
               </td> -->
           </tr>  
           </tbody> 
         </table> 
       
 
   
</div>

