basic gcode sender thing

App/src/App.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
+import { GcodeSender } from "~GcodeSender";
 
 export function AppComponent() {
-    return <div>Hello</div>;
+    return <GcodeSender />;
 }
 
 export const App = AppComponent;

App/src/GcodeSender.tsx

@@ -0,0 +1,106 @@
+import * as React from "react";
+import { IEggbotStatus, getStatus, putCommand } from "~api/eggbot";
+
+interface IGcodeSenderComponentState {
+    eggbotStatus: IEggbotStatus | null;
+    gcodeSet: boolean;
+    gcodeInput: string;
+
+    gcodeLinesSent: string[];
+    gcodeLinesQueue: string[];
+
+    executing: boolean;
+}
+
+const defaultState: IGcodeSenderComponentState = {
+    eggbotStatus: null,
+    gcodeSet: false,
+    gcodeInput: "",
+    executing: false,
+    gcodeLinesSent: [],
+    gcodeLinesQueue: [],
+};
+
+export class GcodeSenderComponent extends React.PureComponent<
+    {},
+    IGcodeSenderComponentState
+> {
+    constructor() {
+        super(null);
+        this.state = defaultState;
+
+        this.handleInputChange = this.handleInputChange.bind(this);
+        this.handleSend = this.handleSend.bind(this);
+        this.update = this.update.bind(this);
+
+        setInterval(this.update, 100);
+    }
+
+    public handleInputChange(
+        event:
+            | React.FormEvent<HTMLInputElement>
+            | React.FormEvent<HTMLTextAreaElement>,
+    ) {
+        const target = event.currentTarget;
+        const value = target.value;
+        const name = target.name;
+
+        this.setState({
+            [name]: value,
+        } as any);
+    }
+
+    public handleSend() {
+        const lines = this.state.gcodeInput.split("\n");
+        this.setState({ gcodeLinesQueue: lines, executing: true });
+    }
+
+    public async update() {
+        const status = await getStatus();
+        console.log(status);
+        const gcodeLinesQueue = [...this.state.gcodeLinesQueue];
+        const gcodeLinesSent = [...this.state.gcodeLinesSent];
+        const { executing } = this.state;
+        if (executing && status.commandQueue < 5) {
+            if (gcodeLinesQueue && gcodeLinesQueue.length > 0) {
+                const command = gcodeLinesQueue.shift();
+                putCommand(command.substr(0, 50));
+                gcodeLinesSent.push(command);
+            }
+        }
+
+        this.setState({ gcodeLinesQueue, gcodeLinesSent });
+    }
+
+    render() {
+        const queuedCommands = this.state.gcodeLinesQueue.map(el => (
+            <div>{el}</div>
+        ));
+
+        const executedCommands = this.state.gcodeLinesSent.map(el => (
+            <div>{el}</div>
+        ));
+
+        return (
+            <div>
+                {this.state.executing ? (
+                    <div>
+                        <div style={{ color: "green" }}>{executedCommands}</div>
+                        <div>{queuedCommands}</div>
+                    </div>
+                ) : (
+                    <div>
+                        <textarea
+                            name="gcodeInput"
+                            value={this.state.gcodeInput}
+                            onChange={this.handleInputChange}
+                        />
+                        <button onClick={this.handleSend}>send</button>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export const GcodeSender = GcodeSenderComponent;

App/src/api/eggbot/index.ts

@@ -0,0 +1,20 @@
+import { fetchJSON } from "../utils";
+
+export interface IEggbotStatus {
+    commandQueue: number;
+    eggDia: number;
+    eggLen: number;
+    feedrate: number;
+    mmE: number;
+    mmS: number;
+    pEng: number;
+    xLim: number;
+}
+
+export async function putCommand(command: string) {
+    return fetchJSON("/putCommand", "POST", command);
+}
+
+export async function getStatus() {
+    return fetchJSON("/getStatus", "GET");
+}

App/src/api/utils.ts

@@ -0,0 +1,22 @@
+const root = "http://eggbot.local";
+
+export async function fetchJSON(
+    path: string,
+    method: string,
+    body?: string | object,
+    headers?: Record<string, string>,
+) {
+    if (typeof body === "object") {
+        body = JSON.stringify(body);
+    }
+    const response = await fetch(root + path, {
+        method,
+        body,
+        headers: {
+            ...headers,
+            "Content-Type": "application/json",
+        },
+    });
+    const json = await response.json();
+    return json;
+}

App/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Writer</title>
+    <title>Eggbot</title>
 </head>
 <body>
     <div id="body">