Conditionally render settings tabs based on available Things

webapp/src/components/tabContentComponents/settingsComponents/displaySettings.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <appSettings />
+    <streamSettings />
+  </div>
+</template>
+
+<script>
+import appSettings from "./displaySetttingsComponents/appSettings.vue";
+import streamSettings from "./displaySetttingsComponents/streamSettings.vue";
+
+// Export main app
+export default {
+  name: "SettingsContent",
+
+  components: {
+    streamSettings,
+    appSettings,
+  },
+};
+</script>

webapp/src/components/tabContentComponents/settingsContent.vue

@@ -5,17 +5,17 @@
     <div class="settings-nav">
       <ul class="uk-nav uk-nav-default">
         <li class="uk-nav-header">Application Settings</li>
-        <li>
+        <li v-for="item in appTabs" :key="'setting' + item.id + '-tab-content'">
           <tabIcon
-            id="settings-display-icon"
+            :id="'setting' + item.id + '-tab-content'"
-            tab-i-d="display"
+            :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
-            :require-connection="false"
+            :require-connection="item.requireConnection"
             :current-tab="currentTab"
             @set-tab="setTab"
           >
-            Display
+            {{ item.title }}
           </tabIcon>
         </li>
         <li class="uk-nav-header">Microscope Settings</li>
@@ -27,81 +27,40 @@
         >
           Launch Calibration Wizard
         </button>
-        <li>
+        <li v-for="item in calibrationTabs" :key="'setting' + item.id + '-tab-content'">
           <tabIcon
-            id="settings-camera-icon"
+            :id="'setting' + item.id + '-tab-content'"
-            tab-i-d="camera"
+            :tab-i-d="item.id"
             :show-title="false"
             :show-tooltip="false"
-            :require-connection="true"
+            :require-connection="item.requireConnection"
             :current-tab="currentTab"
             @set-tab="setTab"
           >
-            Camera
+            {{ item.title }}
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-stage-icon"
-            tab-i-d="stage"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Stage
-          </tabIcon>
-        </li>
-        <li>
-          <tabIcon
-            id="settings-mapping-icon"
-            tab-i-d="mapping"
-            :show-title="false"
-            :show-tooltip="false"
-            :require-connection="true"
-            :current-tab="currentTab"
-            @set-tab="setTab"
-          >
-            Camera to Stage Mapping
           </tabIcon>
         </li>
       </ul>
     </div>
     <div class="view-component uk-width-expand uk-padding-small">
-      <tabContent tab-i-d="display" :require-connection="false" :current-tab="currentTab">
+      <tabContent
-        <div class="settings-pane uk-padding-small">
+        v-for="item in allTabs"
-          <appSettings />
+        :id="'setting' + item.id + '-tab-content'"
-          <streamSettings />
+        :key="'setting' + item.id + '-tab-content'"
-        </div>
+        :tab-i-d="item.id"
-      </tabContent>
+        :require-connection="item.requireConnection"
-
+        :current-tab="currentTab"
-      <tabContent tab-i-d="camera" :require-connection="true" :current-tab="currentTab">
+      >
-        <div class="settings-pane uk-padding-small">
+        <component :is="item.component"></component>
-          <cameraSettings />
-        </div>
-      </tabContent>
-
-      <tabContent tab-i-d="stage" :require-connection="true" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <stageSettings />
-        </div>
-      </tabContent>
-
-      <tabContent tab-i-d="mapping" :require-connection="true" :current-tab="currentTab">
-        <div class="settings-pane uk-padding-small">
-          <CSMSettings />
-        </div>
       </tabContent>
     </div>
   </div>
 </template>
 
 <script>
-import streamSettings from "./settingsComponents/streamSettings.vue";
+import displaySettings from "./settingsComponents/displaySettings.vue";
 import calibrationWizard from "../modalComponents/calibrationWizard.vue";
 import cameraSettings from "./settingsComponents/cameraSettings.vue";
-import appSettings from "./settingsComponents/appSettings.vue";
 import CSMSettings from "./settingsComponents/CSMSettings.vue";
 import stageSettings from "./settingsComponents/stageSettings.vue";
 // Import generic components
@@ -113,11 +72,10 @@ export default {
   name: "SettingsContent",
 
   components: {
-    streamSettings,
+    displaySettings,
     cameraSettings,
     stageSettings,
     CSMSettings,
-    appSettings,
     tabIcon,
     tabContent,
     calibrationWizard,
@@ -127,9 +85,61 @@ export default {
     return {
       selected: "display",
       currentTab: "display",
+      coreAppTabs: [
+        {
+          id: "display",
+          title: "Display",
+          requireConnection: false,
+          component: displaySettings,
+          requiredThings: [],
+        },
+      ],
+      coreCalibrationTabs: [
+        {
+          id: "camera",
+          title: "Camera",
+          requireConnection: true,
+          component: cameraSettings,
+          requiredThings: [],
+        },
+        {
+          id: "stage",
+          title: "Stage",
+          requireConnection: true,
+          component: stageSettings,
+          requiredThings: ["stage"],
+        },
+        {
+          id: "mapping",
+          title: "Camera to Stage Mapping",
+          requireConnection: true,
+          component: CSMSettings,
+          requiredThings: ["camera_stage_mapping"],
+        },
+      ],
     };
   },
 
+  computed: {
+    allTabs() {
+      return [...this.appTabs, ...this.calibrationTabs];
+    },
+    appTabs() {
+      console.log(this.coreAppTabs);
+      // Filter core top tabs based on available Things.
+      return this.coreAppTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
+    },
+    calibrationTabs() {
+      // Filter core top tabs based on available Things.
+      return this.coreCalibrationTabs.filter((tab) => {
+        if (!tab.requiredThings || tab.requiredThings.length === 0) return true;
+        return tab.requiredThings.every((thing) => this.thingAvailable(thing));
+      });
+    },
+  },
   methods: {
     setTab: function (event, tab) {
       if (!(this.currentTab == tab)) {