Add the updates for the new landing page and apps

.eslintignore

@@ -1,3 +1,4 @@
 test/unit/coverage/**
 test/unit/*.js
 test/e2e/*.js
+src/**

src/main/index.js

@@ -1,8 +1,9 @@
 'use strict'
 
-import { app, BrowserWindow, Tray, ipcMain, Notification } from 'electron'
+import { app, BrowserWindow, Tray, ipcMain, Notification, dialog } from 'electron'
 import path from 'path'
 import ps from 'portscanner'
+import fs from 'fs'
 /**
  * Set `__static` path to static files in production
  * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
@@ -132,6 +133,44 @@ ipcMain.on('serviceStatusChange', (event, service, status) => {
   }
 })
 
+ipcMain.on('allFolderConfigurations', (event) => {
+  let userConfiguration = readConfigurationFile()
+  event.sender.send('allFolderConfigurationsz', userConfiguration)
+})
+
+ipcMain.on('updateFolderConfigurations', (event, userConfiguration) => {
+  createUpdateConfigurationFile(userConfiguration)
+})
+
+ipcMain.on('openDirectory', (event) => {
+  // if (false) {
+  //   dialog.showOpenDialog(mainWindow, {
+
+  //     properties: ['openDirectory']
+
+  //   })
+  // }
+
+})
+
+ipcMain.on('selectFcsDirectory', (event) => {
+  event.sender.send('fcsDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
+ipcMain.on('selectFcsWebDirectory', (event) => {
+  event.sender.send('fcsWebDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
+ipcMain.on('selectFcsUiDirectory', (event) => {
+  event.sender.send('fcsUiDirectory', dialog.showOpenDialog(mainWindow, {
+    properties: ['openDirectory']
+  }))
+})
+
 setInterval(() => {
   // console.log('Interval has been passed!!')
   let portsForServices = [
@@ -158,6 +197,57 @@ setInterval(() => {
   checkIfPortsOpenAndEmit(portsForExternals, externalsEvent)
 }, 300)
 
+// function parseDataFile (filePath, defaults) {
+//   try {
+//     return JSON.parse(fs.readFileSync(filepPath))
+//   } catch (error) {
+//     return {
+//       default: true
+//     }
+//   }
+// }
+
+function readConfigurationFile () {
+  let pathToFile = app.getPath('appData') + '/FCSToolbar/configuration.json'
+  try {
+    let userConfiguration = fs.readFileSync(pathToFile)
+    return JSON.parse(userConfiguration)
+  } catch (err) {
+    createUpdateConfigurationFile()
+    let userConfiguration = fs.readFileSync(pathToFile)
+    return JSON.parse(userConfiguration)
+  }
+}
+
+function createUpdateConfigurationFile (userConfiguration = {name: '', fcsLocation: '', fcsWebLocation: '', fcsUiLocation: ''}) {
+  let pathToStorage = app.getPath('appData') + '/FCSToolbar'
+  let pathToFile = pathToStorage + '/configuration.json'
+  console.log(app.getAppPath())
+  console.log(app.getPath('appData'))
+
+  if (!fs.existsSync(pathToStorage)) {
+    fs.mkdirSync(pathToStorage)
+  }
+
+  // if (!fs.existsSync(pathToFile)) {
+  //   fs.writeFile(pathToFile, 'utf8', function (err) {
+  //     if (err) throw err
+  //   })
+  // }
+
+  let configuration = { name: '', fcsLocation: '', fcsWebLocation: '', fcsUiLocation: '' }
+  configuration.fcsLocation = userConfiguration.fcsLocation
+  configuration.fcsWebLocation = userConfiguration.fcsWebLocation
+  configuration.fcsUiLocation = userConfiguration.fcsUiLocation
+
+  let configurationString = JSON.stringify(configuration)
+  try {
+    fs.writeFileSync(pathToFile, configurationString, 'utf8')
+  } catch (err) {
+    throw err
+  }
+}
+
 function checkIfPortsOpenAndEmit (portsArray, servicesEvent) {
   let activePortMapping = {}
   let promiseArray = []

src/renderer/App.vue

@@ -1,15 +1,95 @@
 <template>
-  <div id="app">
-    <router-view></router-view>
-  </div>
+    <div id="app">
+        <div>
+            <div class="header-arrow" v-if="showHeaderAndFooter"></div>
+            <div :class="{window: true, 'remove-top-padding': !showHeaderAndFooter}">
+                <header class="toolbar toolbar-header" v-if="showHeaderAndFooter">
+                    <h1 class="title">
+                        FCS Toolbar
+                        <span class="js-update-time"></span>
+                    </h1>
+                    <div class="toolbar-actions">
+                        <div class="btn-group">
+                            <router-link to="/landing-page">
+                                <button class="btn btn-default">
+                              <span class="icon icon-home icon-text"></span>
+                              Home
+                            </button>
+                            </router-link>
+                            <button class="btn btn-default">
+                            <span class="icon icon-popup"></span>
+                          </button>
+                        </div>
+
+                        <button class="btn btn-default">
+                          <span class="icon icon-home icon-text"></span>
+                          Filters
+                        </button>
+
+                        <button class="btn btn-default btn-dropdown pull-right">
+                          <span class="icon icon-megaphone"></span>
+                        </button>
+                    </div>
+                </header>
+                <router-view @change-header-footer-display="toggleHeaderAndFooter"></router-view>
+                <footer class="toolbar toolbar-footer" v-if="showHeaderAndFooter">
+                    <div class="footer-link">
+                        Powered by
+                        <a href="http://kunle.io">Kunle</a>
+                    </div>
+
+                    <div class="toolbar-actions pull-right">
+                        <div class="btn-group">
+                            <button class="btn btn-default js-refresh-action">
+                            <span class="icon icon-arrows-ccw js-refresh-action" title="Refresh"></span>
+                          </button>
+                            <router-link to="/settings" class="settings-icon">
+                                <button class="btn btn-default">
+                              <span class="settings icon icon-tools"></span>
+                            </button>
+                            </router-link>
+                            <button class="btn btn-default js-quit-action">
+                            <span class="icon icon-cancel js-quit-action" title="Quit"></span>
+                          </button>
+                        </div>
+                    </div>
+                </footer>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-  export default {
-    name: 'test'
-  }
+export default {
+    name: "App",
+    mounted() {
+        console.log(this.showHeaderAndFooter);
+    },
+    data() {
+        return {
+            showHeaderAndFooter: true
+        };
+    },
+    methods: {
+        routeToSettings() {
+            this.$router.push({ name: "settings" });
+        },
+        toggleHeaderAndFooter(booleanValue) {
+            console.log('Changing the headerFooterShow value to...' + booleanValue);
+            this.showHeaderAndFooter = false;
+        }
+    }
+};
 </script>
 
 <style>
-  /* CSS */
+/* CSS */
+
+.settings-icon {
+    width: 100%;
+}
+
+.remove-top-padding {
+    top: 0;
+}
 </style>

