(feature) Update UI & Resource Availability

src/servers/RconView.jsx

@@ -0,0 +1,53 @@
+import { useState, useEffect, useRef } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import RconSocket from "./RconSocket.js";
+import "@mcl/css/rcon.css";
+
+export default function RconView(props) {
+  const { serverName } = props;
+  const logsRef = useRef(0);
+  const [cmd, setCmd] = useState("");
+  const [logs, setLogs] = useState([]);
+  const [rcon, setRcon] = useState({});
+  const updateCmd = (e) => setCmd(e.target.value);
+  useEffect(function () {
+    setRcon(new RconSocket(setLogs, serverName));
+    return () => {
+      if (rcon && typeof rcon.disconnect === "function") rcon.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    logsRef.current.scrollTo(0, logsRef.current.scrollHeight);
+  }, [rcon.logs]);
+
+  function sendCommand() {
+    rcon.send(cmd);
+    setCmd("");
+  }
+
+  return (
+    <Box>
+      <div className="rconLogsWrapper" ref={logsRef}>
+        {logs.map((v, k) => (
+          <Box key={k}>
+            {v}
+            <br />
+          </Box>
+        ))}
+      </div>
+      <Box className="rconActions">
+        <TextField
+          id="outlined-basic"
+          label="Command"
+          variant="outlined"
+          value={cmd}
+          onChange={updateCmd}
+        />
+        <Button onClick={sendCommand}>Send</Button>
+      </Box>
+    </Box>
+  );
+}