Resolve conductor configuration immediately (#2276)

* Set time system / bounds immediately based on conductor configuration

* Hide date picker if not UTC based time system. Improve Conductor configuration error messages.
This commit is contained in:
Andrew Henry 2019-02-07 11:36:37 -08:00 committed by Pegah Sarram
parent 666bb41697
commit 1a06702dbe
3 changed files with 29 additions and 240 deletions

View File

@ -36,7 +36,9 @@
<body> <body>
</body> </body>
<script> <script>
var THIRTY_MINUTES = 30 * 60 * 1000; const FIVE_MINUTES = 5 * 60 * 1000;
const THIRTY_MINUTES = 30 * 60 * 1000;
[ [
'example/eventGenerator', 'example/eventGenerator',
'example/styleguide' 'example/styleguide'
@ -67,8 +69,8 @@
timeSystem: 'utc', timeSystem: 'utc',
clock: 'local', clock: 'local',
clockOffsets: { clockOffsets: {
start: -25 * 60 * 1000, start: - THIRTY_MINUTES,
end: 5 * 60 * 1000 end: FIVE_MINUTES
} }
} }
] ]
@ -79,206 +81,6 @@
openmct.install(openmct.plugins.Tabs()); openmct.install(openmct.plugins.Tabs());
openmct.install(openmct.plugins.FlexibleLayout()); openmct.install(openmct.plugins.FlexibleLayout());
openmct.install(openmct.plugins.LADTable()); openmct.install(openmct.plugins.LADTable());
openmct.time.clock('local', {start: -THIRTY_MINUTES, end: 0});
openmct.time.timeSystem('utc');
openmct.start(); openmct.start();
// openmct.toolbars.addProvider({
// name: "Testing Toolbar",
// key: "testing",
// description: "a mock toolbar that exercises all controls",
// forSelection: function (selection) {
// return true; // always applies.
// },
// toolbar: function (selection) {
// return [
// {
// control: 'menu',
// icon: 'icon-plus',
// label: 'Add',
// options: [
// { name: 'Box', class: 'icon-box', title: 'Add Box' },
// { name: 'Line', class: 'icon-line-horz', title: 'Add Line' },
// { name: 'Text', class: 'icon-font', title: 'Add Text' },
// { name: 'Image', class: 'icon-image', title: 'Add Image' }
// ]
// },
// {
// control: 'separator'
// },
// {
// control: 'color-picker',
// icon: 'icon-paint-bucket',
// value: '#33ff00',
// },
// {
// control: 'color-picker',
// icon: 'icon-pencil',
// value: '#ffffff',
// },
// {
// control: 'color-picker',
// icon: 'icon-font',
// value: '#333333',
// },
//
// {
// control: 'separator'
// },
// {
// control: 'select-menu',
// value: 11,
// options: [
// { value: 9, name: '9 px' },
// { value: 10, name: '10 px' },
// { value: 11, name: '11 px' },
// { value: 12, name: '12 px' },
// { value: 13, name: '13 px' },
// { value: 14, name: '14 px' },
// { value: 16, name: '16 px' },
// { value: 18, name: '18 px' },
// { value: 20, name: '20 px' },
// { value: 24, name: '24 px' },
// { value: 28, name: '28 px' },
// { value: 32, name: '32 px' },
// { value: 40, name: '40 px' },
// { value: 48, name: '48 px' },
// { value: 56, name: '56 px' },
// { value: 64, name: '64 px' },
// { value: 72, name: '72 px' },
// { value: 80, name: '80 px' },
// { value: 88, name: '88 px' },
// { value: 96, name: '96 px' },
// { value: 128, name: '128 px' },
// { value: 160, name: '160 px' }
// ]
// },
//
// {
// control: 'separator'
// },
// {
// control: 'menu',
// icon: 'icon-layers',
// options: [
// { name: 'Move to top', class: 'icon-arrow-double-up', title: 'Move to top' },
// { name: 'Move up', class: 'icon-arrow-up', title: 'Move up' },
// { name: 'Move down', class: 'icon-arrow-down', title: 'Move down' },
// { name: 'Move to bottom', class: 'icon-arrow-double-down', title: 'Move to bottom' }
// ]
// },
//
// {
// control: 'separator'
// },
// {
// control: 'button',
// icon: 'icon-gear'
// },
//
// {
// control: 'separator'
// },
// {
// control: 'input',
// type: 'number',
// label: 'X',
// value: 1,
// title: 'X position'
// },
// {
// control: 'input',
// type: 'number',
// label: 'Y',
// value: 2,
// title: 'Y position'
// },
// {
// control: 'input',
// type: 'number',
// label: 'W',
// value: 3,
// title: 'Width'
// },
// {
// control: 'input',
// type: 'number',
// label: 'H',
// value: 4,
// title: 'Height'
// },
//
// {
// control: 'separator'
// },
// {
// control: 'button',
// icon: 'icon-trash',
// label: 'delete',
// modifier: 'caution'
// },
//
// {
// control: 'separator'
// },
// {
// control: 'checkbox',
// name: 'this is a checkbox',
// },
// {
// control: 'separator'
// },
// {
// control: 'toggle-button',
// title: 'Toggle Frame',
// property: 'hideFrame',
// value: false,
// options: [
// {
// value: true,
// icon: 'icon-frame-hide'
// },
// {
// value: false,
// icon: 'icon-frame-show'
// }
// ]
// },
// {
// control: 'toggle-button',
// title: 'Snap to grid',
// property: 'snapToGrid',
// value: true,
// options: [
// {
// value: true,
// icon: 'icon-grid-snap-to'
// },
// {
// value: false,
// icon: 'icon-grid-snap-no'
// }
// ]
// },
// {
// control: 'toggle-button',
// title: 'Toggle label',
// property: 'showLabel',
// value: true,
// options: [
// {
// value: true,
// icon: 'icon-two-parts-both'
// },
// {
// value: false,
// icon: 'icon-two-parts-one-only'
// }
// ]
// }
// ];
// }
// });
</script> </script>
</html> </html>