src/renderer/components/LandingPage.vue

@@ -1,14 +1,4 @@
 <template>
-<div>
-  <div class="header-arrow"></div>
-  <div class="window">
-    <header class="toolbar toolbar-header">
-      <h1 class="title">
-        FCS Toolbar
-        <span class="js-update-time"></span>
-      </h1>
-    </header>
-
     <div class="window-content">
       <div class="pane">
 
@@ -20,49 +10,36 @@
 
         <div class="striped-bar"></div>
         <div>
-          <div class="column" @click="openApp('fc')">
-            <div class="reading js-temperature">FC</div>
-            <div class="description">Fcs Commands</div>
+          <div class="column fcs-column" @click="openApp('fc')">
+            <div class="app-container">
+              <div class="reading js-temperature">FC</div>
+              <div class="description">Fcs Commands</div>
+            </div>
           </div>
-          <div class="column"@click="openApp('wl')">
-            <div class="reading js-apparent">WL</div>
-            <div class="description">Weighted List</div>
+          <div class="column fcs-column" @click="openApp('wl')">
+            <div class="app-container">
+              <div class="reading js-apparent">WL</div>
+              <div class="description">Weighted List</div>
+            </div>
           </div>
         </div>
 
         <div>
-          <div class="column" @click="openApp('tl')">
-            <div class="reading js-wind">TL</div>
-            <div class="description">Traffic Light</div>
+          <div class="column fcs-column" @click="openApp('tl')">
+            <div class="app-container">
+              <div class="reading js-wind">TL</div>
+              <div class="description">Traffic Light</div>
+            </div>
           </div>
-          <div class="column" @click="openApp('ul')">
-            <div class="reading js-wind-direction">UL</div>
-            <div class="description">Useful Links</div>
+          <div class="column fcs-column" @click="openApp('ul')">
+            <div class="app-container">
+              <div class="reading js-wind-direction">UL</div>
+              <div class="description">Useful Links</div>
+            </div>
           </div>
         </div>
       </div>
     </div>
-
-    <footer class="toolbar toolbar-footer">
-      <div class="footer-link">
-        Powered by
-        <a href="http://kunle.io">Kunle</a>
-      </div>
-
-      <div class="toolbar-actions pull-right">
-        <div class="btn-group">
-          <button class="btn btn-default js-refresh-action">
-            <span class="icon icon-arrows-ccw js-refresh-action" title="Refresh"></span>
-          </button>
-
-          <button @click="ping" class="btn btn-default js-quit-action">
-            <span class="icon icon-cancel js-quit-action" title="Quit"></span>
-          </button>
-        </div>
-      </div>
-    </footer>
-  </div>
-</div>
 </template>
 
 <script>
@@ -102,12 +79,10 @@ export default {
       },
       externalsStatus: {
         'mongodb': false,
-        'management': false,
-        'health': false,
-        'enrollment': false,
-        'auth': false,
-        'analytics': false,
-        'telematics': false
+        'redis': false,
+        'sqlserver': false,
+        'zookeeper': false,
+        'kafka': false
       }
     }
   },
@@ -159,4 +134,34 @@ export default {
 
 <style>
 @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
+.fcs-column {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fcs-column, .reading, .column, .description { 
+  cursor: pointer;
+}
+.fcs-column .app-container {
+  color: #000;
+  border: none;
+  border-radius: 45px;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease 0s;
+  outline: none;
+  padding: 15px;
+}
+
+.fcs-column .app-container:hover {
+  background-color: #c2c9e4;
+  box-shadow: 0px 15px 20px rgba(194,201,228, 0.4);
+  color: #fff;
+  transform: translateY(-7px);
+}
+.btn.btn-default a{
+    color: black;
+    text-decoration: none;
+}
+
 </style>