Merge pull request #18 from Sienci-Labs/dev

Dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gSender",
-  "version": "1.9.22",
+  "version": "0.6.1",
   "description": "Electron sender for GRBL based CNC machines",
   "author": "Sienci Labs",
   "main": "./dist/cncjs/server-cli.js",
@@ -15,7 +15,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git@github.com:cncjs/cncjs.git"
+    "url": "https://github.com/Sienci-Labs/sender.git"
   },
   "license": "MIT",
   "engines": {
@@ -186,6 +186,7 @@
     "electron-store": "~3.2.0",
     "electron-titlebar": "0.0.3",
     "electron-titlebar-windows": "^3.0.0",
+    "electron-updater": "^4.3.8",
     "ensure-array": "~1.0.0",
     "errorhandler": "~1.5.0",
     "es5-shim": "~4.5.13",
@@ -262,7 +263,7 @@
     "registry-url": "~5.1.0",
     "rimraf": "~2.6.3",
     "semver": "~6.0.0",
-    "serialport": "^7.1.5",
+    "serialport": "~9.0.7",
     "serve-favicon": "~2.5.0",
     "serve-static": "~1.13.2",
     "session-file-store": "~1.2.0",

src/app/components/NavLogo/index.jsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import styles from './index.styl';
 
-const NavLogo = () => {
+const NavLogo = ({ updateAvailable = false, onClick }) => {
     return (
         <div className={styles.NavLogo}>
             <img alt="Sienci Logo" src="images/logo_sienci_100x100.png" />
+            {
+                updateAvailable &&
+                    <button title="New Version Available!" className={styles.updateNotification} onClick={onClick}>
+                        <i className="fas fa-download" />
+                    </button>
+            }
         </div>
     );
 };

src/app/components/NavLogo/index.styl

@@ -1,7 +1,37 @@
 .NavLogo {
   margin: 0 20px 0 10px;
+  position: relative;
   img {
     width: 40px;
     height: 40px;
   }
 }
+
+.updateNotification {
+  position: absolute;
+  display: flex;
+  align-items center;
+  justify-content center;
+  bottom: -0.5rem;
+  right: -1rem;
+  font-size: 1.2rem;
+  background-color: #06b881;
+  border-radius: 9999px;
+  width: 2rem;
+  height: 2rem;
+  color: #FFFFFF;
+  animation: bounce 1s infinite;
+  border: none;
+  outline: none;
+}
+
+@keyframes bounce {
+0%, 100% {
+    transform: translateY(-25%);
+animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
+}
+50% {
+    transform: translateY(0);
+animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
+}
+}

src/app/containers/Header/Header.jsx

@@ -7,11 +7,13 @@ import settings from 'app/config/settings';
 import combokeys from 'app/lib/combokeys';
 import controller from 'app/lib/controller';
 import i18n from 'app/lib/i18n';
+import pubsub from 'pubsub-js';
 import NavbarConnection from 'app/widgets/NavbarConnection';
 import styles from './index.styl';
 import NavLogo from '../../components/NavLogo';
 import NavSidebar from '../NavSidebar';
 
+
 //const releases = 'https://github.com/cncjs/cncjs/releases';
 
 
@@ -240,11 +242,16 @@ class Header extends PureComponent {
         this.setState({ wizardDisabled: true });
     }
 
+    toggleUpdateToast() {
+        pubsub.publish('showUpdateToast');
+        console.log('show');
+    }
+
     render() {
         return (
             <div className={styles.navBar}>
                 <div className={styles.primary}>
-                    <NavLogo />
+                    <NavLogo updateAvailable={true} onClick={() => this.toggleUpdateToast()} />
                     <NavbarConnection
                         state={this.state}
                         actions={this.actions}

src/app/containers/Preferences/General/JogSpeeds.js

@@ -50,7 +50,6 @@ export default class JogSpeeds extends Component {
         const id = e.target.id;
         const value = Number(e.target.value);
         const { currentPreset, units } = this.state;
-        // const { jogSpeeds } = this.state;
 
         if (value <= 0) {
             return;
@@ -86,14 +85,8 @@ export default class JogSpeeds extends Component {
         };
         this.setState(prev => ({ currentPreset: {
             ...prev.currentPreset,
-            in: {
-                ...prev.currentPreset?.in,
-                [id]: imperialValue
-            },
-            mm: {
-                ...prev.currentPreset?.in,
-                [id]: metricValue
-            },
+            in: newObj.in,
+            mm: newObj.mm,
         } }));
         store.replace('widgets.axes', updated);
     }

src/app/containers/Preferences/Preferences.jsx

@@ -139,6 +139,7 @@ class PreferencesPage extends PureComponent {
                 const tools = [...this.state.tools];
                 const tool = this.state.tool;
                 tools.push(tool);
+                tools.sort(this.toolSortCompare);
                 this.setState({
                     tools: tools
                 });
@@ -169,6 +170,7 @@ class PreferencesPage extends PureComponent {
                         }
                     }
                 });
+                pubsub.publish('probe:updated');
             },
             changeRetractionDistance: (e) => {
                 const probeSettings = { ...this.state.probeSettings };
@@ -256,6 +258,16 @@ class PreferencesPage extends PureComponent {
         this.probeConfig.set('probeFastFeedrate', probeSettings.fastFeedrate);
     }
 
+    toolSortCompare(a, b) {
+        if (a.metricDiameter < b.metricDiameter) {
+            return -1;
+        }
+        if (a.metricDiameter > b.metricDiameter) {
+            return 1;
+        }
+        return 0;
+    }
+
     convertToMetric(diameter) {
         return (diameter * 25.4).toFixed(3);
     }

src/app/containers/Workspace/UpdateAvailableAlert/UpdateAvailableAlert.jsx

@@ -0,0 +1,79 @@
+import React, { PureComponent } from 'react';
+import cx from 'classnames';
+import pubsub from 'pubsub-js';
+import styles from './index.styl';
+
+
+class UpdateAvailableAlert extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state = {
+            shown: false
+        };
+    }
+
+    actions = {
+        hideModal: () => {
+            this.setState({
+                shown: false
+            });
+        }
+    }
+
+    pubsubTokens = [];
+
+
+    subscribe () {
+        const tokens = [
+            pubsub.subscribe('showUpdateToast', (msg) => {
+                this.setState({
+                    shown: true
+                });
+            })
+        ];
+        this.pubsubTokens = this.pubsubTokens.concat(tokens);
+    }
+
+    unsubscribe () {
+        this.pubsubTokens.forEach((token) => {
+            pubsub.unsubscribe(token);
+        });
+        this.pubsubTokens = [];
+    }
+
+    componentDidMount() {
+        this.subscribe();
+    }
+
+    componentWillUnmount() {
+        this.unsubscribe();
+    }
+
+    render() {
+        const { shown } = this.state;
+        const actions = { ...this.actions };
+        return (
+            <div className={cx(styles.updateWrapper, { [styles.hideModal]: !shown })}>
+                <div className={styles.updateIcon}>
+                    <i className="fas fa-download" />
+                </div>
+                <div className={styles.updateContent}>
+                    <div>
+                        Update downloaded and available to install.  Restart now?
+                    </div>
+                    <button className={styles.restartButton}>
+                        Restart and Install
+                    </button>
+                </div>
+                <div className={styles.closeModal}>
+                    <button onClick={actions.hideModal}>
+                        <i className="fas fa-times" />
+                    </button>
+                </div>
+
+            </div>
+        );
+    }
+}
+
+export default UpdateAvailableAlert;

src/app/containers/Workspace/UpdateAvailableAlert/index.styl

@@ -0,0 +1,70 @@
+.update-wrapper {
+  background: #FFFFFF;
+  font-size: 1.1rem;
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+  z-index: 10000;
+  border-radius: 0.5rem;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items stretch;
+  border: solid 1px #d1d5db;
+  --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.hideModal {
+  display: none;
+}
+
+.update-icon {
+  display: flex;
+  flex-direction column;
+  color: #059669;
+  flex: 1
+  background: #111827;
+  align-items center;
+  justify-content center
+  padding: 0 0.5rem;
+  font-size: 2rem !important;
+}
+
+.update-content {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+}
+
+.restartButton {
+  background: #059669;
+  border: solid 1px #036949;
+  color: #FFFFFF;
+  padding: 0.25rem;
+  border-radius: 0.25rem;
+  outline: none;
+  margin-top: 0.5rem;
+
+  &:hover {
+    background: #04875e;
+  }
+}
+
+.close-modal {
+  padding: 0 0.5rem;
+  display: flex;
+  align-items center;
+  justify-content center
+
+  button {
+    background: none;
+    border: none;
+    outline: none
+    color: #4b5563;
+    text-align center;
+    i {
+      font-size: 2rem !important;
+    }
+  }
+}

src/app/containers/Workspace/Workspace.jsx

@@ -27,6 +27,7 @@ import {
     MODAL_FEEDER_WAIT,
     MODAL_SERVER_DISCONNECTED
 } from './constants';
+import UpdateAvailableAlert from './UpdateAvailableAlert/UpdateAvailableAlert';
 
 const WAIT = '%wait';
 
@@ -507,6 +508,7 @@ class Workspace extends PureComponent {
                     }}
                 >
                     <div className={classNames(styles.workspaceTable)}>
+                        <UpdateAvailableAlert />
                         <Header />
                         <div className={classNames(styles.workspaceTableRow, { [styles.reverseWorkspace]: reverseWidgets })}>
                             <DefaultWidgets

src/app/containers/Workspace/index.styl

@@ -20,6 +20,7 @@
     font-size: 1rem;
     line-height: 1.5rem;
     background: none;
+    position: relative;
     &::-webkit-scrollbar {
         display: none;
     }
@@ -58,6 +59,7 @@
         height: 100%;
         max-height: 100%;
         background-color: #d1d5db
+        position: relative;
     }
 
     .workspace-table-row {

src/app/widgets/Probe/index.jsx

@@ -793,7 +793,17 @@ class ProbeWidget extends PureComponent {
                 this.setState({
                     availableTools: store.get('workspace[tools]', [])
                 });
+            }),
+            pubsub.subscribe('probe:updated', (msg) => {
+                const touchplate = store.get('workspace[probeProfile]', {});
+                console.log(touchplate);
+                this.setState({
+                    touchplate: touchplate
+                }, () => {
+                    this.actions.generatePossibleProbeCommands();
+                });
             })
+
         ];
         this.pubsubTokens = this.pubsubTokens.concat(tokens);
     }