View File

@ -36,6 +36,7 @@
v-model="formattedBounds.start" v-model="formattedBounds.start"
@change="validateAllBounds(); submitForm()" /> @change="validateAllBounds(); submitForm()" />
<date-picker <date-picker
v-if="isFixed && isUTCBased"
:default-date-time="formattedBounds.start" :default-date-time="formattedBounds.start"
:formatter="timeFormatter" :formatter="timeFormatter"
@date-selected="startDateSelected"></date-picker> @date-selected="startDateSelected"></date-picker>
@ -65,11 +66,11 @@
ref="endDate" ref="endDate"
@change="validateAllBounds(); submitForm()"> @change="validateAllBounds(); submitForm()">
<date-picker <date-picker
v-if="isFixed && isUTCBased"
class="c-ctrl-wrapper--menus-left" class="c-ctrl-wrapper--menus-left"
:default-date-time="formattedBounds.end" :default-date-time="formattedBounds.end"
:formatter="timeFormatter" :formatter="timeFormatter"
@date-selected="endDateSelected" @date-selected="endDateSelected"></date-picker>
v-if="isFixed"></date-picker>
</div> </div>
<div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta" <div class="c-ctrl-wrapper c-conductor-input c-conductor__end-delta"

View File

@ -21,7 +21,6 @@
*****************************************************************************/ *****************************************************************************/
import Conductor from './Conductor.vue'; import Conductor from './Conductor.vue';
import Vue from 'vue';
function isTruthy(a) { function isTruthy(a) {
return !!a; return !!a;
@ -29,20 +28,17 @@ function isTruthy(a) {
function validateMenuOption(menuOption, index) { function validateMenuOption(menuOption, index) {
if (menuOption.clock && !menuOption.clockOffsets) { if (menuOption.clock && !menuOption.clockOffsets) {
return "clock-based menuOption at index " + index + " is " + return `Conductor menu option is missing required property 'clockOffsets'. This field is required when configuring a menu option with a clock.\r\n${JSON.stringify(menuOption)}`;
"missing required property 'clockOffsets'.";
} }
if (!menuOption.timeSystem) { if (!menuOption.timeSystem) {
return "menuOption at index " + index + " is missing " + return `Conductor menu option is missing required property 'timeSystem'\r\n${JSON.stringify(menuOption)}`;
"required property 'timeSystem'.";
} }
if (!menuOption.bounds && !menuOption.clock) { if (!menuOption.bounds && !menuOption.clock) {
return "fixed-bounds menuOption at index " + index + " is " + return `Conductor menu option is missing required property 'bounds'. This field is required when configuring a menu option with fixed bounds.\r\n${JSON.stringify(menuOption)}`;
"missing required property 'bounds'";
} }
} }
function validateConfiguration(config) { function hasRequiredOptions(config) {
if (config === undefined || if (config === undefined ||
config.menuOptions === undefined || config.menuOptions === undefined ||
config.menuOptions.length === 0) { config.menuOptions.length === 0) {
@ -56,7 +52,7 @@ function validateConfiguration(config) {
return undefined; return undefined;
} }
function validateRuntimeConfiguration(config, openmct) { function validateConfiguration(config, openmct) {
var systems = openmct.time.getAllTimeSystems() var systems = openmct.time.getAllTimeSystems()
.reduce(function (m, ts) { .reduce(function (m, ts) {
m[ts.key] = ts; m[ts.key] = ts;
@ -68,23 +64,19 @@ function validateRuntimeConfiguration(config, openmct) {
return m; return m;
}, {}); }, {});
return config.menuOptions.map(function (menuOption, index) { return config.menuOptions.map(function (menuOption) {
if (menuOption.timeSystem && !systems[menuOption.timeSystem]) { if (menuOption.timeSystem && !systems[menuOption.timeSystem]) {
return "menuOption at index " + index + " specifies a " + return `Time system '${menuOption.timeSystem}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
"timeSystem that does not exist: " + menuOption.timeSystem;
} }
if (menuOption.clock && !clocks[menuOption.clock]) { if (menuOption.clock && !clocks[menuOption.clock]) {
return "menuOption at index " + index + " specifies a " + return `Clock '${menuOption.clock}' has not been registered: \r\n ${JSON.stringify(menuOption)}`;
"clock that does not exist: " + menuOption.clock;
} }
}).filter(isTruthy).join('\n'); }).filter(isTruthy).join('\n');
} }
function throwIfError(configResult) { function throwIfError(configResult) {
if (configResult) { if (configResult) {
throw new Error("Invalid Time Conductor Configuration: \n" + throw new Error(`Invalid Time Conductor Configuration. ${configResult} \r\n https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor`);
configResult + '\n' +
"https://github.com/nasa/openmct/blob/master/API.md#the-time-conductor");
} }
} }
@ -101,27 +93,21 @@ function mountComponent(openmct, configuration) {
}); });
} }
export default function (config){ export default function (config) {
let configResult = validateConfiguration(config);
throwIfError(configResult);
return function (openmct) { return function (openmct) {
let configResult = hasRequiredOptions(config) || validateConfiguration(config, openmct);
throwIfError(configResult);
var defaults = config.menuOptions[0];
if (defaults.clock) {
openmct.time.clock(defaults.clock, defaults.clockOffsets);
openmct.time.timeSystem(defaults.timeSystem, openmct.time.bounds());
} else {
openmct.time.timeSystem(defaults.timeSystem, defaults.bounds);
}
openmct.on('start', function () { openmct.on('start', function () {
configResult = validateRuntimeConfiguration(config, openmct);
throwIfError(configResult);
var defaults = config.menuOptions[0];
if (defaults.clock) {
openmct.time.clock(defaults.clock, defaults.clockOffsets);
openmct.time.timeSystem(defaults.timeSystem, openmct.time.bounds());
} else {
openmct.time.timeSystem(defaults.timeSystem, defaults.bounds);
}
mountComponent(openmct, config); mountComponent(openmct, config);
}); });
}; };
}; }