taylow · yarsanich · May 13, 2019 · May 15, 2019 · May 20, 2019 · May 30, 2019
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,5 @@ public/javascripts/*.map
 public/javascripts/*.js
 public/javascripts/**/*.map
 public/javascripts/**/*.js
+
+node_modules
diff --git a/README.md b/README.md
@@ -4,9 +4,6 @@ This project is a webapp-based implementation of the Energy in Schools hub that
 ## Feature Request and Issue Tracking
 Please add an issue if you wish for any additional features or discover any issues using this project. Tracking changes will keep things organised.
 
-## Local Server
-This WebBridge will require an install of the latest version of NodeJS.
-
 **Note: WebUSB is only available via a secure HTTPS connection or ``localhost`` for development.**
 
 ### Running
@@ -18,35 +15,34 @@ npm install
 npm start
 ```
 
-By default, this application is hosted on port 3000 at ``http://localhost:3000/``. This is intended for development as WebUSB requires a secure HTTPs connection, or localhost for development.
-This can be changed by heading into the ``bin\ServerConfig.js`` and modifying the configurations.
+By default, this application is hosted on port 3000 at ``http://localhost:8080/``. This is intended for development as WebUSB requires a secure HTTPs connection, or localhost for development.
 
 ### Building
-Modifications to any of the TypeScript files found in ``public\javascript`` must be compiled into JavaScript and further bundled together using Browserify and minified using uglify.
-
 ```
