Added support for loading extension Web Components (9c309fc7) · Commits · OpenFlexure / openflexure-microscope-server

package-lock.json

+8 −6

Original line number	Diff line number	Diff line
		@@ -8586,14 +8586,12 @@
		"balanced-match": {
		"version": "1.0.0",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"brace-expansion": {
		"version": "1.1.11",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"balanced-match": "^1.0.0",
		"concat-map": "0.0.1"
		@@ -8613,8 +8611,7 @@
		"concat-map": {
		"version": "0.0.1",
		"bundled": true,
		"dev": true,
		"optional": true
		"dev": true
		},
		"console-control-strings": {
		"version": "1.1.0",
		@@ -8762,7 +8759,6 @@
		"version": "3.0.4",
		"bundled": true,
		"dev": true,
		"optional": true,
		"requires": {
		"brace-expansion": "^1.1.7"
		}
		@@ -16021,6 +16017,12 @@
		}
		}
		},
		"vue-plugin-load-script": {
		"version": "1.2.0",
		"resolved": "https://registry.npmjs.org/vue-plugin-load-script/-/vue-plugin-load-script-1.2.0.tgz",
		"integrity": "sha512-QbWjZSFRToSP6S0nZFsH618PsTlZgSg8m8Xv602vezznLTHYd0wAXEw0jlYND7L6BMe0KcA7cvUwLROyfBlQ4w==",
		"dev": true
		},
		"vue-style-loader": {
		"version": "4.1.2",
		"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

+1 −0

Original line number	Diff line number	Diff line
		@@ -52,6 +52,7 @@
		"mdns-js": "^1.0.3",
		"uikit": "^3.3.3",
		"vue": "^2.6.11",
		"vue-plugin-load-script": "^1.2.0",
		"vue-template-compiler": "^2.6.11",
		"vuex": "^3.1.2"
		},

src/components/panelLeft.vue

+6 −17

Original line number	Diff line number	Diff line
		@@ -117,24 +117,13 @@
		:key="plugin.id"
		: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"
		:forms="plugin.forms"
		:web-component="plugin.wc"
		:view-panel="plugin.viewPanel"
		@reloadForms="updatePlugins()"
		/>
		<hr />
		</div>
		</tabContent>
		</div>
		</div>

src/components/pluginComponents/WebComponentLoader.vue

0 → 100644

+61 −0

Original line number	Diff line number	Diff line
		<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

+28 −23

Original line number	Diff line number	Diff line
		@@ -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
		},
		submitLabel: {
		type: String,
		required: false,
		default: "Submit"
		default: () => []
		},
		emitOnResponse: {
		type: String,
		webComponent: {
		type: Object,
		required: false,
		default: null
		},