104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import electron from "electron";
|
|
import React, { useState } from "react";
|
|
import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
|
|
import { DefaultButton } from "@fluentui/react/lib/Button";
|
|
import { ThemeProvider, PartialTheme } from "@fluentui/react/lib/Theme";
|
|
import { ComboBox, IComboBoxOption } from "@fluentui/react/lib/ComboBox";
|
|
import SerialPort from "serialport";
|
|
import { useAppDispatch, useAppSelector } from "../redux/hooks";
|
|
import { connect, disconnect, setSerialPort } from "../redux/slices/serialConnectionSlice";
|
|
|
|
type Proptypes = {
|
|
}
|
|
const dialogStyles = { main: { maxWidth: 450 } };
|
|
|
|
const myTheme: PartialTheme = {
|
|
palette: {
|
|
themePrimary: "#0078d4",
|
|
themeLighterAlt: "#eff6fc",
|
|
themeLighter: "#deecf9",
|
|
themeLight: "#c7e0f4",
|
|
themeTertiary: "#71afe5",
|
|
themeSecondary: "#2b88d8",
|
|
themeDarkAlt: "#106ebe",
|
|
themeDark: "#005a9e",
|
|
themeDarker: "#004578",
|
|
neutralLighterAlt: "#282828",
|
|
neutralLighter: "#313131",
|
|
neutralLight: "#3f3f3f",
|
|
neutralQuaternaryAlt: "#484848",
|
|
neutralQuaternary: "#4f4f4f",
|
|
neutralTertiaryAlt: "#6d6d6d",
|
|
neutralTertiary: "#c8c8c8",
|
|
neutralSecondary: "#d0d0d0",
|
|
neutralPrimaryAlt: "#dadada",
|
|
neutralPrimary: "#ffffff",
|
|
neutralDark: "#f4f4f4",
|
|
black: "#f8f8f8",
|
|
white: "#1f1f1f",
|
|
},
|
|
};
|
|
|
|
const modalProps = {
|
|
titleAriaId: "labelId",
|
|
subtitleAriaId: "subTextId",
|
|
isBlocking: false,
|
|
styles: dialogStyles,
|
|
};
|
|
const dialogContentProps = {
|
|
type: DialogType.close,
|
|
title: "Settings",
|
|
closeButtonAriaLabel: "Close",
|
|
};
|
|
|
|
const options: IComboBoxOption[] = [
|
|
];
|
|
|
|
const fetchPorts = async () => {
|
|
const data = await SerialPort.list();
|
|
options.splice(0, options.length);
|
|
data.forEach((comPort) => { options.push({ key: comPort.path, text: comPort.path }); });
|
|
};
|
|
|
|
const Settings: React.FC<Proptypes> = () => {
|
|
const [hidden, setHidden] = useState(true);
|
|
const ipcHandler = () => {
|
|
setHidden(false);
|
|
};
|
|
electron.ipcRenderer.on("show-settings", ipcHandler);
|
|
const dispatch = useAppDispatch();
|
|
const handlePortChange = async (option: IComboBoxOption | undefined) => {
|
|
if (option !== null && option !== undefined) {
|
|
dispatch(setSerialPort(option.key.toString()));
|
|
}
|
|
};
|
|
fetchPorts();
|
|
const selector = useAppSelector((state) => state);
|
|
console.log(selector.serialConnection.port);
|
|
return (
|
|
<ThemeProvider theme={myTheme}>
|
|
<Dialog
|
|
hidden={hidden}
|
|
onDismiss={() => { setHidden(true); }}
|
|
dialogContentProps={dialogContentProps}
|
|
modalProps={modalProps}
|
|
>
|
|
<ComboBox
|
|
label="COM Port"
|
|
options={options}
|
|
onMenuOpen={() => { fetchPorts(); }}
|
|
onChange={(_, option) => { handlePortChange(option); }}
|
|
selectedKey={selector.serialConnection.port}
|
|
disabled={selector.serialConnection.status.connected}
|
|
/>
|
|
|
|
<DialogFooter>
|
|
<DefaultButton primary disabled={selector.serialConnection.status.connected} onClick={() => { dispatch(connect()); }} text="Connect" />
|
|
<DefaultButton disabled={!selector.serialConnection.status.connected} onClick={() => { dispatch(disconnect()); }} text="Disconnect" />
|
|
</DialogFooter>
|
|
</Dialog>
|
|
</ThemeProvider>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|