[Imagery] Display image updates

WTD-1170.

platform/features/imagery/bundle.json

@@ -15,6 +15,13 @@
                 "category": "view",
                 "implementation": "policies/ImageryViewPolicy.js"
             }
+        ],
+        "controllers": [
+            {
+                "key": "ImageryController",
+                "implementation": "controllers/ImageryController.js",
+                "depends": [ "$scope", "telemetryHandler", "telemetryFormatter" ]
+            }
         ]
     }
 }

platform/features/imagery/res/templates/imagery.html

@@ -1,4 +1,4 @@
-<div class="t-imagery">
+<div class="t-imagery" ng-controller="ImageryController as imagery">
     <!-- Main image -->
     <div
         class="l-image-main-wrapper"
@@ -31,7 +31,7 @@
         <div
             class="l-image-main s-image-main"
             ng-class="{ paused:paused, stale:false }"
-            style="background-image:url('http://www.hacskaylo.com/wedding/images/moon-surface-with-ice.jpg');"
+            style="background-image:url('{{imagery.getImageUrl()}}');"
             ></div>
         <div class="l-image-main-controlbar bar">
             <div class="left">
@@ -39,9 +39,9 @@
                     class="t-btn l-btn s-btn s-icon-btn s-very-subtle show-thumbs sm"
                     ng-click="showThumbsBubble = (showThumbsBubble)? false:true"
                     ><span class="ui-symbol icon"></span></a>
-                <span class="l-timezone">UTC</span>
-                <span class="l-time">16:03:43</span>
-                <span class="l-date">2020/04/27</span>
+                <span class="l-timezone">{{imagery.getZone()}}</span>
+                <span class="l-time">{{imagery.getTime()}}</span>
+                <span class="l-date">{{imagery.getDate()}}</span>
             </div>
             <div class="right">
                 <a

platform/features/imagery/src/controllers/ImageryController.js

@@ -22,12 +22,16 @@
 /*global define*/
 
 define(
-    [],
-    function () {
+    ['moment'],
+    function (moment) {
         "use strict";
 
+        var DATE_FORMAT = "YYYY-DDD",
+            TIME_FORMAT = "HH:mm:ss";
+
         function ImageryController($scope, telemetryHandler, telemetryFormatter) {
-            var timestamp = "",
+            var date = "",
+                time = "",
                 imageUrl = "",
                 handle;
 
@@ -39,11 +43,12 @@ define(
             }
 
             function updateValues() {
-                var imageObject = handle && handle.getTelemetryObjects()[0];
+                var imageObject = handle && handle.getTelemetryObjects()[0],
+                    m;
                 if (imageObject) {
-                    timestamp = telemetryFormatter.formatDomainValue(
-                        handle.getDomainValue(imageObject)
-                    );
+                    m = moment.utc(handle.getDomainValue(imageObject));
+                    date = m.format(DATE_FORMAT);
+                    time = m.format(TIME_FORMAT);
                     imageUrl = handle.getRangeValue(imageObject);
                 }
             }
@@ -52,7 +57,8 @@ define(
             // to do the meaningful work here.
             function subscribe(domainObject) {
                 releaseSubscription();
-                timestamp = "";
+                date = "";
+                time = "";
                 imageUrl = "";
                 handle = domainObject && telemetryHandler.handle(
                     domainObject,
@@ -68,8 +74,14 @@ define(
             $scope.$on("$destroy", releaseSubscription);
 
             return {
-                getTimestamp: function () {
-                    return timestamp;
+                getTime: function () {
+                    return time;
+                },
+                getDate: function () {
+                    return date;
+                },
+                getZone: function () {
+                    return "UTC";
                 },
                 getImageUrl: function () {
                     return imageUrl;