Add traffic light

css/mainview.css

@@ -2,6 +2,17 @@ body {
     background: #306a9c;
     padding: 0;
     margin: 0;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    position: fixed;
+}
+
+.app-container {
+    position: relative;
+    height: 100%;
+    flex-grow: 100;
+    float: right;
 }
 
 .frame {
@@ -21,6 +32,13 @@ body {
     cursor: default;
 }
 
+.traffic-lights{
+    position: relative;
+    height: 100%;
+    width: 40px;
+    float: left;
+}
+
 .xbtn,
 .maxbtn {
     padding: 2px 4px;

css/trafficlights.css

@@ -0,0 +1,16 @@
+body {
+    --green: #02b302;
+    --red: #bd0202;
+    --yellow: #cfcf03;
+    background: var(--green);
+    margin: 0;
+}
+
+#trafficlights {
+    width: 100vw;
+    height: 200vw;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+}

js/mainview.js

@@ -21,7 +21,8 @@ $('.frame').not(".maximized").resizable({
     minWidth: 50,
     minHeight: 59
 }).draggable({
-    handle: ".topbar"
+    handle: ".topbar",
+    containment: "parent"
 });
 
 $('.swatches span').click(function () {

js/terminal.js

@@ -19,6 +19,8 @@ let ptyProcess = pty.spawn(shell, [], {
 // Initialize the front end for the shell process
 let xterm = new Terminal({
     cursorBlink: true,
+    rows: 18,
+    cols: 100
 });
 
 let commandToExecute = null;
@@ -49,7 +51,7 @@ messagebus.subscribe(handleMessage, "newcommand");
 messagebus.subscribe(handleMessage, "terminal");
 
 xterm.open(document.getElementById('terminal'));
-fit.fit(xterm);
+//fit.fit(xterm);
 
 xterm.on('data', (data) => {
     if (receiveCount > -1) return;

js/trafficlights.js

@@ -0,0 +1,106 @@
+const pty = require('node-pty');
+const os = require('os');
+const Config = require('electron-config');
+
+const config = new Config();
+const GIT_PATH = config.get('path');
+
+const trafficlightpath = "res/pics/traffic-lights-";
+
+const cmdStart = "echo '<<<GITA_CMD_START>>>';";
+const historyIgnore = "history -d $(history | tail -n 1);";
+const cmdUpdateEnd = "echo '<<<GITA_MCMD_END>>>';\n";
+const cmdMergeEnd = "echo '<<<GITA_UCMD_END>>>';\n";
+
+const branchUpdateCheck = "git fetch &> /dev/null; git status | grep 'git pull';";
+
+const stashCmd = "git stash &> /dev/null; git stash apply stash@{0} --index &> /dev/null;";
+const mergeSimulateCmd = "git merge --no-commit 2>&1 | grep error; git reset --hard &> /dev/null;";
+const restoreStashCmd = "git stash pop stash@{0} --index &> /dev/null;";
+
+const cmdOutMatch = "<<<GITA_CMD_START>>>\r\n[^]*<<<GITA_CMD_END>>>";
+
+let shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];
+
+let ptyProcess = pty.spawn(shell, [], {
+    name: 'xterm',
+    cwd: GIT_PATH,
+    env: process.env
+});
+
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+let body = document.getElementsByTagName('body')[0];
+let trafficLightsIcon = document.getElementById('trafficlights');
+
+let cmdOut = null;
+let cmdWrite = false;
+
+let isMergeError = false;
+let isUpdateError = false;
+
+function resetVars() {
+    cmdOut = "";
+    cmdWrite = true;
+}
+
+ptyProcess.on('data', function(data) {
+    if (data.match("<<<GITA_UCMD_END>>>\r\n")) {
+        cmdWrite = false;
+        gitUpdateCallback();
+    } else if (data.match("<<<GITA_MCMD_END>>>\r\n")) {
+        cmdWrite = false;
+        gitMergeConflictCallback();
+    }
+    if (cmdWrite) {
+        cmdOut += data;
+    }
+    if (data.match("<<<GITA_CMD_START>>>\r\n")) {
+        cmdOut = "";
+        cmdWrite = true;
+    }
+});
+
+function gitUpdateCheck() {
+    cmdOut = "";
+    ptyProcess.write(cmdStart + branchUpdateCheck + historyIgnore + cmdUpdateEnd);
+}
+
+function gitUpdateCallback() {
+    if (cmdOut != "") {
+        body.style.background = "var(--yellow)";
+        trafficLightsIcon.src = trafficlightpath + "yellow.png";
+        isUpdateError = true;
+    } else {
+        isUpdateError = false;
+    }
+    gitMergeConflictCheck();
+}
+
+function gitMergeConflictCheck() {
+    cmdOut = "";
+    ptyProcess.write(cmdStart + stashCmd + mergeSimulateCmd + restoreStashCmd + historyIgnore + cmdMergeEnd);
+}
+
+function gitMergeConflictCallback() {
+    if (cmdOut != "") {
+        body.style.background = "var(--red)";
+        trafficLightsIcon.src = trafficlightpath + "red.png";
+        isMergeError = true;
+    } else {
+        isMergeError = false;
+    }
+    setGreenIfSafe();
+}
+
+function setGreenIfSafe() {
+    if (!isUpdateError && !isMergeError) {
+        body.style.background = "var(--green)";
+        trafficLightsIcon.src = trafficlightpath + "green.png";
+    }
+    setTimeout(gitUpdateCheck, 2000);
+}
+
+gitUpdateCheck();

main.js

@@ -16,12 +16,13 @@ function createWelcomeWindow() {
     welcomeWindow = new BrowserWindow({
         width: 700,
         height: 600,
-        frame: false,
         resizable: false,
         titleBarStyle: 'customButtonsOnHover',
         "node-integration": true
     });
 
+    welcomeWindow.setMenu(null);
+
     welcomeWindow.loadURL(url.format({
         pathname: path.join(__dirname, './welcome.html'),
         protocol: 'file:',

mainview.html

@@ -9,47 +9,50 @@
 </head>
 
 <body>
-    <button class="btn" id="contributionviewicon">
-        <i data-feather="eye"></i>
-    </button>
+    <webview class="traffic-lights" src="./trafficlights.html" nodeintegration></webview>
+    <div class="app-container">
+        <button class="btn" id="contributionviewicon">
+            <i data-feather="eye"></i>
+        </button>
 
-    <div class="frame" id="terminal">
-        <div class="topbar blue">
-            <div class="swatches">
-                <span class="red"></span>
-                <span class="orange"></span>
-                <span class="yellow"></span>
-                <span class="green"></span>
-                <span class="blue"></span>
+        <div class="frame" id="terminal">
+            <div class="topbar blue">
+                <div class="swatches">
+                    <span class="red"></span>
+                    <span class="orange"></span>
+                    <span class="yellow"></span>
+                    <span class="green"></span>
+                    <span class="blue"></span>
+                </div>
+                <div class="maxbtn">
+                    <span></span>
+                </div>
+                <div class="xbtn">x</div>
             </div>
-            <div class="maxbtn">
-                <span></span>
+            <div class="content">
+                <div class="custom-wrapper">
+                    <webview style="height: inherit" src="./terminal.html" frameborder="0" nodeintegration></webview>
+                </div>
             </div>
-            <div class="xbtn">x</div>
         </div>
-        <div class="content">
-            <div class="custom-wrapper">
-                <webview src="./terminal.html" frameborder="0" nodeintegration></webview>
-            </div>
-        </div>
-    </div>
 
-    <div class="frame" id="visualiser">
-        <div class="topbar orange">
-            <div class="swatches">
-                <span class="red"></span>
-                <span class="orange"></span>
-                <span class="yellow"></span>
-                <span class="green"></span>
-                <span class="blue"></span>
+        <div class="frame" id="visualiser">
+            <div class="topbar orange">
+                <div class="swatches">
+                    <span class="red"></span>
+                    <span class="orange"></span>
+                    <span class="yellow"></span>
+                    <span class="green"></span>
+                    <span class="blue"></span>
+                </div>
+                <div class="maxbtn">
+                    <span></span>
+                </div>
+                <div class="xbtn">x</div>
             </div>
-            <div class="maxbtn">
-                <span></span>
+            <div class="content">
+                <webview src="./visualiser.html" frameborder="0" nodeintegration></webview>
             </div>
-            <div class="xbtn">x</div>
-        </div>
-        <div class="content">
-            <webview src="./visualiser.html" frameborder="0" nodeintegration></webview>
         </div>
     </div>
 

trafficlights.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="css/trafficlights.css" />
+</head>
+
+<body>
+    <img id="trafficlights" src="res/pics/traffic-lights-green.png">
+</body>
+<script src="js/trafficlights.js"></script>
+
+</html>