Update optimer and fleetup javascript (#695)

* Split out moment duration formatter

* Replace fleetup timer js

* Replace optimer js

* Remove obsolete countdown.js library

* Remove unused dateformat.js references

* Remove obsolete dateformat library

fleetactivitytracking/templates/fleetactivitytracking/fatlinkmodify.html

@@ -56,8 +56,4 @@
             </div>
         </div>
     </div>
-
-
-<script src="/static/js/dateformat.js"></script>
-
 {% endblock content %}

fleetactivitytracking/templates/fleetactivitytracking/fatlinkpersonalmonthlystatisticsview.html

@@ -61,8 +61,4 @@
         {% endif %}
         {% endif %}
     </div>
-
-
-<script src="/static/js/dateformat.js"></script>
-
 {% endblock content %}

fleetactivitytracking/templates/fleetactivitytracking/fatlinkpersonalstatisticsview.html

@@ -35,8 +35,4 @@
         </table>
         </div>
     </div>
-
-
-<script src="/static/js/dateformat.js"></script>
-
 {% endblock content %}

fleetactivitytracking/templates/fleetactivitytracking/fatlinkstatisticsview.html

@@ -41,8 +41,4 @@
         </table>
         {% endif %}
     </div>
-
-
-<script src="/static/js/dateformat.js"></script>
-
 {% endblock content %}

fleetactivitytracking/templates/fleetactivitytracking/fatlinkview.html

@@ -99,8 +99,4 @@
         {% endif %}
         {% endif %}
     </div>
-
-
-<script src="/static/js/dateformat.js"></script>
-
 {% endblock content %}

stock/static/js/dateformat.js

@@ -1,86 +0,0 @@
-(function() {
-    
-    Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-    Date.longMonths = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-    Date.shortDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-    Date.longDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-    
-    // defining patterns
-    var replaceChars = {
-        // Day
-        d: function() { return (this.getDate() < 10 ? '0' : '') + this.getDate(); },
-        D: function() { return Date.shortDays[this.getDay()]; },
-        j: function() { return this.getDate(); },
-        l: function() { return Date.longDays[this.getDay()]; },
-        N: function() { return (this.getDay() == 0 ? 7 : this.getDay()); },
-        S: function() { return (this.getDate() % 10 == 1 && this.getDate() != 11 ? 'st' : (this.getDate() % 10 == 2 && this.getDate() != 12 ? 'nd' : (this.getDate() % 10 == 3 && this.getDate() != 13 ? 'rd' : 'th'))); },
-        w: function() { return this.getDay(); },
-        z: function() { var d = new Date(this.getFullYear(),0,1); return Math.ceil((this - d) / 86400000); }, // Fixed now
-        // Week
-        W: function() { 
-            var target = new Date(this.valueOf());
-            var dayNr = (this.getDay() + 6) % 7;
-            target.setDate(target.getDate() - dayNr + 3);
-            var firstThursday = target.valueOf();
-            target.setMonth(0, 1);
-            if (target.getDay() !== 4) {
-                target.setMonth(0, 1 + ((4 - target.getDay()) + 7) % 7);
-            }
-            return 1 + Math.ceil((firstThursday - target) / 604800000);
-        },
-        // Month
-        F: function() { return Date.longMonths[this.getMonth()]; },
-        m: function() { return (this.getMonth() < 9 ? '0' : '') + (this.getMonth() + 1); },
-        M: function() { return Date.shortMonths[this.getMonth()]; },
-        n: function() { return this.getMonth() + 1; },
-        t: function() { var d = new Date(); return new Date(d.getFullYear(), d.getMonth(), 0).getDate() }, // Fixed now, gets #days of date
-        // Year
-        L: function() { var year = this.getFullYear(); return (year % 400 == 0 || (year % 100 != 0 && year % 4 == 0)); },   // Fixed now
-        o: function() { var d  = new Date(this.valueOf());  d.setDate(d.getDate() - ((this.getDay() + 6) % 7) + 3); return d.getFullYear();}, //Fixed now
-        Y: function() { return this.getFullYear(); },
-        y: function() { return ('' + this.getFullYear()).substr(2); },
-        // Time
-        a: function() { return this.getHours() < 12 ? 'am' : 'pm'; },
-        A: function() { return this.getHours() < 12 ? 'AM' : 'PM'; },
-        B: function() { return Math.floor((((this.getUTCHours() + 1) % 24) + this.getUTCMinutes() / 60 + this.getUTCSeconds() / 3600) * 1000 / 24); }, // Fixed now
-        g: function() { return this.getHours() % 12 || 12; },
-        G: function() { return this.getHours(); },
-        h: function() { return ((this.getHours() % 12 || 12) < 10 ? '0' : '') + (this.getHours() % 12 || 12); },
-        H: function() { return (this.getHours() < 10 ? '0' : '') + this.getHours(); },
-        i: function() { return (this.getMinutes() < 10 ? '0' : '') + this.getMinutes(); },
-        s: function() { return (this.getSeconds() < 10 ? '0' : '') + this.getSeconds(); },
-        u: function() { var m = this.getMilliseconds(); return (m < 10 ? '00' : (m < 100 ?
-    '0' : '')) + m; },
-        // Timezone
-        e: function() { return "Not Yet Supported"; },
-        I: function() {
-            var DST = null;
-                for (var i = 0; i < 12; ++i) {
-                        var d = new Date(this.getFullYear(), i, 1);
-                        var offset = d.getTimezoneOffset();
-    
-                        if (DST === null) DST = offset;
-                        else if (offset < DST) { DST = offset; break; }                     else if (offset > DST) break;
-                }
-                return (this.getTimezoneOffset() == DST) | 0;
-            },
-        O: function() { return (-this.getTimezoneOffset() < 0 ? '-' : '+') + (Math.abs(this.getTimezoneOffset() / 60) < 10 ? '0' : '') + (Math.abs(this.getTimezoneOffset() / 60)) + '00'; },
-        P: function() { return (-this.getTimezoneOffset() < 0 ? '-' : '+') + (Math.abs(this.getTimezoneOffset() / 60) < 10 ? '0' : '') + (Math.abs(this.getTimezoneOffset() / 60)) + ':00'; }, // Fixed now
-        T: function() { return this.toTimeString().replace(/^.+ \(?([^\)]+)\)?$/, '$1'); },
-        Z: function() { return -this.getTimezoneOffset() * 60; },
-        // Full Date/Time
-        c: function() { return this.format("Y-m-d\\TH:i:sP"); }, // Fixed now
-        r: function() { return this.toString(); },
-        U: function() { return this.getTime() / 1000; }
-    };
-
-    // Simulates PHP's date function
-    Date.prototype.format = function(format) {
-        var date = this;
-        return format.replace(/(\\?)(.)/g, function(_, esc, chr) {
-            return (esc === '' && replaceChars[chr]) ? replaceChars[chr].call(date) : chr;
-        });
-    };
-
-}).call(this);
-

