Add team efficiency view.
This commit is contained in:
Atanas Korchev
Родитель
836c75c059
Коммит
655b52ab71
|
|
@ -1,4 +1,4 @@
|
|||
var app = angular.module('app', ['ngNewRouter', 'ngResource', 'app.regional', 'app.products', 'kendo.directives']).controller('AppController', ['$router', AppController]);
|
||||
var app = angular.module('app', ['ngNewRouter', 'ngResource', 'app.regional', 'app.team', 'app.products', 'kendo.directives']).controller('AppController', ['$router', AppController]);
|
||||
|
||||
app.factory('Customers', ['$resource', function($resource) {
|
||||
return $resource('./Content/customers.json');
|
||||
|
|
@ -6,6 +6,21 @@ app.factory('Customers', ['$resource', function($resource) {
|
|||
.factory('ProductDetails', ['$resource', function($resource) {
|
||||
return $resource('./Content/product-details.json');
|
||||
}])
|
||||
.factory('EmployeeList', ['$resource', function($resource) {
|
||||
return $resource('./Content/employees-list.json');
|
||||
}])
|
||||
.factory('EmployeeSales', ['$resource', function($resource) {
|
||||
return $resource('./Content/employee-sales.json');
|
||||
}])
|
||||
.factory('EmployeeTeamSales', ['$resource', function($resource) {
|
||||
return $resource('./Content/employee-and-team-sales.json');
|
||||
}])
|
||||
.factory('EmployeeAverageSales', ['$resource', function($resource) {
|
||||
return $resource('./Content/employee-average-sales.json');
|
||||
}])
|
||||
.factory('EmployeeQuarterSales', ['$resource', function($resource) {
|
||||
return $resource('./Content/employee-quarter-sales.json');
|
||||
}])
|
||||
.factory('ProductSales', ['$resource', function($resource) {
|
||||
return $resource('./Content/product-sales.json');
|
||||
}])
|
||||
|
|
@ -31,7 +46,8 @@ app.factory('Customers', ['$resource', function($resource) {
|
|||
AppController.$routeConfig = [
|
||||
{ path: '/', redirectTo: '/regional-sales' },
|
||||
{ path: '/regional-sales', component: 'regionalSales' },
|
||||
{ path: '/products-orders', component: 'productsOrders' }
|
||||
{ path: '/products-orders', component: 'productsOrders' },
|
||||
{ path: '/team-efficiency', component: 'teamEfficiency' }
|
||||
];
|
||||
|
||||
function AppController ($router) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
<div id="main-section-header" class="row">
|
||||
<h2 id="team-efficiency" class="col-xs-3">Team efficiency</h2>
|
||||
<div id="dateFilter" class="col-xs-9">
|
||||
<div class="period-wrapper">
|
||||
<label for="StartDate" class="select-period">Stats from</label>
|
||||
<input id="start-date" kendo-date-picker />
|
||||
<span class="k-invalid-msg" data-for="StartDate"></span>
|
||||
</div>
|
||||
<div class="period-wrapper">
|
||||
<label for="EndDate" class="select-period">To</label>
|
||||
<input id="end-date" kendo-date-picker />
|
||||
<span class="k-invalid-msg" data-for="EndDate"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
|
||||
<div class="main-section-content row" style="">
|
||||
<div id="employee-list" class="col col-xs-2">
|
||||
<h3>TEAM MEMBERS</h3>
|
||||
<div id="employees-list"
|
||||
kendo-list-view
|
||||
k-selectable="'single'"
|
||||
k-data-source="teamEfficiency.employeeList"
|
||||
k-on-change="teamEfficiency.changeCurrentEmployee(dataItem)"
|
||||
>
|
||||
<div class="employee" k-template>
|
||||
<div class="employee-wrapper">
|
||||
<img ng-src="./Content/Employees/{{dataItem.EmployeeID}}-t.png" class="img-responsive employee-list-image"/>
|
||||
<dl class="employee-list-details">
|
||||
<dt class="name">{{dataItem.FirstName}} {{dataItem.LastName}}</dt>
|
||||
<dd class="title">{{dataItem.Title}}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="employee-details-wrapper" class="col col-xs-10">
|
||||
<div id="employee-details" class="row">
|
||||
<div id="employee-about" class="col-xs-12 placeholder">
|
||||
<div class="row">
|
||||
<div id="employeeBio" class="col-xs-12 col-sm-4">
|
||||
<div>
|
||||
<h3>ABOUT</h3>
|
||||
<img ng-src="./Content/Employees/{{teamEfficiency.currentEmployee.EmployeeID}}.png" class="img-responsive employee-details-image" />
|
||||
<dl class="employee-bio-details">
|
||||
<dt class="name">{{teamEfficiency.currentEmployee.FirstName}} {{teamEfficiency.currentEmployee.LastName}}</dt>
|
||||
<dd class="title">{{teamEfficiency.currentEmployee.Title}}</dd>
|
||||
<dd class="phone"><span class="icon icon-mobile"></span>{{teamEfficiency.currentEmployee.HomePhone}}</dd>
|
||||
<!--
|
||||
<dd><a href='\\#' class='bioTooltip'> >>FULL BIO <span style='display:none;'>#:Notes#</span></a></dd>
|
||||
-->
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<h3>Quarter to date sales</h3>
|
||||
<span id="employee-quarter-sales-label">{{teamEfficiency.currentEmployeeQuarterSales[0].Current | currency }}</span>
|
||||
<div class="sparkline-container">
|
||||
<div id="employee-quarter-sales" style="height:30px"
|
||||
kendo-chart
|
||||
k-theme="'metro'"
|
||||
k-tooltip="false"
|
||||
k-data-source="teamEfficiency.currentEmployeeQuarterSales"
|
||||
k-series="[{type:'bullet',currentField:'Current',targetField:'Target'}]"
|
||||
k-legend="{visible:false}"
|
||||
k-category-axis="{labels:{visible:false},majorGridLines:{visible:false}}"
|
||||
k-value-axis="{type:'numeric',labels:{visible:false},majorTicks:{visible:false},majorGridLines:{visible:false}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<h3>Monthly Average Sales</h3>
|
||||
<span id="employee-average-sales-label">{{teamEfficiency.currentEmployeeAverageSalesNumber | currency }}</span>
|
||||
<div class="sparkline-container">
|
||||
<div id="employee-average-sales" style="height:30px"
|
||||
kendo-chart
|
||||
k-theme="'metro'"
|
||||
k-series="[{type:'line',field:'EmployeeSales',width:1.5,markers:{visible:false}}]"
|
||||
k-category-axis="{type:'date',field:'Date',visible:false,majorGridLines:{visible:false},majorTicks:{visible:false}}"
|
||||
k-legend="{visible:false}"
|
||||
k-data-source="teamEfficiency.currentEmployeeAverageSales"
|
||||
k-value-axis="{type:'numeric',visible:false,labels:{visible:false},majorGridLines:{visible:false},majorTicks:{visible:false}}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="employeeStats" class="col-xs-12">
|
||||
<div id="team-sales" style="height:200px"></div>
|
||||
</div>
|
||||
<div id="employeeSchedule" class="col-xs-12">
|
||||
<h3>Representative orders - schedule</h3>
|
||||
<div id="employee-sales"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
angular.module('app.team', [])
|
||||
.controller('TeamEfficiencyController', ['$q', 'EmployeeList', 'EmployeeSales', 'EmployeeTeamSales', 'EmployeeAverageSales', 'EmployeeQuarterSales',
|
||||
function ($q, EmployeeList, EmployeeSales, EmployeeTeamSales, EmployeeAverageSales, EmployeeQuarterSales) {
|
||||
this.startDate = new Date(1996, 0, 1);
|
||||
|
||||
this.endDate = new Date(1998, 7, 1);
|
||||
|
||||
this.currentEmployee = null;
|
||||
|
||||
this.employeeTeamSales = EmployeeTeamSales.query();
|
||||
|
||||
this.employeeAverageSales = EmployeeAverageSales.query();
|
||||
|
||||
this.employeeQuarterSales = EmployeeQuarterSales.query();
|
||||
|
||||
this.employeeList = EmployeeList.query();
|
||||
|
||||
this.changeCurrentEmployee = function(employee) {
|
||||
this.currentEmployee = employee;
|
||||
|
||||
this.currentEmployeeQuarterSales = this.employeeQuarterSales.filter(function(sale) {
|
||||
return sale.EmployeeID == employee.EmployeeID;
|
||||
})[0].Sales;
|
||||
|
||||
this.currentEmployeeAverageSales = this.employeeAverageSales.filter(function(sale){
|
||||
return sale.EmployeeID == employee.EmployeeID;
|
||||
});
|
||||
|
||||
var dataSource = new kendo.data.DataSource({
|
||||
data: this.currentEmployeeAverageSales,
|
||||
aggregate: [{
|
||||
field: 'EmployeeSales',
|
||||
aggregate: 'average'
|
||||
}]
|
||||
});
|
||||
|
||||
dataSource.read();
|
||||
|
||||
var aggregates = dataSource.aggregates();
|
||||
|
||||
this.currentEmployeeAverageSalesNumber = aggregates.EmployeeSales ? aggregates.EmployeeSales.average : 0;
|
||||
};
|
||||
|
||||
$q.all([this.employeeQuarterSales.$promise, this.employeeList.$promise, this.employeeAverageSales.$promise]).then(function() {
|
||||
this.changeCurrentEmployee(this.employeeList[0]);
|
||||
}.bind(this));
|
||||
}]);
|
||||
|
|
@ -15,6 +15,7 @@
|
|||
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/chroma-js/0.5.7/chroma.min.js"></script>
|
||||
<script src="./components/regional-sales/regional-sales.js"></script>
|
||||
<script src="./components/team-efficiency/team-efficiency.js"></script>
|
||||
<script src="./components/products-orders/products-orders.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
<span class="icon icon-star-empty"></span>Products & Orders</a>
|
||||
</li>
|
||||
<li id="team-efficiency">
|
||||
<a href="team-efficiency.html">
|
||||
<a ng-link="teamEfficiency()">
|
||||
<span class="icon icon-faves"></span>Team Efficiency</a>
|
||||
</li>
|
||||
<li id="about">
|
||||
|
|
|
|||
|
|
@ -53,63 +53,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!--close left column-->
|
||||
<div id="main-section" class="col-xs-12 column">
|
||||
<div id="main-section-header" class="row">
|
||||
<h2 id="team-efficiency" class="col-xs-3">Team efficiency</h2>
|
||||
<div id="dateFilter" class="col-xs-9">
|
||||
<div class="period-wrapper">
|
||||
<label for="StartDate" class="select-period">Stats from</label>
|
||||
<input id="start-date" />
|
||||
<span class="k-invalid-msg" data-for="StartDate"></span>
|
||||
</div>
|
||||
<div class="period-wrapper">
|
||||
<label for="EndDate" class="select-period">To</label>
|
||||
<input id="end-date" />
|
||||
<span class="k-invalid-msg" data-for="EndDate"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear:both;"></div>
|
||||
</div>
|
||||
|
||||
<div class="main-section-content row" style="">
|
||||
|
||||
<div id="employee-list" class="col col-xs-2">
|
||||
<h3>TEAM MEMBERS</h3>
|
||||
<div id="employees-list"></div>
|
||||
</div>
|
||||
<div id="employee-details-wrapper" class="col col-xs-10">
|
||||
<div id="employee-details" class="row">
|
||||
<div id="employee-about" class="col-xs-12 placeholder">
|
||||
<div class="row">
|
||||
<div id="employeeBio" class="col-xs-12 col-sm-4">
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<h3>Quarter to date sales</h3>
|
||||
<span id="employee-quarter-sales-label"></span>
|
||||
<div class="sparkline-container">
|
||||
<div id="employee-quarter-sales" style="height:30px"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-4">
|
||||
<h3>Monthly Average Sales</h3>
|
||||
<span id="employee-average-sales-label"></span>
|
||||
<div class="sparkline-container">
|
||||
<div id="employee-average-sales" style="height:30px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="employeeStats" class="col-xs-12">
|
||||
<div id="team-sales" style="height:200px"></div>
|
||||
</div>
|
||||
<div id="employeeSchedule" class="col-xs-12">
|
||||
<h3>Representative orders - schedule</h3>
|
||||
<div id="employee-sales"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main-section" class="col-xs-12 column"></div>
|
||||
<!--close main column-->
|
||||
</div>
|
||||
<!--close row-->
|
||||
|
|
@ -226,7 +170,6 @@
|
|||
visible: false
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$("#employee-average-sales").kendoChart({
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче