From 884aec8ea0a7dd88aff9ad77f63c0cd697c81ae0 Mon Sep 17 00:00:00 2001 From: Pegah Sarram Date: Fri, 14 Jun 2019 13:33:15 -0700 Subject: [PATCH] Alpha-numeric printf format (#2416) * Implement an inspector view provider to display a component that allows setting printf format for alphanumeric items in a display layout. * Display 'Mixed' in format input if items' formats in selection are different. * Use lodash function to find index. * Simplify code. * Put the logic to disallow viewing the inspector view for multi-select in the inspector view provider as apposed to the inspector view component. --- package.json | 2 +- .../views/TypeInspectorViewProvider.js | 2 +- .../AlphanumericFormatViewProvider.js | 77 ++++++++++++++++ .../components/AlphanumericFormatView.vue | 90 +++++++++++++++++++ .../components/DisplayLayout.vue | 8 +- .../components/TelemetryView.vue | 14 ++- src/plugins/displayLayout/plugin.js | 5 +- .../TableConfigurationViewProvider.js | 2 +- src/ui/inspector/InspectorViews.vue | 8 -- webpack.config.js | 1 + 10 files changed, 195 insertions(+), 14 deletions(-) create mode 100644 src/plugins/displayLayout/AlphanumericFormatViewProvider.js create mode 100644 src/plugins/displayLayout/components/AlphanumericFormatView.vue diff --git a/package.json b/package.json index cf40ef32df..ebb0123296 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,7 @@ "node-bourbon": "^4.2.3", "node-sass": "^4.9.2", "painterro": "^0.2.65", - "printj": "^1.1.0", + "printj": "^1.2.1", "raw-loader": "^0.5.1", "request": "^2.69.0", "split": "^1.0.0", diff --git a/src/adapter/views/TypeInspectorViewProvider.js b/src/adapter/views/TypeInspectorViewProvider.js index 1597555fcc..5a1d832106 100644 --- a/src/adapter/views/TypeInspectorViewProvider.js +++ b/src/adapter/views/TypeInspectorViewProvider.js @@ -25,7 +25,7 @@ define([ cssClass: representation.cssClass, description: representation.description, canView: function (selection) { - if (selection.length === 0 || selection[0].length === 0) { + if (selection.length !== 1 || selection[0].length === 0) { return false; } diff --git a/src/plugins/displayLayout/AlphanumericFormatViewProvider.js b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js new file mode 100644 index 0000000000..9d42572857 --- /dev/null +++ b/src/plugins/displayLayout/AlphanumericFormatViewProvider.js @@ -0,0 +1,77 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT 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 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. + *****************************************************************************/ + +define([ + './components/AlphanumericFormatView.vue', + 'vue' +], function (AlphanumericFormatView, Vue) { + + function AlphanumericFormatViewProvider(openmct, options) { + function isTelemetryObject(selectionPath) { + let selectedObject = selectionPath[0].context.item; + let parentObject = selectionPath[1].context.item; + return parentObject && + parentObject.type === 'layout' && + selectedObject && + openmct.telemetry.isTelemetryObject(selectedObject) && + !options.showAsView.includes(selectedObject.type) + } + + return { + key: 'alphanumeric-format', + name: 'Alphanumeric Format', + canView: function (selection) { + if (selection.length === 0 || selection[0].length === 1) { + return false; + } + + return selection.every(isTelemetryObject); + }, + view: function (selection) { + let component; + return { + show: function (element) { + component = new Vue({ + provide: { + openmct + }, + components: { + AlphanumericFormatView: AlphanumericFormatView.default + }, + template: '', + el: element + }); + }, + destroy: function () { + component.$destroy(); + component = undefined; + } + } + }, + priority: function () { + return 1; + } + } + } + + return AlphanumericFormatViewProvider; +}); \ No newline at end of file diff --git a/src/plugins/displayLayout/components/AlphanumericFormatView.vue b/src/plugins/displayLayout/components/AlphanumericFormatView.vue new file mode 100644 index 0000000000..fbe05b12d5 --- /dev/null +++ b/src/plugins/displayLayout/components/AlphanumericFormatView.vue @@ -0,0 +1,90 @@ +/***************************************************************************** + * Open MCT, Copyright (c) 2014-2018, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT 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 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. + *****************************************************************************/ + + + + \ No newline at end of file diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue index cf9cca1023..9ada735b31 100644 --- a/src/plugins/displayLayout/components/DisplayLayout.vue +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -48,7 +48,8 @@ :multiSelect="selectedLayoutItems.length > 1" @move="move" @endMove="endMove" - @endLineResize='endLineResize'> + @endLineResize='endLineResize' + @formatChanged='updateTelemetryFormat'> import LayoutFrame from './LayoutFrame.vue' + import printj from 'printj' const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5], DEFAULT_POSITION = [1, 1]; @@ -143,6 +144,10 @@ return; } + if (this.item.format) { + return printj.sprintf(this.item.format, this.datum[this.valueMetadata.key]); + } + return this.valueFormatter && this.valueFormatter.format(this.datum); }, telemetryClass() { @@ -168,6 +173,9 @@ } this.context.index = newIndex; + }, + item(newItem) { + this.context.layoutItem = newItem; } }, methods: { @@ -219,10 +227,14 @@ this.context = { item: domainObject, layoutItem: this.item, - index: this.index + index: this.index, + updateTelemetryFormat: this.updateTelemetryFormat }; this.removeSelectable = this.openmct.selection.selectable( this.$el, this.context, this.initSelect); + }, + updateTelemetryFormat(format) { + this.$emit('formatChanged', this.item, format); } }, mounted() { diff --git a/src/plugins/displayLayout/plugin.js b/src/plugins/displayLayout/plugin.js index 55c9096752..dd26e5f59d 100644 --- a/src/plugins/displayLayout/plugin.js +++ b/src/plugins/displayLayout/plugin.js @@ -25,6 +25,8 @@ import Vue from 'vue' import objectUtils from '../../api/objects/object-utils.js' import DisplayLayoutType from './DisplayLayoutType.js' import DisplayLayoutToolbar from './DisplayLayoutToolbar.js' +import AlphaNumericFormatViewProvider from './AlphaNumericFormatViewProvider.js' + export default function DisplayLayoutPlugin(options) { return function (openmct) { openmct.objectViews.addProvider({ @@ -76,7 +78,8 @@ export default function DisplayLayoutPlugin(options) { } }); openmct.types.addType('layout', DisplayLayoutType()); - openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct)); + openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct, options)); + openmct.inspectorViews.addProvider(new AlphaNumericFormatViewProvider(openmct, options)); openmct.composition.addPolicy((parent, child) => { if (parent.type === 'layout' && child.type === 'folder') { return false; diff --git a/src/plugins/telemetryTable/TableConfigurationViewProvider.js b/src/plugins/telemetryTable/TableConfigurationViewProvider.js index 354275a3d9..a633685acf 100644 --- a/src/plugins/telemetryTable/TableConfigurationViewProvider.js +++ b/src/plugins/telemetryTable/TableConfigurationViewProvider.js @@ -37,7 +37,7 @@ define([ key: 'table-configuration', name: 'Telemetry Table Configuration', canView: function (selection) { - if (selection.length === 0 || selection[0].length === 0) { + if (selection.length !== 1 || selection[0].length === 0) { return false; } let object = selection[0][0].context.item; diff --git a/src/ui/inspector/InspectorViews.vue b/src/ui/inspector/InspectorViews.vue index 04fb083b78..d3b486d9c2 100644 --- a/src/ui/inspector/InspectorViews.vue +++ b/src/ui/inspector/InspectorViews.vue @@ -25,10 +25,6 @@ import _ from 'lodash'; }, methods: { updateSelection(selection) { - if (_.isEqual(this.selection, selection)) { - return; - } - this.selection = selection; if (this.selectedViews) { @@ -38,10 +34,6 @@ import _ from 'lodash'; this.$el.innerHTML = ''; } - if (selection.length > 1) { - return; - } - this.selectedViews = this.openmct.inspectorViews.get(selection); this.selectedViews.forEach(selectedView => { let viewContainer = document.createElement('div'); diff --git a/webpack.config.js b/webpack.config.js index 524890d3a1..461931284a 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -35,6 +35,7 @@ const webpackConfig = { "bourbon": "bourbon.scss", "vue": path.join(__dirname, "node_modules/vue/dist/vue.js"), "d3-scale": path.join(__dirname, "node_modules/d3-scale/build/d3-scale.min.js"), + "printj": path.join(__dirname, "node_modules/printj/dist/printj.min.js"), "styles": path.join(__dirname, "src/styles-new") } },