Adds configurable TZ for frontend date display

    * Initial crack at #42

Gruntfile.js

@@ -49,6 +49,7 @@ module.exports = function(grunt) {
             select2: 'libs/select2',
             tablesorter: 'libs/tablesorter',
             moment: 'libs/moment',
+            "moment-timezone": 'libs/moment-timezone',
             autosize: 'libs/autosize',
             dragula: 'libs/dragula',
             mousetrap: 'libs/mousetrap',
@@ -133,6 +134,7 @@ module.exports = function(grunt) {
           {nonull: true, src: 'bower_components/backbone/backbone.js', dest: 'htdocs/assets/js/libs/backbone.js'},
           {nonull: true, src: 'bower_components/routefilter/dist/backbone.routefilter.js', dest: 'htdocs/assets/js/libs/backbone.routefilter.js'},
           {nonull: true, src: 'bower_components/moment/moment.js', dest: 'htdocs/assets/js/libs/moment.js'},
+          {nonull: true, src: 'bower_components/moment-timezone/builds/moment-timezone-with-data.js', dest: 'htdocs/assets/js/libs/moment-timezone.js'},
           {nonull: true, src: 'bower_components/false/false.js', dest: 'htdocs/assets/js/libs/false.js'},
         ],
       },

bower.json

@@ -38,6 +38,7 @@
     "underscore": "~1.8.3",
     "uri.js": "~1.16.0",
     "dragula.js": "dragula#^3.7.0",
-    "Chart.js": "~2.1.6"
+    "Chart.js": "~2.1.6",
+    "moment-timezone": "^0.5.13"
   }
 }

htdocs/assets/js/main.js

