better web app layout

App/src/CommandsList.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface ICommandsListProps {
+    gcodeLinesQueue: string[];
+    gcodeLinesSent: string[];
+}
+
+function CommandsListComponent({
+    gcodeLinesQueue,
+    gcodeLinesSent,
+}: ICommandsListProps) {
+    const queuedCommandsList = gcodeLinesQueue.map((el, i) => (
+        <li key={i}>{el}</li>
+    ));
+    const executedCommandsList = gcodeLinesSent.map((el, i) => (
+        <li style={{ color: "green" }} key={i}>
+            {el}
+        </li>
+    ));
+
+    return (
+        <ul style={{ listStyle: "none" }}>
+            {[...executedCommandsList, ...queuedCommandsList]}
+        </ul>
+    );
+}
+
+export const CommandsList = CommandsListComponent;

App/src/GcodeSender.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { IEggbotStatus, getStatus, putCommand } from "~api/eggbot";
 import GcodeVisualiser from "~GcodeVisualiser";
 import { parseCommand } from "~GcodeParser";
+import { CommandsList } from "~CommandsList";
+import { Container, Row, Col } from "react-bootstrap";
 
 interface IGcodeSenderComponentState {
     eggbotStatus: IEggbotStatus | null;
@@ -65,7 +67,6 @@ export class GcodeSenderComponent extends React.PureComponent<
         if (executing && status.commandQueue < 10) {
             if (gcodeLinesQueue && gcodeLinesQueue.length > 0) {
                 const command = gcodeLinesQueue.shift();
-                console.log(parseCommand(command));
                 putCommand(command.substr(0, 50));
                 gcodeLinesSent.push(command);
             }
@@ -77,36 +78,36 @@ export class GcodeSenderComponent extends React.PureComponent<
     render() {
         const { gcodeLinesQueue, gcodeLinesSent } = this.state;
 
-        const queuedCommandsList = gcodeLinesQueue.map(el => <div>{el}</div>);
-
-        const executedCommandsList = gcodeLinesSent.map(el => <div>{el}</div>);
-
         return (
-            <>
-                <div>
-                    {this.state.executing ? (
-                        <div>
-                            <div style={{ color: "green" }}>
-                                {executedCommandsList}
+            <Container>
+                <Row>
+                    <Col>
+                        {this.state.executing ? (
+                            <div>
+                                <CommandsList
+                                    gcodeLinesQueue={gcodeLinesQueue}
+                                    gcodeLinesSent={gcodeLinesSent}
+                                />
                             </div>
-                            <div>{queuedCommandsList}</div>
-                        </div>
-                    ) : (
-                        <div>
-                            <textarea
-                                name="gcodeInput"
-                                value={this.state.gcodeInput}
-                                onChange={this.handleInputChange}
-                            />
-                            <button onClick={this.handleSend}>send</button>
-                        </div>
-                    )}
-                </div>
-                <GcodeVisualiser
-                    gcodeLinesQueue={gcodeLinesQueue}
-                    gcodeLinesSent={gcodeLinesSent}
-                />
-            </>
+                        ) : (
+                            <div>
+                                <textarea
+                                    name="gcodeInput"
+                                    value={this.state.gcodeInput}
+                                    onChange={this.handleInputChange}
+                                />
+                                <button onClick={this.handleSend}>send</button>
+                            </div>
+                        )}
+                    </Col>
+                    <Col>
+                        <GcodeVisualiser
+                            gcodeLinesQueue={gcodeLinesQueue}
+                            gcodeLinesSent={gcodeLinesSent}
+                        />
+                    </Col>
+                </Row>
+            </Container>
         );
     }
 }

App/src/GcodeVisualiser.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Layer, Rect, Stage, Group, Line } from "react-konva";
-import { parseCommand, CommandType } from "~GcodeParser";
+import { parseCommand, CommandType, Command } from "~GcodeParser";
+import { ShapeConfig } from "konva/types/Shape";
 
 interface IGcodeVisualiserProps {
     gcodeLinesSent: string[];
@@ -11,6 +12,44 @@ const mult = 3;
 const width = 500;
 const height = 500;
 
+interface ILastPos {
+    x: number;
+    y: number;
+    eng: boolean;
+}
+
+function cmdToLine(cmds: string, color: string, lastPos: ILastPos) {
+    const command = parseCommand(cmds);
+    if (command.type === CommandType.G00 || command.type === CommandType.G01) {
+        const line = (
+            <Line
+                points={[
+                    lastPos.x * mult,
+                    height - lastPos.y * mult,
+                    (command.X ? command.X : lastPos.x) * mult,
+                    height - (command.Y ? command.Y : lastPos.y) * mult,
+                ]}
+                stroke={(command.Z ? command.Z : lastPos.eng) ? color : "blue"}
+                strokeWidth={(command.Z ? command.Z : lastPos.eng) ? 1 : 0.5}
+            />
+        );
+        if (command.X) {
+            lastPos.x = command.X;
+        }
+        if (command.Y) {
+            lastPos.y = command.Y;
+        }
+        if (command.Z) {
+            if (command.Z >= 0) {
+                lastPos.eng = false;
+            } else {
+                lastPos.eng = true;
+            }
+        }
+        return line;
+    }
+}
+
 export default class GcodeVisualiser extends React.PureComponent<
     IGcodeVisualiserProps,
     {}
@@ -19,98 +58,20 @@ export default class GcodeVisualiser extends React.PureComponent<
         super(props);
     }
     render() {
-        let lastPos: { x: number; y: number; eng: boolean } = {
+        const { gcodeLinesQueue, gcodeLinesSent } = this.props;
+
+        let lastPos: ILastPos = {
             x: 60,
             y: 0,
             eng: false,
         };
 
-        const { gcodeLinesQueue, gcodeLinesSent } = this.props;
-
         const sentLines = gcodeLinesSent.map(sl => {
-            const command = parseCommand(sl);
-            if (
-                command.type === CommandType.G00 ||
-                command.type === CommandType.G01
-            ) {
-                const line = (
-                    <Line
-                        points={[
-                            lastPos.x * mult,
-                            height - lastPos.y * mult,
-                            (command.X ? command.X : lastPos.x) * mult,
-                            height - (command.Y ? command.Y : lastPos.y) * mult,
-                        ]}
-                        stroke={
-                            (command.Z
-                              ? command.Z
-                              : lastPos.eng)
-                                ? "green"
-                                : "blue"
-                        }
-                        strokeWidth={
-                            (command.Z ? command.Z : lastPos.eng) ? 1 : 0.5
-                        }
-                    />
-                );
-                if (command.X) {
-                    lastPos.x = command.X;
-                }
-                if (command.Y) {
-                    lastPos.y = command.Y;
-                }
-                if (command.Z) {
-                    if (command.Z >= 0) {
-                        lastPos.eng = false;
-                    } else {
-                        lastPos.eng = true;
-                    }
-                }
-                return line;
-            }
+            return cmdToLine(sl, "green", lastPos);
         });
 
         const pendLines = gcodeLinesQueue.map(sl => {
-            const command = parseCommand(sl);
-            if (
-                command.type === CommandType.G00 ||
-                command.type === CommandType.G01
-            ) {
-                const line = (
-                    <Line
-                        points={[
-                            lastPos.x * mult,
-                            height - lastPos.y * mult,
-                            (command.X ? command.X : lastPos.x) * mult,
-                            height - (command.Y ? command.Y : lastPos.y) * mult,
-                        ]}
-                        stroke={
-                            (command.Z
-                              ? command.Z
-                              : lastPos.eng)
-                                ? "black"
-                                : "blue"
-                        }
-                        strokeWidth={
-                            (command.Z ? command.Z : lastPos.eng) ? 1 : 0.5
-                        }
-                    />
-                );
-                if (command.X) {
-                    lastPos.x = command.X;
-                }
-                if (command.Y) {
-                    lastPos.y = command.Y;
-                }
-                if (command.Z) {
-                    if (command.Z >= 0) {
-                        lastPos.eng = false;
-                    } else {
-                        lastPos.eng = true;
-                    }
-                }
-                return line;
-            }
+            return cmdToLine(sl, "black", lastPos);
         });
 
         return (

App/src/index.tsx

@@ -1,4 +1,5 @@
 import "normalize.css/normalize.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 import * as React from "react";
 import { render } from "react-dom";