
<app-all-menus></app-all-menus>
    <div style="float:left; width: 100%;padding-top: 6%;overflow:auto">
        <p class="headStyle">{{'GEOFENCES' | translate}} 
            <button mdTooltip="Add Geofence"
                style="margin-left: -45px;float: right;border:1px solid transparent; background-color: transparent;margin-top:8px;cursor:pointer"
                (click)="addgeo()">
                <md-icon style="width:30px;height:30px;cursor:pointer">add</md-icon>
            </button>
        </p>
        

        
        <!-- <input type="search" id="myInput" name="myInput" type="text" [(ngModel)]="myInput" (ngModelChange)="table1ch()" placeholder="{{'Geofence Search' | translate}}" /> -->
        <md-tab-group (selectedIndexChange)="selectedIndexChange($event)" [selectedIndex]="selectedIndex" >
            <md-tab >
                <ng-template md-tab-label style="background:#ff6f06; color:white;"> <md-icon style="color:#2a00cc;" class="example-tab-icon">layers</md-icon> {{'Polygon' | translate}} </ng-template>
                <!-- <div class="mat-tab-body-content" style="overflow-y: scroll;height: max-content;max-height: max-content;">
                    <table id="myTable" class="table table-striped table-hover " style="overflow-y: auto; overflow-x: auto;font-size:12px">
                        <thead style="background-color:#A2C523;color: white;">
                            <tr>
                               
                                <th>{{'Geofence type' | translate}}</th>
                                <th>{{'Geo Fencing Name' | translate}}</th>
                                <th>{{'Enter Alert' | translate}}</th>
                                <th>{{'Exit Alert' | translate}}</th>
                                <th>{{'Status' | translate}}</th>
                                <th>{{'Vehicles' | translate}}</th>
                                <th>{{'Edit' | translate}}</th>
                                <th>{{'Delete' | translate}}</th>
                                <th>{{'Tracked Vehicles' | translate}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <tr *ngFor="let device of devicesss">
                              
                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.type?device.type:"Not present"}}</td>
                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.geoname }}</td>
                                <td> <md-slide-toggle [(ngModel)]="device.entering" ngDefaultControl (change)="onChange(device._id,device.status,$event.checked,device.exiting)"></md-slide-toggle> </td>
                                <td> <md-slide-toggle [(ngModel)]="device.exiting" ngDefaultControl (change)="onChange(device._id,device.status,device.entering,$event.checked)"></md-slide-toggle> </td>
                                <td> <md-slide-toggle [(ngModel)]="device.status" ngDefaultControl (change)="onChange(device._id,$event.checked,device.entering,device.exiting)"></md-slide-toggle> </td>
                                <td style="cursor:pointer" (click)="vewdev(device._id)">{{device.devicesWithin.length}}</td>
                                <td>
                                    <i class="fas fa-pen" style="cursor: pointer;color:#056f52" (click)="updateGeofence(device)"></i>
                                </td>
                                <td>
                                    <p>
                                        <button md-tooltip="Remove GeoFence" style="border:1px solid transparent; background-color: transparent;cursor:pointer" (click)="delete(device._id)">
                                            <md-icon>delete</md-icon>
                                        </button>
                                    </p>
                                </td>
                                <td>
                                    <p>
                                        <button md-tooltip="Change Untrack Vehicles"
                                            style="border:1px solid transparent; background-color: transparent;cursor:pointer"
                                            (click)="untrack(device)">
                                            <i class="fa fa-edit"></i>
                                        </button>
                                    </p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> -->

                <div class="mat-tab-body-content" style="padding: 10px;overflow-y: scroll;height: max-content;max-height: max-content;">
                    <div style="width: 100%;height:84vh;">
                        <table id="geofence" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
                            <thead style="background-color:#e0e0e0;color: #444444;">
                                <tr>
                                    <th style="text-align:left;width:100px">{{'Geofence type'|translate}} </th>
                                    <th style="text-align:left;width:100px">{{'Geo Fencing Name'|translate}} </th>
                                    <th style="text-align:left;width:100px">{{'Enter Alert'|translate}} </th>
                                    <th style="text-align:left;width:100px">{{'Exit Alert'|translate}} </th>
                                    <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'Vehicles Inside Geofence' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'Area(Acre)' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'Edit' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'Delete' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'Tracked Vehicles' | translate}}</th>
                                    <th style="text-align:left;width:100px">{{'View' | translate}}</th>
                    
                                </tr>
                            </thead>
                        </table>
                    
                    
                    </div>
                </div>


            </md-tab>
            <md-tab style="height: 70vh;" >
                <ng-template md-tab-label style="background: #e2e2e2;" >
                    <div (click)="testTable1()">
                        <md-icon style="color: #056f52;" class="example-tab-icon">radio_button_unchecked</md-icon>
                        <span style="margin-left:4px;margin-left:4px;">{{'Circular' | translate}}</span>
                    </div>
                </ng-template>  
                                <!-- <div class="row">
                                    <div class="col-sm-12 col-md-12 col-lg-12"> 
                                        <div class="tableObj" style="max-height: 66vh;">
                                            <table id="myTable1" class="table table-striped table-hover" >
                                                <thead style="background: #426E86; color: white;">
                                                  <tr>
                                                    <th>{{'POI name' | translate}}</th>
                                                    <th>{{'Address' | translate}}</th>
                                                    <th >{{"Radius" | translate}}</th>
                                                    <th >{{'Lattitude' | translate}}</th>
                                                    <th >{{'Longitude' | translate}}</th>
                                                    <th >{{'Status' | translate}}</th>              
                                                  </tr>
                                                </thead>
                                                <tbody  style="cursor: pointer;">
                                                  <tr *ngFor="let circlularGeofence of circular_geofence">
                                                    <td >{{circlularGeofence.poi.poiname?circlularGeofence.poi.poiname:'NA'}}</td>   
                                                    <td >{{circlularGeofence.poi.address?circlularGeofence.poi.address:'NA'}}</td>
                                                    <td >{{circlularGeofence.radius?circlularGeofence.radius:'NA'}}</td>
                                                    <td >{{circlularGeofence.poi.location.coordinates?circlularGeofence.poi.location.coordinates[1]:"NA"}}</td>
                                                    <td >{{circlularGeofence.poi.location.coordinates?circlularGeofence.poi.location.coordinates[0]:"NA"}}</td>
                                                    <td >{{circlularGeofence.status?circlularGeofence.status:''}}</td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                        </div>
                                    </div>
                                </div> -->
                                <!-- <th>{{'POI name' | translate}}</th>
                                <th>{{'Address' | translate}}</th>
                                <th>{{"Radius" | translate}}</th>
                                <th>{{'Lattitude' | translate}}</th>
                                <th>{{'Longitude' | translate}}</th>
                                <th>{{'Status' | translate}}</th> -->

                                <!--  -->
                                <div class="mat-tab-body-content" style="padding: 10px;overflow-y: scroll;height: max-content;max-height: max-content;">
                                    <div style="width: 100%;height:84vh;">
                                        <table id="geofence1" cellspacing="0" class="display nowrap" style="width: 100%;font-size: 14px;">
                                            <thead style="background-color:#e0e0e0;color: #444444;">
                                                <tr>
                                                    <th style="text-align:left;width:100px">{{'POI name'|translate}} </th>
                                                    <th style="text-align:left;width:100px">{{'Address'|translate}} </th>
                                                    <th style="text-align:left;width:100px">{{'Radius'|translate}} </th>
                                                    <th style="text-align:left;width:100px">{{'Lattitude'|translate}} </th>
                                                    <th style="text-align:left;width:100px">{{'Longitude' | translate}}</th>
                                                    <th style="text-align:left;width:100px">{{'Status' | translate}}</th>
                                                   
                                
                                                </tr>
                                            </thead>
                                        </table>
                                
                                
                                    </div>
                                </div>

                                <!-- --------------------- -->
                                <!-- <div *ngIf="geo.t">
                                    <canvas baseChart width="200" height="200" [data]="geo.statusCount" [chartType]="doughnutChartType" [labels]="geo.statusList"
                                        [options]="options" [colors]="doughnutChartColor">
                                    
                                    </canvas>
                                    <div style="position: sticky;
 margin-top: -60%;
 cursor: pointer;
 margin-bottom: 35%;
 margin-left: 25%;
 margin-right: 25%;">
                                        <p style=" text-align: center;
 font-weight: 500;
 margin-bottom: 0px;
 color: #6191d7;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin: 5px 0px -5px 0px;" md-tooltip="{{geo.name}}"> {{geo.name}}
                                        </p>
                                        <p style="text-align:center;font-size:15px;" md-tooltip="{{geo.totalCount}}">{{geo.totalCount}}</p>
                                    </div>
                                </div>

                                <div *ngIf="!geo.t" style="width: 200px;
 height: 200px;
 border: 25px solid #e5e5e5;
 border-radius: 50%;
 text-align: center;
 display: inline-block;">
                                    <div style="position: sticky;
 cursor: pointer;
 margin-top:35%;
 margin-bottom: 35%;
 margin-left: 25%;
 margin-right: 25%;">
                                        <p style=" text-align: center;
 font-weight: 500;
 margin-bottom: 0px;
 color: #6191d7;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 margin: 5px 0px -5px 0px;" md-tooltip="{{geo.name}}"> {{geo.name}}
                                        </p>
                                        <p style="text-align:center;font-size:15px;" md-tooltip="{{geo.totalCount}}">{{geo.totalCount}}</p>
                                    </div>
                                </div> -->
                          
            </md-tab>
        </md-tab-group>
    </div>

