Completed basic POS test application

typesend · Jul 19, 2017 · 5b1bce1 · 5b1bce1
1 parent 215725f
commit 5b1bce1
Show file tree

Hide file tree

Showing 43 changed files with 1,400 additions and 928 deletions.
diff --git a/app/app.global.css b/app/app.global.css
@@ -8,6 +8,10 @@ body {
   background-image: linear-gradient(45deg, rgba(0, 216, 255, 0.5) 10%, rgba(0, 1, 127, 0.7));
   font-family: Arial, Helvetica, Helvetica Neue, serif;
   overflow-y: hidden;
+
+  /* disable text selection */
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 }
 
 h2 {

diff --git a/app/app.html b/app/app.html
@@ -15,7 +15,7 @@
       }());
     </script>
   </head>
-  <body>
+  <body class="app">
     <div id="root"></div>
     <script>
       {

diff --git a/app/components/Counter.css b/app/components/Counter.css
@@ -13,7 +13,7 @@
 
 .btnGroup {
   position: relative;
-  top: 500px;
+  top: 400px;
   width: 480px;
   margin: 0 auto;
 }

diff --git a/app/components/CustomerWindow.css b/app/components/CustomerWindow.css
@@ -0,0 +1,34 @@
+.container {
+  text-align: center;
+}
+
+.logo {
+  width: 200px;
+}
+
+.container h2 {
+  font-size: 3rem;
+}
+
+.container a {
+  font-size: 1.4rem;
+}
+
+textarea {
+  font-size: 4em;
+  padding: 3px;
+  width: 50rem;
+}
+
+button {
+  margin: 2em;
+}
+
+.correct {
+  font-size: 3em;
+  background-color: #4CAF50;
+}
+.incorrect {
+  font-size: 3em;
+  background-color: #f44336;
+}
diff --git a/app/components/CustomerWindow.js b/app/components/CustomerWindow.js
@@ -0,0 +1,36 @@
+// @flow
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './CustomerWindow.css';
+import { ipcRenderer } from 'electron';
+
+export default class customerWindow extends Component {
+  render() {
+    const confirm = (e) => {
+      ipcRenderer.send('hide-customer-window');
+    };
+    return (
+      <div>
+        <div className={styles.container} data-tid="container">
+          <img className={styles.logo} src="../resources/images/dmvlogo.png" />
+          <h2>Please confirm your address</h2>
+          <div>
+            <textarea>
+              505 Rhode Island Ave NW
+              Washington, DC 20001
+            </textarea>
+            <p>
+              <button className={styles.correct} onClick={confirm}>Correct</button>
+              <button className={styles.incorrect} onClick={confirm}>Incorrect</button>
+            </p>
+          </div>
+          <small>
+            We are using node {process.versions.node},
+            Chromium {process.versions.chrome},
+            and Electron {process.versions.electron}.
+          </small>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/app/components/Home.css b/app/components/Home.css
@@ -1,12 +1,13 @@
 .container {
-  position: absolute;
-  top: 30%;
-  left: 10px;
   text-align: center;
 }
 
+.logo {
+  width: 200px;
+}
+
 .container h2 {
-  font-size: 5rem;
+  font-size: 3rem;
 }
 
 .container a {

diff --git a/app/components/Home.js b/app/components/Home.js
@@ -8,8 +8,16 @@ export default class Home extends Component {
     return (
       <div>
         <div className={styles.container} data-tid="container">
-          <h2>Home</h2>
-          <Link to="/counter">to Counter</Link>
+          <img className={styles.logo} src="../resources/images/dmvlogo.png" />
+          <h2>Main Technician Window</h2>
+          <p><Link to="/multiwindow">Multi-window Example</Link></p>
+          <p><Link to="/counter">Counter Example</Link></p>
+
+          <small>
+            We are using node {process.versions.node},
+            Chromium {process.versions.chrome},
+            and Electron {process.versions.electron}.
+          </small>
         </div>
       </div>
     );

diff --git a/app/components/WindowTest.css b/app/components/WindowTest.css
@@ -0,0 +1,15 @@
+.container {
+  text-align: center;
+}
+
+.logo {
+  width: 200px;
+}
+
+.container h2 {
+  font-size: 3rem;
+}
+
+.container a {
+  font-size: 1.4rem;
+}
diff --git a/app/components/WindowTest.js b/app/components/WindowTest.js
@@ -0,0 +1,27 @@
+// @flow
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import styles from './WindowTest.css';
+import { ipcRenderer } from 'electron';
+
+export default class WindowTest extends Component {
+  render() {
+    const showCustomerWindow = (e) => {
+      ipcRenderer.send('show-customer-window');
+    };
+    return (
+      <div>
+        <div className={styles.backButton} data-tid="backButton">
+          <Link to="/">
+            <i className="fa fa-arrow-left fa-3x" />
+          </Link>
+        </div>
+        <div className={styles.container} data-tid="container">
+          <img className={styles.logo} src="../resources/images/dmvlogo.png" />
+          <h2>Technician Window</h2>
+          <p><button onClick={showCustomerWindow}>Confirm Address</button></p>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/app/containers/CustomerWindowPage.js b/app/containers/CustomerWindowPage.js
@@ -0,0 +1,17 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Counter from '../components/Counter';
+import * as CounterActions from '../actions/counter';
+import CustomerWindow from '../components/CustomerWindow';
+
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(CounterActions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(CustomerWindow);
diff --git a/app/containers/HomePage.js b/app/containers/HomePage.js
@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import Home from '../components/Home';
 
+
 export default class HomePage extends Component {
   render() {
     return (

diff --git a/app/containers/WindowTestPage.js b/app/containers/WindowTestPage.js
@@ -0,0 +1,17 @@
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import Counter from '../components/Counter';
+import * as CounterActions from '../actions/counter';
+import WindowTest from '../components/WindowTest';
+
+function mapStateToProps(state) {
+  return {
+    counter: state.counter
+  };
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators(CounterActions, dispatch);
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(WindowTest);
diff --git a/app/main.dev.js b/app/main.dev.js
@@ -10,10 +10,12 @@
  *
  * @flow
  */
-import { app, BrowserWindow } from 'electron';
+import { app, screen, BrowserWindow, ipcMain } from 'electron';
 import MenuBuilder from './menu';
+import path from 'path';
 
 let mainWindow = null;
+let customerWindow = null;
 
 if (process.env.NODE_ENV === 'production') {
   const sourceMapSupport = require('source-map-support');
@@ -53,34 +55,112 @@ app.on('window-all-closed', () => {
   }
 });
 
+function findDisplays () {
+  const displays = screen.getAllDisplays();
+  const primaryDisplay = screen.getPrimaryDisplay();
+  const secondaryDisplay = displays.find((display) => {
+    return display.bounds.x !== 0 || display.bounds.y !== 0;
+  });
+  const touchscreenDisplay = displays.find((display) => {
+    return display.touchSupport == 'available';
+  });
+  return {
+    primaryDisplay,
+    secondaryDisplay,
+    touchscreenDisplay
+  };
+}
 
 app.on('ready', async () => {
   if (process.env.NODE_ENV === 'development' || process.env.DEBUG_PROD === 'true') {
     await installExtensions();
   }
 
+  console.log(findDisplays());
+  const { primaryDisplay, secondaryDisplay, touchscreenDisplay } = findDisplays();
+  const customerDisplay = touchscreenDisplay || secondaryDisplay;
+
+  screen.on('display-added', (e, newDisplay) => {
+    alert('display-added id: ' + newDisplay.id);
+  });
+  screen.on('display-removed', (e, oldDisplay) => {
+    alert('display-removed id: ' + oldDisplay.id);
+  });
+  screen.on('display-metrics-changed', (e, display, changedMetrics) => {
+    alert('display-metrics-changed:\n' + changedMetrics.join('\n'));
+  });
+
+  const resizeToFitDisplay = function (window, display) {
+    const {x, y, width, height} = display.workArea;
+    window.setBounds({x, y, width, height});
+  }
+
   mainWindow = new BrowserWindow({
     show: false,
-    width: 1024,
-    height: 728
+    minWidth: 1024,
+    minHeight: 728,
+    frame: true,
+    center: true,
+    title: 'Delight :: Technician Window'
   });
-
   mainWindow.loadURL(`file://${__dirname}/app.html`);
-
-  // @TODO: Use 'ready-to-show' event
-  //        https://github.com/electron/electron/blob/master/docs/api/browser-window.md#using-ready-to-show-event
   mainWindow.webContents.on('did-finish-load', () => {
     if (!mainWindow) {
       throw new Error('"mainWindow" is not defined');
     }
     mainWindow.show();
     mainWindow.focus();
   });
-
+  mainWindow.once('ready-to-show', () => {
+    console.log('mainWindow ready-to-show event')
+  });
   mainWindow.on('closed', () => {
     mainWindow = null;
+    if (customerWindow) customerWindow.close();
   });
 
   const menuBuilder = new MenuBuilder(mainWindow);
   menuBuilder.buildMenu();
+
+  customerWindow = new BrowserWindow({
+    title: 'Delight :: Customer Window',
+    show: false,
+    minWidth: 640,
+    minHeight: 480,
+    frame: false,
+    center: true,
+    resizable: false,
+    minimizable: false,
+    closable: true
+  });
+  customerWindow.loadURL(`file://${__dirname}/app.html#/customer`);
+  customerWindow.webContents.on('did-finish-load', () => {
+    console.log('customerWindow did-finish-load event');
+    if (!customerWindow) {
+      throw new Error('"customerWindow" is not defined');
+    }
+    resizeToFitDisplay(customerWindow, customerDisplay);
+    customerWindow.webContents.send('show-test-route');
+  });
+  customerWindow.once('ready-to-show', () => {
+    console.log('customerWindow ready-to-show event');
+  });
+  customerWindow.on('closed', () => {
+    console.warn('customerWindow close event');
+    customerWindow = null;
+  });
+
+  ipcMain.on('show-customer-window', () => {
+    console.log('show-customer-window');
+    if (!customerWindow.isVisible()) {
+      customerWindow.show();
+      customerWindow.focus();
+    }
+  });
+
+  ipcMain.on('hide-customer-window', () => {
+    console.log('hide-customer-window');
+    customerWindow.hide();
+  });
+
 });
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -12,6 +12,5 @@
   "scripts": {
     "postinstall": "npm rebuild --runtime=electron --target=1.6.6 --disturl=https://atom.io/download/atom-shell --build-from-source"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }
diff --git a/app/routes.js b/app/routes.js
@@ -4,10 +4,14 @@ import { Switch, Route } from 'react-router';
 import App from './containers/App';
 import HomePage from './containers/HomePage';
 import CounterPage from './containers/CounterPage';
+import WindowTestPage from './containers/WindowTestPage';
+import CustomerWindowPage from './containers/CustomerWindowPage';
 
 export default () => (
   <App>
     <Switch>
+      <Route path="/multiwindow" component={WindowTestPage} />
+      <Route path="/customer" component={CustomerWindowPage} />
       <Route path="/counter" component={CounterPage} />
       <Route path="/" component={HomePage} />
     </Switch>