Calendar and series details show download progress

src/UI/Calendar/CalendarView.js

@@ -43,6 +43,12 @@ define(
                     eventRender   : function (event, element) {
                         self.$(element).addClass(event.statusLevel);
                         self.$(element).children('.fc-event-inner').addClass(event.statusLevel);
+
+                        if (event.progress > 0) {
+                            self.$(element).find('.fc-event-time')
+                                           .after('<span class="downloading-progress pull-right">{0}%</span>'
+                                           .format(event.progress.toFixed(0)));
+                        }
                     },
                     eventClick    : function (event) {
                         vent.trigger(vent.Commands.ShowEpisodeDetails, {episode: event.model});
@@ -85,6 +91,7 @@ define(
                         end         : end,
                         allDay      : false,
                         statusLevel : _instance._getStatusLevel(model, end),
+                        progress    : _instance._getDownloadProgress(model),
                         model       : model
                     };
 
@@ -129,6 +136,16 @@ define(
             _reloadCalendarEvents: function () {
                 this.$el.fullCalendar('removeEvents');
                 this._setEventData(this.collection);
+            },
+
+            _getDownloadProgress: function (element) {
+                var downloading = QueueCollection.findEpisode(element.get('id'));
+
+                if (!downloading) {
+                    return 0;
+                }
+
+                return 100 - (downloading.get('sizeleft') / downloading.get('size') * 100);
             }
         });
     });

src/UI/Calendar/calendar.less

@@ -2,6 +2,7 @@
 @import "../Content/Bootstrap/variables";
 @import "../Content/Bootstrap/buttons";
 @import "../Shared/Styles/clickable";
+@import "../Content/variables";
 
 .calendar {
   th, td {
@@ -100,7 +101,7 @@
   }
 
   .purple {
-    border-color : #7932ea;
+    border-color : @nzbdronePurple;
   }
 
   .episode-title {
@@ -148,7 +149,12 @@
   }
 
   .purple {
-    border-color     : #7932ea;
+    border-color     : @nzbdronePurple;
-    background-color : #7932ea;
+    background-color : @nzbdronePurple;
+  }
+
+  .downloading-progress {
+    margin-right: 3px;
+    font-size: 11px;
   }
 }

src/UI/Cells/EpisodeStatusCell.js

@@ -57,7 +57,15 @@ define(
                         var model = this.model;
                         var downloading = QueueCollection.findEpisode(model.get('id'));
 
-                        if (downloading || this.model.get('downloading')) {
+                        if (downloading) {
+                            var progress = 100 - (downloading.get('sizeleft') / downloading.get('size') * 100);
+
+                            this.$el.html('<div class="progress progress-purple" title="Episode is downloading - {0}%" data-container="body">'.format(progress.toFixed(1)) +
+                                          '<div class="bar" style="width: {0}%;"></div></div>'.format(progress));
+                            return;
+                        }
+
+                        else if (this.model.get('downloading')) {
                             icon = 'icon-nd-downloading';
                             tooltip = 'Episode is downloading';
                         }

src/UI/Cells/cells.less

@@ -51,6 +51,12 @@ td.episode-status-cell, td.quality-cell {
   .badge {
     font-size: 9px;
   }
+
+  .progress {
+    height        : 10px;
+    margin-top    : 5px;
+    margin-bottom : 0px;
+  }
 }
 
 .history-details-cell {

src/UI/Content/progress-bars.less

@@ -0,0 +1,36 @@
+@import "Bootstrap/mixins";
+@import "Bootstrap/variables";
+@import "variables";
+
+.progress.episode-progress {
+  width         : 125px;
+  position      : relative;
+  margin-bottom : 2px;
+
+  .progressbar-back-text, .progressbar-front-text {
+    font-size   : 11.844px;
+    font-weight : bold;
+    text-align  : center;
+    cursor      : default;
+  }
+
+  .progressbar-back-text {
+    position : absolute;
+    width    : 100%;
+    height   : 100%;
+  }
+
+  .progressbar-front-text {
+    display : block;
+    width   : 125px;
+  }
+
+  .bar {
+    position : absolute;
+    overflow : hidden;
+  }
+}
+
+.progress-purple .bar, .progress .bar-purple {
+  #gradient > .vertical(@purple, @nzbdronePurple);
+}

src/UI/Content/theme.less

@@ -10,39 +10,11 @@
 @import "checkbox-button";
 @import "spinner";
 @import "legend";
+@import "progress-bars";
 @import "../Shared/Styles/clickable";
 @import "../Shared/Styles/card";
 @import "../Rename/rename";
 
-.progress.episode-progress {
-  width         : 125px;
-  position      : relative;
-  margin-bottom : 2px;
-
-  .progressbar-back-text, .progressbar-front-text {
-    font-size   : 11.844px;
-    font-weight : bold;
-    text-align  : center;
-    cursor      : default;
-  }
-
-  .progressbar-back-text {
-    position : absolute;
-    width    : 100%;
-    height   : 100%;
-  }
-
-  .progressbar-front-text {
-    display : block;
-    width   : 125px;
-  }
-
-  .bar {
-    position : absolute;
-    overflow : hidden;
-  }
-}
-
 .page-toolbar {
   margin-top    : 10px;
   margin-bottom : 30px;

src/UI/Content/variables.less

@@ -1 +1,2 @@
-@nzbdroneRed: #C4273C;
+@nzbdroneRed: #c4273c;
+@nzbdronePurple: #7932ea;