Show last update time

index.html

@@ -21,6 +21,7 @@
             <div class="timeRemainingBar" ng-style="countdownStyle"></div>
         </div>
         <div class="below">{{matesText()}}</div>
+        <div class="lastAdded" ng-show="lastMate">Last mate: {{lastMate | date:'medium'}}</div>
     </div>
 </body>
 </html>

scripts/app.js

@@ -16,12 +16,15 @@ app.controller("mates", ["$scope", "$http", "$interval", function($scope, $http,
     };
     $scope.cooldown = false;
 
+    $scope.lastMate = "";
+
     $http.get("/mates")
         .then((r) =>
         {
             var json = angular.fromJson(r.data);
 
             $scope.mates = json.mates;
+            $scope.lastMate = json.lastUpdate;
             animateCountdown($scope, $interval, json.lastUpdate, json.cooldown);
         });
 
@@ -39,8 +42,8 @@ app.controller("mates", ["$scope", "$http", "$interval", function($scope, $http,
                 if (json.error || r.status != 200) return;
 
                 $scope.mates = json.mates;
+                $scope.lastMate = json.lastUpdate;
                 animateCountdown($scope, $interval, json.lastUpdate, json.cooldown);
-
             });
     };
 }]);

stylesheets/default.css

@@ -10,7 +10,7 @@ body
     font-family: 'Arial', sans-serif;
     font-size: 40pt;
 
-    width: 300px;
+    width: 400px;
     height: 400px;
     margin-top: calc(50vh - 200px);
     margin-right: auto;
@@ -70,3 +70,17 @@ body
 
     background-color: #0009;
 }
+
+.lastAdded
+{
+    font-size: 15pt;
+    line-height: 50px;
+
+    width: 100%;
+    height: 50px;
+
+    text-align: center;
+    vertical-align: middle;
+
+    color: #444;
+}