[Time Conductor] Populate datetime picker

WTD-1515

platform/commonUI/general/bundle.json

@@ -66,6 +66,11 @@
                 "implementation": "controllers/TimeRangeController.js",
                 "depends": [ "$scope", "now" ]
             },
+            {
+                "key": "DateTimePickerController",
+                "implementation": "controllers/DateTimePickerController.js",
+                "depends": [ "$scope" ]
+            },
             {
                 "key": "TreeNodeController",
                 "implementation": "controllers/TreeNodeController.js",

platform/commonUI/general/res/templates/controls/datetime-picker.html

@@ -20,12 +20,12 @@
  at runtime from the About dialog for additional information.
 -->
 
-<div>
+<div ng-controller="DateTimePickerController">
     <div style="vertical-align: top; display: inline-block">
         <div style="text-align: center;">
-            <a>&lt;</a>
+            <a ng-click="changeMonth(-1)">&lt;</a>
-            March 2016
+            {{month}} {{year}}
-            <a>&gt;</a>
+            <a ng-click="changeMonth(1)">&gt;</a>
         </div>
         <div>
             <table>
@@ -34,21 +34,23 @@
                         {{day}}
                     </th>
                 </tr>
-                <tr ng-repeat="wk in [0,1,2,3,4,5]">
+                <tr ng-repeat="row in table">
                     <td style="text-align: center;"
-                        ng-repeat="d in [0,1,2,3,4,5,6]">
+                        ng-repeat="cell in row"
-                        <div>{{wk + d}}</div>
+                        ng-class='{ disabled: !isSelectable(cell) }'>
-                        <div>{{wk * d}}</div>
+                        <div>{{cell.day}}</div>
+                        <div style="font-size: 80%">{{cell.dayOfYear}}</div>
                     </td>
                 </tr>
             </table>
         </div>
     </div>
     <div style="vertical-align: top; display: inline-block"
-         ng-repeat="name in ['Hour', 'Min', 'Sec']">
+         ng-repeat="key in ['hours', 'minutes', 'seconds']"
-        <div>{{name}}</div>
+         ng-if="parameters[key]">
+        <div>{{nameFor(key)}}</div>
         <select size="10"
-                ng-model="ngModel.hours"
+                ng-model="time[key]"
                 ng-options="i for i in [0,1,2,3,4,5,6,7,8,9,10,11,12,13]">
         </select>
     </div>

platform/commonUI/general/src/controllers/DateTimePickerController.js

@@ -0,0 +1,125 @@
+/*****************************************************************************
+ * Open MCT Web, Copyright (c) 2014-2015, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT Web is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT Web includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/*global define,Promise*/
+
+define(
+    [ 'moment' ],
+    function (moment) {
+        'use strict';
+
+        var TIME_NAMES = {
+                'hours': "Hour",
+                'minutes': "Minute",
+                'seconds': "Second"
+            },
+            MONTHS = moment.months();
+
+        /**
+         * Controller to support the date-time picker.
+         *
+         * Adds/uses the following properties in scope:
+         * * `year`: Year being displayed in picker
+         * * `month`: Month being displayed
+         * * `table`: Table being displayed; array of arrays of
+         *   * `day`: Day of month
+         *   * `dayOfYear`: Day of year
+         *   * `month`: Month associated with the day
+         *   * `year`: Year associated with the day.
+         * * `date`: Date chosen
+         *   * `year`: Year selected
+         *   * `month`: Month selected (0-indexed)
+         *   * `day`: Day of month selected
+         * * `time`: Chosen time (hours/minutes/seconds)
+         *   * `hours`: Hours chosen
+         *   * `minutes`: Minutes chosen
+         *   * `seconds`: Seconds chosen
+         */
+        function DateTimePickerController($scope) {
+            var year = 2015,
+                month = 8; // For picker state, not model state
+
+            function generateTableCell() {
+
+            }
+
+            function generateTable() {
+                var m = moment.utc({ year: year, month: month }).day(0),
+                    table = [],
+                    row,
+                    col;
+
+                for (row = 0; row < 6; row += 1) {
+                    table.push([]);
+                    for (col = 0; col < 7; col += 1) {
+                        table[row].push({
+                            year: m.year(),
+                            month: m.month(),
+                            day: m.date(),
+                            dayOfYear: m.dayOfYear()
+                        });
+                        m.add(1, 'days'); // Next day!
+                    }
+                }
+
+                return table;
+            }
+
+            function updateScopeForMonth() {
+                $scope.month = MONTHS[month];
+                $scope.year = year;
+                $scope.table = generateTable();
+                console.log($scope.table);
+            }
+
+            $scope.isSelectable = function (cell) {
+                return cell.month === month;
+            }
+
+            $scope.dateEquals = function (d1, d2) {
+                return d1.year === d2.year &&
+                    d1.month === d2.month &&
+                    d1.day === d2.day;
+            };
+
+            $scope.changeMonth = function (delta) {
+                month += delta;
+                if (month > 11) {
+                    month = 0;
+                    year += 1;
+                }
+                if (month < 0) {
+                    month = 11;
+                    year -= 1;
+                }
+                updateScopeForMonth();
+            };
+
+            $scope.nameFor = function (key) {
+                return TIME_NAMES[key];
+            };
+
+            updateScopeForMonth();
+        }
+
+        return DateTimePickerController;
+    }
+);