stock/static/js/timers.js

@@ -0,0 +1,15 @@
+/**
+* Get a duration string like countdown.js
+* e.g. "1y 2d 3h 4m 5s"
+* @param duration moment.duration
+*/
+function getDurationString(duration) {
+    var out = "";
+    if (duration.years()) {
+        out += duration.years() + 'y ';
+    }
+    if (duration.days()) {
+        out += duration.days() + 'd ';
+    }
+    return out + duration.hours() + "h " + duration.minutes() + "m " + duration.seconds() + "s";
+}

stock/templates/registered/fleetup.html

@@ -59,7 +59,10 @@
                                     <td class="col-md-6">{{ start.end|date:"l d M H:i" }} <span class="label label-success">{% trans "Eve Time" %}</span></td>
                                 </tr>
                                 <tr>
-                                    <td class="col-md-6"><div id="countdown{{ start.operation_id }}"></div></td>
+                                    <td class="col-md-6">
+                                        <span id="localtime{{ start.operation_id }}"></span>&nbsp;<span class='label label-success'>Local time</span><br>
+                                        <div id="countdown{{ start.operation_id }}"></div>
+                                    </td>
                                     
                                     <td class="col-md-6"></td>
                                 </tr>
@@ -197,22 +200,81 @@
 
 </div>
 </div>
-<script src="/static/js/dateformat.js"></script>
+{% include 'bundles/moment-js.html' with locale=True %}
-<script src="/static/js/countdown.js"></script>
+<script src="{% static 'js/timers.js' %}"></script>
-<script>
+<script type="text/javascript">
-var clockClosest = document.getElementById("countdownclosest"), targetDate = new Date(Date.UTC({{ closest_timer.eve_time | date:"Y, m-1, d, H, i" }}));{% for subject, start in operations_list %}
+    // Data
-var clock{{ start.operation_id }} = document.getElementById("countdown{{ start.operation_id }}"), targetDate{{ start.operation_id }} = new Date(Date.UTC({{ start.start | date:"Y, m-1, d, H, i" }}));{% endfor %}
+    var timers = [
+    {% for start, op in operations_list %}
+        {
+            'id': {{ op.operation_id }},
+            'start': moment("{{ op.start | date:"c" }}"),
+            'end': moment("{{ op.end | date:"c" }}"),
+            'expired': false
+        },
+    {% endfor %}
+    ]
+</script>
+<script type="text/javascript">
 
