mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
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:
parent
666bb41697
commit
1a06702dbe
208
index.html
208
index.html
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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);
|
||||||
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
};
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user