Added connect panel for lite mode

.env.development.lite

@@ -0,0 +1,4 @@
+NODE_ENV=development
+VUE_APP_PLATFORM=web
+VUE_APP_TARGET=web
+VUE_APP_LITEMODE=true

package.json

@@ -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,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,0 +1,42 @@
+<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>