feat: add basic command sender

src/components/AppListControlsHeader/DeviceControl/DeviceView.tsx

@@ -1,5 +1,6 @@
 import { EspruinoDevice } from "../../../services/Espruino/interface";
 import { DeviceViewInstalledApps } from "./DeviceViewInstalledApps/DeviceViewInstalledApps";
+import { DeviceViewControls } from "./DeviceViewControls/DeviceViewControls";
 
 interface DeviceViewProps {
   device: EspruinoDevice;
@@ -9,14 +10,14 @@ export const DeviceView = (props: DeviceViewProps) => {
   return (
     <div className={props.className}>
       <h2>Device Info</h2>
+      <h3>Controls</h3>
+      <DeviceViewControls />
 
-      <br />
+      <h3>Installed Apps</h3>
       <DeviceViewInstalledApps
         installedApps={props.device.appsInstalled}
       />
 
-      <br />
-
       <pre>
         {JSON.stringify(props.device, null, 2)}
       </pre>

src/components/AppListControlsHeader/DeviceControl/DeviceViewControls/DeviceViewControls.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { UiButton } from "../../../Buttons/UiButton";
+import { css } from "@emotion/react";
+import { EspruinoComms } from "../../../../services/Espruino/Comms";
+
+export interface DeviceViewControlsProps {
+
+}
+
+const defaultCommand = `Bluetooth.println(
+  JSON.stringify(
+   JSON.parse(
+     require("Storage").read("setting.json")
+   ),
+   null,
+   2
+  )
+);
+`
+
+export const DeviceViewControls = () => {
+  const [command, setCommand] = useState(defaultCommand);
+  const [output, setOutput] = useState("");
+  return (
+    <div>
+      <form
+        onSubmit={async(e) => {
+          e.preventDefault();
+          console.log(command);
+          const res = await EspruinoComms.write(`\x10${command}\n`);
+          setOutput(res);
+        }}
+        css={css`
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+        `}
+      >
+        <label htmlFor="device-command-input">Send Comand</label>
+        <textarea
+          name="command"
+          placeholder=""
+          rows={5}
+          id="device-command-input"
+          value={command}
+          onChange={e => setCommand(e.target.value)}
+          css={css`
+            display: block;
+            width: 100%;
+            padding: 1rem;
+            font-size: 1rem;
+          `}
+        />
+        <div
+          css={css`
+            display: flex;
+            justify-content: flex-end;
+          `}
+        >
+          <UiButton type="submit">Send</UiButton>
+        </div>
+      </form>
+      Output:
+      {
+        output && (
+          <pre
+            css={css`
+              border: 1px solid black;
+              padding: 1rem;
+            `}
+          >{output}</pre>
+        )
+      }
+    </div>
+  );
+};