fixed reload and added error validation needs better css

airtime_mvc/application/controllers/ListenerstatController.php

@@ -74,6 +74,7 @@ class ListenerstatController extends Zend_Controller_Action
         $this->view->headLink()->appendStylesheet($baseUrl.'css/datatables/css/dataTables.colReorder.min.css?'.$CC_CONFIG['airtime_version']);
         $this->view->headLink()->appendStylesheet($baseUrl.'js/datatables/plugin/TableTools-2.1.5/css/TableTools.css?'.$CC_CONFIG['airtime_version']);
         $this->view->headLink()->appendStylesheet($baseUrl.'css/jquery.ui.timepicker.css?'.$CC_CONFIG['airtime_version']);
+        $this->view->headLink()->appendStylesheet($baseUrl.'css/show_analytics.css'.$CC_CONFIG['airtime_version']);
 
         $user = Application_Model_User::getCurrentUser();
         if ($user->isUserType(array(UTYPE_SUPERADMIN, UTYPE_ADMIN, UTYPE_PROGRAM_MANAGER))) {

airtime_mvc/application/views/scripts/listenerstat/show.phtml

@@ -1,5 +1,6 @@
 <div id="showlistenerstat_content" class="alpha-block padded">
     <H2><?php echo _("Listeners")?></H2>
+    <div class="error_window"></div>
     <div id="date_form" style="float:left; margin:0px 0px">
         <h3 style="padding-left: 0px">Date Range</h3>
         <?php echo $this->date_form; ?>

airtime_mvc/public/css/show_analytics.css

@@ -0,0 +1,10 @@
+div.date_form input.error {
+    background-color: rgba(255,0,0,0.2);
+}
+div.error_window.error {
+    background-color: rgba(255,0,0,0.2);
+    color:white;
+}
+div.error_window {
+    background-color: white;
+}

airtime_mvc/public/js/airtime/listenerstat/showlistenerstat.js

@@ -16,7 +16,7 @@ $(document).ready(function() {
         var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
         var start = oRange.start;
         var end = oRange.end;
-        brokeDataTable();
+        showListenerDataTable();
     });
 });
 
@@ -36,9 +36,9 @@ function addDatePicker() {
         dayNamesMin: i18n_days_short,
         onSelect: function(sDate, oDatePicker) {
             $(this).datepicker( "setDate", sDate );
-        }
+        },
+        onClose: validateTimeRange
     };
-
     oBaseTimePickerSettings = {
         showPeriodLabels: false,
         showCloseButton: true,
@@ -46,13 +46,14 @@ function addDatePicker() {
         showLeadingZero: false,
         defaultTime: '0:00',
         hourText: $.i18n._("Hour"),
-        minuteText: $.i18n._("Minute")
+        minuteText: $.i18n._("Minute"),
+        onClose: validateTimeRange
     };
 
-    showlistenerstat_content.find(dateStartId).datepicker(oBaseDatePickerSettings);
+    showlistenerstat_content.find(dateStartId).datepicker(oBaseDatePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings);
+    showlistenerstat_content.find(timeStartId).timepicker(oBaseTimePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings);
+    showlistenerstat_content.find(dateEndId).datepicker(oBaseDatePickerSettings).blur(validateTimeRange());
-    showlistenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings);
+    showlistenerstat_content.find(timeEndId).timepicker(oBaseTimePickerSettings).blur(validateTimeRange());
 }
 
 function getStartEnd() {
@@ -60,22 +61,35 @@ function getStartEnd() {
     return AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
 }
 
+function validateTimeRange() {
+    var oRange,
+        inputs = $('.date_form > input'),
+        error_window = $('.error_window'),
+        start, end;
 
-function showSummaryList(start, end) {
+    oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
-    var url = baseUrl+"playouthistory/show-history-feed",
-        data = {
-            format: "json",
-            start: start,
-            end: end
-        };
 
-    $.post(url, data, function(json) {
+    start = oRange.start;
-        drawShowList(json);
+    end = oRange.end;
-    });
+
+    if (end >= start) {
+        error_window.removeClass('error');
+        $('.error_window').html('');
+    }
+    else {
+        error_window.addClass('error');
+        console.log('bad')
+        $('.error_window').html('Your start date time is after your end date time');
+    }
+
+    return {
+        start: start,
+        end: end,
+        isValid: end >= start
+    };
 }
 
-
+function showListenerDataTable() {
-function brokeDataTable() {
     var oRange = AIRTIME.utilities.fnGetScheduleRange(dateStartId, timeStartId, dateEndId, timeEndId);
     var start = oRange.start;
     var end = oRange.end;
@@ -90,6 +104,7 @@ function brokeDataTable() {
             /* last name */  {"sName": "maximum_number_of_listeners", "mDataProp": "maximum_number_of_listeners"}],
         "sAjaxSource":         baseUrl+'Listenerstat/get-all-show-data',
         "sAjaxDataProp": "",
+        "bDestroy": true,
         "fnServerData": function ( sSource, aoData, fnCallback ) {
             aoData.push({"start": start, "end": end});
           $.ajax( {