[Time Controller] Show bounds in a text field

Show bounds in a text field to allow user editing; supports manual
editing of time controller bounds, nasa/openmctweb#181.
This commit is contained in:
Victor Woeltjen 2015-10-21 14:35:18 -07:00
parent 756f728865
commit 07818b0a6d
2 changed files with 82 additions and 80 deletions

View File

@ -25,9 +25,10 @@
<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span>
<span class="l-time-range-input" ng-controller="ToggleController as t1">
<!--<span class="lbl">Start</span>-->
<span class="s-btn time-range-start" ng-click="t1.toggle()">
<span class="val">{{startOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a>
<span class="s-btn time-range-start">
<input type="text" ng-model="boundsModel.start"></input>
<a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()">
</a>
<mct-popup ng-if="t1.isActive()">
<div mct-click-elsewhere="t1.setState(false)">
<mct-control key="'datetime-picker'"
@ -44,9 +45,10 @@
<span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input" ng-click="t2.toggle()">
<span class="val">{{endOuterText}}</span>
<a class="ui-symbol icon icon-calendar"></a>
<span class="s-btn l-time-range-input">
<input type="text" ng-model="boundsModel.end"></input>
<a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()">
</a>
<mct-popup ng-if="t2.isActive()">
<div mct-click-elsewhere="t2.setState(false)">
<mct-control key="'datetime-picker'"

View File

@ -26,8 +26,7 @@ define(
function (moment) {
"use strict";
var
DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
TICK_SPACING_PX = 150;
/**
@ -99,8 +98,8 @@ define(
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);
$scope.boundsModel.start = formatTimestamp(ngModel.outer.start);
$scope.boundsModel.end = formatTimestamp(ngModel.outer.end);
// Then various updates for the inner span
updateViewForInnerSpanFromModel(ngModel);
@ -210,6 +209,7 @@ define(
$scope.state = false;
$scope.ticks = [];
$scope.boundsModel = {};
// Initialize scope to defaults
updateViewFromModel($scope.ngModel);