Instructions to Add Angular to OfficeSalesBootstrap.php

Start with OfficeSalesBootstrap.php and follow these directions.

1.
<?php include('_global.php'); ?>
<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Office Sales Bootstrap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" 
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

  <script>

angular.module('app', [])

.controller('appCtrl', function ($scope, GetOffices, GetSales) {

  $scope.data = {};

  GetOffices.getPost()
  .then(function(response) {
    $scope.post = response;
    $scope.offices =  $scope.post.records;
    $scope.data.OfficeID =$scope.offices[0].OfficeID;
    $scope.getSales();
  });

  .getSales = function(){
    GetSales.getPost(.data.OfficeID)
    .then(function(response) {
      $scope.post = response;
      $scope.sales =  $scope.post.records;
      var t = 0;
      for (var i = 0; i < $scope.sales.length; i++) { t += parseFloat($scope.sales[i].Amount); }
      $scope.data.total = t;
    });
  };

})

.service('GetSales', function($http) {
  return {
    getPost: function(officeID) {
      var query = '?function=sales&OfficeID='+officeID;
      return $scope.get('OfficeSales_api.php'+query)
      .then(function (response) {
        return response.data;
      });
    }
  };
})

.service('GetOffices', function($http) {
  return {
    getPost: function() {
      var query = '?function=offices';
      return $scope.get('OfficeSales_api.php'+query)
      .then(function (response) {
        return response.data;
      });
    }
  };
})

  </script>

</head>
<body>
<div class="container panel panel-default" ng-app="app" ng-controller="appCtrl">
  <header class="jumbotron">
    <a href="javascript:window.location.href=window.location.href"><img class="img-fluid" style="max-width:100%; height:auto;" src="logo.jpg"></a>
  </header>
  <main>
    <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-horizontal">
      <div class="form-group">
        <label class="col-xs-5 col-sm-offset-1 col-sm-3 text-right control-label">
          Choose an Office:
        </label>
        <div class="col-xs-6 col-sm-3">
          <select name="OfficeID" onchange="javascript:this.form.submit()"
            ng-model="data.OfficeID"
            ng-options="office.OfficeID as office.OfficeLocation for office in offices"
            ng-change="getSales()"
          class="form-control">
<?php
            $OfficeID = $_REQUEST['OfficeID']*1;

            $return = mysql_query("SELECT * FROM OFFICE ORDER BY OfficeLocation", $conn);
            $message = mysql_error($conn);

            while($record = mysql_fetch_assoc($return))
            {
              if($OfficeID == 0) $OfficeID = $record['OfficeID'];

              echo '<option ';

              if($OfficeID == $record['OfficeID']) echo 'selected="selected"';

              echo ' value="'.$record['OfficeID'].'">'.$record['OfficeLocation']."</option>
";
            }
?>
          </select>
        </div>
      </div>

      <div class="form-group">
        <div class="col-xs-12 col-sm-offset-1 col-sm-9">
          <table class="table table-bordered table-striped table-condensed">
            <tr>
              <th>
                <span class="col-xs-3">Agent Name</span>
                <span class="col-xs-2 text-center">SaleID</span>
                <span class="col-xs-2 text-right">Amount</span>
                <div class="col-xs-5">
                  <div class="form-group">
                    <span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-1">Date</span>
                    <span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-0">Destination</span>
                  </div>
                </div>
              </th>
            </tr>
<?php
            $sql = "SELECT * 
                FROM SALE LEFT JOIN AGENT ON AgentKey=AgentID LEFT JOIN DESTINATION ON DestinationID=DestinationKey
                WHERE OfficeKey='$OfficeID'
                ORDER BY AgentName, SaleDate";

            $sales = mysql_query($sql, $conn);
            $message = mysql_error($conn);
            $t = 0;
            while($sale = mysql_fetch_assoc($sales))
            {
?>
              <tr ng-repeat="sale in sales">
                <td>
                  <span class="col-xs-3"><?php echo $sale['AgentName']; ?>{{ sale.AgentName }}</span>
                  <span class="col-xs-2 text-center"><?php echo $sale['SaleID']; ?>{{ sale.SaleID }}</span>
                  <span class="col-xs-2 text-right"><?php echo '$'.number_format($sale['Amount'],2); $t += $sale['Amount']; ?>{{ sale.Amount | currency }}</span>
                  <div class="col-xs-5">
                    <div class="form-group">
                      <span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-1"><?php echo date('M j, Y',strtotime($sale['SaleDate'])); ?>{{ sale.SaleDate | date:'mediumDate' }}</span>
                      <span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-0"><?php echo $sale['DestinationName']; ?>{{ sale.DestinationName }}</span>
                    </div>
                  </div>
                </td>
              </tr>
<?php
            }
?>
            <tr>
              <th>
                <span class="col-xs-3">Total</span>
                <span class="col-xs-2"></span>
                <span class="col-xs-2 text-right"><?php echo '$'.number_format($t,2); ?>{{ data.total | currency }}</span>
                <span class="col-xs-5"></span>
              </th>
            </tr>
          </table>
          
        </div>  
      </div>
    </form>
  </main>
</div>

</body>
</html>

When you are done your file should look something like OfficeSales.html.



Back