mirror of
https://github.com/nasa/openmct.git
synced 2025-06-12 12:18:16 +00:00
[Time Controller] Allow manual date entry
WTD-1515
This commit is contained in:
@ -24,8 +24,12 @@ properly on the range left and right bounds.
|
|||||||
|
|
||||||
<div class="l-time-controller" ng-controller="TimeConductorController">
|
<div class="l-time-controller" ng-controller="TimeConductorController">
|
||||||
<div class="l-time-range-inputs-holder">
|
<div class="l-time-range-inputs-holder">
|
||||||
Start: <input type="date" ng-model="startOuterDate"/>
|
Start: <input type="textfield"
|
||||||
End: <input type="date" ng-model="endOuterDate"/>
|
placeholder="YYYY-MM-DD HH:mm:ss"
|
||||||
|
ng-model="startOuterDate"/>
|
||||||
|
End: <input type="textfield"
|
||||||
|
placeholder="YYYY-MM-DD HH:mm:ss"
|
||||||
|
ng-model="endOuterDate"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="l-time-range-slider-holder">
|
<div class="l-time-range-slider-holder">
|
||||||
|
@ -36,12 +36,15 @@ define(
|
|||||||
var tickCount = 2,
|
var tickCount = 2,
|
||||||
initialDragValue;
|
initialDragValue;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function formatTimestamp(ts) {
|
function formatTimestamp(ts) {
|
||||||
return moment.utc(ts).format(DATE_FORMAT);
|
return moment.utc(ts).format(DATE_FORMAT);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function parseTimestamp(text, fallback) {
|
||||||
|
var m = moment.utc(text, DATE_FORMAT);
|
||||||
|
return m.isValid() ? m.valueOf() : fallback;
|
||||||
|
}
|
||||||
|
|
||||||
// From 0.0-1.0 to "0%"-"1%"
|
// From 0.0-1.0 to "0%"-"1%"
|
||||||
function toPercent(p) {
|
function toPercent(p) {
|
||||||
return (100 * p) + "%";
|
return (100 * p) + "%";
|
||||||
@ -66,17 +69,16 @@ define(
|
|||||||
updateTicks();
|
updateTicks();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateFromParameters(ngModel) {
|
function updateViewFromModel(ngModel) {
|
||||||
var t = now(), span;
|
var t = now(), span;
|
||||||
|
|
||||||
ngModel = ngModel || {
|
ngModel = ngModel || {};
|
||||||
outer: [ t - 24 * 3600 * 1000, t ],
|
ngModel.outer = ngModel.outer || [ t - 24 * 3600 * 1000, t ];
|
||||||
inner: [ t - 24 * 3600 * 1000, t ]
|
ngModel.inner = ngModel.inner || [ t - 24 * 3600 * 1000, t ];
|
||||||
};
|
|
||||||
|
|
||||||
// First, dates for the date pickers for outer bounds
|
// First, dates for the date pickers for outer bounds
|
||||||
$scope.startOuterDate = new Date(ngModel.outer[0]);
|
$scope.startOuterDate = formatTimestamp(ngModel.outer[0]);
|
||||||
$scope.endOuterDate = new Date(ngModel.outer[1]);
|
$scope.endOuterDate = formatTimestamp(ngModel.outer[1]);
|
||||||
|
|
||||||
// Then readable dates for the knobs
|
// Then readable dates for the knobs
|
||||||
$scope.startInnerText = formatTimestamp(ngModel.inner[0]);
|
$scope.startInnerText = formatTimestamp(ngModel.inner[0]);
|
||||||
@ -126,7 +128,7 @@ define(
|
|||||||
$scope.ngModel.outer[0],
|
$scope.ngModel.outer[0],
|
||||||
$scope.ngModel.inner[1]
|
$scope.ngModel.inner[1]
|
||||||
);
|
);
|
||||||
updateFromParameters($scope.ngModel);
|
updateViewFromModel($scope.ngModel);
|
||||||
}
|
}
|
||||||
|
|
||||||
function rightDrag(pixels) {
|
function rightDrag(pixels) {
|
||||||
@ -136,7 +138,7 @@ define(
|
|||||||
$scope.ngModel.inner[0],
|
$scope.ngModel.inner[0],
|
||||||
$scope.ngModel.outer[1]
|
$scope.ngModel.outer[1]
|
||||||
);
|
);
|
||||||
updateFromParameters($scope.ngModel);
|
updateViewFromModel($scope.ngModel);
|
||||||
}
|
}
|
||||||
|
|
||||||
function middleDrag(pixels) {
|
function middleDrag(pixels) {
|
||||||
@ -154,7 +156,17 @@ define(
|
|||||||
$scope.ngModel.inner[opposite] = $scope.ngModel.inner[index] +
|
$scope.ngModel.inner[opposite] = $scope.ngModel.inner[index] +
|
||||||
initialDragValue[opposite] - initialDragValue[index];
|
initialDragValue[opposite] - initialDragValue[index];
|
||||||
|
|
||||||
updateFromParameters($scope.ngModel);
|
updateViewFromModel($scope.ngModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOuterStart(text) {
|
||||||
|
var ngModel = $scope.ngModel;
|
||||||
|
ngModel.outer[0] = parseTimestamp(text, ngModel.outer[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOuterEnd(text) {
|
||||||
|
var ngModel = $scope.ngModel;
|
||||||
|
ngModel.outer[1] = parseTimestamp(text, ngModel.outer[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
$scope.startLeftDrag = startLeftDrag;
|
$scope.startLeftDrag = startLeftDrag;
|
||||||
@ -168,11 +180,12 @@ define(
|
|||||||
$scope.ticks = [];
|
$scope.ticks = [];
|
||||||
|
|
||||||
// Initialize scope to defaults
|
// Initialize scope to defaults
|
||||||
updateFromParameters();
|
updateViewFromModel($scope.ngModel);
|
||||||
|
|
||||||
$scope.$watchCollection("ngModel", updateFromParameters);
|
$scope.$watchCollection("ngModel", updateViewFromModel);
|
||||||
$scope.$watch("spanWidth", updateSpanWidth);
|
$scope.$watch("spanWidth", updateSpanWidth);
|
||||||
|
$scope.$watch("startOuterDate", updateOuterStart);
|
||||||
|
$scope.$watch("endOuterDate", updateOuterEnd);
|
||||||
}
|
}
|
||||||
|
|
||||||
return TimeConductorController;
|
return TimeConductorController;
|
||||||
|
Reference in New Issue
Block a user