OfficeSales.html (Angular) Source Code

1. 139 lines of code:
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Office Sales Angular</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();
    });

    $scope.getSales = function(){
        GetSales.getPost($scope.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 $http.get('OfficeSales_api.php'+query)
            .then(function (response) {
                return response.data;
            });
        }
    };
})

.service('GetOffices', function($http) {
    return {
        getPost: function() {
            var query = '?function=offices';
            return $http.get('OfficeSales_api.php'+query)
            .then(function (response) {
                return response.data;
            });
        }
    };
})
    </script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<div class="container panel panel-default">
    <header class="jumbotron">
        <a href="javascript:window.location.href=window.location.href.substring(0,location.href.lastIndexOf('/')+1)"><img class="img-fluid" style="max-width:100%; height:auto;" src="logo.jpg"></a>
    </header>
    <main>
        <form 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 class="form-control"
                        ng-model="data.OfficeID"
                        ng-options="office.OfficeID as office.OfficeLocation for office in offices"
                        ng-change="getSales()"
                    >
                    </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>

                        <tr ng-repeat="sale in sales">
                            <td>
                                <span class="col-xs-3">{{ sale.AgentName }}</span>
                                <span class="col-xs-2 text-center">{{ sale.SaleID }}</span>
                                <span class="col-xs-2 text-right">{{ 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">{{ sale.SaleDate | date:'mediumDate' }}</span>
                                        <span class="col-xs-10 col-xs-offset-2 col-sm-5 col-sm-offset-0">{{ sale.DestinationName }}</span>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>
                                <span class="col-xs-3">Total</span>
                                <span class="col-xs-2"></span>
                                <span class="col-xs-2 text-right">{{ data.total | currency }}</span>
                                <span class="col-xs-5"></span>
                            </th>
                        </tr>
                    </table>
                </div>  
            </div>
        </form>
    </main>
</div>

</body>
</html>


Back