another little fix

nikelborm · May 3, 2021 · 0d81c39 · 0d81c39
1 parent 7f52c13
commit 0d81c39
Show file tree

Hide file tree

Showing 37 changed files with 1,242 additions and 790 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+    "plugins": [
+        "babel-plugin-styled-components",
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ]
+    ],
+    "presets": [
+        "react-app"
+    ]
+}
diff --git a/config-overrides/index.js b/config-overrides/index.js
@@ -0,0 +1,3 @@
+const { useBabelRc, override } = require("customize-cra");
+
+module.exports = override( useBabelRc() )
diff --git a/config-overrides/package.json b/config-overrides/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "config-overrides",
+  "version": "2.0.0",
+  "main": "index.js",
+  "license": "UNLICENSED",
+  "author": "nikelborm"
+}
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "express": "^4.17.1",
     "express-favicon": "^2.0.1",
     "mobx": "^6.2.0",
+    "mobx-logger": "^0.7.1",
     "mobx-react": "^7.1.0",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
@@ -36,9 +37,9 @@
   },
   "scripts": {
     "start": "node --trace-deprecation --trace-warnings index.js",
-    "startdev": "react-scripts start",
-    "build": "react-scripts build",
-    "buildp": "react-scripts build --profile",
+    "startdev": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "buildp": "react-app-rewired build --profile",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -72,15 +73,8 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.13.15",
-    "babel-plugin-styled-components": "^1.12.0"
-  },
-  "babel": {
-    "plugins": [
-      "babel-plugin-styled-components",
-      [ "@babel/plugin-proposal-decorators", { "legacy": true } ]
-    ],
-    "presets": [
-      "react-app"
-    ]
+    "babel-plugin-styled-components": "^1.12.0",
+    "customize-cra": "^1.0.0",
+    "react-app-rewired": "^2.1.8"
   }
 }
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,10 +1,22 @@
-import { StrictMode } from "react";
+import { Component } from "react";
 import { Route, Switch, Redirect, BrowserRouter } from "react-router-dom";
+import { configure }          from "mobx"
+import Alert                  from "react-bootstrap/Alert";
+import { enableLogging }      from "mobx-logger";
+import { AppWSChannel }       from "./AppWSChannel";
+import { Login }              from "./pages/Login";
+import { createPrefetcher }   from "./components/Prefetcher";
+import { PageContentWrapper } from "./components/PageContentWrapper";
 
