Added support for loading extension Web Components

src/components/panelLeft.vue

@@ -118,23 +118,12 @@
         :require-connection="plugin.requiresConnection"
         :current-tab="currentTab"
       >
-        <div
-          v-for="form in plugin.forms"
-          :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
-          class="uk-height-1-1 uk-width-1-1"
-        >
-          <extensionContent
-            :name="form.name"
-            :route="form.route"
-            :is-task="form.isTask"
-            :submit-label="form.submitLabel"
-            :schema="form.schema"
-            :emit-on-response="form.emitOnResponse"
-            :view-panel="form.viewPanel"
-            @reloadForms="updatePlugins()"
-          />
-          <hr />
-        </div>
+        <extensionContent
+          :forms="plugin.forms"
+          :web-component="plugin.wc"
+          :view-panel="plugin.viewPanel"
+          @reloadForms="updatePlugins()"
+        />
       </tabContent>
     </div>
   </div>

src/components/pluginComponents/WebComponentLoader.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div v-if="error" class="uk-padding-small uk-text-danger">
+      <b>{{ error }}</b>
+    </div>
+    <component
+      :is="componentName"
+      v-if="ready"
+      :component-base-u-r-l="ApiRootURL"
+    ></component>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WebComponentLoader",
+
+  props: {
+    componentURL: {
+      type: String,
+      required: true
+    },
+    componentName: {
+      type: String,
+      required: true
+    }
+  },
+
+  data: function() {
+    return {
+      ready: false,
+      error: null
+    };
+  },
+
+  computed: {
+    ApiRootURL: function() {
+      return `${this.$store.getters.baseUri}/api/v2`;
+    }
+  },
+
+  mounted() {
+    // Method 2
+    this.$loadScript(this.componentURL)
+      .then(() => {
+        const el = customElements.get(this.componentName);
+        if (el) {
+          this.ready = true;
+        } else {
+          this.error = `Error: No component ${this.componentName} found.`;
+        }
+        this.ready = true;
+      })
+      .catch(() => {
+        this.ready = false;
+      });
+  }
+};
+</script>
+
+<style scoped></style>

src/components/tabContentComponents/extensionContent.vue

@@ -2,7 +2,28 @@
   <!-- Grid managing tab content -->
   <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component">
-      <JsonForm v-bind="$props" v-on="$listeners" />
+      <div v-if="webComponent">
+        <WebComponentLoader
+          :component-u-r-l="webComponent.href"
+          :component-name="webComponent.name"
+        />
+      </div>
+      <!-- Handle OpenFlexure eV Forms -->
+      <div
+        v-for="form in forms"
+        :key="`${form.route}/${form.name}`.replace(/\s+/g, '-').toLowerCase()"
+        class="uk-height-1-1 uk-width-1-1"
+      >
+        <JsonForm
+          :name="form.name"
+          :route="form.route"
+          :is-task="form.isTask"
+          :submit-label="form.submitLabel"
+          :schema="form.schema"
+          :emit-on-response="form.emitOnResponse"
+          v-on="$listeners"
+        />
+      </div>
     </div>
     <div class="view-component uk-width-expand">
       <galleryDisplay v-if="viewPanel == 'gallery'" />
@@ -14,6 +35,7 @@
 
 <script>
 import JsonForm from "../pluginComponents/JsonForm";
+import WebComponentLoader from "../pluginComponents/WebComponentLoader";
 import streamDisplay from "../viewComponents/streamDisplay.vue";
 import galleryDisplay from "../viewComponents/galleryDisplay.vue";
 import settingsDisplay from "../viewComponents/settingsDisplay.vue";
@@ -23,37 +45,20 @@ export default {
 
   components: {
     JsonForm,
+    WebComponentLoader,
     streamDisplay,
     galleryDisplay,
     settingsDisplay
   },
 
   props: {
-    name: {
-      type: String,
-      required: false,
-      default: "Plugin"
-    },
-    schema: {
+    forms: {
       type: Array,
-      required: true
-    },
-    route: {
-      type: String,
-      required: true
-    },
-    isTask: {
-      type: Boolean,
       required: false,
-      default: false
+      default: () => []
     },
-    submitLabel: {
-      type: String,
-      required: false,
-      default: "Submit"
-    },
-    emitOnResponse: {
-      type: String,
+    webComponent: {
+      type: Object,
       required: false,
       default: null
     },

src/main.js

@@ -7,6 +7,10 @@ import UIkit from "uikit";
 // Import MD icons
 import "material-design-icons/iconfont/material-icons.css";
 
+// Import load-script module
+import LoadScript from "vue-plugin-load-script";
+Vue.use(LoadScript);
+
 Vue.config.productionTip = false;
 
 Vue.mixin({