From 5e0cc8c1402cc074fdbbc060c5361a30f360fd6d Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Wed, 12 Feb 2020 15:10:54 +0000
Subject: [PATCH] Added connect panel for lite mode

---
 .env.development.lite                         |  4 ++
 package.json                                  |  3 +-
 src/components/panelRight.vue                 | 13 ++++--
 .../viewComponents/connectDisplayLite.vue     | 42 +++++++++++++++++++
 4 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 .env.development.lite
 create mode 100644 src/components/viewComponents/connectDisplayLite.vue

diff --git a/.env.development.lite b/.env.development.lite
new file mode 100644
index 00000000..e62645d4
--- /dev/null
+++ b/.env.development.lite
@@ -0,0 +1,4 @@
+NODE_ENV=development
+VUE_APP_PLATFORM=web
+VUE_APP_TARGET=web
+VUE_APP_LITEMODE=true
\ No newline at end of file
diff --git a/package.json b/package.json
index 57ec2795..5b6d7fd6 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/panelRight.vue b/src/components/panelRight.vue
index 9057247b..5ee9ca35 100644
--- a/src/components/panelRight.vue
+++ b/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
     };
   },
 
diff --git a/src/components/viewComponents/connectDisplayLite.vue b/src/components/viewComponents/connectDisplayLite.vue
new file mode 100644
index 00000000..ecf67b86
--- /dev/null
+++ b/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>