diff --git a/platform/commonUI/general/src/controllers/DateTimePickerController.js b/platform/commonUI/general/src/controllers/DateTimePickerController.js
new file mode 100644
index 0000000000..11214d9357
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/DateTimePickerController.js
@@ -0,0 +1,202 @@
+/*****************************************************************************
+ * 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(),
+ TIME_OPTIONS = (function makeRanges() {
+ var arr = [];
+ while (arr.length < 60) {
+ arr.push(arr.length);
+ }
+ return {
+ hours: arr.slice(0, 24),
+ minutes: arr,
+ seconds: arr
+ };
+ }());
+
+ /**
+ * 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
+ *
+ * Months are zero-indexed, day-of-months are one-indexed.
+ */
+ function DateTimePickerController($scope, now) {
+ var year,
+ month, // For picker state, not model state
+ interacted = false;
+
+ 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();
+ }
+
+ function updateFromModel(ngModel) {
+ var m;
+
+ m = moment.utc(ngModel);
+
+ $scope.date = {
+ year: m.year(),
+ month: m.month(),
+ day: m.date()
+ };
+ $scope.time = {
+ hours: m.hour(),
+ minutes: m.minute(),
+ seconds: m.second()
+ };
+
+ //window.alert($scope.date.day + " " + ngModel);
+
+ // Zoom to that date in the picker, but
+ // only if the user hasn't interacted with it yet.
+ if (!interacted) {
+ year = m.year();
+ month = m.month();
+ updateScopeForMonth();
+ }
+ }
+
+ function updateFromView() {
+ var m = moment.utc({
+ year: $scope.date.year,
+ month: $scope.date.month,
+ day: $scope.date.day,
+ hour: $scope.time.hours,
+ minute: $scope.time.minutes,
+ second: $scope.time.seconds
+ });
+ $scope.ngModel[$scope.field] = m.valueOf();
+ }
+
+ $scope.isSelectable = function (cell) {
+ return cell.month === month;
+ };
+
+ $scope.isSelected = function (cell) {
+ var date = $scope.date || {};
+ return cell.day === date.day &&
+ cell.month === date.month &&
+ cell.year === date.year;
+ };
+
+ $scope.select = function (cell) {
+ $scope.date = $scope.date || {};
+ $scope.date.month = cell.month;
+ $scope.date.year = cell.year;
+ $scope.date.day = cell.day;
+ updateFromView();
+ };
+
+ $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;
+ }
+ interacted = true;
+ updateScopeForMonth();
+ };
+
+ $scope.nameFor = function (key) {
+ return TIME_NAMES[key];
+ };
+
+ $scope.optionsFor = function (key) {
+ return TIME_OPTIONS[key];
+ };
+
+ updateScopeForMonth();
+
+ // Ensure some useful default
+ $scope.ngModel[$scope.field] =
+ $scope.ngModel[$scope.field] === undefined ?
+ now() : $scope.ngModel[$scope.field];
+
+ $scope.$watch('ngModel[field]', updateFromModel);
+ $scope.$watchCollection('date', updateFromView);
+ $scope.$watchCollection('time', updateFromView);
+ }
+
+ return DateTimePickerController;
+ }
+);
diff --git a/platform/commonUI/general/src/controllers/TimeRangeController.js b/platform/commonUI/general/src/controllers/TimeRangeController.js
new file mode 100644
index 0000000000..ac111ab1a9
--- /dev/null
+++ b/platform/commonUI/general/src/controllers/TimeRangeController.js
@@ -0,0 +1,224 @@
+/*****************************************************************************
+ * 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 DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+
+ /**
+ * @memberof platform/commonUI/general
+ * @constructor
+ */
+ function TimeConductorController($scope, now) {
+ var tickCount = 2,
+ initialDragValue;
+
+ function formatTimestamp(ts) {
+ return moment.utc(ts).format(DATE_FORMAT);
+ }
+
+ // From 0.0-1.0 to "0%"-"1%"
+ function toPercent(p) {
+ return (100 * p) + "%";
+ }
+
+ function updateTicks() {
+ var i, p, ts, start, end, span;
+ end = $scope.ngModel.outer.end;
+ start = $scope.ngModel.outer.start;
+ span = end - start;
+ $scope.ticks = [];
+ for (i = 0; i < tickCount; i += 1) {
+ p = i / (tickCount - 1);
+ ts = p * span + start;
+ $scope.ticks.push(formatTimestamp(ts));
+ }
+ }
+
+ function updateSpanWidth(w) {
+ // Space about 100px apart
+ tickCount = Math.max(Math.floor(w / 100), 2);
+ updateTicks();
+ }
+
+ function updateViewForInnerSpanFromModel(ngModel) {
+ var span = ngModel.outer.end - ngModel.outer.start;
+
+ // Expose readable dates for the knobs
+ $scope.startInnerText = formatTimestamp(ngModel.inner.start);
+ $scope.endInnerText = formatTimestamp(ngModel.inner.end);
+
+ // And positions for the knobs
+ $scope.startInnerPct =
+ toPercent((ngModel.inner.start - ngModel.outer.start) / span);
+ $scope.endInnerPct =
+ toPercent((ngModel.outer.end - ngModel.inner.end) / span);
+ }
+
+ function defaultBounds() {
+ var t = now();
+ return {
+ start: t - 24 * 3600 * 1000, // One day
+ end: t
+ };
+ }
+
+ function copyBounds(bounds) {
+ return { start: bounds.start, end: bounds.end };
+ }
+
+ function updateViewFromModel(ngModel) {
+ var t = now();
+
+ ngModel = ngModel || {};
+ ngModel.outer = ngModel.outer || defaultBounds();
+ ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
+
+ // First, dates for the date pickers for outer bounds
+ $scope.startOuterDate = new Date(ngModel.outer.start);
+ $scope.endOuterDate = new Date(ngModel.outer.end);
+
+ // Then various updates for the inner span
+ updateViewForInnerSpanFromModel(ngModel);
+
+ // Stick it back is scope (in case we just set defaults)
+ $scope.ngModel = ngModel;
+
+ updateTicks();
+ }
+
+ function startLeftDrag() {
+ initialDragValue = $scope.ngModel.inner.start;
+ }
+
+ function startRightDrag() {
+ initialDragValue = $scope.ngModel.inner.end;
+ }
+
+ function startMiddleDrag() {
+ initialDragValue = {
+ start: $scope.ngModel.inner.start,
+ end: $scope.ngModel.inner.end
+ };
+ }
+
+ function toMillis(pixels) {
+ var span = $scope.ngModel.outer.end - $scope.ngModel.outer.start;
+ return (pixels / $scope.spanWidth) * span;
+ }
+
+ function clamp(value, low, high) {
+ return Math.max(low, Math.min(high, value));
+ }
+
+ function leftDrag(pixels) {
+ var delta = toMillis(pixels);
+ $scope.ngModel.inner.start = clamp(
+ initialDragValue + delta,
+ $scope.ngModel.outer.start,
+ $scope.ngModel.inner.end
+ );
+ updateViewFromModel($scope.ngModel);
+ }
+
+ function rightDrag(pixels) {
+ var delta = toMillis(pixels);
+ $scope.ngModel.inner.end = clamp(
+ initialDragValue + delta,
+ $scope.ngModel.inner.start,
+ $scope.ngModel.outer.end
+ );
+ updateViewFromModel($scope.ngModel);
+ }
+
+ function middleDrag(pixels) {
+ var delta = toMillis(pixels),
+ edge = delta < 0 ? 'start' : 'end',
+ opposite = delta < 0 ? 'end' : 'start';
+
+ // Adjust the position of the edge in the direction of drag
+ $scope.ngModel.inner[edge] = clamp(
+ initialDragValue[edge] + delta,
+ $scope.ngModel.outer.start,
+ $scope.ngModel.outer.end
+ );
+ // Adjust opposite knob to maintain span
+ $scope.ngModel.inner[opposite] = $scope.ngModel.inner[edge] +
+ initialDragValue[opposite] - initialDragValue[edge];
+
+ updateViewFromModel($scope.ngModel);
+ }
+
+ function updateOuterStart(t) {
+ var ngModel = $scope.ngModel;
+ ngModel.outer.end =
+ Math.max(ngModel.outer.start, ngModel.outer.end);
+ ngModel.inner.start =
+ Math.max(ngModel.outer.start, ngModel.inner.start);
+ ngModel.inner.end =
+ Math.max(ngModel.outer.start, ngModel.inner.end);
+
+ $scope.startOuterText = formatTimestamp(t);
+
+ updateViewForInnerSpanFromModel(ngModel);
+ }
+
+ function updateOuterEnd(t) {
+ var ngModel = $scope.ngModel;
+ ngModel.outer.start =
+ Math.min(ngModel.outer.end, ngModel.outer.start);
+ ngModel.inner.start =
+ Math.min(ngModel.outer.end, ngModel.inner.start);
+ ngModel.inner.end =
+ Math.min(ngModel.outer.end, ngModel.inner.end);
+
+ $scope.endOuterText = formatTimestamp(t);
+
+ updateViewForInnerSpanFromModel(ngModel);
+ }
+
+ $scope.startLeftDrag = startLeftDrag;
+ $scope.startRightDrag = startRightDrag;
+ $scope.startMiddleDrag = startMiddleDrag;
+ $scope.leftDrag = leftDrag;
+ $scope.rightDrag = rightDrag;
+ $scope.middleDrag = middleDrag;
+
+ $scope.state = false;
+ $scope.ticks = [];
+
+ // Initialize scope to defaults
+ updateViewFromModel($scope.ngModel);
+
+ $scope.$watchCollection("ngModel", updateViewFromModel);
+ $scope.$watch("spanWidth", updateSpanWidth);
+ $scope.$watch("ngModel.outer.start", updateOuterStart);
+ $scope.$watch("ngModel.outer.end", updateOuterEnd);
+ }
+
+ return TimeConductorController;
+ }
+);
diff --git a/platform/commonUI/general/src/directives/MCTClickElsewhere.js b/platform/commonUI/general/src/directives/MCTClickElsewhere.js
new file mode 100644
index 0000000000..1bcdbbe6b5
--- /dev/null
+++ b/platform/commonUI/general/src/directives/MCTClickElsewhere.js
@@ -0,0 +1,77 @@
+/*****************************************************************************
+ * 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*/
+
+define(
+ [],
+ function () {
+ "use strict";
+
+ /**
+ * The `mct-click-elsewhere` directive will evaluate its
+ * associated expression whenever a `mousedown` occurs anywhere
+ * outside of the element that has the `mct-click-elsewhere`
+ * directive attached. This is useful for dismissing popups
+ * and the like.
+ */
+ function MCTClickElsewhere($document) {
+
+ // Link; install event handlers.
+ function link(scope, element, attrs) {
+ // Keep a reference to the body, to attach/detach
+ // mouse event handlers; mousedown and mouseup cannot
+ // only be attached to the element being linked, as the
+ // mouse may leave this element during the drag.
+ var body = $document.find('body');
+
+ function clickBody(event) {
+ var x = event.clientX,
+ y = event.clientY,
+ rect = element[0].getBoundingClientRect(),
+ xMin = rect.left,
+ xMax = xMin + rect.width,
+ yMin = rect.top,
+ yMax = yMin + rect.height;
+
+ if (x < xMin || x > xMax || y < yMin || y > yMax) {
+ scope.$eval(attrs.mctClickElsewhere);
+ }
+ }
+
+ body.on("mousedown", clickBody);
+ scope.$on("$destroy", function () {
+ body.off("mousedown", clickBody);
+ });
+ }
+
+ return {
+ // mct-drag only makes sense as an attribute
+ restrict: "A",
+ // Link function, to install event handlers
+ link: link
+ };
+ }
+
+ return MCTClickElsewhere;
+ }
+);
+
diff --git a/platform/commonUI/general/src/directives/MCTPopup.js b/platform/commonUI/general/src/directives/MCTPopup.js
new file mode 100644
index 0000000000..33860204c6
--- /dev/null
+++ b/platform/commonUI/general/src/directives/MCTPopup.js
@@ -0,0 +1,70 @@
+/*****************************************************************************
+ * 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*/
+
+define(
+ function () {
+ 'use strict';
+
+ var TEMPLATE = "