#66 Show dates with browser timezone/locale

Author: fredsted

package.json

@@ -16,6 +16,7 @@
     "jquery": "^3.1.1",
     "laravel-echo": "^1.3.5",
     "laravel-elixir": "^4.0.0",
+    "moment": "^2.24.0",
     "pretty-data": "^0.40.0",
     "pusher-js": "^4.2.2"
   },

public/css/app.css

@@ -1,4 +1,5 @@
-var prettyData = require('pretty-data').pd;
+let prettyData = require('pretty-data').pd;
+let moment = require('moment');
 
 angular
     .module("app", [
@@ -517,6 +518,14 @@ angular
             return content;
         };
 
+        $scope.localDate = (function (dateTimeString) {
+            return moment.utc(dateTimeString).local().format('lll');
+        });
+
+        $scope.relativeDate = (function (dateTimeString) {
+            return moment.utc(dateTimeString).fromNow();
+        });
+
         // Initialize app. Check whether we need to load a token.
         if ($state.current.name) {
             if ($scope.getSetting('token') && !$stateParams.id) {

public/js/bundle.js

@@ -92,7 +92,7 @@ class="btn btn-xs btn-link">
                             <a ng-click="setCurrentRequest(request)" class="select">
                                 <span class="label label-{{ getLabel(request.method) }}">{{ request.method }}</span>
                                 #{{ request.uuid.substring(0,5) }} {{ request.ip }} <br/>
-                                <small>{{ request.created_at }}</small>
+                                <small>{{ localDate(request.created_at) }}</small>
                             </a>
                             <a ng-click="deleteRequest(request, key)" class="btn btn-danger delete">
                                 X
@@ -246,7 +246,7 @@ class="btn btn-xs" ng-class="redirectUrl ? '' : 'disabled'"
                                     </tr>
                                     <tr>
                                         <td>Date</td>
-                                        <td id="req-date">{{ currentRequest.created_at }}</td>
+                                        <td id="req-date" title="{{ currentRequest.created_at }} UTC">{{ localDate(currentRequest.created_at) }} ({{ relativeDate(currentRequest.created_at) }})</td>
                                     </tr>
                                     <tr>
                                         <td>ID</td>