#222 Removed COE Console

docs/first_steps.rst

@@ -30,7 +30,6 @@ Development Build
 1. clone the repository: ``git clone https://github.com/INTO-CPS-Association/into-cps-application/tree/development``
 2. change working directory to repository: ``cd into-cps-application``
 3. install node dependencies: ``npm install``
-4. install other resources: ``gulp init``
 5. build ui: ``gulp`` 
 6. run the test: ``npm test``
 

src/CoeServerStatusUiController.ts

@@ -124,8 +124,29 @@ export class CoeServerStatusUiController {
         btnLaunch.disabled = coe.isRunning();
         var btnStop = <HTMLButtonElement>document.getElementById("coe-btn-stop");
         btnStop.disabled = !coe.isRunning();
+        var btnBottomLaunch = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
+        var btnBottomStop = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
     }
 
+    public updateButtonState() {
+        var coe = IntoCpsApp.getInstance().getCoeProcess();
+        console.log("is running: ", coe.isRunning());
+        let button = <HTMLButtonElement>document.getElementById("coe-btn-launch-bottom");
+        let icon = <HTMLButtonElement>document.getElementById("coeIconColor");
+
+        if (coe.isRunning()) {
+            button.innerHTML = 'Stop COE <span id="coeIconColor" style="color:green" class="glyphicon glyphicon-one-fine-dot"></span>';
+            console.log("button: ", button);
+            button.setAttribute('onclick', 'coeViewController.stopCoe()');
+            icon.style.color = 'green';
+        } else {
+            button.innerHTML = 'Start COE <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>';
+            button.setAttribute('onclick', 'coeViewController.launchCoe()');
+            icon.style.color = 'red';
+        }
+    }
+
+
     consoleAutoScroll() {
         let div = this.outputDiv;
         if (!$(div).is(":visible"))
@@ -162,9 +183,10 @@ export class CoeServerStatusUiController {
         let index = coe.subscribePrepareSimulationCallback(this.type, this.prepareSimulationCallback());
         this.isSubscribed = true;
         this.setStatusIcons();
-
+        this.updateButtonState();
+
         if (!this.coeStatusRunning) {
-            window.setInterval(() => { this.setStatusIcons(); this.truncateVisibleLog() }, 3000);
+            window.setInterval(() => { this.setStatusIcons(); this.truncateVisibleLog(), this.updateButtonState()}, 3000);
             window.setInterval(() => { this.consoleAutoScroll() }, 800);
             this.coeStatusRunning = true;
         }
@@ -196,13 +218,16 @@ export class CoeServerStatusUiController {
         if (!coe.isRunning()) {
             coe.start();
         }
+
+        this.updateButtonState();
     }
 
     public stopCoe() {
         var coe = IntoCpsApp.getInstance().getCoeProcess();
         if (coe.isRunning()) {
             coe.stop();
         }
+        this.updateButtonState();
     }
 
 }

src/bottom.html

@@ -2,13 +2,14 @@
     <nav class="navbar navbar-default navbar-fixed-bottom intonav">
         <ul id="navigation" class="nav nav-pills justify-content-end">
                 <li>
-                        <a id="coe-status-btn-status" class="nav-link" href="#" title="Shows the output of the COE process. Provides options to Launch and Stop the COE.">COE Console
-                        <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>
-                        </a>
+                        <button type="button" id="coe-btn-launch-bottom" class="btn link-button" onclick="coeViewController.launchCoe()" title="Shows the output of the COE process. Provides options to Launch and Stop the COE.">
+                            Start COE
+                            <span id="coeIconColor" style="color:red" class="glyphicon glyphicon-one-fine-dot"></span>
+                        </button>
                         </li>
                         <li>
                         <a id="coe-log-btn-status" class="nav-link" href="#" title="Tails the COE log file (coe.log) if it is located in into-cps-projects\install_downloads\coe-working-dir">COE Log</a>
-                        </li>
+                        </li> 
 
 
         </ul>

src/preview.html

@@ -50,7 +50,7 @@
                       <span class="icon-bar"></span>
                       <span class="icon-bar"></span>
                     </button>
-                <a class="navbar-brand" href="#">COE Status</a>
+                <a class="navbar-brand" href="#">Console</a>
             </div>
 
             <!-- Collect the nav links, forms, and other content for toggling -->
@@ -60,15 +60,19 @@
                     <li title="Shows if COE console output is enabled.&#13;Relaunch the COE to enable output if &quot;X&quot; is shown."> Stream redirect: <span id="stream-status" class="glyphicon glyphicon-remove"></span></li>
                     <li>
                         <button type="button" id="coe-btn-launch" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.launchCoe()">
-                                <span class="glyphicon glyphicon-link"></span>Launch
+                                <span class="glyphicon glyphicon-link"></span>Start COE
                            </button>
                     </li>
                     <li>
                         <button type="button" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.clearOutput()">
-                                <span class="glyphicon glyphicon-link"></span>Clear
+                                <span class="glyphicon glyphicon-link"></span>Clear COE
                            </button>
                     </li>
-
+                    <li>
+                        <button type="button" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeLogViewController.clearOutput()">
+                            <span class="glyphicon glyphicon-link"></span>Clear Log
+                       </button>
+                    </li>
                     <li>
                         <button type="button" id="coe-btn-stop" class="btn btn-default navbar-xs navbar-btn btn-xs" onclick="coeViewController.stopCoe()">
                                 <span class="glyphicon glyphicon-remove"></span> Stop

src/styles.css

@@ -87,4 +87,15 @@ coe-configuration .alert-big {
     font-size: 1.0em;
     vertical-align: 0.1em;
     }
-
+
+.link-button{
+    display: block;
+    padding: 10px 15px;
+    color: #337ab7;
+    background-color: transparent;
+}
+
+.link-button:focus, .link-button:hover{
+    text-decoration: none;
+    background-color: #eee;
+}

test/startCOE.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from "@playwright/test";
+import { TestHelper } from "./TestHelpers/Testhelper";
+
+const helper = new TestHelper();
+
+test.describe("COE Button Tests", async () => {
+    test.beforeAll(async () => {
+        await helper.launch();
+    });
+
+    test.afterAll(async () => {
+        await helper.shutdown();
+    });
+
+    test('Initial state: Button should show "Start COE" with red circle', async () => {
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Start COE');
+
+        expect(await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('red');
+    });
+
+    test('Clicking button: Should change to "Stop COE" with green circle', async () => {
+        await helper.window.locator('#coe-btn-launch-bottom').click();
+
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Stop COE');
+
+        expect(await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('green');
+    });
+
+    test('Clicking "Stop COE": Should change back to "Start COE" with red circle', async () => {
+        // First click to start COE
+        await helper.window.locator('#coe-btn-launch-bottom').click(); 
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Stop COE');
+
+        expect (await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('green');
+
+        // Second click to stop COE
+        await helper.window.locator('#coe-btn-launch-bottom').click();
+        await helper.window.waitForTimeout(2000);
+
+        expect(await helper.window.locator('#coe-btn-launch-bottom')
+            .innerText()
+        ).toMatch('Start COE');
+
+        expect (await helper.window.locator('#coeIconColor')
+            .evaluate((span) => span.style.color)
+        ).toBe('red');
+
+    });
+});