diff --git a/src/NzbDrone.sln.DotSettings b/src/NzbDrone.sln.DotSettings
index e67821bf5..fdd2a0b42 100644
--- a/src/NzbDrone.sln.DotSettings
+++ b/src/NzbDrone.sln.DotSettings
@@ -61,6 +61,7 @@
True
2
False
+ True
True
True
True
diff --git a/src/UI/Calendar/CalendarView.js b/src/UI/Calendar/CalendarView.js
index e687abc90..c21e0d488 100644
--- a/src/UI/Calendar/CalendarView.js
+++ b/src/UI/Calendar/CalendarView.js
@@ -9,7 +9,8 @@ define(
'System/StatusModel',
'History/Queue/QueueCollection',
'Mixins/backbone.signalr.mixin',
- 'fullcalendar'
+ 'fullcalendar',
+ 'jquery.easypiechart'
], function (vent, Marionette, moment, CalendarCollection, StatusModel, QueueCollection) {
var _instance;
@@ -18,6 +19,7 @@ define(
initialize: function () {
this.collection = new CalendarCollection().bindSignalR({ updateOnly: true });
this.listenTo(this.collection, 'change', this._reloadCalendarEvents);
+ this.listenTo(QueueCollection, 'sync', this._reloadCalendarEvents);
},
render : function () {
@@ -46,8 +48,16 @@ define(
if (event.progress > 0) {
self.$(element).find('.fc-event-time')
- .after('{0}%'
- .format(event.progress.toFixed(0)));
+ .after(''.format(event.progress));
+
+ self.$(element).find('.chart').easyPieChart({
+ barColor : '#ffffff',
+ trackColor: false,
+ scaleColor: false,
+ lineWidth : 2,
+ size : 14,
+ animate : false
+ });
}
},
eventClick : function (event) {
diff --git a/src/UI/Calendar/calendar.less b/src/UI/Calendar/calendar.less
index 29d5a48bd..39a5e284a 100644
--- a/src/UI/Calendar/calendar.less
+++ b/src/UI/Calendar/calendar.less
@@ -153,8 +153,8 @@
background-color : @nzbdronePurple;
}
- .downloading-progress {
- margin-right: 3px;
- font-size: 11px;
+ .chart {
+ margin-top : 2px;
+ margin-right: 2px;
}
}
diff --git a/src/UI/Content/progress-bars.less b/src/UI/Content/progress-bars.less
index 40af0839b..20b69c063 100644
--- a/src/UI/Content/progress-bars.less
+++ b/src/UI/Content/progress-bars.less
@@ -33,4 +33,4 @@
.progress-purple .bar, .progress .bar-purple {
#gradient > .vertical(@purple, @nzbdronePurple);
-}
\ No newline at end of file
+}
diff --git a/src/UI/JsLibraries/jquery.easypiechart.js b/src/UI/JsLibraries/jquery.easypiechart.js
new file mode 100644
index 000000000..c600fb85f
--- /dev/null
+++ b/src/UI/JsLibraries/jquery.easypiechart.js
@@ -0,0 +1,357 @@
+/**!
+ * easyPieChart
+ * Lightweight plugin to render simple, animated and retina optimized pie charts
+ *
+ * @license
+ * @author Robert Fleischmann (http://robert-fleischmann.de)
+ * @version 2.1.3
+ **/
+
+(function(root, factory) {
+ if(typeof exports === 'object') {
+ module.exports = factory(require('jquery'));
+ }
+ else if(typeof define === 'function' && define.amd) {
+ define(['jquery'], factory);
+ }
+ else {
+ factory(root.jQuery);
+ }
+}(this, function($) {
+/**
+ * Renderer to render the chart on a canvas object
+ * @param {DOMElement} el DOM element to host the canvas (root of the plugin)
+ * @param {object} options options object of the plugin
+ */
+var CanvasRenderer = function(el, options) {
+ var cachedBackground;
+ var canvas = document.createElement('canvas');
+
+ el.appendChild(canvas);
+
+ if (typeof(G_vmlCanvasManager) !== 'undefined') {
+ G_vmlCanvasManager.initElement(canvas);
+ }
+
+ var ctx = canvas.getContext('2d');
+
+ canvas.width = canvas.height = options.size;
+
+ // canvas on retina devices
+ var scaleBy = 1;
+ if (window.devicePixelRatio > 1) {
+ scaleBy = window.devicePixelRatio;
+ canvas.style.width = canvas.style.height = [options.size, 'px'].join('');
+ canvas.width = canvas.height = options.size * scaleBy;
+ ctx.scale(scaleBy, scaleBy);
+ }
+
+ // move 0,0 coordinates to the center
+ ctx.translate(options.size / 2, options.size / 2);
+
+ // rotate canvas -90deg
+ ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI);
+
+ var radius = (options.size - options.lineWidth) / 2;
+ if (options.scaleColor && options.scaleLength) {
+ radius -= options.scaleLength + 2; // 2 is the distance between scale and bar
+ }
+
+ // IE polyfill for Date
+ Date.now = Date.now || function() {
+ return +(new Date());
+ };
+
+ /**
+ * Draw a circle around the center of the canvas
+ * @param {strong} color Valid CSS color string
+ * @param {number} lineWidth Width of the line in px
+ * @param {number} percent Percentage to draw (float between -1 and 1)
+ */
+ var drawCircle = function(color, lineWidth, percent) {
+ percent = Math.min(Math.max(-1, percent || 0), 1);
+ var isNegative = percent <= 0 ? true : false;
+
+ ctx.beginPath();
+ ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, isNegative);
+
+ ctx.strokeStyle = color;
+ ctx.lineWidth = lineWidth;
+
+ ctx.stroke();
+ };
+
+ /**
+ * Draw the scale of the chart
+ */
+ var drawScale = function() {
+ var offset;
+ var length;
+
+ ctx.lineWidth = 1;
+ ctx.fillStyle = options.scaleColor;
+
+ ctx.save();
+ for (var i = 24; i > 0; --i) {
+ if (i % 6 === 0) {
+ length = options.scaleLength;
+ offset = 0;
+ } else {
+ length = options.scaleLength * 0.6;
+ offset = options.scaleLength - length;
+ }
+ ctx.fillRect(-options.size/2 + offset, 0, length, 1);
+ ctx.rotate(Math.PI / 12);
+ }
+ ctx.restore();
+ };
+
+ /**
+ * Request animation frame wrapper with polyfill
+ * @return {function} Request animation frame method or timeout fallback
+ */
+ var reqAnimationFrame = (function() {
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ function(callback) {
+ window.setTimeout(callback, 1000 / 60);
+ };
+ }());
+
+ /**
+ * Draw the background of the plugin including the scale and the track
+ */
+ var drawBackground = function() {
+ if(options.scaleColor) drawScale();
+ if(options.trackColor) drawCircle(options.trackColor, options.lineWidth, 1);
+ };
+
+ /**
+ * Canvas accessor
+ */
+ this.getCanvas = function() {
+ return canvas;
+ };
+
+ /**
+ * Canvas 2D context 'ctx' accessor
+ */
+ this.getCtx = function() {
+ return ctx;
+ };
+
+ /**
+ * Clear the complete canvas
+ */
+ this.clear = function() {
+ ctx.clearRect(options.size / -2, options.size / -2, options.size, options.size);
+ };
+
+ /**
+ * Draw the complete chart
+ * @param {number} percent Percent shown by the chart between -100 and 100
+ */
+ this.draw = function(percent) {
+ // do we need to render a background
+ if (!!options.scaleColor || !!options.trackColor) {
+ // getImageData and putImageData are supported
+ if (ctx.getImageData && ctx.putImageData) {
+ if (!cachedBackground) {
+ drawBackground();
+ cachedBackground = ctx.getImageData(0, 0, options.size * scaleBy, options.size * scaleBy);
+ } else {
+ ctx.putImageData(cachedBackground, 0, 0);
+ }
+ } else {
+ this.clear();
+ drawBackground();
+ }
+ } else {
+ this.clear();
+ }
+
+ ctx.lineCap = options.lineCap;
+
+ // if barcolor is a function execute it and pass the percent as a value
+ var color;
+ if (typeof(options.barColor) === 'function') {
+ color = options.barColor(percent);
+ } else {
+ color = options.barColor;
+ }
+
+ // draw bar
+ drawCircle(color, options.lineWidth, percent / 100);
+ }.bind(this);
+
+ /**
+ * Animate from some percent to some other percentage
+ * @param {number} from Starting percentage
+ * @param {number} to Final percentage
+ */
+ this.animate = function(from, to) {
+ var startTime = Date.now();
+ options.onStart(from, to);
+ var animation = function() {
+ var process = Math.min(Date.now() - startTime, options.animate.duration);
+ var currentValue = options.easing(this, process, from, to - from, options.animate.duration);
+ this.draw(currentValue);
+ options.onStep(from, to, currentValue);
+ if (process >= options.animate.duration) {
+ options.onStop(from, to);
+ } else {
+ reqAnimationFrame(animation);
+ }
+ }.bind(this);
+
+ reqAnimationFrame(animation);
+ }.bind(this);
+};
+
+var EasyPieChart = function(el, opts) {
+ var defaultOptions = {
+ barColor: '#ef1e25',
+ trackColor: '#f9f9f9',
+ scaleColor: '#dfe0e0',
+ scaleLength: 5,
+ lineCap: 'round',
+ lineWidth: 3,
+ size: 110,
+ rotate: 0,
+ animate: {
+ duration: 1000,
+ enabled: true
+ },
+ easing: function (x, t, b, c, d) { // more can be found here: http://gsgd.co.uk/sandbox/jquery/easing/
+ t = t / (d/2);
+ if (t < 1) {
+ return c / 2 * t * t + b;
+ }
+ return -c/2 * ((--t)*(t-2) - 1) + b;
+ },
+ onStart: function(from, to) {
+ return;
+ },
+ onStep: function(from, to, currentValue) {
+ return;
+ },
+ onStop: function(from, to) {
+ return;
+ }
+ };
+
+ // detect present renderer
+ if (typeof(CanvasRenderer) !== 'undefined') {
+ defaultOptions.renderer = CanvasRenderer;
+ } else if (typeof(SVGRenderer) !== 'undefined') {
+ defaultOptions.renderer = SVGRenderer;
+ } else {
+ throw new Error('Please load either the SVG- or the CanvasRenderer');
+ }
+
+ var options = {};
+ var currentValue = 0;
+
+ /**
+ * Initialize the plugin by creating the options object and initialize rendering
+ */
+ var init = function() {
+ this.el = el;
+ this.options = options;
+
+ // merge user options into default options
+ for (var i in defaultOptions) {
+ if (defaultOptions.hasOwnProperty(i)) {
+ options[i] = opts && typeof(opts[i]) !== 'undefined' ? opts[i] : defaultOptions[i];
+ if (typeof(options[i]) === 'function') {
+ options[i] = options[i].bind(this);
+ }
+ }
+ }
+
+ // check for jQuery easing
+ if (typeof(options.easing) === 'string' && typeof(jQuery) !== 'undefined' && jQuery.isFunction(jQuery.easing[options.easing])) {
+ options.easing = jQuery.easing[options.easing];
+ } else {
+ options.easing = defaultOptions.easing;
+ }
+
+ // process earlier animate option to avoid bc breaks
+ if (typeof(options.animate) === 'number') {
+ options.animate = {
+ duration: options.animate,
+ enabled: true
+ };
+ }
+
+ if (typeof(options.animate) === 'boolean' && !options.animate) {
+ options.animate = {
+ duration: 1000,
+ enabled: options.animate
+ };
+ }
+
+ // create renderer
+ this.renderer = new options.renderer(el, options);
+
+ // initial draw
+ this.renderer.draw(currentValue);
+
+ // initial update
+ if (el.dataset && el.dataset.percent) {
+ this.update(parseFloat(el.dataset.percent));
+ } else if (el.getAttribute && el.getAttribute('data-percent')) {
+ this.update(parseFloat(el.getAttribute('data-percent')));
+ }
+ }.bind(this);
+
+ /**
+ * Update the value of the chart
+ * @param {number} newValue Number between 0 and 100
+ * @return {object} Instance of the plugin for method chaining
+ */
+ this.update = function(newValue) {
+ newValue = parseFloat(newValue);
+ if (options.animate.enabled) {
+ this.renderer.animate(currentValue, newValue);
+ } else {
+ this.renderer.draw(newValue);
+ }
+ currentValue = newValue;
+ return this;
+ }.bind(this);
+
+ /**
+ * Disable animation
+ * @return {object} Instance of the plugin for method chaining
+ */
+ this.disableAnimation = function() {
+ options.animate.enabled = false;
+ return this;
+ };
+
+ /**
+ * Enable animation
+ * @return {object} Instance of the plugin for method chaining
+ */
+ this.enableAnimation = function() {
+ options.animate.enabled = true;
+ return this;
+ };
+
+ init();
+};
+
+$.fn.easyPieChart = function(options) {
+ return this.each(function() {
+ var instanceOptions;
+
+ if (!$.data(this, 'easyPieChart')) {
+ instanceOptions = $.extend({}, options, $(this).data());
+ $.data(this, 'easyPieChart', new EasyPieChart(this, instanceOptions));
+ }
+ });
+};
+
+}));
diff --git a/src/UI/app.js b/src/UI/app.js
index 736bd875a..d8dde2b5a 100644
--- a/src/UI/app.js
+++ b/src/UI/app.js
@@ -21,6 +21,7 @@ require.config({
'marionette' : 'JsLibraries/backbone.marionette',
'signalR' : 'JsLibraries/jquery.signalR',
'jquery.knob' : 'JsLibraries/jquery.knob',
+ 'jquery.easypiechart' : 'JsLibraries/jquery.easypiechart',
'jquery.dotdotdot' : 'JsLibraries/jquery.dotdotdot',
'messenger' : 'JsLibraries/messenger',
'jquery' : 'JsLibraries/jquery',
@@ -111,6 +112,12 @@ require.config({
'jquery'
]
},
+ 'jquery.easypiechart' : {
+ deps:
+ [
+ 'jquery'
+ ]
+ },
'jquery.dotdotdot' : {
deps:
[