feat: left panel settings

src/components/molecules/LeftSidePanelSettings.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { Button, MenuItem, TextField, Typography } from "@mui/material";
+import { Dropdown } from "../atoms/DropdownMui";
+import { RunSettings } from "./RunSettings";
+import { useSocketStore } from "../../context/socket";
+
+interface LeftSidePanelSettingsProps {
+  params: any[]
+  settings: RunSettings,
+  setSettings: (setting: RunSettings) => void
+}
+
+export const LeftSidePanelSettings = ({params, settings, setSettings}: LeftSidePanelSettingsProps) => {
+  const { socket } = useSocketStore();
+
+  return (
+    <div style={{ display: 'flex', flexDirection:'column', alignItems: 'flex-start'}}>
+      { params.length !== 0 && (
+          <React.Fragment>
+            <Typography>Parameters:</Typography>
+            { params?.map((item: string, index: number) => {
+              return <TextField
+                sx={{margin: '15px 0px'}}
+                value={settings.params ? settings.params[item] : ''}
+                key={`param-${index}`}
+                type="string"
+                label={item}
+                required
+                onChange={(e) => setSettings(
+                  {
+                    ...settings,
+                    params: settings.params
+                      ? {
+                        ...settings.params,
+                        [item]: e.target.value,
+                      }
+                      : {
+                        [item]: e.target.value,
+                      },
+                  })}
+              />
+            }) }
+          </React.Fragment>
+      )}
+      <Typography sx={{margin: '15px 0px'}}>Interpreter:</Typography>
+      <TextField
+        type="number"
+        label="maxConcurrency"
+        required
+        onChange={(e) => setSettings(
+          {
+            ...settings,
+            maxConcurrency: parseInt(e.target.value),
+          })}
+        defaultValue={settings.maxConcurrency}
+      />
+      <TextField
+        sx={{margin: '15px 0px'}}
+        type="number"
+        label="maxRepeats"
+        required
+        onChange={(e) => setSettings(
+          {
+            ...settings,
+            maxRepeats: parseInt(e.target.value),
+          })}
+        defaultValue={settings.maxRepeats}
+      />
+      <Dropdown
+        id="debug"
+        label="debug"
+        value={settings.debug?.toString()}
+        handleSelect={(e) => setSettings(
+          {
+            ...settings,
+            debug: e.target.value === "true",
+          })}
+      >
+        <MenuItem value="true">true</MenuItem>
+        <MenuItem value="false">false</MenuItem>
+      </Dropdown>
+      <Button sx={{margin: '15px 0px'}} variant='contained'
+              onClick={() => socket?.emit('settings', settings)}>change</Button>
+    </div>
+  );
+}