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

[Time Conductor] Begin adding controller

Browse Source 
WTD-1515
This commit is contained in:
Victor Woeltjen 2015-09-02 16:31:58 -07:00
parent e873389655
commit 91fe3d798f
3 changed files with 102 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -57,6 +57,11 @@
} }
], ],
"controllers": [ "controllers": [
{
"key": "TimeConductorController",
"implementation": "controllers/TimeConductorController.js",
"depends": [ "$scope" ]
},
{ {
"key": "TreeNodeController", "key": "TreeNodeController",
"implementation": "controllers/TreeNodeController.js", "implementation": "controllers/TreeNodeController.js",

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

@ -22,48 +22,40 @@ properly on the range left and right bounds.
--> -->
<div ng-init=" <div class="l-time-controller" ng-controller="TimeConductorController">
notes = 'Temporarily using an array to populate ticks so I can see what I\'m doing'; <div class="l-time-range-inputs-holder">
ticks = [ Start: <input type="date" ng-model="startOuterDate"/>
'00:00', End: <input type="date" ng-model="endInnerDate"/>
'00:30', </div>
'01:00',
'01:30',
'02:00'
];
"></div>
<div class="l-time-controller"> <div class="l-time-range-slider-holder">
<div class="l-time-range-inputs-holder"> <div class="l-time-range-slider">
Start: <input type="date" /> <div class="slider"
End: <input type="date" /> mct-resize="spanWidth = bounds.width">
</div> <div class="slot range-holder">
<div class="range"
ng-style="{ left: startInnerPct, right: endInnerPct}">
</div>
</div>
<div class="knob knob-l" ng-style="{ left: startInnerPct }">
<div class="range-value">{{startInnerText}}</div>
</div>
<div class="knob knob-r" ng-style="{ right: endInnerPct }">
<div class="range-value">{{startOuterText}}</div>
</div>
</div>
</div>
</div>
<div class="l-time-range-slider-holder"> <div class="l-time-range-ticks-holder">
<div class="l-time-range-slider"> <div class="l-time-range-ticks">
<div class="slider"> <div
<div class="slot range-holder"> ng-repeat="tick in ticks"
<div class="range" style="left: 0%; right: 30%;"></div> ng-style="{ left: $index * (100 / (ticks.length - 1)) + '%' }"
</div> class="tick tick-x"
<div class="knob knob-l" style="left: 0%;"> >
<div class="range-value">05/22 14:46</div> <span class="l-time-range-tick-label">{{tick}}</span>
</div> </div>
<div class="knob knob-r" style="right: 30%;"> </div>
<div class="range-value">07/22 01:21</div> </div>
</div>
</div>
</div>
</div>
<div class="l-time-range-ticks-holder">
<div class="l-time-range-ticks">
<div
ng-repeat="tick in ticks"
ng-style="{ left: $index * 25 + '%' }"
class="tick tick-x"
>
<span class="l-time-range-tick-label">{{tick}}</span>
</div>
</div>
</div>
</div> </div>

62
platform/commonUI/general/src/controllers/TimeConductorController.js Normal file
View File

@ -0,0 +1,62 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global define,Promise*/
define(
[],
function () {
"use strict";
/**
* A ToggleController is used to activate/deactivate things.
* A common usage is for "twistie"
*
* @memberof platform/commonUI/general
* @constructor
*/
function TimeConductorController($scope) {
var tickCount = 2;
$scope.state = false;
$scope.ticks = [0, 1];
function updateTicks() {
var i;
$scope.ticks = [];
for (i = 0; i < tickCount; i += 1) {
$scope.ticks.push(i / (tickCount - 1));
}
}
function updateSpanWidth(w) {
// Space about 100px apart
tickCount = Math.max(Math.floor(w / 100), 2);
updateTicks();
}
$scope.$watch("spanWidth", updateSpanWidth);
}
return TimeConductorController;
}
);