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

[Time Controller] Show bounds in a text field

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,82 +21,84 @@
--> -->
<!-- MINE --> <!-- MINE -->
<div class="l-time-controller" ng-controller="TimeRangeController"> <div class="l-time-controller" ng-controller="TimeRangeController">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-inputs-holder">
<span class="l-time-range-inputs-elem ui-symbol type-icon">&#x43;</span> <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="l-time-range-input" ng-controller="ToggleController as t1">
<!--<span class="lbl">Start</span>--> <!--<span class="lbl">Start</span>-->
<span class="s-btn time-range-start" ng-click="t1.toggle()"> <span class="s-btn time-range-start">
<span class="val">{{startOuterText}}</span> <input type="text" ng-model="boundsModel.start"></input>
<a class="ui-symbol icon icon-calendar"></a> <a class="ui-symbol icon icon-calendar" ng-click="t1.toggle()">
<mct-popup ng-if="t1.isActive()"> </a>
<div mct-click-elsewhere="t1.setState(false)"> <mct-popup ng-if="t1.isActive()">
<mct-control key="'datetime-picker'" <div mct-click-elsewhere="t1.setState(false)">
ng-model="ngModel.outer" <mct-control key="'datetime-picker'"
field="'start'" ng-model="ngModel.outer"
options="{ hours: true }"> field="'start'"
</mct-control> options="{ hours: true }">
</div> </mct-control>
</mct-popup> </div>
</span> </mct-popup>
</span> </span>
</span>
<span class="l-time-range-inputs-elem lbl">to</span> <span class="l-time-range-inputs-elem lbl">to</span>
<span class="l-time-range-input" ng-controller="ToggleController as t2"> <span class="l-time-range-input" ng-controller="ToggleController as t2">
<!--<span class="lbl">End</span>--> <!--<span class="lbl">End</span>-->
<span class="s-btn l-time-range-input" ng-click="t2.toggle()"> <span class="s-btn l-time-range-input">
<span class="val">{{endOuterText}}</span> <input type="text" ng-model="boundsModel.end"></input>
<a class="ui-symbol icon icon-calendar"></a> <a class="ui-symbol icon icon-calendar" ng-click="t2.toggle()">
<mct-popup ng-if="t2.isActive()"> </a>
<div mct-click-elsewhere="t2.setState(false)"> <mct-popup ng-if="t2.isActive()">
<mct-control key="'datetime-picker'" <div mct-click-elsewhere="t2.setState(false)">
ng-model="ngModel.outer" <mct-control key="'datetime-picker'"
field="'end'" ng-model="ngModel.outer"
options="{ hours: true }"> field="'end'"
</mct-control> options="{ hours: true }">
</div> </mct-control>
</mct-popup> </div>
</span>&nbsp; </mct-popup>
</span> </span>&nbsp;
</div> </span>
</div>
<div class="l-time-range-slider-holder"> <div class="l-time-range-slider-holder">
<div class="l-time-range-slider"> <div class="l-time-range-slider">
<div class="slider" <div class="slider"
mct-resize="spanWidth = bounds.width"> mct-resize="spanWidth = bounds.width">
<div class="knob knob-l" <div class="knob knob-l"
mct-drag-down="startLeftDrag()" mct-drag-down="startLeftDrag()"
mct-drag="leftDrag(delta[0])" mct-drag="leftDrag(delta[0])"
ng-style="{ left: startInnerPct }"> ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div> <div class="range-value">{{startInnerText}}</div>
</div> </div>
<div class="knob knob-r" <div class="knob knob-r"
mct-drag-down="startRightDrag()" mct-drag-down="startRightDrag()"
mct-drag="rightDrag(delta[0])" mct-drag="rightDrag(delta[0])"
ng-style="{ right: endInnerPct }"> ng-style="{ right: endInnerPct }">
<div class="range-value">{{endInnerText}}</div> <div class="range-value">{{endInnerText}}</div>
</div> </div>
<div class="slot range-holder"> <div class="slot range-holder">
<div class="range" <div class="range"
mct-drag-down="startMiddleDrag()" mct-drag-down="startMiddleDrag()"
mct-drag="middleDrag(delta[0])" mct-drag="middleDrag(delta[0])"
ng-style="{ left: startInnerPct, right: endInnerPct}"> ng-style="{ left: startInnerPct, right: endInnerPct}">
<div class="toi-line"></div> <div class="toi-line"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="l-time-range-ticks-holder"> <div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks"> <div class="l-time-range-ticks">
<div <div
ng-repeat="tick in ticks" ng-repeat="tick in ticks"
ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }" ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
class="tick tick-x" class="tick tick-x"
> >
<span class="l-time-range-tick-label">{{tick}}</span> <span class="l-time-range-tick-label">{{tick}}</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

10
platform/commonUI/general/src/controllers/TimeRangeController.js
View File

@ -26,9 +26,8 @@ define(
function (moment) { function (moment) {
"use strict"; "use strict";
var var DATE_FORMAT = "YYYY-MM-DD HH:mm:ss",
DATE_FORMAT = "YYYY-MM-DD HH:mm:ss", TICK_SPACING_PX = 150;
TICK_SPACING_PX = 150;
/** /**
* @memberof platform/commonUI/general * @memberof platform/commonUI/general
@ -99,8 +98,8 @@ define(
ngModel.inner = ngModel.inner || copyBounds(ngModel.outer); ngModel.inner = ngModel.inner || copyBounds(ngModel.outer);
// First, dates for the date pickers for outer bounds // First, dates for the date pickers for outer bounds
$scope.startOuterDate = new Date(ngModel.outer.start); $scope.boundsModel.start = formatTimestamp(ngModel.outer.start);
$scope.endOuterDate = new Date(ngModel.outer.end); $scope.boundsModel.end = formatTimestamp(ngModel.outer.end);
// Then various updates for the inner span // Then various updates for the inner span
updateViewForInnerSpanFromModel(ngModel); updateViewForInnerSpanFromModel(ngModel);
@ -210,6 +209,7 @@ define(
$scope.state = false; $scope.state = false;
$scope.ticks = []; $scope.ticks = [];
$scope.boundsModel = {};
// Initialize scope to defaults // Initialize scope to defaults
updateViewFromModel($scope.ngModel); updateViewFromModel($scope.ngModel);