-import { Login }            from "./pages/Login";
-import { createPrefetcher } from "./components/Prefetcher";
-import { PageContentWrapper }      from "./components/PageContentWrapper";
-import Alert                from "react-bootstrap/Alert";
+enableLogging();
+
+configure( {
+    enforceActions: "always",
+    computedRequiresReaction: true,
+    reactionRequiresObservable: true,
+    observableRequiresReaction: true,
+    disableErrorBoundaries: true
+} );
 
 const Fallback = () => (
     <PageContentWrapper>
@@ -30,19 +42,24 @@ const pagePrefetcher = ( page ) => createPrefetcher( {
 
 const AdminRouteContent = pagePrefetcher( "Admin" );
 
-const App = props => (
-    <StrictMode>
-        <BrowserRouter>
-            <Switch>
-                <Route path="/login/" component={ Login }/>
-                <Route path="/admin/" component={ AdminRouteContent }/>
-
-                <Route path="*">
-                    <Redirect to="/login/"/>
-                </Route>
-            </Switch>
-        </BrowserRouter>
-    </StrictMode>
-);
-
+class App extends Component {
+    componentDidMount() {
+        AppWSChannel.start();
+    }
+    render() {
+        return (
+            // <StrictMode>
+                <BrowserRouter>
+                    <Switch>
+                        <Route path="/login/" component={ Login }/>
+                        <Route path="/admin/" component={ AdminRouteContent }/>
+                        <Route path="*">
+                            <Redirect to="/login/"/>
+                        </Route>
+                    </Switch>
+                </BrowserRouter>
+            // </StrictMode>
+        );
+    }
+}
 export default App;
diff --git a/src/AppWSChannel.js b/src/AppWSChannel.js
@@ -1,10 +1,21 @@
 import { SelfHealingWebSocket } from "./SelfHealingWebSocket";
+import { connectWSHandlersFromAllSensorsRecordsStore } from "./WSHandlers/AllSensorsRecords";
+import { connectWSHandlersFromAuthInfoStore } from "./WSHandlers/AuthManager";
+import { connectWSHandlersFromPrinterStatusStore } from "./WSHandlers/PrinterStatus";
+import { connectWSHandlersFromTerminalLogsStore } from "./WSHandlers/TerminalLogs";
 
 const RegExpForSearchLinesWithTime = /time:\s?(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,}))/i;
 
 const { port, hostname, } = document.location;
 const protocol = document.location.protocol === "https:" ? "wss://" : "ws://";
-const WSAdress = protocol + hostname + ( port === "3001" ? ":3000" : "3001" );
+const WSAdress = protocol + hostname + (
+[ "3000", "3001", "3002" ].includes( port )
+    ? ":3000"
+    : ( port === ""
+        ? ""
+        : ":" + port
+    )
+);
 
 export const AppWSChannel = new SelfHealingWebSocket( WSAdress );
 
@@ -13,6 +24,11 @@ AppWSChannel.addMessageListener( data => {
     alert( "Ошибка, сообщите программисту этот текст: " + data.message );
 } );
 
+connectWSHandlersFromAllSensorsRecordsStore( AppWSChannel );
+connectWSHandlersFromAuthInfoStore( AppWSChannel );
+connectWSHandlersFromPrinterStatusStore( AppWSChannel );
+connectWSHandlersFromTerminalLogsStore( AppWSChannel );
+
 export const sendGCommand = ( command, isCapitalize ) => {
     AppWSChannel.send( {
         event: "sendGCommand",

diff --git a/src/SelfHealingWebSocket.js b/src/SelfHealingWebSocket.js
@@ -40,8 +40,9 @@ export class SelfHealingWebSocket {
         [ "close", this.#closingHandler, this.#closingHandler ],
     ];
     #connectEventHandlers = () => {
-        for ( const [ eventName, handlerFunction ] of this.#eventListenersStore ) {
-            this.connection?.addEventListener( eventName, handlerFunction );
+        console.log("#eventListenersStore: ", this.#eventListenersStore);
+        for ( const [ eventName, rawHandler, wrappedHandler ] of this.#eventListenersStore ) {
+            this.connection?.addEventListener( eventName, wrappedHandler || rawHandler );
         }
     };
     #respawnWebSocket = () => {
@@ -88,7 +89,7 @@ export class SelfHealingWebSocket {
         if( this.isAvailable() ) {
             this.connection?.send( data );
         } else {
-            console.log( "Соединение с сервером не установлено." );
+            console.log( "[error] Соединение с сервером не установлено." );
         }
     };
     send = data => this.sendRaw( JSON.stringify( data ) );

diff --git a/src/WSHandlers/AllSensorsRecords.js b/src/WSHandlers/AllSensorsRecords.js
@@ -0,0 +1,11 @@
+import { AllSensorsRecordsStore } from "../store/AllSensorsRecords";
+
+const RegExpForSearchTemperatureLines = /T:(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,})) \/(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,})) B:(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,})) \/(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,})) @:(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,})) B@:(([+-]{0,1}[0-9]{1,}[.][0-9]{1,})|([+-]{0,1}[0-9]{1,}))/;
+
+export const connectWSHandlersFromAllSensorsRecordsStore = AppWSChannel => {
+    AppWSChannel.addMessageListener( data => {
+        if ( data.event !== "printerSendedLine" ) return;
+        if( RegExpForSearchTemperatureLines.test( data.line ) ) return;
+        AllSensorsRecordsStore.parseTemperatureLineAndArrangeIntoDatasets( data.line, data.time );
+    } );
+}
diff --git a/src/WSHandlers/AuthManager.js b/src/WSHandlers/AuthManager.js
@@ -0,0 +1,18 @@
+import { action } from "mobx";
+import { AuthInfoStore, login } from "../store/AuthManager";
+
+export const connectWSHandlersFromAuthInfoStore = AppWSChannel => {
+    AppWSChannel.addEventListener( "open", action( () => {
+        if ( AuthInfoStore.amIAuthorized ) login( AuthInfoStore.storedPassword );
+    } ) );
+
+    AppWSChannel.addMessageListener( action( data => {
+        if ( data.event !== "userAuthReply" ) return;
+        AuthInfoStore.finishAuthProcess();
+        if ( data.report.isError ) {
+            alert( data.report.errorField + "   " + data.report.info );
+        } else {
+            AuthInfoStore.savePassword( data.reply.password );
+        }
+    } ) );
+}
diff --git a/src/WSHandlers/PrinterStatus.js b/src/WSHandlers/PrinterStatus.js
@@ -0,0 +1,30 @@
+import { PrinterStatusStore } from "../store/PrinterStatus";
+
+export const connectWSHandlersFromPrinterStatusStore = AppWSChannel => {
+    AppWSChannel.addEventListener( "close", () => {
+        PrinterStatusStore.setUnknownConnectionStatus();
+    } );
+
+    AppWSChannel.addMessageListener( data => {
+        switch ( data.event ) {
+            case "printerState": {
+                PrinterStatusStore.setPrinterConnectionStatus( data.isPrinterConnected );
+                break;
+            }
+            case "modelPrintingStatusWasChanged": {
+                if ( data.isPrintingActive ) {
+                    PrinterStatusStore.setActivePrintingStatus( {
+                        secondsCost: data.secondsCost,
+                        gCodeFileName: data.gCodeFileName,
+                        startTime: data.startTime,
+                        finishTime: data.finishTime,
+                    } );
+                } else {
+                    PrinterStatusStore.setInactivePrintingStatus();
+                }
+                break;
+            }
+            default: break;
+        }
+    } );
+}
diff --git a/src/WSHandlers/TerminalLogs.js b/src/WSHandlers/TerminalLogs.js
@@ -0,0 +1,64 @@
+import { TerminalLogsStore } from "../store/TerminalLogs";
+
+export const connectWSHandlersFromTerminalLogsStore = AppWSChannel => {
+    AppWSChannel.addEventListener( "open", () => {
+        TerminalLogsStore.addLineIntoTerminalLogs( {
+            time: new Date(),
+            prefixcontent: "wserver",
+            name: "connect-success",
+            linecontent: "Соединение с сервером установлено!"
+        } );
+    } );
+
+    AppWSChannel.addEventListener( "close", () => {
+        TerminalLogsStore.addLineIntoTerminalLogs( {
+            time: new Date(),
+            prefixcontent: "wserver",
+            name: "connect-error",
+            linecontent: "Соединение с сервером разорвано, переподключение..."
+        } );
+    } );
+
+    AppWSChannel.addMessageListener( data => {
+        switch ( data.event ) {
+            case "clientSendedGCommand": {
+                TerminalLogsStore.addLineIntoTerminalLogs( {
+                    time: new Date( data.time ),
+                    name: "client",
+                    prefixcontent: "command",
+                    linecontent: data.command,
+                    id: data.id
+                } );
+                break;
+            }
+            case "printerState": {
+                TerminalLogsStore.addLineIntoTerminalLogs( {
+                    time: new Date( data.time ),
+                    name: data.isPrinterConnected ? "connect-success" : "connect-error",
+                    prefixcontent: "printer",
+                    linecontent: data.isPrinterConnected ? "Принтер подключён" : "Принтер отключён"
+                } );
+                break;
+            }
+            case "clientSendedGCodeFile": {
+                TerminalLogsStore.addLineIntoTerminalLogs( {
+                    time: new Date( data.time ),
+                    name: "client",
+                    prefixcontent: "_.gcode",
+                    linecontent: data.preview
+                } );
+                break;
+            }
+            case "printerSendedLine": {
+                TerminalLogsStore.addLineIntoTerminalLogs( {
+                    time: new Date( data.time ),
+                    name: "printer",
+                    prefixcontent: "printer",
+                    linecontent: data.line
+                } );
+                break;
+            }
+            default: break;
+        }
+    } );
+}
diff --git a/src/components/FilePrintingStatusBar/components/CloseButton.jsx b/src/components/FilePrintingStatusBar/components/CloseButton.jsx
@@ -1,4 +1,4 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { PrinterStatusStore } from "../../../store/PrinterStatus";
 import { StyledButton } from "./StyledButton";
 

