Refactored panelLeft to appContent

src/App.vue

@@ -4,13 +4,13 @@
     class="uk-height-1-1 uk-margin-remove uk-padding-remove"
     :class="handleTheme"
   >
-    <panelLeft />
+    <appContent />
   </div>
 </template>
 
 <script>
 // Import components
-import panelLeft from "./components/panelLeft.vue";
+import appContent from "./components/appContent.vue";
 
 // Key Codes
 const keyCodes = {
@@ -30,7 +30,7 @@ export default {
   name: "App",
 
   components: {
-    panelLeft
+    appContent
   },
 
   data: function() {

src/components/panelRight.vue

@@ -1,170 +0,0 @@
-<template>
-  <!-- Tabbed panel for gallery and live views -->
-  <div
-    id="panel-right"
-    class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1"
-  >
-    <ul
-      id="tabContainer"
-      class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center"
-      uk-tab="swiping: false"
-    >
-      <!-- Connect tab button -->
-      <li
-        v-show="!liteMode"
-        :class="[{ 'uk-active': currentTab == 'connect' }]"
-      >
-        <a href="#" uk-switcher-item="connect" @click="currentTab = 'connect'"
-          >Connect</a
-        >
-      </li>
-      <!-- Preview tab button -->
-      <li
-        :class="[
-          { 'uk-disabled': !$store.getters.ready },
-          { 'uk-active': currentTab == 'preview' }
-        ]"
-      >
-        <a href="#" uk-switcher-item="preview" @click="currentTab = 'preview'"
-          >Live</a
-        >
-      </li>
-      <!-- Gallery tab button -->
-      <li
-        :class="[
-          { 'uk-disabled': !$store.getters.ready },
-          { 'uk-active': currentTab == 'gallery' }
-        ]"
-      >
-        <a href="#" uk-switcher-item="gallery" @click="currentTab = 'gallery'"
-          >Gallery</a
-        >
-      </li>
-    </ul>
-    <ul
-      class="uk-flex uk-flex-1 uk-overflow-auto uk-margin-remove uk-padding-remove"
-    >
-      <!-- Connect tab -->
-      <div
-        v-show="currentTab == 'connect'"
-        id="connectDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <connectDisplayLite v-if="liteMode" />
-        <connectDisplay v-else />
-      </div>
-      <!-- Preview tab -->
-      <div
-        v-if="$store.getters.ready"
-        v-show="currentTab == 'preview'"
-        id="streamDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <streamDisplay />
-      </div>
-      <!-- Gallery tab -->
-      <div
-        v-if="$store.getters.ready"
-        v-show="currentTab == 'gallery'"
-        id="galleryDisplayTab"
-        class="uk-height-1-1 uk-width-1-1"
-      >
-        <galleryDisplay />
-      </div>
-    </ul>
-  </div>
-</template>
-
-<script>
-// Import basic UIkit
-import UIkit from "uikit";
-
-// Import components
-import connectDisplay from "./viewComponents/connectDisplay.vue";
-import connectDisplayLite from "./viewComponents/connectDisplayLite.vue";
-import streamDisplay from "./viewComponents/streamDisplay.vue";
-import galleryDisplay from "./viewComponents/galleryDisplay.vue";
-
-// Export main app
-export default {
-  name: "PanelRight",
-
-  components: {
-    connectDisplay,
-    connectDisplayLite,
-    streamDisplay,
-    galleryDisplay
-  },
-
-  data: function() {
-    return {
-      currentTab: "connect",
-      unwatchStoreFunction: null,
-      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false
-    };
-  },
-
-  watch: {
-    currentTab: function(index) {
-      // If entering the gallery
-      if (index == "gallery") {
-        console.log("Gallery tab entered");
-        this.$root.$emit("globalUpdateCaptures");
-      }
-      // If entering the stream
-      if (index == "preview") {
-        console.log("Preview tab entered");
-        this.$root.$emit("globalTogglePreview", true);
-      }
-      // If leaving the stream
-      else {
-        console.log("Preview tab hidden");
-        this.$root.$emit("globalTogglePreview", false);
-      }
-    }
-  },
-
-  created: function() {
-    // Watch for host 'ready', then update status
-    this.unwatchStoreFunction = this.$store.watch(
-      (state, getters) => {
-        return getters.ready;
-      },
-      ready => {
-        if (ready) {
-          console.log("Right panel now ready");
-          this.currentTab = "preview";
-        } else {
-          console.log("Right panel now disabled");
-          this.currentTab = "connect";
-        }
-      }
-    );
-  },
-
-  beforeDestroy() {
-    // Then we call that function here to unwatch
-    if (this.unwatchStoreFunction) {
-      this.unwatchStoreFunction();
-      this.unwatchStoreFunction = null;
-    }
-  },
-
-  methods: {
-    switchTab: function(index) {
-      var switcherObj = UIkit.switcher("#tabContainer");
-      console.log(switcherObj);
-      console.log(switcherObj.toggles);
-      console.log(`Switching to ${index}`);
-      var a = switcherObj.show(index);
-      console.log(a);
-    }
-  }
-};
-</script>
-
-<style scoped lang="less">
-.uk-tab {
-  padding-left: 0;
-}
-</style>