-setInterval(function(){clockClosest.innerHTML = targetDate.format('D @ h:ia'); if (targetDate > Date.now()){ clockClosest.innerHTML = clockClosest.innerHTML + "<BR>" + countdown(targetDate).toString();}}, 1000);
+    timedUpdate();
-{% for subject, start in operations_list %}setInterval(function(){clock{{ start.operation_id }}.innerHTML = targetDate{{ start.operation_id }}.format('l d M H:i'); if (targetDate{{ start.operation_id }} > Date.now()){ clock{{ start.operation_id }}.innerHTML = clock{{ start.operation_id }}.innerHTML + " <span class='label label-success'>Local time</span></br><h2>" + countdown(targetDate{{ start.operation_id }}).toString() + "</h2>";}}, 1000);{% endfor %}
+    setAllLocalTimes();
-{% for timer in corp_timers %}setInterval(function(){clock{{ timer.id }}.innerHTML = targetDate{{ timer.id }}.format('D @ h:ia'); if (targetDate{{ timer.id }} > Date.now()){ clock{{ timer.id }}.innerHTML = clock{{ timer.id }}.innerHTML + "<BR>" + countdown(targetDate{{ timer.id }}).toString();}}, 1000);{% endfor %}
 
-setInterval(function(){updateClock()}, 1000);
+    // Start timed updates
+    setInterval(timedUpdate, 1000);
 
-function updateClock() {
+    function timedUpdate() {
-  var clock = new Date();
+        updateClock();
-  document.getElementById("current-time").innerHTML = "<b>" + clock.toUTCString() + "</b>";
+        updateAllTimers();
-}
+    }
 
+    function updateAllTimers () {
+        var l = timers.length;
+        for (var i=0; i < l; ++i) {
+            if (timers[i].expired) continue;
+            updateTimer(timers[i]);
+        }
+    }
+
+    /**
+     * Update a timer
+     * @param timer Timer information
+     * @param timer.start Date of the timer
+     * @param timer.id Id number of the timer
+     * @param timer.expired
+     */
+    function updateTimer(timer) {
+        if (timer.start.isAfter(Date.now())) {
+            var duration = moment.duration(timer.start - moment(), 'milliseconds');
+            document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
+        } else {
+            timer.expired = true;
+            document.getElementById("countdown" + timer.id).innerHTML = "";
+        }
+    }
+
+    /**
+     * Set all local time fields
+     */
+    function setAllLocalTimes() {
+        var l = timers.length;
+        for (var i=0; i < l; ++i) {
+            setLocalTime(timers[i]);
+        }
+    }
+
+    /**
+     * Set the local time info for the timer
+     * @param timer Timer information
+     * @param timer.start Date of the timer
+     * @param timer.id Id number of the timer
+     */
+    function setLocalTime(timer) {
+        document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
+    }
+
+    function updateClock() {
+        document.getElementById("current-time").innerHTML = "<b>" + moment.utc().format('ddd, ll HH:mm:ss z') + "</b>";
+    }
 </script>
 {% endblock content %}

stock/templates/registered/operationmanagement.html

@@ -51,7 +51,7 @@
                 	</td>
                 	<td style="width:150px" class="text-center">{{ ops.location }}</td>
                 	<td style="width:150px" class="text-center" nowrap>{{ ops.start | date:"Y-m-d H:i" }}</td>
-                	<td class="text-center" nowrap><div id="countdown{{ ops.id }}"></div></td>
+                	<td class="text-center" nowrap><div id="localtime{{ ops.id }}"></div><div id="countdown{{ ops.id }}"></div></td>
 		        <td style="width:150px" class="text-center">{{ ops.duration }}</td>
 		        <td style="width:150px" class="text-center">{{ ops.fc }}</td>
                 	<td style="width:150px" class="text-center">{{ ops.details }}</td>
@@ -76,26 +76,80 @@
         {% endif %}
     </div>
 