diff --git a/src/components/FilePrintingStatusBar/components/FileName.jsx b/src/components/FilePrintingStatusBar/components/FileName.jsx
@@ -1,4 +1,4 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Navbar from "react-bootstrap/Navbar";
 import { PrinterStatusStore } from "../../../store/PrinterStatus";
 

diff --git a/src/components/FilePrintingStatusBar/components/FilePrintingProgressBar.jsx b/src/components/FilePrintingStatusBar/components/FilePrintingProgressBar.jsx
@@ -1,13 +1,10 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { StyledProgressBar } from "./StyledProgressBar";
 import { PrinterStatusStore } from "../../../store/PrinterStatus";
 
-export const FilePrintingProgressBar = observer( () => {
-    const { isPrintingFinished, printingPercentFinished } = PrinterStatusStore;
-    return (
-        <StyledProgressBar
-            isPrintingFinished={ isPrintingFinished }
-            percent={ printingPercentFinished }
-        />
-    );
-} );
+export const FilePrintingProgressBar = observer( () => (
+    <StyledProgressBar
+        isPrintingFinished={ PrinterStatusStore.isPrintingFinished }
+        percent={ PrinterStatusStore.printingPercentFinished }
+    />
+) );
diff --git a/src/components/FilePrintingStatusBar/components/TimeInfo.jsx b/src/components/FilePrintingStatusBar/components/TimeInfo.jsx
@@ -1,4 +1,4 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { PrinterStatusStore } from "../../../store/PrinterStatus";
 import Navbar from "react-bootstrap/Navbar";
 import styled from "styled-components";

diff --git a/src/components/FilePrintingStatusBar/index.jsx b/src/components/FilePrintingStatusBar/index.jsx
@@ -4,7 +4,7 @@ import { CloseButton } from "./components/CloseButton";
 import { TimeInfo } from "./components/TimeInfo";
 import { CubeImage } from "./components/CubeImage";
 import { FileName } from "./components/FileName";
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import { PrinterStatusStore } from "../../store/PrinterStatus";
 
 export const FilePrintingStatusBar = observer( () => (

diff --git a/src/components/Menu/components/PrinterStatusBage.jsx b/src/components/Menu/components/PrinterStatusBage.jsx
@@ -1,4 +1,4 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import Badge from "react-bootstrap/Badge";
 import { PrinterStatusStore } from "../../../store/PrinterStatus";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const { useBabelRc, override } = require("customize-cra");

		module.exports = override( useBabelRc() )