Let user know if the iCal feed is too big to load (#88)

Author: Mikail Bayram

control/content/controllers/content.home.controller.js

@@ -25,6 +25,7 @@
         ContentHome.validLinkSuccess = false;
         ContentHome.validLinkFailure = false;
         ContentHome.validLinkNoEvents = false;
+        ContentHome.largePayload = false;
         var tmrDelay = null;
 
         var updateMasterItem = function (data) {
@@ -111,6 +112,7 @@
         ContentHome.validateCalUrl = function () {
           function successCallback(resp) {
             Buildfire.spinner.hide();
+            ContentHome.largePayload = false;
             if (resp && resp.events) {
               ContentHome.validLinkSuccess = true;
               $timeout(function () {
@@ -158,6 +160,18 @@
          * */
         init();
 
+        buildfire.messaging.onReceivedMessage = function(message) {
+          switch(message.cmd) {
+            case "PAYLOAD_TOO_LARGE":
+              $timeout(function () {
+                ContentHome.largePayload = true;
+              },0);
+              return;
+            default:
+              return;
+          }
+        }
+
         /*
          * watch for changes in data and trigger the saveDataWithDelay function on change
          * */

control/content/templates/home.html

@@ -9,7 +9,7 @@
              ng-change="ContentHome.clearData()"/>
     </div>
     <div class="col-md-4 pull-right">
-      <button class="btn btn-primary pull-right stretch"
+      <button class="btn btn-success pull-right stretch"
               ng-click="ContentHome.validateCalUrl()"
               ng-disabled="!ContentHome.calUrl">Validate
       </button>
@@ -29,5 +29,8 @@
         >There is
       an error with this feed. Please check and try again.
     </div>
+    <div class="alert alert-sm alert-warning margin-top-ten" ng-show="ContentHome.largePayload">
+      Warning: Your calendar feed seems to be very large and will load slowly for your users. Please consider deleting old and redundant events to prevent longer load times
+    </div>
   </div>
 </div>

widget/app.services.js

@@ -74,6 +74,7 @@
         };
         var getFeedEvents = function (url, date, offset, refreshData, requestType) {
             console.log("start getFeedEvents: " + new Date());
+            var requestStart = +new Date();
             var deferred = $q.defer();
             if (!url) {
                 deferred.reject(new Error('Undefined feed url'));
@@ -102,6 +103,7 @@
                                     return e;
                                 }).then(function (r) {
                                     postObj.offset = i;
+                                    buildfire.spinner.show();
                                     return $http({
                                         method: "post",
                                         url: getProxyServerUrl() + '/events',
@@ -134,6 +136,15 @@
                                 //duplicated events - filter
 
                                 deferred.resolve(finalResults);
+                                var requestEnd = +new Date() - requestStart;
+                                buildfire.spinner.hide();
+                              
+                                // if it took longer than 3s to load
+                                if(requestEnd > 3000) {
+                                  buildfire.messaging.sendMessageToControl({
+                                    cmd: "PAYLOAD_TOO_LARGE",
+                                  });
+                                }
                                 console.log("end getFeedEvents: " + new Date());
                             });
                         });

widget/controllers/widget.feed.controller.js

@@ -574,13 +574,15 @@
           $scope.today();
 
           $scope.getDayClass = function (date, mode) {
-              var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
+              var dayToCheck = new Date(date ? date : new Date()).setHours(0, 0, 0, 0);
               var currentDay;
-              for (var i = 0; i < WidgetFeed.eventsAll.length; i++) {
-                  currentDay = new Date(WidgetFeed.eventsAll[i].startDate).setHours(0, 0, 0, 0);
-                  if (dayToCheck === currentDay) {
-                      return 'eventDate avoid-clicks-none';
-                  }
+              if(WidgetFeed.eventsAll) {
+                for (var i = 0; i < WidgetFeed.eventsAll.length; i++) {
+                    currentDay = new Date(WidgetFeed.eventsAll[i].startDate).setHours(0, 0, 0, 0);
+                    if (dayToCheck === currentDay) {
+                        return 'eventDate avoid-clicks-none';
+                    }
+                }
               }
           };
 

widget/index.html

@@ -52,7 +52,6 @@
             <div
                 ng-class="{'eventDateNew button span:after': !WidgetFeed.eventClassToggle}" ng-style="deviceWidth ? {'min-height': (9 * deviceWidth / 11) + 'px' }:{'min-height': (9 * 320 / 11) + 'px' }">
               <datepicker ng-model="dt" show-weeks="false" max-mode="day"
-                          ng-if="WidgetFeed.eventsAll"
                           class="calendar-day" show-year="false"
                           custom-class="getDayClass(date, mode)"
                           ng-click="WidgetFeed.getEventDate(dt)">