-<script src="/static/js/dateformat.js"></script>
+    {% include 'bundles/moment-js.html' with locale=True %}
-<script src="/static/js/countdown.js"></script>
+    <script src="{% static 'js/timers.js' %}"></script>
-<script>
+    <script type="text/javascript">
-var locale = "{{ LANGUAGE_CODE }}";
+        // Data
-{% for ops in optimer %}var clock{{ ops.id }} = document.getElementById("countdown{{ ops.id }}"), targetDate{{ ops.id }} = new Date(Date.UTC({{ ops.start | date:"Y, m-1, d, H, i" }}));{% endfor %}
+        var timers = [
-{% for ops in optimer %}setInterval(function(){
+        {% for op in optimer %}
-    var options = { weekday: 'short' };
+            {
-    var options2 = { hour: 'numeric', minute: 'numeric' };
+                'id': {{ op.id }},
-    var time = ((targetDate{{ ops.id }}.toLocaleString(locale, options)) + " @ " + (targetDate{{ ops.id }}.toLocaleString(locale, options2)));
+                'start': moment("{{ op.start | date:"c" }}"),
-    clock{{ ops.id }}.innerHTML = time; 
+                'expired': false
-if (targetDate{{ ops.id }} > Date.now())
+            },
-{ clock{{ ops.id }}.innerHTML = clock{{ ops.id }}.innerHTML + "<BR>" + countdown(targetDate{{ ops.id }}).toString();}}, 1000);{% endfor %}
+        {% endfor %}
+        ];
+    </script>
+    <script type="text/javascript">
 
-setInterval(function(){updateClock()}, 1000);
+        timedUpdate();
+        setAllLocalTimes();
 
-function updateClock() {
+        // Start timed updates
-  var options = { timeZone: 'UTC', weekday: 'short', day: 'numeric', month: 'short', year: 'numeric', hour: "numeric", minute: "numeric", second: "numeric" };
+        setInterval(timedUpdate, 1000);
-  var clock = new Date()
-  document.getElementById("current-time").innerHTML = "<b>" + clock.toLocaleString(locale, options) + "</b>";
-}
-</script>
 
+        function timedUpdate() {
+            updateClock();
+            updateAllTimers();
+        }
+
+        function updateAllTimers () {
+            var l = timers.length;
+            for (var i=0; i < l; ++i) {
+                if (timers[i].expired) continue;
+                updateTimer(timers[i]);
+            }
+        }
+
+        /**
+         * Update a timer
+         * @param timer Timer information
+         * @param timer.start Date of the timer
+         * @param timer.id Id number of the timer
+         * @param timer.expired
+         */
+        function updateTimer(timer) {
+            if (timer.start.isAfter(Date.now())) {
+                var duration = moment.duration(timer.start - moment(), 'milliseconds');
+                document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
+            } else {
+                timer.expired = true;
+                document.getElementById("countdown" + timer.id).innerHTML = "";
+            }
+        }
+
+        /**
+         * Set all local time fields
+         */
+        function setAllLocalTimes() {
+            var l = timers.length;
+            for (var i=0; i < l; ++i) {
+                setLocalTime(timers[i]);
+            }
+        }
+
+        /**
+         * Set the local time info for the timer
+         * @param timer Timer information
+         * @param timer.start Date of the timer
+         * @param timer.id Id number of the timer
+         */
+        function setLocalTime(timer) {
+            document.getElementById("localtime" + timer.id).innerHTML = timer.start.format("ddd @ LT");
+        }
+
+        function updateClock() {
+            document.getElementById("current-time").innerHTML = "<b>" + moment.utc().format('LLLL') + "</b>";
+        }
+    </script>
 {% endblock content %}

stock/templates/registered/timermanagement.html

@@ -431,6 +431,7 @@
     </div>
 
     {% include 'bundles/moment-js.html' with locale=True %}
+    <script src="{% static 'js/timers.js' %}"></script>
     <script type="text/javascript">
         var locale = "{{ LANGUAGE_CODE }}";
 
@@ -490,22 +491,6 @@
             }
         }
 
-        /**
-        * Get a duration string like countdown.js
-        * e.g. "1y 2d 3h 4m 5s"
-        * @param duration moment.duration
-        */
-        function getDurationString(duration) {
-            var out = "";
-            if (duration.years()) {
-                out += duration.years() + 'y ';
-            }
-            if (duration.days()) {
-                out += duration.days() + 'd ';
-            }
-            return out + duration.hours() + "h " + duration.minutes() + "m " + duration.seconds() + "s";
-        }
-
         /**
          * Set all local time fields
          */