[Inspector] More vue

commit 9b735b4f70bf4d21f64a1e418a5f9d7342567104
Author: Pete Richards <peter.l.richards@nasa.gov>
Date:   Fri Aug 31 16:31:48 2018 -0700

    Slight HTML tweak

commit 3e58e140f9ea3640e5551d5f43abf837610c6fb4
Author: Pete Richards <peter.l.richards@nasa.gov>
Date:   Fri Aug 31 16:26:36 2018 -0700

    [Inspector] Wire up elements pool

    Elements pool wired up to show angular elements pool.

commit d9c60f31bd6d32a5d2e2227d5476edd81e2e4360
Author: Pete Richards <peter.l.richards@nasa.gov>
Date:   Fri Aug 31 13:56:04 2018 -0700

    [Inspector] vue inspector

    Create a vue inspctor which responds to selection events and shows
    object properties and inspector views.

platform/commonUI/edit/bundle.js

@@ -319,6 +319,12 @@ define([
                     ]
                 }
             ],
+            "templates": [
+                {
+                    key: "elementsPool",
+                    template: elementsTemplate
+                }
+            ],
             "components": [
                 {
                     "type": "decorator",

src/ui/components/inspector/Elements.vue

@@ -0,0 +1,33 @@
+<template>
+<div></div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    mounted() {
+        let openmct = this.openmct;
+        let $injector = openmct.$injector;
+        let angular = openmct.$angular;
+
+        let templateLinker = $injector.get('templateLinker');
+
+        let templateMap = {};
+        $injector.get('templates[]').forEach((t) => {
+            templateMap[t.key] = templateMap[t.key] || t;
+        });
+
+        let $rootScope = $injector.get('$rootScope');
+        this.$scope = $rootScope.$new();
+
+        templateLinker.link(
+            this.$scope,
+            angular.element(this.$el),
+            templateMap.elementsPool
+        );
+    },
+    destroyed() {
+        this.$scope.$destroy();
+    }
+}
+</script>

src/ui/components/inspector/Inspector.vue

@@ -2,12 +2,14 @@
     <multipane class="c-inspector"
                type="vertical">
         <pane class="c-inspector__properties">
-            <div ref="properties"></div>
+            <properties></properties>
+            <location></location>
+            <inspector-view></inspector-view>
         </pane>
         <pane class="l-pane c-inspector__elements"
               handle="before"
               label="Elements">
-            <div ref="elements">c-inspector__elements 1</div>
+            <elements></elements>
         </pane>
     </multipane>
 </template>
@@ -193,10 +195,20 @@
 <script>
     import multipane from '../controls/multipane.vue';
     import pane from '../controls/pane.vue';
+    import Elements from './Elements.vue';
+    import Location from './Location.vue';
+    import Properties from './Properties.vue';
+    import InspectorView from './InspectorView.vue';
+
     export default {
+        inject: ['openmct'],
         components: {
             multipane,
-            pane
+            pane,
+            Elements,
+            Properties,
+            Location,
+            InspectorView
         }
     }
 </script>

src/ui/components/inspector/InspectorView.vue

@@ -0,0 +1,32 @@
+<template>
+    <div></div>
+</template>
+
+<style>
+</style>
+
+<script>
+    export default {
+        inject: ['openmct'],
+        mounted() {
+            this.openmct.selection.on('change', this.updateSelection);
+            this.updateSelection(this.openmct.selection.get());
+        },
+        destroyed() {
+            this.openmct.selection.off('change', this.updateSelection);
+        },
+        methods: {
+            updateSelection(selection) {
+                if (this.selectedView && this.selectedView.destroy) {
+                    this.selectedView.destroy();
+                }
+                this.$el.innerHTML = '';
+                this.selectedView = this.openmct.inspectorViews.get(selection);
+                if (!this.selectedView) {
+                    return;
+                }
+                this.selectedView.show(this.$el);
+            }
+        }
+    }
+</script>

src/ui/components/inspector/Location.vue

@@ -0,0 +1,42 @@
+<template>
+<div class="grid-properties">
+    <h2 title="The location of this linked object.">Location</h2>
+    <ul class="l-inspector-part">
+        <li class="grid-row">
+            <div class="grid-cell label">This Link</div>
+            <div class="grid-cell value">TODO</div>
+        </li>
+        <li class="grid-row">
+            <div class="grid-cell label">Original</div>
+            <div class="grid-cell value">TODO</div>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            domainObject: {}
+        }
+    },
+    mounted() {
+        this.openmct.selection.on('change', this.updateSelection);
+        this.updateSelection(this.openmct.selection.get());
+    },
+    beforeDestroy() {
+        this.openmct.selection.off('change', this.updateSelection);
+    },
+    methods: {
+        updateSelection(selection) {
+            if (selection.length === 0) {
+                this.domainObject = {};
+                return;
+            }
+            this.domainObject = selection[0].context.item;
+        }
+    }
+}
+</script>

