adding additional functionality to the regional-sales and team-efficiency datepickers

regional-sales.js

@@ -42,14 +42,18 @@ function onRegionalSales() {
         $('.row-offcanvas').toggleClass('active');
     });
 
-    $('#end-date').kendoDatePicker({
-        value: new Date(1998, 7, 1),
-        change: onCriteriaChange
-    })
-
     $('#start-date').kendoDatePicker({
         value: new Date(1996, 0, 1),
-        change: onCriteriaChange
+        min: new Date(1996, 0, 1),
+        max: new Date(1998, 5, 30),
+        change: startChange
+    })
+
+    $('#end-date').kendoDatePicker({
+        value: new Date(1998, 7, 9),
+        min: new Date(1996, 0, 1),
+        max: new Date(1998, 7, 9),
+        change: endChange
     })
 
     $("#map").kendoMap({
@@ -403,6 +407,48 @@ function onRegionalSales() {
         setSparkLinesWidths();
     }
 
+    function startChange(e) {
+        var StartDate = $("#start-date").data("kendoDatePicker");
+        var EndDate = $("#end-date").data("kendoDatePicker");
+        var startDate = StartDate.value();
+        var endDate = EndDate.value();
+
+        if (startDate) {
+            startDate = new Date(startDate);
+            startDate.setDate(startDate.getDate());
+            EndDate.min(startDate);
+        } else if (endDate) {
+            StartDate.max(new Date(endDate));
+        } else {
+            endDate = new Date();
+            StartDate.max(endDate);
+            EndDate.min(endDate);
+        }
+
+        onCriteriaChange();
+    }
+
+    function endChange(e) {
+        var StartDate = $("#start-date").data("kendoDatePicker");
+        var EndDate = $("#end-date").data("kendoDatePicker");
+        var startDate = StartDate.value();
+        var endDate = EndDate.value();
+
+        if (endDate) {
+            endDate = new Date(endDate);
+            endDate.setDate(endDate.getDate());
+            StartDate.max(endDate);
+        } else if (startDate) {
+            EndDate.min(new Date(startDate));
+        } else {
+            endDate = new Date();
+            StartDate.max(endDate);
+            EndDate.min(endDate);
+        }
+
+        onCriteriaChange();
+    }
+
     function listCustomers(country) {
         $("#countryName").text(country);
         var companyNames = "";

team-efficiency.html

@@ -2,14 +2,14 @@
     <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>
+            <label for="StartDateTeamEff" class="select-period">Stats from</label>
-            <input id="StartDate" />
+            <input id="StartDateTeamEff" />
-            <span class="k-invalid-msg" data-for="StartDate"></span>
+            <span class="k-invalid-msg" data-for="StartDateTeamEff"></span>
         </div>
         <div class="period-wrapper">
-            <label for="EndDate" class="select-period">To</label>
+            <label for="EndDateTeamEff" class="select-period">To</label>
-            <input id="EndDate" />
+            <input id="EndDateTeamEff" />
-            <span class="k-invalid-msg" data-for="EndDate"></span>
+            <span class="k-invalid-msg" data-for="EndDateTeamEff"></span>
         </div>
     </div>
     <div style="clear:both;"></div>
@@ -43,8 +43,11 @@
                     </div>
                 </div>
             </div>
-            <div id="employeeStats" class="col-xs-12">
+            <div id="employeeStats" class="col-xs-12" style="height:200px">
                 <div id="team-sales" style="height:200px"></div>
+                <div id="team-sales-no-data" class="overlay" style="height:200px; position:relative">
+                    <div>No data available</div>
+                </div>
             </div>
             <div id="employeeSchedule" class="col-xs-12">
                 <h3>Representative orders - schedule</h3>

team-efficiency.js

@@ -26,14 +26,18 @@ function onTeamEfficiency() {
     });
 
     function initWidgets() {
-        $("#StartDate").kendoDatePicker({
+        $("#StartDateTeamEff").kendoDatePicker({
-            value: new Date(1996, 0, 1),
+            value: new Date(1997, 0, 1),
-            change: onCriteriaChange
+            min: new Date(1996, 0, 1),
+            max: new Date(1997, 5, 30),
+            change: startChange
         })
 
-        $("#EndDate").kendoDatePicker({
+        $("#EndDateTeamEff").kendoDatePicker({
-            value: new Date(1998, 7, 1),
+            value: new Date(1997, 5, 30),
-            change: onCriteriaChange
+            min: new Date(1997, 0, 1),
+            max: new Date(1998, 5, 30),
+            change: endChange
         })
 
         $("#employees-list").kendoListView({
@@ -104,18 +108,14 @@ function onTeamEfficiency() {
             autoBind: false,
             dataBound: onAverageSalesDataBound,
             dataSource: {
-                transport: {
+                data: employeeAverageSales,
-                    read: function (options) {
+                schema:{
-                        var result = $.grep(employeeAverageSales, function (e) {
+                    model:{
-                            return e.EmployeeID == options.data.EmployeeID;
+                        fields:{
-                        });
+                            Date: {type: "date"}
-                        options.success(result);
+                        }
                     }
-                },
+                }
-                aggregate: [{
-                    field: "EmployeeSales",
-                    aggregate: "average"
-                }]
             },
             series: [{
                 type: "line",
@@ -166,19 +166,30 @@ function onTeamEfficiency() {
             dataSource: {
                 transport: {
                     read: function (options) {
-                        var result;
+                        var StartDateTeamEff = options.data.StartDateTeamEff;
-                        var startDate = options.data.startDate;
+                        var EndDateTeamEff = options.data.EndDateTeamEff;
-                        var endDate = options.data.endDate;
                         var employee = $.grep(employeeAndTeamSales, function (e) {
                             return e.EmployeeID == options.data.EmployeeID;
                         })[0];
-                        options.success(employee.Sales);
+                        options.success($.grep(employee.Sales, function(e){
+                            var date = kendo.parseDate(e.Date);
+                            if((date>StartDateTeamEff)&&(date<EndDateTeamEff)){
+                                return true;
+                            }else{
+                                return false;
+                            }
+                        }));
                     }
                 }
             },
             legend: {
                 position: "bottom"
             },
+            dataBound: function(e){
+                var dataLength = e.sender.dataSource.view().length
+                $("#team-sales-no-data").toggle(dataLength === 0);
+                e.sender.element.toggle(!(dataLength === 0));
+            },
             series: [{
                 field: "EmployeeSales",
                 categoryField: "Date",
@@ -318,12 +329,12 @@ function onTeamEfficiency() {
             employeeAverageSales = $("#employee-average-sales").data("kendoChart"),
             teamSales = $("#team-sales").data("kendoChart"),
             employeeSales = $("#employee-sales").data("kendoScheduler"),
-            startDate = $("#start-date").data("kendoDatePicker"),
+            StartDateTeamEff = $("#StartDateTeamEff").data("kendoDatePicker"),
-            endDate = $("#end-date").data("kendoDatePicker"),
+            EndDateTeamEff = $("#EndDateTeamEff").data("kendoDatePicker"),
             filter = {
                 EmployeeID: employee.EmployeeID,
-                startDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", startDate.value()),
+                StartDateTeamEff: StartDateTeamEff.value(),
-                endDate: kendo.format("{0:MM/dd/yyyy hh:mm:ss}", endDate.value())
+                EndDateTeamEff: EndDateTeamEff.value()
             },
             template = kendo.template($("#employeeBioTemplate").html());
 
@@ -337,7 +348,67 @@ function onTeamEfficiency() {
 
         teamSales.dataSource.read(filter);
         employeeQuarterSales.dataSource.read(filter);
-        employeeAverageSales.dataSource.read(filter);
+        employeeAverageSales.dataSource.query({
+            filter: [{
+                field: "EmployeeID",
+                operator: "eq",
+                value: employee.EmployeeID
+            },{
+                field: "Date",
+                operator: "gte",
+                value: StartDateTeamEff.value()
+            }, {
+                field: "Date",
+                operator: "lte",
+                value: EndDateTeamEff.value()
+            }],
+            aggregate: [{
+                field: "EmployeeSales",
+                aggregate: "average"
+            }]
+        });
+    }
+
+    function startChange(e) {
+        var StartDateTeamEff = $("#StartDateTeamEff").data("kendoDatePicker");
+        var EndDateTeamEff = $("#EndDateTeamEff").data("kendoDatePicker");
+        var startDate = StartDateTeamEff.value();
+        var endDate = EndDateTeamEff.value();
+
+        if (startDate) {
+            startDate = new Date(startDate);
+            startDate.setDate(startDate.getDate());
+            EndDateTeamEff.min(startDate);
+        } else if (endDate) {
+            StartDateTeamEff.max(new Date(endDate));
+        } else {
+            endDate = new Date();
+            StartDateTeamEff.max(endDate);
+            EndDateTeamEff.min(endDate);
+        }
+
+        onCriteriaChange();
+    }
+
+    function endChange(e) {
+        var StartDateTeamEff = $("#StartDateTeamEff").data("kendoDatePicker");
+        var EndDateTeamEff = $("#EndDateTeamEff").data("kendoDatePicker");
+        var startDate = StartDateTeamEff.value();
+        var endDate = EndDateTeamEff.value();
+
+        if (endDate) {
+            endDate = new Date(endDate);
+            endDate.setDate(endDate.getDate());
+            StartDateTeamEff.max(endDate);
+        } else if (startDate) {
+            EndDateTeamEff.min(new Date(startDate));
+        } else {
+            endDate = new Date();
+            StartDateTeamEff.max(endDate);
+            EndDateTeamEff.min(endDate);
+        }
+
+        onCriteriaChange();
     }
 
     function onQuarterSalesDataBound(e) {
@@ -346,7 +417,7 @@ function onTeamEfficiency() {
     }
 
     function onAverageSalesDataBound(e) {
-        var data = this.dataSource.aggregates()
+        var data = this.dataSource.aggregates();
         if (data.EmployeeSales) {
             $("#employee-average-sales-label").text(kendo.toString(data.EmployeeSales.average, "c2"));
         } else {