@@ -24,6 +24,7 @@ require.config({
         select2: 'libs/select2',
         tablesorter: 'libs/tablesorter',
         moment: 'libs/moment',
+        "moment-timezone": 'libs/moment-timezone',
         dragula: 'libs/dragula',
         autosize: 'libs/autosize',
         mousetrap: 'libs/mousetrap',

htdocs/assets/js/util.js

@@ -4,15 +4,27 @@ define(function(require) {
         _ = require('underscore'),
         URI = require('uri'),
         Autosize = require('autosize'),
-        CodeMirror = require('codemirror');
+        CodeMirror = require('codemirror'),
+        Moment = require('moment'),
+        Data = require('data');
+        // loads tz data
+        require('moment-timezone');
 
 
     // Turn a timestamp into a datestring.
-    var formatDate = function(ts, options) {
+    var formatDate = function(ts) {
         if(ts === 0) {
             return 'N/A';
         }
-        return (new Date(parseInt(ts, 10) * 1000)).toUTCString();
+        var date = new Moment(new Date(parseInt(ts, 10) * 1000));
+
+        if (Data.User.Defaults.timezone) {
+            // get default user timezone setting.
+            date.tz(Data.User.Defaults.timezone);
+        } else {
+            date.tz(Moment.tz.guess());
+        }
+        return date.format("ddd, DD MMM YYYY HH:mm:ss z"); // Thu, 27 Apr 2017 21:42:31 GMT
     };
 
     // Turn a number into a timestring.

htdocs/assets/js/views/admin.js

@@ -1,10 +1,14 @@
 "use strict";
 define(function(require) {
-    var View = require('view'),
+    var _ = require('underscore'),
+        View = require('view'),
         NavbarView = require('views/navbar'),
         Templates = require('templates'),
         Config = require('config'),
-        Util = require('util');
+        Util = require('util'),
+        Moment = require('moment');
+        // load in tz data
+        require('moment-timezone');
 
 
     var AdminNavbarView = NavbarView.extend({
@@ -25,6 +29,13 @@ define(function(require) {
                 url: Config.api_root + 'admin',
                 success: this.cbLoaded(function(resp) {
                     this.data = resp;
+
+                    // prep tz data for display
+                    this.data['timezones'] = _.map(Moment.tz.names(), function(tz){
+                        return {timezone: tz, selected: (tz === this.data['timezone'])};
+                    }, this);
+                    this.data['timezones'].unshift({timezone: '', selected: ('' === this.data['timezone']) });
+
                     this.render();
                 }),
                 complete: $.proxy(this.App.hideLoader, this.App)

htdocs/assets/templates/admin.html

@@ -15,7 +15,16 @@
     </div>
 
     <div role="tabpanel" class="tab-pane" id="core">
-      <div class="form-group col-xs-6 col-md-4">
+      <div class="form-group col-xs-6 col-md-3">
+        <label for="timezone">Timezone Select <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Timezone to display dates in."></span></label><br />
+        <select class="form-control tags select2-multiple" name="timezone">
+          {{#each timezones}}
+          <option value="{{ this.timezone }}" {{#if this.selected }}selected{{/if}}>{{#if this.timezone }}{{ this.timezone }}{{ else }}Local Browser Timezone{{/if }}</option>
+          {{/each}}
+        </select>
+      </div>
+
+      <div class="form-group col-xs-6 col-md-3">
         <label for="cron_enabled">Scheduler <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Toggles the 411 Scheduler, which is responsible for scheduling jobs."></span></label><br />
         <div class="btn-group" data-toggle="buttons">
           <label class="btn btn-primary {{#if cron_enabled}}active{{/if}}">
@@ -25,7 +34,7 @@
         </div>
       </div>
 
-      <div class="form-group col-xs-6 col-md-4">
+      <div class="form-group col-xs-6 col-md-3">
         <label for="worker_enabled">Worker <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Toggles the 411 Worker, which is responsible for executing jobs."></span></label><br />
         <div class="btn-group" data-toggle="buttons">
           <label class="btn btn-primary {{#if worker_enabled}}active{{/if}}">
@@ -35,7 +44,7 @@
         </div>
       </div>
 
-      <div class="form-group col-xs-6 col-md-4">
+      <div class="form-group col-xs-6 col-md-3">
         <label for="summary_enabled">Weekly Summary <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Toggles the weekly summary email that gets sent at the end of each week."></span></label><br />
         <div class="btn-group" data-toggle="buttons">
           <label class="btn btn-primary {{#if summary_enabled}}active{{/if}}">
@@ -79,6 +88,7 @@
         <label for="from_error_email">From Error Email <span class="glyphicon glyphicon-question-sign" data-toggle="tooltip" title="Specifies the from email for error emails from 411."></span></label>
         <input type="text" class="form-control" name="from_error_email" value="{{ from_error_email }}" />
       </div>
+
     </div>
 
   </div>

phplib/REST/Admin.php

@@ -12,6 +12,7 @@ class Admin_REST extends REST {
     const T_INT = 1;
     const T_EMAIL = 2;
     const T_STR = 3;
+    const T_TZ = 4;
 
     public static $FIELDS = [
         'cron_enabled' => self::T_BOOL,
@@ -23,6 +24,7 @@ class Admin_REST extends REST {
         'from_error_email' => self::T_EMAIL,
         'default_email' => self::T_EMAIL,
         'announcement' => self::T_STR,
+        'timezone' => self::T_TZ,
     ];
 
     public function checkAuthorization() {
@@ -59,6 +61,9 @@ public function POST(array $get, array $data) {
                 break;
             case self::T_STR:
                 break;
+            case self::T_TZ:
+                # todo validate with json data from moment-timezone
+                break;
             }
 
             if(!$ok) {

phplib/User.php

@@ -27,6 +27,7 @@ protected static function generateSchema() {
             'admin' => [static::T_BOOL, null, false],
             'settings' => [static::T_OBJ, null, []],
             'api_key' => [static::T_STR, null, ''],
+            'timezone' => [static::T_STR, null, (new DBConfig())['timezone']],
         ];
     }