More improvments

package.json

@@ -20,6 +20,7 @@
     "node-pty": "0.9.0",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
+    "systeminformation": "^4.26.4",
     "v8-compile-cache": "^2.1.0",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",

src/app/appTerminal.ts

@@ -7,7 +7,7 @@ import { LigaturesAddon } from 'xterm-addon-ligatures';
 import { Unicode11Addon } from 'xterm-addon-unicode11';
 import Options, { IOptions, ITheme } from '@/options/options';
 import AppWatcher from '@/app/appWatcher';
-import { remote } from 'electron';
+import { remote, clipboard } from 'electron';
 
 export default class AppTerminal {
 
@@ -36,6 +36,7 @@ export default class AppTerminal {
         // Listeners
         this.xterm.onResize((data: {cols: number, rows: number}) => this.onResize(data));
         this.xterm.onData((data: string) => this.onData(data));
+        this.xterm.onSelectionChange(() => clipboard.writeText(this.xterm.getSelection(), 'selection'));
         this.ptyProcess.onData((data: string) => this.onPtyData(data));
         this.ptyProcess.onExit(() => this.exit());
 

src/ui/App.vue

@@ -7,13 +7,15 @@
             </div>
             <terminal v-for="terminal in this.terminals" :key="terminal.index" :index="terminal.index" :current="current"/>
         </div>
+        <bottom-nav />
         <div class="border" />
     </div>
 </template>
 
 <script lang="ts">
-    import { Vue, Component, Watch } from 'vue-property-decorator';
+    import { Vue, Component } from 'vue-property-decorator';
     import TopNav from '@/ui/components/TopNav.vue';
+    import BottomNav from '@/ui/components/BottomNav.vue';
     import { ipcRenderer, remote } from 'electron';
     import Tab from '@/ui/components/Tab.vue';
     import Terminal from '@/ui/components/Terminal.vue';
@@ -24,6 +26,7 @@
         components: {
 
             TopNav,
+            BottomNav,
             Tab,
             Terminal,
         }
@@ -34,6 +37,8 @@
         private current: number = 0;
         private terminals: ITerminal[] = [];
 
+        private isDevelopment = process.env.NODE_ENV !== 'production';
+
         /**
          * Create the default terminal
          *
@@ -115,11 +120,11 @@
                 if(this.terminals[i].index === id) {
 
                     this.terminals.splice(i, 1);
-                    return;
+                    break;
                 }
             }
 
-            if(this.terminals.length === 0) {
+            if(this.terminals.length === 0 && !this.isDevelopment) {
 
                 remote.getCurrentWindow().close();
                 return;
@@ -180,7 +185,7 @@
     .main {
 
         width: 100vw;
-        height: calc(100vh - 30px);
+        height: calc(100vh - 30px - 20px);
 
         background-color: #0F0F0F;
     }

src/ui/components/BottomNav.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="bottom-nav">
+        <div class="group">
+            <p>{{ this.activeMem }} MB ({{ this.percent }}%)</p>
+            <div class="separator"></div>
+            <p>{{ this.cpu }}% CPU</p>
+        </div>
+        <div class="group">
+            <p>{{ this.uptime }}</p>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import { Vue, Component } from 'vue-property-decorator';
+    import system, { Systeminformation } from 'systeminformation';
+    import os from 'os';
+    import { formatUptime } from '@/utils/utils';
+
+    @Component
+    export default class BottomNav extends Vue {
+
+        private activeMem: number = 0;
+        private totalMem: number = 0;
+        private cpu: number = 0;
+        private uptime: string = '';
+
+        /**
+         * Fetch the informations every 1s
+         *
+         * @return void
+         */
+        private mounted(): void {
+
+            setInterval(() => this.fetchInformations(), 1000);
+        }
+
+        /**
+         * Fetch the informations
+         *
+         * @return void
+         */
+        private fetchInformations(): void {
+
+            this.fetchMemory();
+            this.fetchCpu();
+            this.fetchUptime();
+        }
+
+        /**
+         * Fetch the memory
+         *
+         * @return void
+         */
+        private fetchMemory(): void {
+
+            system.mem().then((result: Systeminformation.MemData) => {
+
+                this.activeMem = this.toMb(result.active);
+                this.totalMem = this.toMb(result.total);
+            });
+        }
+
+        /**
+         * Fetch the cpu
+         *
+         * @return void
+         */
+        private fetchCpu(): void {
+
+            system.currentLoad().then((result: Systeminformation.CurrentLoadData) => {
+
+                this.cpu = parseInt(result.currentload.toFixed(0));
+            });
+        }
+
+        /**
+         * Fetch the uptime
+         *
+         * @return void
+         */
+        private fetchUptime(): void {
+
+            this.uptime = formatUptime(os.uptime());
+        }
+
+        /**
+         * Get a percentage of the memory used
+         *
+         * @return string
+         */
+        private get percent(): string {
+
+            return (this.activeMem * 100 / this.totalMem).toFixed(0).toString();
+        }
+
+        /**
+         * Convert bytes to MB
+         *
+         * @param bytes
+         * @return number
+         */
+        private toMb(bytes: number): number {
+
+            return parseInt((bytes / 1048576).toFixed(0));
+        }
+    }
+</script>
+
+<style lang="scss">
+    .bottom-nav {
+
+        width: 100vw;
+        height: 20px;
+
+        background-color: #0F0F0F;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .group {
+
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+
+            .separator {
+
+                border: 1px solid #212121;
+                height: 10px;
+            }
+        }
+
+        p {
+
+            color: #646464;
+            margin: 0 10px;
+            font-size: 12px;
+            font-weight: 100;
+        }
+    }
+</style>

src/ui/components/Terminal.vue

@@ -134,7 +134,7 @@
 
         position: relative;
         width: calc(100vw - 30px) !important;
-        height: calc(100vh - 30px - 30px - 30px) !important;
+        height: calc(100vh - 30px - 30px - 30px - 20px) !important;
     }
 
     .xterm .xterm-screen canvas {

src/utils/utils.ts

@@ -2,3 +2,14 @@ const electron = require('electron');
 
 // The user data path
 export const userDataPath = (electron.app || electron.remote.app).getPath('userData');
+
+export const formatUptime = (sec: number) => {
+
+    const pad = (sec: number) => (sec < 10 ? '0' : '') + sec;
+
+    const hours = Math.floor(sec / (60*60));
+    const minutes = Math.floor(sec % (60*60) / 60);
+    const seconds = Math.floor(sec % 60);
+
+    return pad(hours) + ':' + pad(minutes) + ':' + pad(seconds);
+};

yarn.lock

@@ -8980,6 +8980,11 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+systeminformation@^4.26.4:
+  version "4.26.4"
+  resolved "https://registry.yarnpkg.com/systeminformation/-/systeminformation-4.26.4.tgz#ec855d64f3e28622788a96c7dcabb6b051def50a"
+  integrity sha512-4+AYe0SfjdQPHEFL0nAyFMWyBUe8c5DZdSHApeJrdAvem5yoE/eS7/dGChnKLAkr+AKAoKcnqucPv302jy2+aA==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"