<div class="dashboardClock">{{ myDate  | amTz:'Asia/Taipei'| amDateFormat: 'YYYY/MM/DD HH:mm A' }}</div>
<h4>{{loginUser}}，您好!</h4>
<div class="row">
  <div class="col">
    <div class="content-block">
      <ngx-loading [show]="loadingEvent"></ngx-loading>
      <div class="right">
        <input type="search" class="form-group" [(ngModel)]="this.tableQueryEventData.Term" placeholder="查詢車號">
        <button type="submit" class="btn btn-sm btn-outline-primary" (click)="doEventSearch()">
          <i class="fa fa-search" aria-hidden="true"></i>
        </button>
        <button type="submit" class="btn btn-sm btn-outline-danger" (click)="clearEventSearch()">
          <i class="fa fa-times" aria-hidden="true"></i>
        </button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th (click)="orderEvent('Id')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'Id'"></i>
                序號</th>
              <th (click)="orderEvent('Number')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'Number'"></i>
                車號</th>
              <th (click)="orderEvent('SiteName')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'SiteName'"></i>
                違規地點</th>
              <th (click)="orderEvent('EventName')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'EventName'"></i>
                違規項目</th>
              <th (click)="orderEvent('InTime')">
                <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'InTime'"></i>
                違規時間</th>
                <th (click)="orderEvent('Status')">
                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAscEvent, 'desc icon-arrow-down-circle': !IsAscEvent}" *ngIf="this.itemEvent === 'Status'"></i>
                  狀態</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let eventData of eventPageList">
              <td>{{eventData.Id}}</td>
              <td>{{eventData.Number}}</td>
              <td>{{eventData.SiteName}}</td>
              <td>{{eventData.EventName}}</td>
              <td>{{eventData.InTime}}</td>
              <td>{{eventData.Status}}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="noData" *ngIf="eventPageList.length == 0">
        暫無資料
      </div>
      <div *ngIf="eventPageList.length > 0" class="pagination_center">
        <div class="pagination">
          <span *ngFor="let page of pageEventLinks;">
            <a *ngIf="page.pageNo!==this.tableQueryEventData.CurrentPage" (click)="onEventPageChange($event,page.pageNo)">{{page.text}}</a>
            <a *ngIf="page.pageNo===this.tableQueryEventData.CurrentPage" class="active">{{page.text}}</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="row">
  <div class="col-5">
    <ngx-loading [show]="loadingEventCount"></ngx-loading>
    <div class="card">
      <div class="card-header">
        處理進度
      </div>
      <div class="card-body">
        <div class="search-bar-out">
          查詢區間
          <div class="col-sm search-bar">
            <my-date-picker name="startDate" [options]="myDatePickerOptions" [(ngModel)]="this.startDT" required></my-date-picker>
          </div>
          至
          <div class="col-sm search-bar">
            <my-date-picker name="endDate" [options]="myDatePickerOptions" [(ngModel)]="this.endDT" required></my-date-picker>
          </div>
          <div>
            <button type="submit" class="btn btn-sm btn-outline-primary search-bar" (click)="getEventCountByInterval(this.startDT.formatted, this.endDT.formatted)">
              <i class="fa fa-search" aria-hidden="true"></i>
            </button>
          </div>
      </div>
      <br>
      <br>
        <div class="chart-wrapper">
          <div class="row">
            <div class="col">
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">已開單</th>
                    <th scope="col">裁決中</th>
                    <th scope="col">已駁回</th>
                    <th scope="col">未處理</th>
                    <th scope="col">不開單</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{{eventCountByInterval.PunishedCount}}</td>
                    <td>{{this.eventCountByInterval.CheckPunishedCount}}</td>
                    <td>{{this.eventCountByInterval.RejectedCount}}</td>
                    <td>{{this.eventCountByInterval.NoStatusCount}}</td>
                    <td>{{this.eventCountByInterval.NoPunishedCount}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <canvas id="myChart"></canvas>
            </div>
          </div>
          <div class="row justify-content-center">
            <div class="col" align="center">
            </div>
          </div>
      </div>
      </div>
    </div>
  </div>
  <div class="col-3">
    <ngx-loading [show]="loadingEventYear"></ngx-loading>
    <div class="card">
      <div class="card-header">
        今年累計處理案件數
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-body">
                <div align="center">
                  <h4>{{eventCountByThisYear}} 件</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col" align="center">
            <h4>本月新增 {{eventCountByThisMonth}} 件</h4>
            <a href="#/mro/mro004"> 查看統計表 </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-4">
    <ngx-loading [show]="loadingMalfunction"></ngx-loading>
    <div class="card">
      <div class="card-header">
        設備狀態
      </div>
      <div class="card-body scroll" style="max-height: 400px;">
        <div class="row">

          <div class="col">

            <table class="table">
              <thead>
                <tr>
                  <th scope="col" style="white-space: nowrap">行政區</th>
                  <th scope="col" style="white-space: nowrap">站點名稱</th>
                  <th scope="col" style="white-space: nowrap">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let siteMalfunction of siteMalfunctionList">
                  <th>{{siteMalfunction.Area}}</th>
                  <td>{{siteMalfunction.SiteName}}</td>
                  <td>
                    <button type="button" class="btn btn-success" data-toggle="modal"  [hidden]="siteMalfunction.SiteStatus === '1'" (click)="setWarningModal(siteMalfunction, warningModal);">運作正常</button>
                    <button type="button" class="btn btn-danger"  data-toggle="modal"  [hidden]="!(siteMalfunction.SiteStatus === '1')" (click)="setWarningModal(siteMalfunction, warningModal);">設備故障</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<br>
<div class="row">

</div>
<br>
<div class="row">
  <div class="col">
    <h5>公佈欄</h5>
    <ngx-loading [show]="loadingAnnounce"></ngx-loading>
    <div class="table-responsive">
      <table class="table table-hover" style="table-layout:fixed;">
        <thead>
          <tr>
              <th (click)="orderAnnounce('Title')">
                  <i [ngClass]="{'asc icon-arrow-up-circle': IsAscAnnounce, 'desc icon-arrow-down-circle': !IsAscAnnounce}" *ngIf="this.itemAnnounce === 'Title'"></i>
                  標題
                </th>
            <th (click)="orderAnnounce('Content')">
              <i [ngClass]="{'asc icon-arrow-up-circle': IsAscAnnounce, 'desc icon-arrow-down-circle': !IsAscAnnounce}" *ngIf="this.itemAnnounce === 'Content'"></i>
              摘要
            </th>
            <th (click)="orderAnnounce('StartOn')">
              <i [ngClass]="{'asc icon-arrow-up-circle': IsAscAnnounce, 'desc icon-arrow-down-circle': !IsAscAnnounce}" *ngIf="this.itemAnnounce === 'StartOn'"></i>
              公告日期</th>
          </tr>
        </thead>
        <tbody *ngIf="announcePageList.length > 0">
          <tr *ngFor="let announceData of announcePageList" (click)="setAnnounceModal(announceData, announceModal);">
            <td style="width:20%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;">{{announceData.Title}}</td>
            <td style="width:60%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;">{{announceData.Content}}</td>
            <td style="width:20%;white-space:nowrap;overflow:hidden; text-overflow:ellipsis;">{{announceData.StartOn}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="noData" *ngIf="announcePageList.length == 0">
      暫無資料
    </div>
    <div *ngIf="announcePageList.length > 0" class="pagination_center">
      <div class="pagination">
        <span *ngFor="let page of pageAnnounceLinks;">
          <a *ngIf="page.pageNo!==this.tableQueryAnnounceData.CurrentPage" (click)="onAnnouncePageChange($event,page.pageNo)">{{page.text}}</a>
          <a *ngIf="page.pageNo===this.tableQueryAnnounceData.CurrentPage" class="active">{{page.text}}</a>
        </span>
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div bsModal #announceModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" style="max-width: 800px;" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">公告</h4>
        <button type="button" class="close" (click)="announceModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="title">標題</label>
          <input type="text" class="form-control" id="title" name="title" #title="ngModel" [(ngModel)]="announceModalData.Title"
            readonly placeholder="標題">
        </div>
    <div class="form-group">
      <label for="content">摘要</label>
      <textarea type="text" rows="10"cols="100" class="form-control" id="content" name="content" #content="ngModel" [(ngModel)]="announceModalData.Content"
      readonly placeholder="摘要"></textarea>
    </div>
    <div class="form-group">
      <label for="announceDT">公告日期</label>
      <div class="form-control">
        <input type="text" class="form-control" id="announceDT" name="announceDT" #announceDT="ngModel" [(ngModel)]="announceModalData.StartOn"
        readonly placeholder="公告日期">
      </div>
    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-danger" (click)="announceModal.hide()">取消</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>




<div bsModal #warningModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-danger" style="max-width: 800px;" role="document">
    <div class="modal-content" >
      <div class="modal-header">
        <h4 class="modal-title">設備故障清單</h4>
        <button type="button" class="close" (click)="warningModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">站點ID</th>
              <th scope="col">廠商代碼</th>
              <th scope="col">設備類型</th>
              <th scope="col">設備ID</th>
              <th scope="col">訊息</th>
              <th scope="col">時間</th>
              <th scope="col">狀態</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let warning of warningModalList">
              <td>{{warning.Siteid}}</td>
              <td>{{warning.CompanyCode}}</td>
              <td>{{warning.DeviceType}}</td>
              <td>{{warning.DeviceID}}</td>
              <td style="white-space:nowrap;overflow:hidden; text-overflow:ellipsis;">{{warning.Message}}</td>
              <td>{{warning.Time}}</td>
              <td>{{warning.Status}}</td>
            </tr>

          </tbody>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-sm btn-danger" (click)="warningModal.hide()">取消</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>