src/ui/components/inspector/Properties.vue

@@ -0,0 +1,97 @@
+<template>
+<div class="grid-properties">
+    <h2>Properties</h2>
+    <ul class="l-inspector-part">
+        <li class="t-repeat grid-row">
+            <div class="grid-cell label">Title</div>
+            <div class="grid-cell value">{{ domainObject.name }}</div>
+        </li>
+        <li class="t-repeat grid-row">
+            <div class="grid-cell label">Type</div>
+            <div class="grid-cell value">{{ typeName }}</div>
+        </li>
+        <li class="t-repeat grid-row" v-if="domainObject.created">
+            <div class="grid-cell label">Created</div>
+            <div class="grid-cell value">{{ domainObject.created }}</div>
+        </li>
+        <li class="t-repeat grid-row" v-if="domainObject.modified">
+            <div class="grid-cell label">Modified</div>
+            <div class="grid-cell value">{{ domainObject.modified }}</div>
+        </li>
+
+        <li class="t-repeat grid-row"
+            v-for="prop in typeProperties"
+            :key="prop.name">
+            <div class="grid-cell label">{{ prop.name }}</div>
+            <div class="grid-cell value">{{ prop.value }}</div>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script>
+export default {
+    inject: ['openmct'],
+    data() {
+        return {
+            domainObject: {}
+        }
+    },
+    computed: {
+        type() {
+            return this.openmct.types.get(this.domainObject.type);
+        },
+        typeName() {
+            if (!this.type) {
+                return `Unknown: ${this.domainObject.type}`;
+            }
+            return this.type.definition.name;
+        },
+        typeProperties() {
+            if (!this.type) {
+                return [];
+            }
+            let definition = this.type.definition;
+            if (!definition.form || definition.form.length === 0) {
+                return [];
+            }
+            return definition.form
+                .map((field) => {
+                    let path = field.property
+                    if (typeof path === 'string') {
+                        path = [path];
+                    }
+                    return {
+                        name: field.name,
+                        path
+                    };
+                })
+                .filter(field => Array.isArray(field.path))
+                .map((field) => {
+                    return {
+                        name: field.name,
+                        value: field.path.reduce((object, field) => {
+                            return object[field];
+                        }, this.domainObject)
+                    };
+                });
+        }
+    },
+    mounted() {
+        this.openmct.selection.on('change', this.updateSelection);
+        this.updateSelection(this.openmct.selection.get());
+    },
+    beforeDestroy() {
+        this.openmct.selection.off('change', this.updateSelection);
+    },
+    methods: {
+        updateSelection(selection) {
+            if (selection.length === 0) {
+                this.domainObject = {};
+                return;
+            }
+            this.domainObject = selection[0].context.item;
+        }
+    }
+}
+</script>

src/ui/components/layout/Layout.vue

@@ -24,7 +24,7 @@
                   handle="before"
                   label="Inspect"
                   collapsable>
-                <MctInspector ref="inspector"></MctInspector>
+                <Inspector ref="inspector"></Inspector>
             </pane>
         </multipane>
         <div class="l-shell__status">
@@ -150,7 +150,7 @@
 </style>
 
 <script>
-    import MctInspector from './MctInspector.vue';
+    import Inspector from '../inspector/Inspector.vue';
     import MctMain from './MctMain.vue';
     import MctStatus from './MctStatus.vue';
     import MctTree from './mct-tree.vue';
@@ -160,7 +160,7 @@
 
     export default {
         components: {
-            MctInspector,
+            Inspector,
             MctMain,
             MctStatus,
             MctTree,