[Time Controller] Allow manual date entry

WTD-1515
This commit is contained in:
Victor Woeltjen
2015-09-03 11:03:17 -07:00
parent 9d6b70f433
commit fc2860810b
2 changed files with 34 additions and 17 deletions

View File

@ -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">

View File

@ -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;