mirror of
https://github.com/nasa/openmct.git
synced 2025-01-31 08:25:31 +00:00
Render main and inspector using angular
This commit is contained in:
Pete Richards
parent
233c17e75b
commit
17cf0cf1e6
15
openmct.js
15
openmct.js
@ -29,22 +29,9 @@ if (document.currentScript) {
|
||||
__webpack_public_path__ = src.replace(matcher, '') + '/';
|
||||
}
|
||||
}
|
||||
const Main = require('./platform/framework/src/Main');
|
||||
const defaultRegistry = require('./src/defaultRegistry');
|
||||
|
||||
const MCT = require('./src/MCT');
|
||||
const buildInfo = require('./src/plugins/buildInfo/plugin');
|
||||
|
||||
var openmct = new MCT();
|
||||
|
||||
openmct.legacyRegistry = defaultRegistry;
|
||||
openmct.install(openmct.plugins.Plot());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
openmct.install(buildInfo(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
openmct.on('start', function () {
|
||||
return new Main().run(defaultRegistry);
|
||||
});
|
||||
|
||||
module.exports = openmct;
|
||||
|
||||
@ -295,6 +295,20 @@ define([
|
||||
]
|
||||
}
|
||||
],
|
||||
"templates": [
|
||||
{
|
||||
key: "browseRoot",
|
||||
template: browseTemplate
|
||||
},
|
||||
{
|
||||
key: "browseObject",
|
||||
template: browseObjectTemplate
|
||||
},
|
||||
{
|
||||
key: "inspectorRegion",
|
||||
template: inspectorRegionTemplate
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "screenfull.js",
|
||||
|
||||
@ -47,6 +47,7 @@ define(
|
||||
urlService,
|
||||
defaultPath
|
||||
) {
|
||||
window.browseScope = $scope;
|
||||
var initialPath = ($route.current.params.ids || defaultPath).split("/"),
|
||||
currentIds;
|
||||
|
||||
|
||||
@ -45,15 +45,27 @@ define(
|
||||
|
||||
// Link; install event handlers.
|
||||
function link(scope, element, attrs) {
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
var isDestroyed = false;
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
isDestroyed = true;
|
||||
});
|
||||
|
||||
openmct.$injector.get('$timeout')(function () {
|
||||
if (isDestroyed) {
|
||||
return;
|
||||
}
|
||||
var removeSelectable = openmct.selection.selectable(
|
||||
element[0],
|
||||
scope.$eval(attrs.mctSelectable),
|
||||
attrs.hasOwnProperty('mctInitSelect') && scope.$eval(attrs.mctInitSelect) !== false
|
||||
);
|
||||
|
||||
scope.$on("$destroy", function () {
|
||||
removeSelectable();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -76,7 +76,7 @@ define(
|
||||
* @returns a domain object
|
||||
*/
|
||||
InspectorController.prototype.selectedItem = function () {
|
||||
return this.$scope.selection[0].context.oldItem;
|
||||
return this.$scope.selection[0] && this.$scope.selection[0].context.oldItem;
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@ -93,7 +93,7 @@ define([
|
||||
|
||||
// Initialize the application
|
||||
$log.info("Initializing application.");
|
||||
initializer.runApplication();
|
||||
return initializer.runApplication();
|
||||
};
|
||||
|
||||
return FrameworkLayer;
|
||||
|
||||
@ -52,10 +52,7 @@ define(
|
||||
return match ? match[1] : "";
|
||||
}
|
||||
|
||||
|
||||
// Reconfigure base url, since bundle paths will all be relative
|
||||
// to the root now.
|
||||
injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
return injector.instantiate(['$http', '$log', FrameworkLayer])
|
||||
.initializeApplication(angular, legacyRegistry, logLevel());
|
||||
};
|
||||
|
||||
|
||||
@ -55,9 +55,12 @@ define(
|
||||
var angular = this.angular,
|
||||
document = this.document,
|
||||
$log = this.$log;
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
return new Promise(function (resolve, reject) {
|
||||
$log.info("Bootstrapping application " + (app || {}).name);
|
||||
angular.element(document).ready(function () {
|
||||
angular.bootstrap(document, [app.name], { strictDi: true });
|
||||
resolve(angular);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -44,6 +44,7 @@ define(function () {
|
||||
function SearchController($scope, searchService) {
|
||||
var controller = this;
|
||||
this.$scope = $scope;
|
||||
this.$scope.ngModel = this.$scope.ngModel || {};
|
||||
this.searchService = searchService;
|
||||
this.numberToDisplay = this.RESULTS_PER_PAGE;
|
||||
this.availabileResults = 0;
|
||||
|
||||
42
src/MCT.js
42
src/MCT.js
@ -24,14 +24,18 @@ define([
|
||||
'EventEmitter',
|
||||
'legacyRegistry',
|
||||
'uuid',
|
||||
'./defaultRegistry',
|
||||
'./api/api',
|
||||
'./selection/Selection',
|
||||
'./api/objects/object-utils',
|
||||
'./plugins/plugins',
|
||||
'./adapter/indicators/legacy-indicators-plugin',
|
||||
'./plugins/buildInfo/plugin',
|
||||
'./adapter/vue-adapter/install',
|
||||
'./ui/registries/ViewRegistry',
|
||||
'./ui/registries/InspectorViewRegistry',
|
||||
'./ui/registries/ToolbarRegistry',
|
||||
'./adapter/indicators/legacy-indicators-plugin',
|
||||
'../platform/framework/src/Main',
|
||||
'./styles-new/core.scss',
|
||||
'./ui/components/layout/Layout.vue',
|
||||
'vue'
|
||||
@ -39,14 +43,18 @@ define([
|
||||
EventEmitter,
|
||||
legacyRegistry,
|
||||
uuid,
|
||||
defaultRegistry,
|
||||
api,
|
||||
Selection,
|
||||
objectUtils,
|
||||
plugins,
|
||||
LegacyIndicatorsPlugin,
|
||||
buildInfoPlugin,
|
||||
installVueAdapter,
|
||||
ViewRegistry,
|
||||
InspectorViewRegistry,
|
||||
ToolbarRegistry,
|
||||
LegacyIndicatorsPlugin,
|
||||
Main,
|
||||
coreStyles,
|
||||
Layout,
|
||||
Vue
|
||||
@ -211,6 +219,13 @@ define([
|
||||
|
||||
this.Dialog = api.Dialog;
|
||||
|
||||
this.legacyRegistry = defaultRegistry;
|
||||
this.install(this.plugins.Plot());
|
||||
|
||||
if (typeof BUILD_CONSTANTS !== 'undefined') {
|
||||
this.install(buildInfoPlugin(BUILD_CONSTANTS));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
MCT.prototype = Object.create(EventEmitter.prototype);
|
||||
@ -249,16 +264,6 @@ define([
|
||||
domElement = document.body;
|
||||
}
|
||||
|
||||
var appLayout = new Vue(Layout.default);
|
||||
domElement.appendChild(appLayout.$mount().$el);
|
||||
|
||||
// var appDiv = document.createElement('div');
|
||||
// domElement.appendChild(appDiv);
|
||||
// var appLayout = new Vue(Layout)
|
||||
// appDiv.setAttribute('ng-view', '');
|
||||
// appDiv.className = 'user-environ';
|
||||
|
||||
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['navigationService'],
|
||||
implementation: function (navigationService) {
|
||||
@ -297,7 +302,18 @@ define([
|
||||
* @event start
|
||||
* @memberof module:openmct.MCT~
|
||||
*/
|
||||
// this.emit('start');
|
||||
var startPromise = new Main().run(this.legacyRegistry)
|
||||
.then(function (angular) {
|
||||
this.$angular = angular;
|
||||
console.log('Rendering app layout.');
|
||||
var appLayout = new Vue(Layout.default);
|
||||
domElement.appendChild(appLayout.$mount().$el);
|
||||
|
||||
console.log('Attaching adapter');
|
||||
installVueAdapter(appLayout, this);
|
||||
|
||||
this.emit('start');
|
||||
}.bind(this));
|
||||
};
|
||||
|
||||
|
||||
|
||||
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
41
src/adapter/vue-adapter/inspector-adapter.js
Normal file
@ -0,0 +1,41 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class InspectorAdapter {
|
||||
constructor(layout, openmct) {
|
||||
console.log('installing inspector adapter');
|
||||
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(layout.$refs.inspector.$refs.properties.$el),
|
||||
this.templateMap["inspectorRegion"]
|
||||
);
|
||||
this.$timeout(function () {
|
||||
//hello!
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return InspectorAdapter;
|
||||
|
||||
});
|
||||
16
src/adapter/vue-adapter/install.js
Normal file
16
src/adapter/vue-adapter/install.js
Normal file
@ -0,0 +1,16 @@
|
||||
define([
|
||||
'./main-adapter',
|
||||
'./tree-adapter',
|
||||
'./inspector-adapter'
|
||||
], function (
|
||||
MainAdapter,
|
||||
TreeAdapter,
|
||||
InspectorAdapter
|
||||
) {
|
||||
|
||||
return function install(layout, openmct) {
|
||||
let main = new MainAdapter(layout, openmct);
|
||||
let tree = new TreeAdapter(layout, openmct);
|
||||
let inspector = new InspectorAdapter(layout, openmct);
|
||||
}
|
||||
});
|
||||
190
src/adapter/vue-adapter/main-adapter.js
Normal file
190
src/adapter/vue-adapter/main-adapter.js
Normal file
@ -0,0 +1,190 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
// Find an object in an array of objects.
|
||||
function findObject(domainObjects, id) {
|
||||
var i;
|
||||
for (i = 0; i < domainObjects.length; i += 1) {
|
||||
if (domainObjects[i].getId() === id) {
|
||||
return domainObjects[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getLastChildIfRoot(object) {
|
||||
if (object.getId() !== 'ROOT') {
|
||||
return object;
|
||||
}
|
||||
return object.useCapability('composition')
|
||||
.then(function (composees) {
|
||||
return composees[composees.length - 1];
|
||||
});
|
||||
}
|
||||
|
||||
class MainAdapter {
|
||||
constructor(layout, openmct) {
|
||||
this.openmct = openmct;
|
||||
this.layout = layout;
|
||||
this.$injector = openmct.$injector;
|
||||
this.angular = openmct.$angular;
|
||||
|
||||
this.objectService = this.$injector.get('objectService');
|
||||
this.templateLinker = this.$injector.get('templateLinker');
|
||||
this.navigationService = this.$injector.get('navigationService');
|
||||
this.$timeout = this.$injector.get('$timeout');
|
||||
|
||||
// this.urlService = this.$injector.get('urlService');
|
||||
// this.$route = this.$injector.get('$route');
|
||||
// this.defaultPath = this.$injector.get('DEFAULT_PATH');
|
||||
// this.initialPath = (this.$route.current.params.ids || defaultPath).split("/"),
|
||||
// console.log('Initial path!', initialPath);
|
||||
|
||||
this.templateMap = {};
|
||||
this.$injector.get('templates[]').forEach((t) => {
|
||||
this.templateMap[t.key] = this.templateMap[t.key] || t;
|
||||
});
|
||||
|
||||
var $rootScope = this.$injector.get('$rootScope');
|
||||
this.scope = $rootScope.$new();
|
||||
|
||||
|
||||
this.run();
|
||||
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(layout.$refs.mainContainer),
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
|
||||
this.navigationService.addListener(o => this.navigateToObject(o));
|
||||
this.getObject('ROOT')
|
||||
.then(rootObject => {
|
||||
this.rootObject = rootObject;
|
||||
return getLastChildIfRoot(rootObject);
|
||||
})
|
||||
.then(o => {
|
||||
this.navigationService.setNavigation(o, true);
|
||||
});
|
||||
// this.navigateToRoot();
|
||||
}
|
||||
|
||||
run() {
|
||||
// TODO: navigate to default path.
|
||||
// TODO: listen to route service and navigate on route changes?
|
||||
// TODO: handle change to/from ?
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
// idsForObject(domainObject) {
|
||||
// return this.urlService
|
||||
// .urlForLocation("", domainObject)
|
||||
// .replace('/', '');
|
||||
// }
|
||||
|
||||
navigateToObject(object) {
|
||||
this.scope.representation = {
|
||||
selected: {
|
||||
key: 'items'
|
||||
}
|
||||
};
|
||||
// this.scope.domainObject = this.rootObject
|
||||
this.scope.domainObject = object;
|
||||
this.scope.navigatedObject = object;
|
||||
this.templateLinker.link(
|
||||
this.scope,
|
||||
angular.element(this.layout.$refs.mainContainer),
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
// this.scope.navigatedObject = object;
|
||||
this.scheduleDigest();
|
||||
}
|
||||
|
||||
|
||||
|
||||
scheduleDigest() {
|
||||
this.$timeout(function () {
|
||||
// digest done!
|
||||
});
|
||||
}
|
||||
//
|
||||
// navigateToObject(desiredObject) {
|
||||
// this.ngEl = angular.element(this.layout.$refs.mainContainer);
|
||||
// this.scope.navigatedObject = desiredObject;
|
||||
// this.templateLinker.link(
|
||||
// this.scope,
|
||||
// this.ngEl,
|
||||
// this.templateMap["browse-object"]
|
||||
// );
|
||||
//
|
||||
// // $scope.navigatedObject = desiredObject;
|
||||
// // $scope.treeModel.selectedObject = desiredObject;
|
||||
// // currentIds = idsForObject(desiredObject);
|
||||
// // $route.current.pathParams.ids = currentIds;
|
||||
// // $location.path('/browse/' + currentIds);
|
||||
// }
|
||||
//
|
||||
// navigateDirectlyToModel(domainObject) {
|
||||
// var newIds = idsForObject(domainObject);
|
||||
// if (currentIds !== newIds) {
|
||||
// currentIds = newIds;
|
||||
// navigateToObject(domainObject);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
// // recursively locate and return an object inside of a container
|
||||
// // via a path. If at any point in the recursion it fails to find
|
||||
// // the next object, it will return the parent.
|
||||
// findViaComposition(containerObject, path) {
|
||||
// var nextId = path.shift();
|
||||
// if (!nextId) {
|
||||
// return containerObject;
|
||||
// }
|
||||
// return containerObject.useCapability('composition')
|
||||
// .then(function (composees) {
|
||||
// var nextObject = findObject(composees, nextId);
|
||||
// if (!nextObject) {
|
||||
// return containerObject;
|
||||
// }
|
||||
// if (!nextObject.hasCapability('composition')) {
|
||||
// return nextObject;
|
||||
// }
|
||||
// return findViaComposition(nextObject, path);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
// navigateToRoot() {
|
||||
// this.getObject('ROOT')
|
||||
// .then(o => this.scope.domainObject = 0);
|
||||
// }
|
||||
//
|
||||
// navigateToPath(path) {
|
||||
// return this.getObject('ROOT')
|
||||
// .then(root => {
|
||||
// return this.findViaComposition(root, path);
|
||||
// })
|
||||
// .then(getLastChildIfRoot)
|
||||
// .then(object => {
|
||||
// this.navigationService.setNavigation(object);
|
||||
// });
|
||||
// }
|
||||
//
|
||||
getObject(id) {
|
||||
return this.objectService.getObjects([id])
|
||||
.then(function (results) {
|
||||
return results[id];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return MainAdapter;
|
||||
});
|
||||
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
15
src/adapter/vue-adapter/tree-adapter.js
Normal file
@ -0,0 +1,15 @@
|
||||
define([
|
||||
|
||||
], function (
|
||||
|
||||
) {
|
||||
|
||||
class TreeAdapter {
|
||||
constructor(layout, openmct) {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
return TreeAdapter;
|
||||
|
||||
});
|
||||
0
src/components/legacy/mct-include/mct-include.js
Normal file
0
src/components/legacy/mct-include/mct-include.js
Normal file
9
src/components/mct-layout/mct-layout.html
Normal file
9
src/components/mct-layout/mct-layout.html
Normal file
@ -0,0 +1,9 @@
|
||||
<div class="mct-layout">
|
||||
<div class="mct-topbar" ref="topBar"></div>
|
||||
<div class="mct-content">
|
||||
<div class="mct-left-pane" ref="leftPane"></div>
|
||||
<div class="mct-content-pane" ref="contentPane"></div>
|
||||
<div class="mct-right-pane" ref="rightPane"></div>
|
||||
</div>
|
||||
<div class="bottomBar"></div>
|
||||
</div>
|
||||
96
src/components/mct-layout/mct-layout.js
Normal file
96
src/components/mct-layout/mct-layout.js
Normal file
@ -0,0 +1,96 @@
|
||||
define([
|
||||
'text!./mct-layout.html',
|
||||
'vue'
|
||||
], function (
|
||||
layoutTemplate,
|
||||
Vue
|
||||
) {
|
||||
|
||||
|
||||
function MCTLayout($injector, angular) {
|
||||
var $injector = $injector;
|
||||
var $rootScope = $injector.get('$rootScope');
|
||||
var $compile = $injector.get('$compile');
|
||||
var templateMap = {};
|
||||
$injector.get('templates[]').forEach(function (t) {
|
||||
templateMap[t.key] = templateMap[t.key] || t;
|
||||
});
|
||||
var templateLinker = $injector.get('templateLinker');
|
||||
// Vue.component('mct-include', {
|
||||
// props: ['mctKey', 'key'],
|
||||
// render: function (createElement) {
|
||||
// window.includeComp = this;
|
||||
// console.log('mct-include is rendering!', this, this.$el);
|
||||
// this.scope = $rootScope.$new();
|
||||
// this.ngEl = angular.element(this.$el);
|
||||
// templateLinker.link(this.scope, this.ngEl, templateMap[this.mctKey]);
|
||||
// return this.ngEl;
|
||||
// },
|
||||
// template: "<div></div>",
|
||||
// mounted: function () {
|
||||
// console.log('done rendering!');
|
||||
// }
|
||||
// });
|
||||
Vue.component('mct-include', {
|
||||
props: ['mctKey', 'key'],
|
||||
// render: function (createElement) {
|
||||
// },
|
||||
template: "<div></div>",
|
||||
mounted: function () {
|
||||
// debugger;
|
||||
window.includeComp = this;
|
||||
// console.log('mct-include is rendering!', this, this.$el);
|
||||
this.scope = $rootScope.$new();
|
||||
this.ngEl = angular.element(this.$el);
|
||||
templateLinker.link(this.scope, this.ngEl, templateMap[this.mctKey]);
|
||||
// return this.ngEl;
|
||||
// console.log('done rendering!');
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('mct-directive', {
|
||||
props: ['mct-key'],
|
||||
template: "</div></div>",
|
||||
mounted: function () {
|
||||
var template = `<${this.mctKey} ` +
|
||||
Object.keys(this.$attrs).map((k) => `${k}="${this.$attrs[k]}"`).join(' ') +
|
||||
' ></${this.mctKey}>';
|
||||
this.scope = $rootScope.$new();
|
||||
this.ngEl = $compile(template)(this.scope);
|
||||
this.$el.appendChild(this.ngEl[0]);
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// Vue.component('mct-directive', )
|
||||
|
||||
Vue.component('mct-representation', {
|
||||
template: "<div></div>",
|
||||
mounted: function () {
|
||||
var template = "<mct-representation " +
|
||||
Object.keys(this.$attrs).map((k) => `${k}="${this.$attrs[k]}"`).join(' ') +
|
||||
' ></mct-representation>';
|
||||
this.scope = $rootScope.$new();
|
||||
this.ngEl = $compile(template)(this.scope);
|
||||
// console.log('mct-representation mounting', this);
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('mct-layout', {
|
||||
template: layoutTemplate,
|
||||
});
|
||||
|
||||
this.view = new Vue({
|
||||
el: "#openmct",
|
||||
template: '<mct-layout></mct-layout>'
|
||||
});
|
||||
}
|
||||
|
||||
MCTLayout.prototype.initComponents = function (ngInternal) {
|
||||
var $injector = ngInternal.injector;
|
||||
var $rootScope = injector.get('$rootScope');
|
||||
var $compile = injector.get('$compile');
|
||||
}
|
||||
|
||||
return MCTLayout;
|
||||
});
|
||||
5
src/core/Layout.js
Normal file
5
src/core/Layout.js
Normal file
@ -0,0 +1,5 @@
|
||||
define([
|
||||
|
||||
], {
|
||||
|
||||
});
|
||||
@ -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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user