Skip to content

Commit bca5eb0

Browse files
akhenryakhenry
committed
[Time Conductor] #933 Initial markup
1 parent 652a50c commit bca5eb0

File tree

12 files changed

+779
-4
lines changed

12 files changed

+779
-4
lines changed

‎bower.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@
1818
"node-uuid": "^1.4.7",
1919
"comma-separated-values": "^3.6.4",
2020
"FileSaver.js": "^0.0.2",
21-
"zepto": "^1.1.6"
21+
"zepto": "^1.1.6",
22+
"eventemitter3": "^1.2.0",
23+
"d3": "~4.1.0"
2224
}
2325
}

‎main.js

+10-1
Original file line numberDiff line numberDiff line change
@@ -28,13 +28,15 @@ requirejs.config({
2828
"angular-route": "bower_components/angular-route/angular-route.min",
2929
"csv": "bower_components/comma-separated-values/csv.min",
3030
"es6-promise": "bower_components/es6-promise/promise.min",
31+
"EventEmitter": "bower_components/eventemitter3/index",
3132
"moment": "bower_components/moment/moment",
3233
"moment-duration-format": "bower_components/moment-duration-format/lib/moment-duration-format",
3334
"saveAs": "bower_components/FileSaver.js/FileSaver.min",
3435
"screenfull": "bower_components/screenfull/dist/screenfull.min",
3536
"text": "bower_components/text/text",
3637
"uuid": "bower_components/node-uuid/uuid",
37-
"zepto": "bower_components/zepto/zepto.min"
38+
"zepto": "bower_components/zepto/zepto.min",
39+
"d3": "bower_components/d3/d3.min"
3840
},
3941
"shim": {
4042
"angular": {
@@ -43,6 +45,9 @@ requirejs.config({
4345
"angular-route": {
4446
"deps": ["angular"]
4547
},
48+
"EventEmitter": {
49+
"exports": "EventEmitter"
50+
},
4651
"moment-duration-format": {
4752
"deps": ["moment"]
4853
},
@@ -51,6 +56,9 @@ requirejs.config({
5156
},
5257
"zepto": {
5358
"exports": "Zepto"
59+
},
60+
"d3": {
61+
"exports": "d3"
5462
}
5563
}
5664
});
@@ -82,6 +90,7 @@ define([
8290
'./platform/features/pages/bundle',
8391
'./platform/features/plot/bundle',
8492
'./platform/features/timeline/bundle',
93+
'./platform/features/conductor-v2/bundle',
8594
'./platform/features/table/bundle',
8695
'./platform/forms/bundle',
8796
'./platform/identity/bundle',

‎platform/commonUI/browse/res/templates/browse-object.html

+6-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
</mct-representation>
4444
</div>
4545
</div>
46-
<div class="holder l-flex-col flex-elem grows l-object-wrapper">
46+
<div class="holder l-flex-col flex-elem grows l-object-wrapper l-controls-visible l-time-controller-visible">
4747
<div class="holder l-flex-col flex-elem grows l-object-wrapper-inner">
4848
<!-- Toolbar and Save/Cancel buttons -->
4949
<div class="l-edit-controls flex-elem l-flex-row flex-align-end">
@@ -59,4 +59,9 @@
5959
</mct-representation>
6060
</div>
6161
</div>
62+
<!-- put time conductor in here? -->
63+
<mct-representation mct-object="domainObject"
64+
key="'time-conductor'"
65+
class="abs holder flex-elem flex-fixed l-time-controller">
66+
</mct-representation>
6267
</div>

‎platform/features/conductor-v2/bundle.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/*****************************************************************************
2+
* Open MCT Web, Copyright (c) 2014-2015, United States Government
3+
* as represented by the Administrator of the National Aeronautics and Space
4+
* Administration. All rights reserved.
5+
*
6+
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
* http://www.apache.org/licenses/LICENSE-2.0.
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14+
* License for the specific language governing permissions and limitations
15+
* under the License.
16+
*
17+
* Open MCT Web includes source code licensed under additional open source
18+
* licenses. See the Open Source Licenses file (LICENSES.md) included with
19+
* this source code distribution or the Licensing information page available
20+
* at runtime from the About dialog for additional information.
21+
*****************************************************************************/
22+
23+
define([
24+
"./src/TimeConductor",
25+
"./src/TimeConductorController",
26+
"./src/MCTConductorAxis",
27+
"text!./res/templates/time-conductor.html",
28+
"text!./res/templates/mode-selector/mode-selector.html",
29+
"text!./res/templates/mode-selector/mode-menu.html",
30+
'legacyRegistry'
31+
], function (
32+
TimeConductor,
33+
TimeConductorController,
34+
MCTConductorAxis,
35+
timeConductorTemplate,
36+
modeSelectorTemplate,
37+
modeMenuTemplate,
38+
legacyRegistry
39+
) {
40+
41+
legacyRegistry.register("platform/features/conductor-v2", {
42+
"extensions": {
43+
"services": [
44+
{
45+
"key": "timeConductor",
46+
"implementation": TimeConductor
47+
}
48+
],
49+
"controllers": [
50+
{
51+
"key": "TimeConductorController",
52+
"implementation": TimeConductorController,
53+
"depends": [
54+
"$scope",
55+
"timeConductor"
56+
]
57+
}
58+
],
59+
"directives": [
60+
{
61+
"key": "mctConductorAxis",
62+
"implementation": MCTConductorAxis,
63+
"depends": ["$timeout"]
64+
}
65+
],
66+
"representations": [
67+
{
68+
"key": "time-conductor",
69+
"template": timeConductorTemplate
70+
},
71+
{
72+
"key": "mode-selector",
73+
"template": modeSelectorTemplate
74+
},
75+
{
76+
"key": "mode-menu",
77+
"template": modeMenuTemplate
78+
}
79+
]
80+
}
81+
});
82+
});

‎platform/features/conductor-v2/res/templates/mode-selector/mode-menu.html

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<!--
2+
Open MCT Web, Copyright (c) 2014-2015, United States Government
3+
as represented by the Administrator of the National Aeronautics and Space
4+
Administration. All rights reserved.
5+
6+
Open MCT Web is licensed under the Apache License, Version 2.0 (the
7+
"License"); you may not use this file except in compliance with the License.
8+
You may obtain a copy of the License at
9+
http://www.apache.org/licenses/LICENSE-2.0.
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13+
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14+
License for the specific language governing permissions and limitations
15+
under the License.
16+
17+
Open MCT Web includes source code licensed under additional open source
18+
licenses. See the Open Source Licenses file (LICENSES.md) included with
19+
this source code distribution or the Licensing information page available
20+
at runtime from the About dialog for additional information.
21+
-->
22+
<div class="contents">
23+
<div class="pane left menu-items">
24+
<ul>
25+
<li ng-click="representation.mode='fixed'">
26+
<a
27+
ng-mouseover="representation.activeMetadata = {
28+
glyph: '\ue604',
29+
name: 'Fixed Time-Span',
30+
description: 'Display data that falls between two fixed dates'
31+
}"
32+
ng-mouseleave="representation.activeMetadata = undefined">
33+
<span class="ui-symbol icon type-icon">
34+
&#xe604;
35+
</span>
36+
Fixed Time-span
37+
</a>
38+
</li>
39+
<li ng-click="representation.mode='realtime'">
40+
<a
41+
ng-mouseover="representation.activeMetadata = {
42+
glyph: '\u0043',
43+
name: 'Real-time Mode',
44+
description: 'Monitor real-time streaming data as it comes in to the application. The Time Conductor will automatically advance itself based on a UTC clock.'
45+
}"
46+
ng-mouseleave="representation.activeMetadata = undefined">
47+
<span class="ui-symbol icon type-icon">
48+
&#x43;
49+
</span>
50+
Real-time
51+
</a>
52+
</li>
53+
<li ng-click="representation.mode='latest'">
54+
<a
55+
ng-mouseover="representation.activeMetadata = {
56+
glyph: '\u0044',
57+
name: 'Latest Available Data',
58+
description: 'Monitor real-time streaming data as it comes in to the application. In contrast to real-time mode the time conductor will only advance when data becomes available.'
59+
}"
60+
ng-mouseleave="representation.activeMetadata = undefined">
61+
<span class="ui-symbol icon type-icon">
62+
&#x44;
63+
</span>
64+
Latest Available Data
65+
</a>
66+
</li>
67+
</ul>
68+
</div>
69+
<div class="pane right menu-item-description">
70+
<div class="desc-area ui-symbol icon type-icon">
71+
{{representation.activeMetadata.glyph}}
72+
</div>
73+
<div class="desc-area title">
74+
{{representation.activeMetadata.name}}
75+
</div>
76+
<div class="desc-area description">
77+
{{representation.activeMetadata.description}}
78+
</div>
79+
</div>
80+
</div>

‎platform/features/conductor-v2/res/templates/mode-selector/mode-selector.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!--
2+
Open MCT Web, Copyright (c) 2014-2015, United States Government
3+
as represented by the Administrator of the National Aeronautics and Space
4+
Administration. All rights reserved.
5+
6+
Open MCT Web is licensed under the Apache License, Version 2.0 (the
7+
"License"); you may not use this file except in compliance with the License.
8+
You may obtain a copy of the License at
9+
http://www.apache.org/licenses/LICENSE-2.0.
10+
11+
Unless required by applicable law or agreed to in writing, software
12+
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
13+
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
14+
License for the specific language governing permissions and limitations
15+
under the License.
16+
17+
Open MCT Web includes source code licensed under additional open source
18+
licenses. See the Open Source Licenses file (LICENSES.md) included with
19+
this source code distribution or the Licensing information page available
20+
at runtime from the About dialog for additional information.
21+
-->
22+
<style>
23+
.super-menu.mode-selector-menu {
24+
width: 400px;
25+
}
26+
.super-menu.mode-selector-menu {
27+
height: 200px;
28+
bottom: 0px;
29+
}
30+
.super-menu.mode-selector-menu .menu-item-description .desc-area.icon {
31+
height: 20%;
32+
font-size: 3em;
33+
line-height: normal;
34+
}
35+
.super-menu .mode-selector-menu .menu-item-description .desc-area.description {
36+
height: 60%;
37+
}
38+
</style>
39+
<span ng-controller="ClickAwayController as modeController">
40+
<div class="s-menu-btn"
41+
ng-click="modeController.toggle()">
42+
<span class="title-label">Fixed Time Span</span>
43+
</div>
44+
<div class="menu super-menu mode-selector-menu"
45+
ng-show="modeController.isActive()">
46+
<mct-representation mct-object="domainObject"
47+
key="'mode-menu'">
48+
</mct-representation>
49+
</div>
50+
</span>

‎platform/features/conductor-v2/res/templates/time-conductor.html

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
<style>
2+
.time-system .menu{
3+
bottom: 10px;
4+
}
5+
.l-data-availability {
6+
width: 100%;
7+
height: 20px;
8+
background-color: #3b3b3b
9+
}
10+
11+
.l-time-range-inputs-elem {
12+
width: 100%;
13+
}
14+
15+
.l-time-range-inputs-elem.l-flex-row {
16+
justify-content: space-between;
17+
}
18+
.l-axis-holder {
19+
height: 30px;
20+
width: 100%;
21+
}
22+
23+
.l-axis-holder svg, .l-axis-holder svg path,
24+
.l-axis-holder svg line {
25+
stroke: #A0A0A0;
26+
}
27+
28+
.l-axis-holder svg>g
29+
30+
</style>
31+
<!-- Parent holder for time conductor. follow-mode | fixed-mode -->
32+
<div class="follow-mode"
33+
ng-controller="TimeConductorController as tcController" class="l-flex-col">
34+
<!-- Holds date selectors and ticks -->
35+
<div class="l-conductor-dates">
36+
<form class="l-time-range-inputs-holder l-flex-row flex-elem"
37+
ng-submit="tcController.updateBoundsFromForm(formModel)">
38+
<span class="l-time-range-inputs-elem t-inputs-w l-flex-row flex-elem">
39+
<span class="l-time-range-input-w flex-elem start-date">
40+
<mct-control key="'datetime-field'"
41+
structure="{
42+
format: 'utc',
43+
validate: tcController.validateStart
44+
}"
45+
ng-model="formModel"
46+
ng-blur="tcController.updateBoundsFromForm()"
47+
field="'start'"
48+
class="time-range-start">
49+
</mct-control>
50+
</span>
51+
<span class="l-time-range-input-w flex-elem end-date"
52+
ng-controller="ToggleController as t2">
53+
<mct-control key="'datetime-field'"
54+
structure="{
55+
format: 'utc',
56+
validate: tcController.validateEnd
57+
}"
58+
ng-model="formModel"
59+
ng-blur="trCtrl.updateBoundsFromForm()"
60+
field="'end'"
61+
class="time-range-end">
62+
</mct-control>
63+
</span>
64+
</span>
65+
<input type="submit" class="hidden">
66+
</form>
67+
68+
</div>
69+
<div class="l-conductor-ticks">
70+
<mct-conductor-axis></mct-conductor-axis>
71+
</div>
72+
<!-- Holds data availability, time of interest -->
73+
<div class="l-data-availability"></div>
74+
<!-- Holds time system and session selectors, and zoom control -->
75+
<div class="l-time-system-zoom">
76+
<mct-representation
77+
key="'mode-selector'"
78+
mct-object="domainObject"
79+
class="holder flex-elem">
80+
</mct-representation>
81+
<mct-control
82+
key="'menu-button'"
83+
class="time-system"
84+
ng-model="conductorModel.timeSystem"
85+
structure="{
86+
text: 'utc',
87+
options: [
88+
{name: 'utc', key:'utc', glyph:'\u0043'},
89+
{name: 'scet', key:'scet', glyph:'\u0043'},
90+
{name: 'sclk', key:'sclk', glyph:'\u0043'}
91+
]}">
92+
</mct-control>
93+
</div>
94+
</div>

0 commit comments

Comments
 (0)