Implement recursive Interface in vue

webapp/src/components/genericComponents/simpleAccordion.vue

@@ -0,0 +1,23 @@
+<template>
+  <ul uk-accordion="multiple: true">
+    <li>
+      <a class="uk-accordion-title" href="#">{{ title }}</a>
+      <div class="uk-accordion-content">
+        <slot></slot>
+      </div>
+    </li>
+  </ul>
+</template>
+<script>
+export default {
+  name: "SimpleAccordion",
+
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<style scoped></style>

webapp/src/components/labThingsComponents/serverSpecifiedInterface.vue

@@ -0,0 +1,47 @@
+<template>
+  <div v-for="(element, index) in elements" :key="index" class="uk-margin">
+    <div v-if="element.element_type === 'html_block'" v-html="element.html"></div>
+    <server-specified-property-control
+      v-else-if="element.element_type === 'property_control'"
+      :property-data="element"
+    />
+    <server-specified-action-button
+      v-else-if="element.element_type === 'action_button'"
+      :property-data="element"
+    />
+    <simple-accordion v-else-if="element.element_type === 'accordion'" :title="element.title">
+      <server-specified-interface :elements="element.children" />
+    </simple-accordion>
+    <!-- eslint-disable vue/no-v-html -->
+    <div v-else-if="element.element_type === 'container'" :class="element.css_class">
+      <server-specified-interface :elements="element.children" />
+    </div>
+    <!-- eslint-enable -->
+  </div>
+</template>
+
+<script>
+import SimpleAccordion from "../genericComponents/simpleAccordion.vue";
+import ServerSpecifiedPropertyControl from "./serverSpecifiedPropertyControl.vue";
+import ServerSpecifiedActionButton from "./serverSpecifiedActionButton.vue";
+
+// Export main app
+export default {
+  name: "ServerSpecifiedInterface",
+
+  components: {
+    SimpleAccordion,
+    ServerSpecifiedPropertyControl,
+    ServerSpecifiedActionButton,
+  },
+
+  props: {
+    elements: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style lang="less"></style>

webapp/src/components/tabContentComponents/slideScanContent.vue

@@ -24,13 +24,7 @@
           <li>
             <a class="uk-accordion-title" href="#">Scan Settings</a>
             <div class="uk-accordion-content">
-              <div
-                v-for="(setting, index) in workflowSettings"
-                :key="'detector_setting' + index"
-                class="uk-margin"
-              >
-                <server-specified-property-control :property-data="setting" />
-              </div>
+              <server-specified-interface :elements="workflowSettings" />
             </div>
           </li>
           <li class="uk-open">
@@ -125,7 +119,7 @@
 <script>
 import streamDisplay from "./streamContent.vue";
 import propertyControl from "../labThingsComponents/propertyControl.vue";
-import ServerSpecifiedPropertyControl from "../labThingsComponents/serverSpecifiedPropertyControl.vue";
+import ServerSpecifiedInterface from "../labThingsComponents/serverSpecifiedInterface.vue";
 import actionLogDisplay from "../labThingsComponents/actionLogDisplay.vue";
 import actionProgressBar from "../labThingsComponents/actionProgressBar.vue";
 import MiniStreamDisplay from "../genericComponents/miniStreamDisplay.vue";
@@ -142,7 +136,7 @@ export default {
     actionProgressBar,
     MiniStreamDisplay,
     ActionButton,
-    ServerSpecifiedPropertyControl,
+    ServerSpecifiedInterface,
   },
 
   data() {
@@ -211,7 +205,7 @@ export default {
       if (this.workflowName) {
         this.ready = await this.readThingProperty(this.workflowName, "ready", true);
         this.workflowSettings =
-          (await this.readThingProperty(this.workflowName, "settings_ui", true)) || [];
+          (await this.getThingEndpoint(this.workflowName, "settings_ui")) || [];
         this.workflowDisplayName = await this.readThingProperty(
           this.workflowName,
           "display_name",

webapp/src/mixins/labThingsMixins.js

@@ -135,5 +135,14 @@ export default {
       );
       return url;
     },
+    async getThingEndpoint(thing, endpoint) {
+      let url = `${this.$store.getters.baseUri}/${thing}/${endpoint}`;
+      try {
+        const response = await axios.get(url);
+        return response.data;
+      } catch {
+        return undefined;
+      }
+    },
   },
 };