better time formatting

3 files changed, 162 insertions, 28 deletions

diff --git a/module/web/static/js/helpers/formatTime.js b/module/web/static/js/helpers/formatTime.js
index cb635ede9..77d67a39c 100644
--- a/module/web/static/js/helpers/formatTime.js
+++ b/module/web/static/js/helpers/formatTime.js
@@ -1,29 +1,5 @@
 // Format bytes in human readable format
-define('helpers/formatTime', ['handlebars'], function(Handlebars) {
-
-    // TODO: seconds are language dependant
-    // time could be better formatted
-    function seconds2time (seconds) {
-        var hours   = Math.floor(seconds / 3600);
-        var minutes = Math.floor((seconds - (hours * 3600)) / 60);
-        seconds = seconds - (hours * 3600) - (minutes * 60);
-        var time = "";
-
-        if (hours != 0) {
-            time = hours+":";
-        }
-        if (minutes != 0 || time !== "") {
-            minutes = (minutes < 10 && time !== "") ? "0"+minutes : String(minutes);
-            time += minutes+":";
-        }
-        if (time === "") {
-            time = seconds+"s";
-        }
-        else {
-            time += (seconds < 10) ? "0"+seconds : String(seconds);
-        }
-        return time;
-    }
+define('helpers/formatTime', ['handlebars', 'utils/remaining'], function(Handlebars, Remaining) {
 
 
     function formatTime(seconds, options) {
@@ -32,7 +8,8 @@ define('helpers/formatTime', ['handlebars'], function(Handlebars) {
         else if (!seconds || seconds <= 0)
             return "-";
 
-        return seconds2time(seconds);
+        // TODO: digital or written string
+        return Remaining.getStringDigital(seconds, window.dates);
     }
 
     Handlebars.registerHelper('formatTime', formatTime);
diff --git a/module/web/static/js/utils/remaining.js b/module/web/static/js/utils/remaining.js
new file mode 100644
index 000000000..d66a2931a
--- /dev/null
+++ b/module/web/static/js/utils/remaining.js
@@ -0,0 +1,149 @@
+/**
+ * Javascript Countdown
+ * Copyright (c) 2009 Markus Hedlund
+ * Version 1.1
+ * Licensed under MIT license
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://labs.mimmin.com/countdown
+ */
+define([], function() {
+    var remaining = {
+        /**
+         * Get the difference of the passed date, and now. The different formats of the taget parameter are:
+         * January 12, 2009 15:14:00     (Month dd, yyyy hh:mm:ss)
+         * January 12, 2009              (Month dd, yyyy)
+         * 09,00,12,15,14,00             (yy,mm,dd,hh,mm,ss) Months range from 0-11, not 1-12.
+         * 09,00,12                      (yy,mm,dd)          Months range from 0-11, not 1-12.
+         * 500                           (milliseconds)
+         * 2009-01-12 15:14:00           (yyyy-mm-dd hh-mm-ss)
+         * 2009-01-12 15:14              (yyyy-mm-dd hh-mm)
+         * @param target Target date. Can be either a date object or a string (formated like '24 December, 2010 15:00:00')
+         * @return Difference in seconds
+         */
+        getSeconds: function(target) {
+            var today = new Date();
+
+            if (typeof(target) == 'object') {
+                var targetDate = target;
+            } else {
+                var matches = target.match(/(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2})(:(\d{2}))?/);   // YYYY-MM-DD HH-MM-SS
+                if (matches != null) {
+                    matches[7] = typeof(matches[7]) == 'undefined' ? '00' : matches[7];
+                    var targetDate = new Date(matches[1], matches[2] - 1, matches[3], matches[4], matches[5], matches[7]);
+                } else {
+                    var targetDate = new Date(target);
+                }
+            }
+
+            return Math.floor((targetDate.getTime() - today.getTime()) / 1000);
+        },
+
+        /**
+         * @param seconds Difference in seconds
+         * @param i18n A language object (see code)
+         * @param onlyLargestUnit Return only the largest unit (see documentation)
+         * @param hideEmpty Hide empty units (see documentation)
+         * @return String formated something like '1 week, 1 hours, 1 second'
+         */
+        getString: function(seconds, i18n, onlyLargestUnit, hideEmpty) {
+            if (seconds < 1) {
+                return '';
+            }
+
+            if (typeof(hideEmpty) == 'undefined' || hideEmpty == null) {
+                hideEmpty = true;
+            }
+            if (typeof(onlyLargestUnit) == 'undefined' || onlyLargestUnit == null) {
+                onlyLargestUnit = false;
+            }
+            if (typeof(i18n) == 'undefined' || i18n == null) {
+                i18n = {
+                    weeks: ['week', 'weeks'],
+                    days: ['day', 'days'],
+                    hours: ['hour', 'hours'],
+                    minutes: ['minute', 'minutes'],
+                    seconds: ['second', 'seconds']
+                };
+            }
+
+            var units = {
+                weeks: 7 * 24 * 60 * 60,
+                days: 24 * 60 * 60,
+                hours: 60 * 60,
+                minutes: 60,
+                seconds: 1
+            };
+
+            var returnArray = [];
+            var value;
+            for (unit in units) {
+                value = units[unit];
+                if (seconds / value >= 1 || unit == 'seconds' || !hideEmpty) {
+                    secondsConverted = Math.floor(seconds / value);
+                    var i18nUnit = i18n[unit][secondsConverted == 1 ? 0 : 1];
+                    returnArray.push(secondsConverted + ' ' + i18nUnit);
+                    seconds -= secondsConverted * value;
+
+                    if (onlyLargestUnit) {
+                        break;
+                    }
+                }
+            }
+            ;
+
+            return returnArray.join(', ');
+        },
+
+        /**
+         * @param seconds Difference in seconds
+         * @return String formated something like '169:00:01'
+         */
+        getStringDigital: function(seconds) {
+            if (seconds < 1) {
+                return '';
+            }
+
+            remainingTime = remaining.getArray(seconds);
+
+            for (index in remainingTime) {
+                remainingTime[index] = remaining.padNumber(remainingTime[index]);
+            }
+            ;
+
+            return remainingTime.join(':');
+        },
+
+        /**
+         * @param seconds Difference in seconds
+         * @return Array with hours, minutes and seconds
+         */
+        getArray: function(seconds) {
+            if (seconds < 1) {
+                return [];
+            }
+
+            var units = [60 * 60, 60, 1];
+
+            var returnArray = [];
+            var value;
+            for (index in units) {
+                value = units[index];
+                secondsConverted = Math.floor(seconds / value);
+                returnArray.push(secondsConverted);
+                seconds -= secondsConverted * value;
+            }
+            ;
+
+            return returnArray;
+        },
+
+        /**
+         * @param number An integer
+         * @return Integer padded with a 0 if necessary
+         */
+        padNumber: function(number) {
+            return (number >= 0 && number < 10) ? '0' + number : number;
+        }
+    };
+    return remaining;
+});
\ No newline at end of file
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index e8661cbbc..71b913f9e 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -21,6 +21,14 @@
     <script src="/static/js/libs/less-1.3.0.min.js" type="text/javascript"></script>

     <script type="text/javascript" data-main="static/js/config" src="/static/js/libs/require-2.1.5.js"></script>

     <script>

+        window.dates = {

+            weeks: ['week', 'weeks'],

+            days: ['day', 'days'],

+            hours: ['hour', 'hours'],

+            minutes: ['minute', 'minutes'],

+            seconds: ['second', 'seconds']

+        }; // TODO carefully when translating

+

         window.wsAddress = "{{ ws }}";

         window.pathPrefix = ""; // TODO

 

@@ -81,8 +89,8 @@
                 </div>

                 <div class="header_block left-border">

                     <i class="icon-time icon-white"></i> approx. ETA :<br>

-                    <i class=" icon-hdd icon-white"></i> Remeaning:<br>

-                    <i class="icon-download-alt icon-white"></i> Downloads: <br>

+                    <i class=" icon-hdd icon-white"></i> Remaining:<br>

+                    <i class="icon-download-alt icon-white"></i> Downloads:<br>

                 </div>

 

                 <div id="progress-area" style="margin-top: 16px">