Fixed debug app for example custom element

openflexure_microscope/api/example_extensions/custom_element/__init__.py

@@ -42,13 +42,18 @@ customelement_extension_v2 = CustomElementExtension()
 
 def wc_func():
     return {
-        "href": customelement_extension_v2.static_file_url("my-custom-element.min.js"),
+        "href": customelement_extension_v2.static_file_url("vue-web-component.min.js"),
-        "name": "my-custom-element",
+        "name": "vue-web-component",
     }
 
 
 def gui_func():
-    return {"icon": "pets", "title": "Element", "viewPanel": "stream", "wc": wc_func()}
+    return {
+        "icon": "grid_on",
+        "title": "Med Scan",
+        "viewPanel": "stream",
+        "wc": wc_func(),
+    }
 
 
 customelement_extension_v2.add_meta("wc", wc_func)

openflexure_microscope/api/example_extensions/custom_element/static/README.md

@@ -0,0 +1,22 @@
+# Example Web Component using Vue framework
+
+## Structure
+
+### Web component
+
+* `/src/components/VueWebComponent.vue`
+
+### Debug app
+
+* For debugging purposes, the component can be mounted into a demo app
+
+* `/src/App.vue` and `/src/main.js` provide demo app functionality, and do not affect the final built web component
+
+
+## Building
+
+* Run `npm run build`
+
+## Debugging
+
+* Run `npm run serve` to serve the demo app. This can be used to debug the component. Note, the base URL will be set to it's default value of a localhost microscope server

openflexure_microscope/api/example_extensions/custom_element/static/dist/demo.html

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:18020f0209272ab81d01b2d68da517fcff98dd07d2ad7fe738c66df75003f7cf
+oid sha256:e07e1d811b5182b4e96ab2a29d82db90c8de77d340844cf0acd284388154a671
 size 197

openflexure_microscope/api/example_extensions/custom_element/static/dist/my-custom-element.js

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:94cc5b4e5b3ddb8c6b94ef9b81b49060c582935aedf6c7d1626f4166c1827442
-size 288006

openflexure_microscope/api/example_extensions/custom_element/static/dist/my-custom-element.min.js

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:ba98b02d051bf6f7d2d4302154512a72ae6ddc1eff261e171fd92a067e1bdf84
-size 92018

openflexure_microscope/api/example_extensions/custom_element/static/dist/vue-web-component.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f03a6823dea074cef32557902c64407cf67899aaa7f6c0d19ff7746bd149fbe0
+size 288124

openflexure_microscope/api/example_extensions/custom_element/static/dist/vue-web-component.min.js

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:155a1dc5d6cbdc787012f83bf82c84b97944ab6b2141f9c566faa375571a3f4a
+size 92117

openflexure_microscope/api/example_extensions/custom_element/static/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "vue-web-component-project",
+  "name": "vue-web-component",
   "version": "0.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build --target wc --inline-vue --name my-custom-element ./src/components/VueWebComponent.vue"
+    "build": "cross-var vue-cli-service build --target wc --inline-vue --name $npm_package_name ./src/components/VueWebComponent.vue"
   },
   "dependencies": {
     "axios": "^0.19.2",
@@ -14,6 +14,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
+    "cross-var": "^1.1.0",
     "vue-template-compiler": "^2.6.10"
   }
 }

openflexure_microscope/api/example_extensions/custom_element/static/src/components/VueWebComponent.vue

@@ -20,7 +20,7 @@ export default {
   props: {
     'componentBaseURL': {
       required: false,
-      default: "http://localhost/api/v2",
+      default: "http://localhost:5000/api/v2",
       type: String
     }
   },
@@ -33,7 +33,8 @@ export default {
     };
   },
 
-  mounted () {
+  mounted: function() {
+    console.log(this.componentBaseURL)
     if (this.componentBaseURL){
       axios
       .get(`${this.componentBaseURL}`)

openflexure_microscope/api/example_extensions/custom_element/static/src/main.js

@@ -1,13 +1,5 @@
 import Vue from 'vue';
-import wrap from '@vue/web-component-wrapper';
 import App from './App.vue';
-import VueWebComponent from './components/VueWebComponent';
-
-const CustomElement = wrap(Vue, VueWebComponent);
-
-window.customElements.define('my-custom-element', CustomElement);
-
-Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App)

openflexure_microscope/api/example_extensions/custom_element/static/vue.config.js

@@ -1,3 +1,4 @@
+process.env.VUE_APP_NAME = require('./package.json').name
 module.exports = {
     productionSourceMap: false
 };