ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-01 16:29:57 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Time Conductor] Begin binding control to data

Browse Source
This commit is contained in:
Victor Woeltjen 2015-09-02 16:53:10 -07:00
parent 91fe3d798f
commit a18cc50a43
3 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/commonUI/general/bundle.json
View File

@ -60,7 +60,7 @@
{
"key": "TimeConductorController",
"implementation": "controllers/TimeConductorController.js",
"depends": [ "$scope" ]
"depends": [ "$scope", "now" ]
},
{
"key": "TreeNodeController",

4
platform/commonUI/general/res/templates/controls/time-controller.html
View File

@ -25,7 +25,7 @@ properly on the range left and right bounds.
<div class="l-time-controller" ng-controller="TimeConductorController">
<div class="l-time-range-inputs-holder">
Start: <input type="date" ng-model="startOuterDate"/>
End: <input type="date" ng-model="endInnerDate"/>
End: <input type="date" ng-model="endOuterDate"/>
</div>
<div class="l-time-range-slider-holder">
@ -41,7 +41,7 @@ properly on the range left and right bounds.
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r" ng-style="{ right: endInnerPct }">
<div class="range-value">{{startOuterText}}</div>
<div class="range-value">{{endInnerText}}</div>
</div>
</div>
</div>

64
platform/commonUI/general/src/controllers/TimeConductorController.js
View File

@ -22,29 +22,41 @@
/*global define,Promise*/
define(
[],
function () {
['moment'],
function (moment) {
"use strict";
var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
/**
* A ToggleController is used to activate/deactivate things.
* A common usage is for "twistie"
*
* @memberof platform/commonUI/general
* @constructor
*/
function TimeConductorController($scope) {
function TimeConductorController($scope, now) {
var tickCount = 2;
$scope.state = false;
$scope.ticks = [];
$scope.ticks = [0, 1];
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;
var i, p, ts, start, end, span;
end = $scope.ngModel.outer[1];
start = $scope.ngModel.outer[0];
span = end - start;
$scope.ticks = [];
for (i = 0; i < tickCount; i += 1) {
$scope.ticks.push(i / (tickCount - 1));
p = i / (tickCount - 1);
ts = p * span + start;
$scope.ticks.push(formatTimestamp(ts));
}
}
@ -54,7 +66,41 @@ define(
updateTicks();
}
function updateFromParameters(ngModel) {
var t = now(), span;
ngModel = ngModel || {
outer: [ t - 24 * 3600 * 1000, t ],
inner: [ t - 24 * 3600 * 1000, t ]
};
// First, dates for the date pickers for outer bounds
$scope.startOuterDate = new Date(ngModel.outer[0]);
$scope.endOuterDate = new Date(ngModel.outer[1]);
// Then readable dates for the knobs
$scope.startInnerText = formatTimestamp(ngModel.inner[0]);
$scope.endInnerText = formatTimestamp(ngModel.inner[1]);
// And positions for the knobs
span = ngModel.outer[1] - ngModel.outer[0];
$scope.startInnerPct =
toPercent((ngModel.inner[0] - ngModel.outer[0]) / span);
$scope.endInnerPct =
toPercent((ngModel.outer[1] - ngModel.inner[1]) / span);
// Stick it back is scope (in case we just set defaults)
$scope.ngModel = ngModel;
updateTicks();
}
// Initialize scope to defaults
updateFromParameters();
$scope.$watchCollection("ngModel", updateFromParameters);
$scope.$watch("spanWidth", updateSpanWidth);
}
return TimeConductorController;