-cd public\javascript
-browserify WebBridge.js > WebBridge.bundle.js
+npm run build // translation localhost:4000
+npm run build:staging // translations staging
+npm run build:production // translatinos production
 ```
 
-Upon deploying to production, run this process through uglifyjs to remove comments and minify the bundled output.
+### Local development
+For local development setup you might be interested in launching chrome without internet security with disabled CORS
+`npm run chrome-without-web-security`
 
+### Deploying to S3
+To deploy built version on S3 bucket you need to install [s3deploy](https://github.com/bep/s3deploy) tool.
+After installation use these commands to build and then deploy to S3
+```npm
+npm run deploy:staging
+npm run deploy:prod
 ```
-cd public\javascript
-browserify WebBridge.js | uglifyjs -c > WebBridge.bundle.js
-```
+
+Deploy configuration is inside `deployConfig` section of `package.json` file. Also refer to [s3deploy](https://github.com/bep/s3deploy) 
+tool configuration for more details.
 
 ### Node Modules (DAPjs)
 At the moment, this repo has not been cleaned up and may contain a load of potentially useless (for this project) node modules.
 That being said, this project relies on the [DAPjs](https://github.com/ARMmbed/dapjs) JavaScript interface for the main serial communication between the webapp and the bridging micro:bit.
 To install the required node modules, be sure to run ``npm install`` before running the server.
 
-## Project Notes
-As JavaScript/TypeScript aren't my strongest language, and my knowledge of NodeJS was lacking, I decided to start with a simple, yet useful project to allow serial communication via the WebUSB standard. This was then improved upon to create a bridge between micro:bits and the internet.
-
-I built this project using WebStorm's brilliant Node.JS Express App generator and utilised the features provided. With the division of business logic and views, modifying the look and feel of the page while maintaining the technical stuff was made very simple. The rendering is achieved via Jade and CSS located in the ``views`` and ``public\stylesheets`` folders, while the logic uses TypeScript found throughout the repo.
-
-**Note: This project is a bit messy at the minute. There are some files within this project that are there purely for local testing purposes and will be removed once complete.**
-
 ## Repos
 [DAPjs](https://github.com/ARMmbed/dapjs) JavaScript interface to CMSIS-DAP
diff --git a/debug.json b/debug.json
diff --git a/public/favicon.ico → dist/favicon.ico b/public/favicon.ico → dist/favicon.ico
diff --git a/public/images/microbit.png → dist/images/microbit.png b/public/images/microbit.png → dist/images/microbit.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="shortcut icon" href="favicon.ico"><link href="stylesheets/styles.css" rel="stylesheet"></head><body><div id="loginpage"><div class="container"><div class="row justify-content-center"><div class="col-12 col-lg-5"><div class="card card-signin" id="loginForm"><div class="card-body"><h5 class="card-title text-center">Login</h5><form class="form-signin"><div class="form-label-group"><input class="form-control" id="userName" type="text" placeholder="Email address" required="" autofocus=""><label for="userName">Username</label></div><div class="form-label-group"><input class="form-control" id="inputPassword" type="password" placeholder="Password" required=""><label for="inputPassword">Password</label></div><div class="text-danger" id="loginError">Some message</div><button class="btn btn-lg btn-primary btn-block text-uppercase" type="button" id="loginButton">Login</button></form></div></div></div></div></div></div><div id="main"><h1></h1><div class="container"><div class="row justify-content-center"><div style="max-width:400px;padding-top:30px"><img class="img-fluid" src="./images/microbit.png"></div></div></div><div id="status"><text>Connect to a micro:bit and flash the bridging software</text></div><div class="div" id="terminal-container"><input type="checkbox" id="terminal-checkbox"><label for="terminal-checkbox" id="terminal-toggle">&#9776;</label><div id="terminal-box"><div id="terminal-header">Terminal</div></div><div id="terminal-contents"></div></div><div id="history-container"><input type="checkbox" id="history-checkbox"><label for="history-checkbox" id="history-toggle">&#9776;</label><div id="history-box"><div id="history-header">History</div></div></div><div id="hubSelectContainer"><select class="form-control" id="hubSelect"><option selected value="-1">Select webhub to flash...</option></select></div><dif id="footer"><div class="container"><div class="row justify-content-center" id="controls"><button id="connect">Connect</button><button id="flash">Flash</button><button id="logout">Logout</button></div></div></dif></div><script type="module" src="./javascripts/sidebars.js"></script><script type="module" src="./javascripts/WebBridge.bundle.js"></script><script type="text/javascript" src="javascripts/WebBridge.bundle.js"></script></body></html>
diff --git a/dist/javascripts/WebBridge.bundle.js b/dist/javascripts/WebBridge.bundle.js
diff --git a/dist/javascripts/sidebars.js b/dist/javascripts/sidebars.js
@@ -0,0 +1,46 @@
+function hideTerminal() {
+    let size = $(window).width() < 480 ? 80 : 20;
+    $('#terminal-container').animate({
+      'left': `-${size}%`
+    }, {queue: false});
+  }
+
+  function hideHistory() {
+    $('#history-container').animate({
+      'left': '100%'
+    }, {queue: false});
+  }
+
+  /***
+   * Slides in or out the terminal panel once the invisible checkbox is changed.
+   */
+  $('#terminal-checkbox').change(function (change) {
+    if ($(window).width() < 480) {
+      hideHistory()
+    }
+    if (change.target.checked)
+      $('#terminal-container').animate({
+        'left': '0px'
+      }, {queue: false});
+    else {
+      hideTerminal();
+    }
+  });
+
+  /***
+   * Slides in or out the history panel once the invisible checkbox is changed.
+   */
+  $('#history-checkbox').change(function (change) {
+    let size = 80
+    if ($(window).width() < 480) {
+      size = 20;
+      hideTerminal()
+    }
+
+    if (change.target.checked)
+      $('#history-container').animate({
+        'left': `${size}%`
+      }, {queue: false});
+    else
+      hideHistory();
+  });
diff --git a/dist/stylesheets/styles.css b/dist/stylesheets/styles.css
diff --git a/translations.json → dist/translations.json b/translations.json → dist/translations.json
@@ -157,7 +157,7 @@
             "endpoint":{
                 "sensorState":{
                     "queryObject": {
-                        "api_endpoint": "motion",
+                        "api_endpoint": "motion-sensor",
                         "device": "^device^"
                     },
                     "jspath": ".value",
@@ -170,7 +170,7 @@
                 },
                 "sensorTemp":{
                     "queryObject": {
-                        "api_endpoint": "temperature",
+                        "api_endpoint": "temperature-measurement",
                         "device": "^device^"
                     },
                     "jspath": ".value",
@@ -186,6 +186,7 @@
                         "api_endpoint": "switch",
                         "device": "^device^"
                     },
+                    "jspath": ".value",
                     "returns":[
                         {
                             "type":"string",
@@ -198,6 +199,7 @@
                         "api_endpoint": "switch-level",
                         "device": "^device^"
                     },
+                    "jspath": ".value",
                     "returns":[
                         {
                             "type":"string",
@@ -210,6 +212,7 @@
                         "api_endpoint": "color-temperature",
                         "device": "^device^"
                     },
+                    "jspath": ".value",
                     "returns":[
                         {
                             "type":"string",
@@ -222,6 +225,7 @@
                         "api_endpoint": "color-control",
                         "device": "^device^"
                     },
+                    "jspath": ".value",
                     "returns":[
                         {
                             "type":"string",
@@ -234,6 +238,7 @@
                         "api_endpoint": "switch",
                         "device": "^device^"
                     },
+                    "jspath": ".value",
                     "returns":[
                         {
                             "type":"string",

diff --git a/images/favicon.ico b/images/favicon.ico
diff --git a/images/microbit.png b/images/microbit.png
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    transform: {'^.+\\.ts?$': 'ts-jest'},
+    testEnvironment: 'node',
+    testRegex: '/tests/.*\\.(test|spec)?\\.(ts|tsx)$',
+    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
+  };
diff --git a/libs/logger.ts b/libs/logger.ts
@@ -0,0 +1,10 @@
+import * as log from 'loglevel';
+import * as prefix from 'loglevel-plugin-prefix';
+const logger  = log.getLogger('webhub');
+
+prefix.reg(log);
+prefix.apply(logger);
+
+logger.setLevel(log.levels.DEBUG);
+
+export default logger;
diff --git a/libs/sidebars.js b/libs/sidebars.js
@@ -0,0 +1,46 @@
+function hideTerminal() {
+    let size = $(window).width() < 480 ? 80 : 20;
+    $('#terminal-container').animate({
+      'left': `-${size}%`
+    }, {queue: false});
+  }
+
+  function hideHistory() {
+    $('#history-container').animate({
+      'left': '100%'
+    }, {queue: false});
+  }
+
+  /***
+   * Slides in or out the terminal panel once the invisible checkbox is changed.
+   */
+  $('#terminal-checkbox').change(function (change) {
+    if ($(window).width() < 480) {
+      hideHistory()
+    }
+    if (change.target.checked)
+      $('#terminal-container').animate({
+        'left': '0px'
+      }, {queue: false});
+    else {
+      hideTerminal();
+    }
+  });
+
+  /***
+   * Slides in or out the history panel once the invisible checkbox is changed.
+   */
+  $('#history-checkbox').change(function (change) {
+    let size = 80
+    if ($(window).width() < 480) {
+      size = 20;
+      hideTerminal()
+    }
+
+    if (change.target.checked)
+      $('#history-container').animate({
+        'left': `${size}%`
+      }, {queue: false});
+    else
+      hideHistory();
+  });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!DOCTYPE html><html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><link rel="shortcut icon" href="favicon.ico"><link href="stylesheets/styles.css" rel="stylesheet"></head><body><div id="loginpage"><div class="container"><div class="row justify-content-center"><div class="col-12 col-lg-5"><div class="card card-signin" id="loginForm"><div class="card-body"><h5 class="card-title text-center">Login</h5><form class="form-signin"><div class="form-label-group"><input class="form-control" id="userName" type="text" placeholder="Email address" required="" autofocus=""><label for="userName">Username</label></div><div class="form-label-group"><input class="form-control" id="inputPassword" type="password" placeholder="Password" required=""><label for="inputPassword">Password</label></div><div class="text-danger" id="loginError">Some message</div><button class="btn btn-lg btn-primary btn-block text-uppercase" type="button" id="loginButton">Login</button></form></div></div></div></div></div></div><div id="main"><h1></h1><div class="container"><div class="row justify-content-center"><div style="max-width:400px;padding-top:30px"><img class="img-fluid" src="./images/microbit.png"></div></div></div><div id="status"><text>Connect to a micro:bit and flash the bridging software</text></div><div class="div" id="terminal-container"><input type="checkbox" id="terminal-checkbox"><label for="terminal-checkbox" id="terminal-toggle">☰</label><div id="terminal-box"><div id="terminal-header">Terminal</div></div><div id="terminal-contents"></div></div><div id="history-container"><input type="checkbox" id="history-checkbox"><label for="history-checkbox" id="history-toggle">☰</label><div id="history-box"><div id="history-header">History</div></div></div><div id="hubSelectContainer"><select class="form-control" id="hubSelect"><option selected value="-1">Select webhub to flash...</option></select></div><dif id="footer"><div class="container"><div class="row justify-content-center" id="controls"><button id="connect">Connect</button><button id="flash">Flash</button><button id="logout">Logout</button></div></div></dif></div><script type="module" src="./javascripts/sidebars.js"></script><script type="module" src="./javascripts/WebBridge.bundle.js"></script><script type="text/javascript" src="javascripts/WebBridge.bundle.js"></script></body></html>