Merge branch 'dev'

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"
+  }
+}

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 (
+    <div>
+      <GlobalStyle />
+      <KnobSection />
+      <button
+        type="button"
+        onClick={() => {
+          dispatch(connect());
+        }}
+      >
+        connect
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          dispatch(disconnect());
+        }}
+      >
+        disconnect
+      </button>
+      <button
+        type="button"
+        onClick={() => {
+          electronStore.clear();
+        }}
+      >
+        reset storage
+      </button>
+      <Select
+        value={portSelectionValue}
+        onChange={handlePortChange}
+        options={options}
+      />
+    </div>
+  );
+};
+export default App;

Dashboard/src/redux/store/index.ts

@@ -0,0 +1,38 @@
+import thunk from "redux-thunk";
+import { createStore, applyMiddleware } from "redux";
+import { RootAction, RootState } from "typesafe-actions";
+import { persistStore, persistReducer } from "redux-persist";
+import createElectronStorage from "redux-persist-electron-storage";
+
+import ElectronStore from "electron-store";
+import composeEnhancers from "./utils";
+import rootReducer from "./root-reducer";
+
+const middlewares = [thunk];
+
+const enhancer = composeEnhancers(applyMiddleware(...middlewares));
+
+export const electronStore = new ElectronStore();
+
+createElectronStorage({
+  electronStore,
+});
+
+const persistConfig = {
+  key: "serialConnection",
+  storage: createElectronStorage({
+    electronStore,
+  }),
+  blacklist: ["portController"],
+};
+
+export const persistedReducer = persistReducer(persistConfig, rootReducer);
+const initialState = {};
+
+export const store = createStore<RootState, RootAction, any, any>(
+  persistedReducer,
+  initialState,
+  enhancer,
+);
+
+export const persistor = persistStore(store);

Dashboard/src/redux/store/types.d.ts

@@ -0,0 +1,18 @@
+import { StateType, ActionType } from "typesafe-actions";
+import { ThunkAction } from "redux-thunk";
+import rootAction from "./root-action";
+import { persistedReducer, store } from "./index";
+
+declare module "typesafe-actions" {
+  export type Store = StateType<typeof store>;
+
+  export type RootState = StateType<typeof persistedReducer>;
+
+  export type RootAction = ActionType<typeof rootAction>;
+
+  export type ThunkResult<R> = ThunkAction<R, RootState, unknown, RootAction>;
+
+  interface Types {
+    RootAction: RootAction;
+  }
+}

modules/dashboard/src/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render } from "react-dom";
 import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
-import store, { persistor } from "./redux/store";
+import { store, persistor } from "./redux/store";
 
 import App from "./App";