mirror of
https://github.com/nasa/openmct.git
synced 2025-06-15 13:48:12 +00:00
Render main and inspector using angular
This commit is contained in:
Pete Richards
@ -12,14 +12,14 @@
|
||||
<MctTree ref="shell-tree"></MctTree>
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-main" >
|
||||
<div class="l-shell__object-view">c-object-view</div>
|
||||
<div class="l-shell__time-conductor">c-time-conductor</div>
|
||||
<pane class="l-pane l-shell__pane-main">
|
||||
<div style="position: absolute; top: 0; bottom: 0; width: 100%" ref="mainContainer">
|
||||
</div>
|
||||
</pane>
|
||||
<pane class="l-pane l-shell__pane-inspector"
|
||||
handle="before"
|
||||
collapsable>
|
||||
<MctInspector></MctInspector>
|
||||
<MctInspector ref="inspector"></MctInspector>
|
||||
</pane>
|
||||
</multipane>
|
||||
<div class="l-shell__status">
|
||||
@ -123,6 +123,10 @@
|
||||
msg: 'Hello world!'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateTo(path, openmct) {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MctInspector,
|
||||
MctMain,
|
||||
|
||||
@ -1,284 +1,12 @@
|
||||
<template>
|
||||
<multipane class="c-inspector"
|
||||
type="vertical">
|
||||
<pane class="c-inspector__properties">
|
||||
|
||||
|
||||
|
||||
<!-- Static markup from old Open START -->
|
||||
|
||||
<div class="l-grid-properties">
|
||||
<ul class="l-inspector-part l-grid-properties__section">
|
||||
<h2 class="first u-first">Properties</h2>
|
||||
<li class="t-repeat grid-row l-grid-properties__row first">
|
||||
<div class="grid-cell label l-grid-properties__label">Title</div>
|
||||
<div class="grid-cell value l-grid-properties__value">CH Overlay Plot</div>
|
||||
</li>
|
||||
<li class="t-repeat grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label">Updated</div>
|
||||
<div class="grid-cell value l-grid-properties__value">2018-06-29 17:38:36 UTC</div>
|
||||
</li>
|
||||
<li class="t-repeat grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label">Type</div>
|
||||
<div class="grid-cell value l-grid-properties__value">Overlay Plot</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="l-inspector-part l-grid-properties__section">
|
||||
<h2 title="The location of this linked object.">Location</h2>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<!-- ngIf: primaryParents.length > 0 -->
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
<!-- ngRepeat: parent in contextutalParents --><div class="t-repeat inspector-location" ng-repeat="parent in contextutalParents" ng-class="{ last:($index + 1) === contextualParents.length }">
|
||||
<mct-representation key="'label'" mct-object="parent" ng-click="parent.getCapability('action').perform('navigate')" class="location-item ng-isolate-scope" draggable="true">
|
||||
<div class="t-object-label l-flex-row flex-elem grows">
|
||||
<div class="t-item-icon flex-elem icon-folder" ng-class="{ 'l-icon-link':location.isLink() }"></div>
|
||||
<div class="t-title-label flex-elem grows">My Items</div>
|
||||
</div>
|
||||
</mct-representation>
|
||||
</div><!-- end ngRepeat: parent in contextutalParents -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- ngIf: !controller.hasProviderView() --><div ng-if="!controller.hasProviderView()" class="ng-scope">
|
||||
<mct-representation key="inspectorKey" mct-object="controller.selectedItem()" ng-model="ngModel" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">
|
||||
<!-- ngIf: domainObject.getCapability('editor').inEditContext() -->
|
||||
<!-- ngIf: !domainObject.getCapability('editor').inEditContext() --><div ng-if="!domainObject.getCapability('editor').inEditContext()" class="ng-scope">
|
||||
<mct-representation key="'plot-options-browse'" mct-object="domainObject" class="ng-isolate-scope">
|
||||
<div ng-controller="PlotOptionsController" class="ng-scope">
|
||||
<ul class="tree">
|
||||
<h2 title="Plot series display properties in this object">Plot Series</h2>
|
||||
<!-- ngRepeat: series in config.series.models --><li ng-repeat="series in config.series.models" class="ng-scope">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class="ui-symbol view-control flex-elem" ng-class="{ expanded: series.expanded }" ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation class="rep-object-label ng-isolate-scope" key="'label'" mct-object="series.oldObject" draggable="true"><!--
|
||||
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.
|
||||
-->
|
||||
<div class="t-object-label l-flex-row flex-elem grows">
|
||||
<div class="t-item-icon flex-elem icon-telemetry l-icon-link" ng-class="{ 'l-icon-link':location.isLink() }"></div>
|
||||
<div class="t-title-label flex-elem grows">CH SWG 100</div>
|
||||
</div>
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties ng-hide" ng-show="series.expanded">
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
sin
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value l-grid-properties__value">Linear interpolation
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Whether markers are displayed, and their size.">Markers</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
Enabled: 2px
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
Enabled
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
<!-- TODO: get this into a class -->
|
||||
<span class="color-swatch" ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}" style="background: rgb(32, 178, 170); display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); height: 10px; width: 10px; vertical-align: middle; margin-left: 3px;">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li><!-- end ngRepeat: series in config.series.models --><li ng-repeat="series in config.series.models" class="ng-scope">
|
||||
<span class="tree-item menus-to-left">
|
||||
<span class="ui-symbol view-control flex-elem" ng-class="{ expanded: series.expanded }" ng-click="series.expanded = !series.expanded">
|
||||
</span>
|
||||
<mct-representation class="rep-object-label ng-isolate-scope" key="'label'" mct-object="series.oldObject" draggable="true"><!--
|
||||
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.
|
||||
-->
|
||||
<div class="t-object-label l-flex-row flex-elem grows">
|
||||
<div class="t-item-icon flex-elem icon-telemetry" ng-class="{ 'l-icon-link':location.isLink() }"></div>
|
||||
<div class="t-title-label flex-elem grows">Original SG in Plot</div>
|
||||
</div>
|
||||
</mct-representation>
|
||||
</span>
|
||||
<ul class="grid-properties ng-hide" ng-show="series.expanded">
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The field to be plotted as a value for this series.">Value</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
value
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The line rendering style for this series.">Line Style</div>
|
||||
<div class="grid-cell value l-grid-properties__value">Linear interpolation
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Whether markers are displayed, and their size.">Markers</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
Enabled: 2px
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Display markers visually denoting points in alarm.">Alarm Markers</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
Enabled
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The plot line and marker color for this series.">Color</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
<!-- TODO: get this into a class -->
|
||||
<span class="color-swatch" ng-style="{
|
||||
'background': series.get('color').asHexString(),
|
||||
'display': 'inline-block',
|
||||
'border': '1px solid rgba(255, 255, 255, 0.2)',
|
||||
'height': '10px',
|
||||
'width': '10px',
|
||||
'vertical-align': 'middle',
|
||||
'margin-left': '3px',
|
||||
'margin-top': -'2px'
|
||||
}" style="background: rgb(154, 205, 50); display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); height: 10px; width: 10px; vertical-align: middle; margin-left: 3px;">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li><!-- end ngRepeat: series in config.series.models --><!-- end repeat -->
|
||||
</ul>
|
||||
<div class="grid-properties">
|
||||
<ul class="l-inspector-part l-grid-properties__section">
|
||||
<h2 title="Y axis settings for this object">Y Axis</h2>
|
||||
<li class="grid-row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Manually override how the Y axis is labeled.">Label</div>
|
||||
<div class="grid-cell value l-grid-properties__value">Foobar</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Automatically scale the Y axis to keep all values in view.">Autoscale</div>
|
||||
<div class="grid-cell value l-grid-properties__value">
|
||||
Enabled:
|
||||
0.1
|
||||
</div>
|
||||
</li>
|
||||
<!-- ngIf: !form.yAxis.autoscale --><li class="grid-row l-grid-properties__row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Minimum Y axis value.">Minimum value</div>
|
||||
<div class="grid-cell value l-grid-properties__value">-10</div>
|
||||
</li><!-- end ngIf: !form.yAxis.autoscale -->
|
||||
<!-- ngIf: !form.yAxis.autoscale --><li class="grid-row l-grid-properties__row" ng-if="!form.yAxis.autoscale">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Maximum Y axis value.">Maximum value</div>
|
||||
<div class="grid-cell value l-grid-properties__value">11</div>
|
||||
</li><!-- end ngIf: !form.yAxis.autoscale -->
|
||||
</ul>
|
||||
<ul class="l-inspector-part l-grid-properties__section">
|
||||
<h2 title="Legend settings for this object">Legend</h2>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="The position of the legend relative to the plot display area.">Position</div>
|
||||
<div class="grid-cell value l-grid-properties__value capitalize">top</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="Show the legend expanded by default">Expand by Default</div>
|
||||
<div class="grid-cell value l-grid-properties__value">No</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="What to display in the legend when it's collapsed.">Show when collapsed:</div>
|
||||
<div class="grid-cell value l-grid-properties__value">Value
|
||||
</div>
|
||||
</li>
|
||||
<li class="grid-row l-grid-properties__row">
|
||||
<div class="grid-cell label l-grid-properties__label" title="What to display in the legend when it's expanded.">Show when expanded:</div>
|
||||
<div class="grid-cell value l-grid-properties__value comma-list">
|
||||
<!-- ngIf: config.legend.get('showTimestampWhenExpanded') --><span ng-if="config.legend.get('showTimestampWhenExpanded')" class="ng-scope">Timestamp</span><!-- end ngIf: config.legend.get('showTimestampWhenExpanded') -->
|
||||
<!-- ngIf: config.legend.get('showValueWhenExpanded') --><span ng-if="config.legend.get('showValueWhenExpanded')" class="ng-scope">Value</span><!-- end ngIf: config.legend.get('showValueWhenExpanded') -->
|
||||
<!-- ngIf: config.legend.get('showMinimumWhenExpanded') --><span ng-if="config.legend.get('showMinimumWhenExpanded')" class="ng-scope">Min</span><!-- end ngIf: config.legend.get('showMinimumWhenExpanded') -->
|
||||
<!-- ngIf: config.legend.get('showMaximumWhenExpanded') --><span ng-if="config.legend.get('showMaximumWhenExpanded')" class="ng-scope">Max</span><!-- end ngIf: config.legend.get('showMaximumWhenExpanded') -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</mct-representation>
|
||||
</div><!-- end ngIf: !domainObject.getCapability('editor').inEditContext() -->
|
||||
</mct-representation>
|
||||
</div><!-- end ngIf: !controller.hasProviderView() -->
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Static markup from old Open END -->
|
||||
|
||||
<pane class="c-inspector__properties"
|
||||
ref="properties">
|
||||
</pane>
|
||||
<pane class="l-pane c-inspector__elements"
|
||||
handle="before">
|
||||
handle="before"
|
||||
ref="elements">
|
||||
c-inspector__elements
|
||||
</pane>
|
||||
</multipane>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="MCT_Main">I'm the main region</div>
|
||||
<mct-representation key='browse-object'></mct-representation>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user