eHealthAfrica/direct-delivery-dashboard

<div id="report">
  <div class="report-title clearfix visible-print-block">
    <img src="/assets/images/ehealth-africa-logo.png">
    <h1>eHealth Africa delivery report: round {{reportsRoundCtrl.deliveryRound}}</h1>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading hidden-print">

      <div class="row">
        <div class="col-sm-7">
          <h3 class="panel-title">Delivery report: round {{reportsRoundCtrl.deliveryRound}}</h3>
        </div>
        <div class="col-sm-3">
          <div class="row" ng-if="reportsRoundCtrl.dailyDeliveries.length">
            <div class="col-xs-8 text-right">Page Size:</div>
            <div class="col-xs-4">
              <select
                ng-change="reportsRoundCtrl.getReport(1)"
                ng-model="reportsRoundCtrl.pagination.limit"
                class="form-control" ng-options="item.value as item.label for item in reportsRoundCtrl.limits">
              </select>
            </div>
          </div>
        </div>
        <div class="col-sm-2">

          <div class="btn-group" dropdown dropdown-append-to-body>
            <button id="btn-for-ward" type="button" class="btn btn-primary" dropdown-toggle>
              <i class="fa fa-print"></i> <span>Print</span> <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
              <li role="menuitem"><a class="pointer" ng-click="reportsRoundCtrl.print()">Print current page</a></li>
              <li role="menuitem"><a class="pointer" ng-click="reportsRoundCtrl.print('all')">Print all pages</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div ng-if="!reportsRoundCtrl.dailyDeliveries.length" class="panel-body">
      <div class="alert alert-info">No daily deliveries found.</div>
    </div>
    <table ng-if="reportsRoundCtrl.dailyDeliveries.length" class="table table-condensed table-bordered">
      <thead>
        <tr>
          <th>Driver</th>
          <th>Date</th>
          <th>Drop</th>
          <th>Window</th>
          <th>Zone</th>
          <th>LGA</th>
          <th>Ward</th>
          <th>Facility</th>
          <th>Worker</th>
          <th>Phone</th>
          <th>Status</th>
          <th>Signature</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="delivery in reportsRoundCtrl.dailyDeliveries"
          ng-init="keys = reportsRoundCtrl.keyStates(delivery, $index); driver = reportsRoundCtrl.drivers[delivery.driverID]">
          <td ng-if="keys.driverID.changed" rowspan="{{keys.driverID.rows}}">
            <span ng-bind="::driver.forename"></span> <span ng-bind="::driver.surname"></span>
          </td>
          <td ng-if="keys.date.changed" rowspan="{{keys.date.rows}}" ng-bind="::delivery.date | date:'d-MMM-yyyy'" style="white-space: nowrap;"></td>
          <td ng-bind="::delivery.drop"></td>
          <td ng-bind="::delivery.window" style="white-space: nowrap;"></td>
          <td ng-bind="::delivery.facility.zone" ng-class="reportsRoundCtrl.zoneClass[delivery.facility.zone]"></td>
          <td ng-bind="::delivery.facility.lga"></td>
          <td ng-bind="::delivery.facility.ward"></td>
          <td ng-bind="::delivery.facility.name"></td>
          <td ng-bind="::delivery.facility.contact"></td>
          <td ng-bind="::delivery.facility.phoneNo"></td>
          <td ng-bind="::delivery | deliveryStatus" ng-class="::delivery | deliveryStatus:true"></td>
          <td><img ng-src="{{::delivery.signature.dataUrl}}" class="signature"></td>
        </tr>
      </tbody>
    </table>
    <div class="panel-body hidden-print" ng-if="reportsRoundCtrl.dailyDeliveries.length">
      <div class="row">
        <div class="col-sm-12">
          <ul class="pager ng-isolate-scope ng-valid" >
            <li ng-class="{'disabled': !reportsRoundCtrl.hasPrev()||reportsRoundCtrl.allIn()}" class="previous"><a href="" ng-click="reportsRoundCtrl.selectPage('prev')" class="ng-binding">« Previous</a></li>
            <li>
              Page <i ng-bind="reportsRoundCtrl.pagination.page"></i> of
              <i ng-bind="reportsRoundCtrl.pagination.lastPage"></i>
            </li>
            <li ng-class="{'disabled': !reportsRoundCtrl.hasNext()||reportsRoundCtrl.allIn()}" class="next"><a href="" ng-click="reportsRoundCtrl.selectPage('next')" class="ng-binding">Next »</a></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>