<section class="content-header">
  <h4 translate class="subheader-title">
    <span class="subheader-icon fal fa-table"></span>&nbsp;Online Users
    <small> </small>
  </h4>
  <div class="row">
    <div class="col-sm-12">
      <div class="pull-right" style="margin-top: -30px;">
        <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
          <i class="fal fa-chart-area"></i> Go back to dashboard</a>
      </div>
    </div>
  </div>
</section>
<section class="content">
  <div class="box padding-15 clearfix" style="display: block;">

    <div class="row">
      <div class="col-md-2">
        <label style="margin-top: 6px !important;">
          <span style="font-weight: 600;">Offline Users:</span>
        </label>
        <input type="checkbox" (click)="checkbox($event)">
      </div>
      <div class="col-sm-3" style="margin-top: -19px">

      </div>
      <div class="col-sm-2">

      </div>
      <div class="col-sm-3">

      </div>
      <div class="col-sm-2">

      </div>
      <!--<div class="col-sm-3">
          <div class="input-group">
              <a href="#/dashboard" class="btn btn-outline-primary waves-effect waves-themed btn-sm">
                  <i class="fal fa-chart-area"></i> Go back to dashboard</a>
          </div>
        </div>-->
    </div>
    <div class="row">

      <div class="box" style="width: 100% !important;">
        <div class="box-body" style="overflow-y: auto;width: 100% !important;">
          <dx-data-grid
          id="gridContainer"
          [dataSource]="onlineuserslst"
          keyExpr="sno"
          [allowColumnResizing]="true"
          [showBorders]="true"
          [rowAlternationEnabled]="true"
          [columnAutoWidth]="true"
          (onExporting)="onExporting($event)"
          >
          <dxo-header-filter [visible]="true" [allowSearch]="true"></dxo-header-filter>
          <dxo-load-panel
          [enabled]="false">
      </dxo-load-panel>
      
      <dxo-paging [pageSize]="10"></dxo-paging>
          <dxo-pager
          [showPageSizeSelector]="true"
          [allowedPageSizes]="[5,10, 20, 50,100]"
          [showNavigationButtons]="true">
      </dxo-pager>
          <dxi-column dataField="sno" cellTemplate="sno" caption="SNo" > </dxi-column>
          <dxi-column dataField="username" cellTemplate="username" caption="User Name"> </dxi-column>
          <dxi-column dataField="emailid" dataType="date" format="dd-MMM-yyyy" caption="Email ID"></dxi-column>
          <dxi-column dataField="department"></dxi-column>
          <dxi-column dataField="project_subtitle" caption="Project Name"></dxi-column>
          <dxi-column dataField="jobtitle" caption="	Job Title"></dxi-column>
          <dxi-column dataField="lottitle" caption="Lot Title"></dxi-column>
          <dxi-column dataField="stagename_alias" caption="Stage Name"></dxi-column>
          <!-- <dxi-column dataField="lmstatus" caption="Lot Status"></dxi-column> -->
          <!-- <dxi-column dataField="ltstatus" caption="Transaction Status" caption="Status"></dxi-column> -->
          
          <!-- <dxo-export [enabled]="true" [allowExportSelectedData]="true"></dxo-export> -->
          <dxo-scrolling columnRenderingMode="virtual"></dxo-scrolling>

          <div  *dxTemplate="let cellInfo of 'username'">
            <span  *ngIf="cellInfo.data.workareastatus == 1 &&  cellInfo.data.login_status == 1">
              {{cellInfo.data.username}} &nbsp;&nbsp;
              <div class="badge badge-success badgeshadow"><span class="Blink">
                <span style="color: white;font-weight: bold;">
                  Working
                </span></span></div>
         </span>
         <!-- <span *ngIf="cellInfo.data.ltstatus != 'P' && cellInfo.data.login_status == 1 && (cellInfo.data.workareastauts == 0 || cellInfo.data.workareastauts == null)">
          {{cellInfo.data.username}} &nbsp;&nbsp;
     </span> -->
         <span  *ngIf="(cellInfo.data.workareastatus == 0 || cellInfo.data.workareastatus == null) &&  cellInfo.data.login_status == 1 ">
          {{cellInfo.data.username}} &nbsp;&nbsp;
          <span class="badge badge-warning badgeshadow">
           <span style="color: white;font-weight: bold;">Login
           </span>
          </span>
     </span>
     <span *ngIf="(cellInfo.data.workareastatus == 0 || cellInfo.data.workareastatus == null) && cellInfo.data.login_status == 0">
      {{cellInfo.data.username}} &nbsp;&nbsp;
      <span class="badge badge-danger badgeshadow" style="background-color: grey;">
        <span style="color: white;font-weight: bold;">
          Logout
        </span>
        </span>
 </span>
          </div>

          <div *dxTemplate="let cellInfo of 'sno'">
             
            <span *ngIf="cellInfo.data.login_status == 0">
                 {{cellInfo.data.sno}} &nbsp;&nbsp;
                 <span class="fa fa-circle" style="color: grey !important;">

                 </span>
            </span>
            <span *ngIf="cellInfo.data.login_status == 1 && cellInfo.data.workareastatus == 1">
             {{cellInfo.data.sno}} &nbsp;&nbsp;
             <span class="fa fa-circle green ">

             </span>
        </span>
        <span *ngIf="cellInfo.data.login_status == 1 && (cellInfo.data.workareastatus == 0 || cellInfo.data.workareastatus == null) ">
         {{cellInfo.data.sno}} &nbsp;&nbsp;
         <span class="fa fa-circle" style="color: #ffc241 !important" >

         </span>
    </span>
         
         </div>
          </dx-data-grid>
        </div>
      </div>
    </div>
  </div>

</section>

<ngx-spinner bdColor="rgba(255, 255, 255, 0.8)" size="small" color="#000000" type="ball-fall" [fullScreen]="false">
  <p style="color: black;"> Loading... </p>
</ngx-spinner>