Commit 5e0cc8c1 authored by Joel Collins's avatar Joel Collins
Browse files

Added connect panel for lite mode

parent 49a38ead

.env.development.lite

0 → 100644
+4 −0
Original line number Diff line number Diff line 
NODE_ENV=development

VUE_APP_PLATFORM=web

VUE_APP_TARGET=web

VUE_APP_LITEMODE=true
 
 No newline at end of file

package.json

+2 −1
Original line number Diff line number Diff line
@@ -14,7 +14,8 @@ 
    "build:web": "vue-cli-service build --mode production.web",

    "build:lite": "vue-cli-service build --mode production.lite",

    "build:app": "vue-cli-service build --mode production.app",

    "serve": "vue-cli-service serve  --mode development.web",

    "serve:web": "vue-cli-service serve  --mode development.web",

    "serve:lite": "vue-cli-service serve  --mode development.lite",

    "start": "npm run build:app && electron app/app.js",

    "dist:linux": "electron-builder --linux --config app/builder-config-x86_64.yaml",

    "dist:raspi": "electron-builder --linux --config app/builder-config-raspi.yaml",

src/components/panelRight.vue

+10 −3
Original line number Diff line number Diff line
@@ -10,7 +10,10 @@ 
      uk-tab="swiping: false"

    >

      <!-- Connect tab button -->

      <li :class="[{ 'uk-active': currentTab == 'connect' }]">

      <li

        v-show="!liteMode"

        :class="[{ 'uk-active': currentTab == 'connect' }]"

      >

        <a href="#" uk-switcher-item="connect" @click="currentTab = 'connect'"

          >Connect</a

        >
@@ -45,7 +48,8 @@ 
        id="connectDisplayTab"

        class="uk-height-1-1 uk-width-1-1"

      >

        <connectDisplay />

        <connectDisplayLite v-if="liteMode" />

        <connectDisplay v-else />

      </div>

      <!-- Preview tab -->

      <div
@@ -75,6 +79,7 @@ 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";
@@ -84,6 +89,7 @@ export default { 


  components: {

    connectDisplay,

    connectDisplayLite,

    streamDisplay,

    galleryDisplay

  },
@@ -91,7 +97,8 @@ export default { 
  data: function() {

    return {

      currentTab: "connect",

      unwatchStoreFunction: null

      unwatchStoreFunction: null,

      liteMode: process.env.VUE_APP_LITEMODE == "true" ? true : false

    };

  },

src/components/viewComponents/connectDisplayLite.vue

0 → 100644
+42 −0
Original line number Diff line number Diff line 
<template>

  <div class="connectDisplayLite uk-padding uk-padding-remove-left">

    Lite connect

  </div>

</template>



<script>

// Export main app

export default {

  name: "ConnectDisplayLite",



  components: {},



  data: function() {

    return {};

  },



  mounted() {

    // Connect to the current location

    // NOTE: This assumes that the GUI is being served from the same location as the API"

    this.connectToHost(location);

  },



  methods: {

    connectToHost: function(host) {

      console.log(host);



      // Commit the hostname and port to store

      this.$store.commit("resetState");

      this.$store.commit("changeHost", [host.hostname, host.port]);

      this.$store.commit("setConnected");

    }

  }

};

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="less">

.connect-card-align-top {

  margin-top: 52px;

}

</style>