diff --git a/Dashboard/package.json b/Dashboard/package.json new file mode 100644 index 0000000..449ceef --- /dev/null +++ b/Dashboard/package.json @@ -0,0 +1,123 @@ +{ + "name": "dashboard", + "author": { + "name": "GHOSCHT" + }, + "description": "", + "version": "2.1.0", + "main": "src/electron.js", + "private": true, + "build": { + "productName": "Light Control", + "appId": "lightcontrol.dashboard", + "buildDependenciesFromSource": true, + "npmRebuild": false, + "win": { + "target": [ + "nsis" + ], + "icon": "./assets/icons/win/icon.ico" + }, + "nsis": { + "oneClick": false, + "allowToChangeInstallationDirectory": true, + "include": "./scripts/installer.nsh" + }, + "directories": { + "buildResources": "assets", + "output": "release" + }, + "files": [ + "node_modules/**/*", + "src/*", + "package.json", + "build/**" + ], + "extraResources": [ + "./assets/**" + ] + }, + "homepage": "./src", + "scripts": { + "web": "webpack serve", + "build": "webpack --mode=production", + "start": "concurrently -k \"yarn web\" \"npm:electron\"", + "electron": "wait-on tcp:8080 && electron .", + "package": "yarn build && electron-builder --publish never", + "postinstall": "electron-builder install-app-deps", + "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx", + "lint:fix": "cross-env NODE_ENV=development eslint . --cache --fix --ext .js,.jsx,.ts,.tsx", + "remotedev": "redux-devtools --hostname=localhost --port=8000" + }, + "license": "ISC", + "dependencies": { + "@redux-devtools/cli": "1.0.0-9", + "@types/jest": "27.0.2", + "@types/node": "15.14.9", + "@types/react": "17.0.27", + "@types/react-dom": "17.0.9", + "@types/remote-redux-devtools": "0.5.5", + "@types/styled-components": "5.1.14", + "chalk": "4.1.2", + "electron-acrylic-window": "0.5.9", + "electron-devtools-installer": "3.2.0", + "electron-is-dev": "2.0.0", + "electron-localshortcut": "3.2.1", + "electron-squirrel-startup": "1.0.0", + "electron-store": "^8.0.1", + "fs-extra": "10.0.0", + "lodash": "^4.17.21", + "react": "17.0.2", + "react-dom": "17.0.2", + "react-redux": "7.2.5", + "react-select": "5.1.0", + "redux": "4.1.1", + "redux-persist": "^6.0.0", + "redux-persist-electron-storage": "^2.1.0", + "redux-thunk": "2.3.0", + "remote-redux-devtools": "0.5.16", + "screenz": "1.0.0", + "serialport": "9.2.4", + "sqlite3": "5.0.2", + "styled-components": "5.3.1", + "typesafe-actions": "5.1.0", + "typescript": "4.4.3" + }, + "devDependencies": { + "@babel/core": "7.15.5", + "@babel/preset-env": "7.15.6", + "@babel/preset-react": "7.14.5", + "@types/react-select": "5.0.0", + "@types/serialport": "8.0.2", + "@typescript-eslint/eslint-plugin": "4.33.0", + "@typescript-eslint/parser": "4.33.0", + "babel-loader": "8.2.2", + "concurrently": "6.3.0", + "cross-env": "7.0.3", + "css-loader": "6.3.0", + "electron": "13.5.1", + "electron-builder": "22.11.7", + "eslint": "7.32.0", + "eslint-config-airbnb": "18.2.1", + "eslint-plugin-import": "2.24.2", + "eslint-plugin-jsx-a11y": "6.4.1", + "eslint-plugin-react": "7.26.1", + "eslint-plugin-react-hooks": "4.2.0", + "file-loader": "6.2.0", + "fork-ts-checker-webpack-plugin": "6.3.3", + "html-webpack-plugin": "5.3.2", + "style-loader": "3.3.0", + "ts-loader": "9.2.6", + "wait-on": "6.0.0", + "webpack": "5.57.1", + "webpack-cli": "4.8.0", + "webpack-dev-server": "4.3.1" + }, + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ], + "bin": { + "dashboard": "./bin/start.js" + } +} diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx new file mode 100644 index 0000000..ef0d81d --- /dev/null +++ b/Dashboard/src/App.tsx @@ -0,0 +1,78 @@ +import React, { useState } from "react"; +import { createGlobalStyle } from "styled-components"; +import { useDispatch } from "react-redux"; +import Select from "react-select"; +import SerialPort from "serialport"; +import { connect, disconnect } from "./redux/actions/asyncSerialConnectionActions"; +import { setSerialPort } from "./redux/actions/serialConnectionActions"; +import KnobSection from "./Components/KnobSection"; +import { electronStore } from "./redux/store/index"; + +const GlobalStyle = createGlobalStyle` + html { + border-style: solid; + border-color: #363636; + border-width: 1px; + box-sizing: border-box; + height: 100%; + border-bottom-style: hidden; + border-right-style: hidden; + } +`; + +const options: [{value: string, label:string}] = [{ value: "placeholder", label: "Select Port" }]; + +const fetchPorts = async () => { + const data = await SerialPort.list(); + options.shift(); + data.forEach((comPort) => { options.push({ value: comPort.path, label: comPort.path }); }); +}; + +const App = () => { + const dispatch = useDispatch(); + + fetchPorts(); + + const [portSelectionValue, setPortSelectionValue] = useState(options[0]); + const handlePortChange = async (selectedOption: any) => { + setPortSelectionValue(selectedOption); + dispatch(setSerialPort(selectedOption.value)); + }; + + return ( +
+ + + + + +