Commit 50b70a3e authored by Joel Collins's avatar Joel Collins
Browse files

Refactored panelLeft to appContent

parent e42835ff

src/App.vue

+3 −3
Original line number Diff line number Diff line
@@ -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

deleted100644 → 0
+0 −170
Original line number Diff line number Diff line 
<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>