Updated docs and UI flow

back-end/serial_scanner.js

@@ -3,7 +3,7 @@
 const serialport = require("serialport");
 const EventEmitter = require("events");
 
-module.exports = class SerialScanner extends EventEmitter {
+class SerialScanner extends EventEmitter {
     /**
      * Scans for ports and emits a "ports" event with an array of
      */
@@ -95,4 +95,6 @@ module.exports = class SerialScanner extends EventEmitter {
     }
 
 
-};
+}
+
+module.exports = SerialScanner;

front-end/css/photon.css

@@ -1,2333 +0,0 @@
-/*!
- * =====================================================
- * Photon v0.1.1
- * Copyright 2015 Connor Sears
- * Licensed under MIT (https://github.com/connors/proton/blob/master/LICENSE)
- *
- * v0.1.1 designed by @connors.
- * =====================================================
- */
-
-@charset "UTF-8";
-audio,
-canvas,
-progress,
-video {
-  vertical-align: baseline;
-}
-
-audio:not([controls]) {
-  display: none;
-}
-
-a:active,
-a:hover {
-  outline: 0;
-}
-
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-dfn {
-  font-style: italic;
-}
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sup {
-  top: -0.5em;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-pre {
-  overflow: auto;
-}
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-input[type="search"] {
-  -webkit-appearance: textfield;
-  box-sizing: content-box;
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-legend {
-  border: 0;
-  padding: 0;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-td,
-th {
-  padding: 0;
-}
-
-* {
-  cursor: default;
-  -webkit-user-drag: text;
-  -webkit-user-select: none;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-html {
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  font-family: system, -apple-system, ".SFNSDisplay-Regular", "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
-  font-size: 13px;
-  line-height: 1.6;
-  color: #333;
-  background-color: transparent;
-}
-
-hr {
-  margin: 15px 0;
-  overflow: hidden;
-  background: transparent;
-  border: 0;
-  border-bottom: 1px solid #ddd;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 20px;
-  margin-bottom: 10px;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-h1 {
-  font-size: 36px;
-}
-
-h2 {
-  font-size: 30px;
-}
-
-h3 {
-  font-size: 24px;
-}
-
-h4 {
-  font-size: 18px;
-}
-
-h5 {
-  font-size: 14px;
-}
-
-h6 {
-  font-size: 12px;
-}
-
-.window {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-}
-
-.window-content {
-  position: relative;
-  overflow-y: auto;
-  display: flex;
-  flex: 1;
-}
-
-.selectable-text {
-  cursor: text;
-  -webkit-user-select: text;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.pull-left {
-  float: left;
-}
-
-.pull-right {
-  float: right;
-}
-
-.padded {
-  padding: 10px;
-}
-
-.padded-less {
-  padding: 5px;
-}
-
-.padded-more {
-  padding: 20px;
-}
-
-.padded-vertically {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.padded-vertically-less {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.padded-vertically-more {
-  padding-top: 20px;
-  padding-bottom: 20px;
-}
-
-.padded-horizontally {
-  padding-right: 10px;
-  padding-left: 10px;
-}
-
-.padded-horizontally-less {
-  padding-right: 5px;
-  padding-left: 5px;
-}
-
-.padded-horizontally-more {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-
-.padded-top {
-  padding-top: 10px;
-}
-
-.padded-top-less {
-  padding-top: 5px;
-}
-
-.padded-top-more {
-  padding-top: 20px;
-}
-
-.padded-bottom {
-  padding-bottom: 10px;
-}
-
-.padded-bottom-less {
-  padding-bottom: 5px;
-}
-
-.padded-bottom-more {
-  padding-bottom: 20px;
-}
-
-.sidebar {
-  background-color: #f5f5f4;
-}
-
-.draggable {
-  -webkit-app-region: drag;
-}
-
-.clearfix:before, .clearfix:after {
-  display: table;
-  content: " ";
-}
-.clearfix:after {
-  clear: both;
-}
-
-.btn {
-  display: inline-block;
-  padding: 3px 8px;
-  margin-bottom: 0;
-  font-size: 12px;
-  line-height: 1.4;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: default;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
-  -webkit-app-region: no-drag;
-}
-.btn:focus {
-  outline: none;
-  box-shadow: none;
-}
-
-.btn-mini {
-  padding: 2px 6px;
-}
-
-.btn-large {
-  padding: 6px 12px;
-}
-
-.btn-form {
-  padding-right: 20px;
-  padding-left: 20px;
-}
-
-.btn-default {
-  color: #333;
-  border-top-color: #c2c0c2;
-  border-right-color: #c2c0c2;
-  border-bottom-color: #a19fa1;
-  border-left-color: #c2c0c2;
-  background-color: #fcfcfc;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcfcfc), color-stop(100%, #f1f1f1));
-  background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
-  background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
-}
-.btn-default:active {
-  background-color: #ddd;
-  background-image: none;
-}
-
-.btn-primary,
-.btn-positive,
-.btn-negative,
-.btn-warning {
-  color: #fff;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-.btn-primary {
-  border-color: #388df8;
-  border-bottom-color: #0866dc;
-  background-color: #6eb4f7;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6eb4f7), color-stop(100%, #1a82fb));
-  background-image: -webkit-linear-gradient(top, #6eb4f7 0%, #1a82fb 100%);
-  background-image: linear-gradient(to bottom, #6eb4f7 0%, #1a82fb 100%);
-}
-.btn-primary:active {
-  background-color: #3e9bf4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3e9bf4), color-stop(100%, #0469de));
-  background-image: -webkit-linear-gradient(top, #3e9bf4 0%, #0469de 100%);
-  background-image: linear-gradient(to bottom, #3e9bf4 0%, #0469de 100%);
-}
-
-.btn-positive {
-  border-color: #29a03b;
-  border-bottom-color: #248b34;
-  background-color: #5bd46d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bd46d), color-stop(100%, #29a03b));
-  background-image: -webkit-linear-gradient(top, #5bd46d 0%, #29a03b 100%);
-  background-image: linear-gradient(to bottom, #5bd46d 0%, #29a03b 100%);
-}
-.btn-positive:active {
-  background-color: #34c84a;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #34c84a), color-stop(100%, #248b34));
-  background-image: -webkit-linear-gradient(top, #34c84a 0%, #248b34 100%);
-  background-image: linear-gradient(to bottom, #34c84a 0%, #248b34 100%);
-}
-
-.btn-negative {
-  border-color: #fb2f29;
-  border-bottom-color: #fb1710;
-  background-color: #fd918d;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fd918d), color-stop(100%, #fb2f29));
-  background-image: -webkit-linear-gradient(top, #fd918d 0%, #fb2f29 100%);
-  background-image: linear-gradient(to bottom, #fd918d 0%, #fb2f29 100%);
-}
-.btn-negative:active {
-  background-color: #fc605b;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fc605b), color-stop(100%, #fb1710));
-  background-image: -webkit-linear-gradient(top, #fc605b 0%, #fb1710 100%);
-  background-image: linear-gradient(to bottom, #fc605b 0%, #fb1710 100%);
-}
-
-.btn-warning {
-  border-color: #fcaa0e;
-  border-bottom-color: #ee9d02;
-  background-color: #fece72;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fece72), color-stop(100%, #fcaa0e));
-  background-image: -webkit-linear-gradient(top, #fece72 0%, #fcaa0e 100%);
-  background-image: linear-gradient(to bottom, #fece72 0%, #fcaa0e 100%);
-}
-.btn-warning:active {
-  background-color: #fdbc40;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdbc40), color-stop(100%, #ee9d02));
-  background-image: -webkit-linear-gradient(top, #fdbc40 0%, #ee9d02 100%);
-  background-image: linear-gradient(to bottom, #fdbc40 0%, #ee9d02 100%);
-}
-
-.btn .icon {
-  float: left;
-  width: 14px;
-  height: 14px;
-  margin-top: 1px;
-  margin-bottom: 1px;
-  color: #737475;
-  font-size: 14px;
-  line-height: 1;
-}
-
-.btn .icon-text {
-  margin-right: 5px;
-}
-
-.btn-dropdown:after {
-  font-family: "photon-entypo";
-  margin-left: 5px;
-  content: "";
-}
-
-.btn-group {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-  -webkit-app-region: no-drag;
-}
-.btn-group .btn {
-  position: relative;
-  float: left;
-}
-.btn-group .btn:focus, .btn-group .btn:active {
-  z-index: 2;
-}
-.btn-group .btn.active {
-  z-index: 3;
-}
-
-.btn-group .btn + .btn,
-.btn-group .btn + .btn-group,
-.btn-group .btn-group + .btn,
-.btn-group .btn-group + .btn-group {
-  margin-left: -1px;
-}
-.btn-group > .btn:first-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.btn-group > .btn:last-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.btn-group > .btn:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-.btn-group .btn + .btn {
-  border-left: 1px solid #c2c0c2;
-}
-.btn-group .btn + .btn.active {
-  border-left: 0;
-}
-.btn-group .active {
-  color: #fff;
-  border: 1px solid transparent;
-  background-color: #6d6c6d;
-  background-image: none;
-}
-.btn-group .active .icon {
-  color: #fff;
-}
-
-.toolbar {
-  min-height: 22px;
-  box-shadow: inset 0 1px 0 #f5f4f5;
-  background-color: #e8e6e8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e6e8), color-stop(100%, #d1cfd1));
-  background-image: -webkit-linear-gradient(top, #e8e6e8 0%, #d1cfd1 100%);
-  background-image: linear-gradient(to bottom, #e8e6e8 0%, #d1cfd1 100%);
-}
-.toolbar:before, .toolbar:after {
-  display: table;
-  content: " ";
-}
-.toolbar:after {
-  clear: both;
-}
-
-.toolbar-header {
-  border-bottom: 1px solid #c2c0c2;
-}
-.toolbar-header .title {
-  margin-top: 1px;
-}
-
-.toolbar-footer {
-  border-top: 1px solid #c2c0c2;
-  -webkit-app-region: drag;
-}
-
-.title {
-  margin: 0;
-  font-size: 12px;
-  font-weight: 400;
-  text-align: center;
-  color: #555;
-  cursor: default;
-}
-
-.toolbar-borderless {
-  border-top: 0;
-  border-bottom: 0;
-}
-
-.toolbar-actions {
-  margin-top: 4px;
-  margin-bottom: 3px;
-  padding-right: 3px;
-  padding-left: 3px;
-  padding-bottom: 3px;
-  -webkit-app-region: drag;
-}
-.toolbar-actions:before, .toolbar-actions:after {
-  display: table;
-  content: " ";
-}
-.toolbar-actions:after {
-  clear: both;
-}
-.toolbar-actions > .btn,
-.toolbar-actions > .btn-group {
-  margin-left: 4px;
-  margin-right: 4px;
-}
-
-label {
-  display: inline-block;
-  font-size: 13px;
-  margin-bottom: 5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-input[type="search"] {
-  box-sizing: border-box;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  line-height: normal;
-}
-
-.form-control {
-  display: inline-block;
-  width: 100%;
-  min-height: 25px;
-  padding: 5px 10px;
-  font-size: 13px;
-  line-height: 1.6;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  outline: none;
-}
-.form-control:focus {
-  border-color: #6db3fd;
-  box-shadow: 3px 3px 0 #6db3fd, -3px -3px 0 #6db3fd, -3px 3px 0 #6db3fd, 3px -3px 0 #6db3fd;
-}
-
-textarea {
-  height: auto;
-}
-
-.form-group {
-  margin-bottom: 10px;
-}
-
-.radio,
-.checkbox {
-  position: relative;
-  display: block;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-.radio label,
-.checkbox label {
-  padding-left: 20px;
-  margin-bottom: 0;
-  font-weight: normal;
-}
-
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  position: absolute;
-  margin-left: -20px;
-  margin-top: 4px;
-}
-
-.form-actions .btn {
-  margin-right: 10px;
-}
-.form-actions .btn:last-child {
-  margin-right: 0;
-}
-
-.pane-group {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-}
-
-.pane {
-  position: relative;
-  overflow-y: auto;
-  flex: 1;
-  border-left: 1px solid #ddd;
-}
-.pane:first-child {
-  border-left: 0;
-}
-
-.pane-sm {
-  max-width: 220px;
-  min-width: 150px;
-}
-
-.pane-mini {
-  width: 80px;
-  flex: none;
-}
-
-.pane-one-fourth {
-  width: 25%;
-  flex: none;
-}
-
-.pane-one-third {
-  width: 33.3%;
-}
-
-img {
-  -webkit-user-drag: text;
-}
-
-.img-circle {
-  border-radius: 50%;
-}
-
-.img-rounded {
-  border-radius: 4px;
-}
-
-.list-group {
-  width: 100%;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.list-group * {
-  margin: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.list-group-item {
-  padding: 10px;
-  font-size: 12px;
-  color: #414142;
-  border-top: 1px solid #ddd;
-}
-.list-group-item:first-child {
-  border-top: 0;
-}
-.list-group-item.active, .list-group-item.selected {
-  color: #fff;
-  background-color: #116cd6;
-}
-
-.list-group-header {
-  padding: 10px;
-}
-
-.media-object {
-  margin-top: 3px;
-}
-
-.media-object.pull-left {
-  margin-right: 10px;
-}
-
-.media-object.pull-right {
-  margin-left: 10px;
-}
-
-.media-body {
-  overflow: hidden;
-}
-
-.nav-group {
-  font-size: 14px;
-}
-
-.nav-group-item {
-  padding: 2px 10px 2px 25px;
-  display: block;
-  color: #333;
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.nav-group-item:active, .nav-group-item.active {
-  background-color: #dcdfe1;
-}
-.nav-group-item .icon {
-  width: 19px;
-  height: 18px;
-  float: left;
-  color: #737475;
-  margin-top: -3px;
-  margin-right: 7px;
-  font-size: 18px;
-  text-align: center;
-}
-
-.nav-group-title {
-  margin: 0;
-  padding: 10px 10px 2px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #666666;
-}
-
-@font-face {
-  font-family: "photon-entypo";
-  src: url("../fonts/photon-entypo.eot");
-  src: url("../fonts/photon-entypo.eot?#iefix") format("eot"), url("../fonts/photon-entypo.woff") format("woff"), url("../fonts/photon-entypo.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-.icon:before {
-  position: relative;
-  display: inline-block;
-  font-family: "photon-entypo";
-  speak: none;
-  font-size: 100%;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-note:before {
-  content: '\e800';
-}
-
-/* '' */
-.icon-note-beamed:before {
-  content: '\e801';
-}
-
-/* '' */
-.icon-music:before {
-  content: '\e802';
-}
-
-/* '' */
-.icon-search:before {
-  content: '\e803';
-}
-
-/* '' */
-.icon-flashlight:before {
-  content: '\e804';
-}
-
-/* '' */
-.icon-mail:before {
-  content: '\e805';
-}
-
-/* '' */
-.icon-heart:before {
-  content: '\e806';
-}
-
-/* '' */
-.icon-heart-empty:before {
-  content: '\e807';
-}
-
-/* '' */
-.icon-star:before {
-  content: '\e808';
-}
-
-/* '' */
-.icon-star-empty:before {
-  content: '\e809';
-}
-
-/* '' */
-.icon-user:before {
-  content: '\e80a';
-}
-
-/* '' */
-.icon-users:before {
-  content: '\e80b';
-}
-
-/* '' */
-.icon-user-add:before {
-  content: '\e80c';
-}
-
-/* '' */
-.icon-video:before {
-  content: '\e80d';
-}
-
-/* '' */
-.icon-picture:before {
-  content: '\e80e';
-}
-
-/* '' */
-.icon-camera:before {
-  content: '\e80f';
-}
-
-/* '' */
-.icon-layout:before {
-  content: '\e810';
-}
-
-/* '' */
-.icon-menu:before {
-  content: '\e811';
-}
-
-/* '' */
-.icon-check:before {
-  content: '\e812';
-}
-
-/* '' */
-.icon-cancel:before {
-  content: '\e813';
-}
-
-/* '' */
-.icon-cancel-circled:before {
-  content: '\e814';
-}
-
-/* '' */
-.icon-cancel-squared:before {
-  content: '\e815';
-}
-
-/* '' */
-.icon-plus:before {
-  content: '\e816';
-}
-
-/* '' */
-.icon-plus-circled:before {
-  content: '\e817';
-}
-
-/* '' */
-.icon-plus-squared:before {
-  content: '\e818';
-}
-
-/* '' */
-.icon-minus:before {
-  content: '\e819';
-}
-
-/* '' */
-.icon-minus-circled:before {
-  content: '\e81a';
-}
-
-/* '' */
-.icon-minus-squared:before {
-  content: '\e81b';
-}
-
-/* '' */
-.icon-help:before {
-  content: '\e81c';
-}
-
-/* '' */
-.icon-help-circled:before {
-  content: '\e81d';
-}
-
-/* '' */
-.icon-info:before {
-  content: '\e81e';
-}
-
-/* '' */
-.icon-info-circled:before {
-  content: '\e81f';
-}
-
-/* '' */
-.icon-back:before {
-  content: '\e820';
-}
-
-/* '' */
-.icon-home:before {
-  content: '\e821';
-}
-
-/* '' */
-.icon-link:before {
-  content: '\e822';
-}
-
-/* '' */
-.icon-attach:before {
-  content: '\e823';
-}
-
-/* '' */
-.icon-lock:before {
-  content: '\e824';
-}
-
-/* '' */
-.icon-lock-open:before {
-  content: '\e825';
-}
-
-/* '' */
-.icon-eye:before {
-  content: '\e826';
-}
-
-/* '' */
-.icon-tag:before {
-  content: '\e827';
-}
-
-/* '' */
-.icon-bookmark:before {
-  content: '\e828';
-}
-
-/* '' */
-.icon-bookmarks:before {
-  content: '\e829';
-}
-
-/* '' */
-.icon-flag:before {
-  content: '\e82a';
-}
-
-/* '' */
-.icon-thumbs-up:before {
-  content: '\e82b';
-}
-
-/* '' */
-.icon-thumbs-down:before {
-  content: '\e82c';
-}
-
-/* '' */
-.icon-download:before {
-  content: '\e82d';
-}
-
-/* '' */
-.icon-upload:before {
-  content: '\e82e';
-}
-
-/* '' */
-.icon-upload-cloud:before {
-  content: '\e82f';
-}
-
-/* '' */
-.icon-reply:before {
-  content: '\e830';
-}
-
-/* '' */
-.icon-reply-all:before {
-  content: '\e831';
-}
-
-/* '' */
-.icon-forward:before {
-  content: '\e832';
-}
-
-/* '' */
-.icon-quote:before {
-  content: '\e833';
-}
-
-/* '' */
-.icon-code:before {
-  content: '\e834';
-}
-
-/* '' */
-.icon-export:before {
-  content: '\e835';
-}
-
-/* '' */
-.icon-pencil:before {
-  content: '\e836';
-}
-
-/* '' */
-.icon-feather:before {
-  content: '\e837';
-}
-
-/* '' */
-.icon-print:before {
-  content: '\e838';
-}
-
-/* '' */
-.icon-retweet:before {
-  content: '\e839';
-}
-
-/* '' */
-.icon-keyboard:before {
-  content: '\e83a';
-}
-
-/* '' */
-.icon-comment:before {
-  content: '\e83b';
-}
-
-/* '' */
-.icon-chat:before {
-  content: '\e83c';
-}
-
-/* '' */
-.icon-bell:before {
-  content: '\e83d';
-}
-
-/* '' */
-.icon-attention:before {
-  content: '\e83e';
-}
-
-/* '' */
-.icon-alert:before {
-  content: '\e83f';
-}
-
-/* '' */
-.icon-vcard:before {
-  content: '\e840';
-}
-
-/* '' */
-.icon-address:before {
-  content: '\e841';
-}
-
-/* '' */
-.icon-location:before {
-  content: '\e842';
-}
-
-/* '' */
-.icon-map:before {
-  content: '\e843';
-}
-
-/* '' */
-.icon-direction:before {
-  content: '\e844';
-}
-
-/* '' */
-.icon-compass:before {
-  content: '\e845';
-}
-
-/* '' */
-.icon-cup:before {
-  content: '\e846';
-}
-
-/* '' */
-.icon-trash:before {
-  content: '\e847';
-}
-
-/* '' */
-.icon-doc:before {
-  content: '\e848';
-}
-
-/* '' */
-.icon-docs:before {
-  content: '\e849';
-}
-
-/* '' */
-.icon-doc-landscape:before {
-  content: '\e84a';
-}
-
-/* '' */
-.icon-doc-text:before {
-  content: '\e84b';
-}
-
-/* '' */
-.icon-doc-text-inv:before {
-  content: '\e84c';
-}
-
-/* '' */
-.icon-newspaper:before {
-  content: '\e84d';
-}
-
-/* '' */
-.icon-book-open:before {
-  content: '\e84e';
-}
-
-/* '' */
-.icon-book:before {
-  content: '\e84f';
-}
-
-/* '' */
-.icon-folder:before {
-  content: '\e850';
-}
-
-/* '' */
-.icon-archive:before {
-  content: '\e851';
-}
-
-/* '' */
-.icon-box:before {
-  content: '\e852';
-}
-
-/* '' */
-.icon-rss:before {
-  content: '\e853';
-}
-
-/* '' */
-.icon-phone:before {
-  content: '\e854';
-}
-
-/* '' */
-.icon-cog:before {
-  content: '\e855';
-}
-
-/* '' */
-.icon-tools:before {
-  content: '\e856';
-}
-
-/* '' */
-.icon-share:before {
-  content: '\e857';
-}
-
-/* '' */
-.icon-shareable:before {
-  content: '\e858';
-}
-
-/* '' */
-.icon-basket:before {
-  content: '\e859';
-}
-
-/* '' */
-.icon-bag:before {
-  content: '\e85a';
-}
-
-/* '' */
-.icon-calendar:before {
-  content: '\e85b';
-}
-
-/* '' */
-.icon-login:before {
-  content: '\e85c';
-}
-
-/* '' */
-.icon-logout:before {
-  content: '\e85d';
-}
-
-/* '' */
-.icon-mic:before {
-  content: '\e85e';
-}
-
-/* '' */
-.icon-mute:before {
-  content: '\e85f';
-}
-
-/* '' */
-.icon-sound:before {
-  content: '\e860';
-}
-
-/* '' */
-.icon-volume:before {
-  content: '\e861';
-}
-
-/* '' */
-.icon-clock:before {
-  content: '\e862';
-}
-
-/* '' */
-.icon-hourglass:before {
-  content: '\e863';
-}
-
-/* '' */
-.icon-lamp:before {
-  content: '\e864';
-}
-
-/* '' */
-.icon-light-down:before {
-  content: '\e865';
-}
-
-/* '' */
-.icon-light-up:before {
-  content: '\e866';
-}
-
-/* '' */
-.icon-adjust:before {
-  content: '\e867';
-}
-
-/* '' */
-.icon-block:before {
-  content: '\e868';
-}
-
-/* '' */
-.icon-resize-full:before {
-  content: '\e869';
-}
-
-/* '' */
-.icon-resize-small:before {
-  content: '\e86a';
-}
-
-/* '' */
-.icon-popup:before {
-  content: '\e86b';
-}
-
-/* '' */
-.icon-publish:before {
-  content: '\e86c';
-}
-
-/* '' */
-.icon-window:before {
-  content: '\e86d';
-}
-
-/* '' */
-.icon-arrow-combo:before {
-  content: '\e86e';
-}
-
-/* '' */
-.icon-down-circled:before {
-  content: '\e86f';
-}
-
-/* '' */
-.icon-left-circled:before {
-  content: '\e870';
-}
-
-/* '' */
-.icon-right-circled:before {
-  content: '\e871';
-}
-
-/* '' */
-.icon-up-circled:before {
-  content: '\e872';
-}
-
-/* '' */
-.icon-down-open:before {
-  content: '\e873';
-}
-
-/* '' */
-.icon-left-open:before {
-  content: '\e874';
-}
-
-/* '' */
-.icon-right-open:before {
-  content: '\e875';
-}
-
-/* '' */
-.icon-up-open:before {
-  content: '\e876';
-}
-
-/* '' */
-.icon-down-open-mini:before {
-  content: '\e877';
-}
-
-/* '' */
-.icon-left-open-mini:before {
-  content: '\e878';
-}
-
-/* '' */
-.icon-right-open-mini:before {
-  content: '\e879';
-}
-
-/* '' */
-.icon-up-open-mini:before {
-  content: '\e87a';
-}
-
-/* '' */
-.icon-down-open-big:before {
-  content: '\e87b';
-}
-
-/* '' */
-.icon-left-open-big:before {
-  content: '\e87c';
-}
-
-/* '' */
-.icon-right-open-big:before {
-  content: '\e87d';
-}
-
-/* '' */
-.icon-up-open-big:before {
-  content: '\e87e';
-}
-
-/* '' */
-.icon-down:before {
-  content: '\e87f';
-}
-
-/* '' */
-.icon-left:before {
-  content: '\e880';
-}
-
-/* '' */
-.icon-right:before {
-  content: '\e881';
-}
-
-/* '' */
-.icon-up:before {
-  content: '\e882';
-}
-
-/* '' */
-.icon-down-dir:before {
-  content: '\e883';
-}
-
-/* '' */
-.icon-left-dir:before {
-  content: '\e884';
-}
-
-/* '' */
-.icon-right-dir:before {
-  content: '\e885';
-}
-
-/* '' */
-.icon-up-dir:before {
-  content: '\e886';
-}
-
-/* '' */
-.icon-down-bold:before {
-  content: '\e887';
-}
-
-/* '' */
-.icon-left-bold:before {
-  content: '\e888';
-}
-
-/* '' */
-.icon-right-bold:before {
-  content: '\e889';
-}
-
-/* '' */
-.icon-up-bold:before {
-  content: '\e88a';
-}
-
-/* '' */
-.icon-down-thin:before {
-  content: '\e88b';
-}
-
-/* '' */
-.icon-left-thin:before {
-  content: '\e88c';
-}
-
-/* '' */
-.icon-right-thin:before {
-  content: '\e88d';
-}
-
-/* '' */
-.icon-up-thin:before {
-  content: '\e88e';
-}
-
-/* '' */
-.icon-ccw:before {
-  content: '\e88f';
-}
-
-/* '' */
-.icon-cw:before {
-  content: '\e890';
-}
-
-/* '' */
-.icon-arrows-ccw:before {
-  content: '\e891';
-}
-
-/* '' */
-.icon-level-down:before {
-  content: '\e892';
-}
-
-/* '' */
-.icon-level-up:before {
-  content: '\e893';
-}
-
-/* '' */
-.icon-shuffle:before {
-  content: '\e894';
-}
-
-/* '' */
-.icon-loop:before {
-  content: '\e895';
-}
-
-/* '' */
-.icon-switch:before {
-  content: '\e896';
-}
-
-/* '' */
-.icon-play:before {
-  content: '\e897';
-}
-
-/* '' */
-.icon-stop:before {
-  content: '\e898';
-}
-
-/* '' */
-.icon-pause:before {
-  content: '\e899';
-}
-
-/* '' */
-.icon-record:before {
-  content: '\e89a';
-}
-
-/* '' */
-.icon-to-end:before {
-  content: '\e89b';
-}
-
-/* '' */
-.icon-to-start:before {
-  content: '\e89c';
-}
-
-/* '' */
-.icon-fast-forward:before {
-  content: '\e89d';
-}
-
-/* '' */
-.icon-fast-backward:before {
-  content: '\e89e';
-}
-
-/* '' */
-.icon-progress-0:before {
-  content: '\e89f';
-}
-
-/* '' */
-.icon-progress-1:before {
-  content: '\e8a0';
-}
-
-/* '' */
-.icon-progress-2:before {
-  content: '\e8a1';
-}
-
-/* '' */
-.icon-progress-3:before {
-  content: '\e8a2';
-}
-
-/* '' */
-.icon-target:before {
-  content: '\e8a3';
-}
-
-/* '' */
-.icon-palette:before {
-  content: '\e8a4';
-}
-
-/* '' */
-.icon-list:before {
-  content: '\e8a5';
-}
-
-/* '' */
-.icon-list-add:before {
-  content: '\e8a6';
-}
-
-/* '' */
-.icon-signal:before {
-  content: '\e8a7';
-}
-
-/* '' */
-.icon-trophy:before {
-  content: '\e8a8';
-}
-
-/* '' */
-.icon-battery:before {
-  content: '\e8a9';
-}
-
-/* '' */
-.icon-back-in-time:before {
-  content: '\e8aa';
-}
-
-/* '' */
-.icon-monitor:before {
-  content: '\e8ab';
-}
-
-/* '' */
-.icon-mobile:before {
-  content: '\e8ac';
-}
-
-/* '' */
-.icon-network:before {
-  content: '\e8ad';
-}
-
-/* '' */
-.icon-cd:before {
-  content: '\e8ae';
-}
-
-/* '' */
-.icon-inbox:before {
-  content: '\e8af';
-}
-
-/* '' */
-.icon-install:before {
-  content: '\e8b0';
-}
-
-/* '' */
-.icon-globe:before {
-  content: '\e8b1';
-}
-
-/* '' */
-.icon-cloud:before {
-  content: '\e8b2';
-}
-
-/* '' */
-.icon-cloud-thunder:before {
-  content: '\e8b3';
-}
-
-/* '' */
-.icon-flash:before {
-  content: '\e8b4';
-}
-
-/* '' */
-.icon-moon:before {
-  content: '\e8b5';
-}
-
-/* '' */
-.icon-flight:before {
-  content: '\e8b6';
-}
-
-/* '' */
-.icon-paper-plane:before {
-  content: '\e8b7';
-}
-
-/* '' */
-.icon-leaf:before {
-  content: '\e8b8';
-}
-
-/* '' */
-.icon-lifebuoy:before {
-  content: '\e8b9';
-}
-
-/* '' */
-.icon-mouse:before {
-  content: '\e8ba';
-}
-
-/* '' */
-.icon-briefcase:before {
-  content: '\e8bb';
-}
-
-/* '' */
-.icon-suitcase:before {
-  content: '\e8bc';
-}
-
-/* '' */
-.icon-dot:before {
-  content: '\e8bd';
-}
-
-/* '' */
-.icon-dot-2:before {
-  content: '\e8be';
-}
-
-/* '' */
-.icon-dot-3:before {
-  content: '\e8bf';
-}
-
-/* '' */
-.icon-brush:before {
-  content: '\e8c0';
-}
-
-/* '' */
-.icon-magnet:before {
-  content: '\e8c1';
-}
-
-/* '' */
-.icon-infinity:before {
-  content: '\e8c2';
-}
-
-/* '' */
-.icon-erase:before {
-  content: '\e8c3';
-}
-
-/* '' */
-.icon-chart-pie:before {
-  content: '\e8c4';
-}
-
-/* '' */
-.icon-chart-line:before {
-  content: '\e8c5';
-}
-
-/* '' */
-.icon-chart-bar:before {
-  content: '\e8c6';
-}
-
-/* '' */
-.icon-chart-area:before {
-  content: '\e8c7';
-}
-
-/* '' */
-.icon-tape:before {
-  content: '\e8c8';
-}
-
-/* '' */
-.icon-graduation-cap:before {
-  content: '\e8c9';
-}
-
-/* '' */
-.icon-language:before {
-  content: '\e8ca';
-}
-
-/* '' */
-.icon-ticket:before {
-  content: '\e8cb';
-}
-
-/* '' */
-.icon-water:before {
-  content: '\e8cc';
-}
-
-/* '' */
-.icon-droplet:before {
-  content: '\e8cd';
-}
-
-/* '' */
-.icon-air:before {
-  content: '\e8ce';
-}
-
-/* '' */
-.icon-credit-card:before {
-  content: '\e8cf';
-}
-
-/* '' */
-.icon-floppy:before {
-  content: '\e8d0';
-}
-
-/* '' */
-.icon-clipboard:before {
-  content: '\e8d1';
-}
-
-/* '' */
-.icon-megaphone:before {
-  content: '\e8d2';
-}
-
-/* '' */
-.icon-database:before {
-  content: '\e8d3';
-}
-
-/* '' */
-.icon-drive:before {
-  content: '\e8d4';
-}
-
-/* '' */
-.icon-bucket:before {
-  content: '\e8d5';
-}
-
-/* '' */
-.icon-thermometer:before {
-  content: '\e8d6';
-}
-
-/* '' */
-.icon-key:before {
-  content: '\e8d7';
-}
-
-/* '' */
-.icon-flow-cascade:before {
-  content: '\e8d8';
-}
-
-/* '' */
-.icon-flow-branch:before {
-  content: '\e8d9';
-}
-
-/* '' */
-.icon-flow-tree:before {
-  content: '\e8da';
-}
-
-/* '' */
-.icon-flow-line:before {
-  content: '\e8db';
-}
-
-/* '' */
-.icon-flow-parallel:before {
-  content: '\e8dc';
-}
-
-/* '' */
-.icon-rocket:before {
-  content: '\e8dd';
-}
-
-/* '' */
-.icon-gauge:before {
-  content: '\e8de';
-}
-
-/* '' */
-.icon-traffic-cone:before {
-  content: '\e8df';
-}
-
-/* '' */
-.icon-cc:before {
-  content: '\e8e0';
-}
-
-/* '' */
-.icon-cc-by:before {
-  content: '\e8e1';
-}
-
-/* '' */
-.icon-cc-nc:before {
-  content: '\e8e2';
-}
-
-/* '' */
-.icon-cc-nc-eu:before {
-  content: '\e8e3';
-}
-
-/* '' */
-.icon-cc-nc-jp:before {
-  content: '\e8e4';
-}
-
-/* '' */
-.icon-cc-sa:before {
-  content: '\e8e5';
-}
-
-/* '' */
-.icon-cc-nd:before {
-  content: '\e8e6';
-}
-
-/* '' */
-.icon-cc-pd:before {
-  content: '\e8e7';
-}
-
-/* '' */
-.icon-cc-zero:before {
-  content: '\e8e8';
-}
-
-/* '' */
-.icon-cc-share:before {
-  content: '\e8e9';
-}
-
-/* '' */
-.icon-cc-remix:before {
-  content: '\e8ea';
-}
-
-/* '' */
-.icon-github:before {
-  content: '\e8eb';
-}
-
-/* '' */
-.icon-github-circled:before {
-  content: '\e8ec';
-}
-
-/* '' */
-.icon-flickr:before {
-  content: '\e8ed';
-}
-
-/* '' */
-.icon-flickr-circled:before {
-  content: '\e8ee';
-}
-
-/* '' */
-.icon-vimeo:before {
-  content: '\e8ef';
-}
-
-/* '' */
-.icon-vimeo-circled:before {
-  content: '\e8f0';
-}
-
-/* '' */
-.icon-twitter:before {
-  content: '\e8f1';
-}
-
-/* '' */
-.icon-twitter-circled:before {
-  content: '\e8f2';
-}
-
-/* '' */
-.icon-facebook:before {
-  content: '\e8f3';
-}
-
-/* '' */
-.icon-facebook-circled:before {
-  content: '\e8f4';
-}
-
-/* '' */
-.icon-facebook-squared:before {
-  content: '\e8f5';
-}
-
-/* '' */
-.icon-gplus:before {
-  content: '\e8f6';
-}
-
-/* '' */
-.icon-gplus-circled:before {
-  content: '\e8f7';
-}
-
-/* '' */
-.icon-pinterest:before {
-  content: '\e8f8';
-}
-
-/* '' */
-.icon-pinterest-circled:before {
-  content: '\e8f9';
-}
-
-/* '' */
-.icon-tumblr:before {
-  content: '\e8fa';
-}
-
-/* '' */
-.icon-tumblr-circled:before {
-  content: '\e8fb';
-}
-
-/* '' */
-.icon-linkedin:before {
-  content: '\e8fc';
-}
-
-/* '' */
-.icon-linkedin-circled:before {
-  content: '\e8fd';
-}
-
-/* '' */
-.icon-dribbble:before {
-  content: '\e8fe';
-}
-
-/* '' */
-.icon-dribbble-circled:before {
-  content: '\e8ff';
-}
-
-/* '' */
-.icon-stumbleupon:before {
-  content: '\e900';
-}
-
-/* '' */
-.icon-stumbleupon-circled:before {
-  content: '\e901';
-}
-
-/* '' */
-.icon-lastfm:before {
-  content: '\e902';
-}
-
-/* '' */
-.icon-lastfm-circled:before {
-  content: '\e903';
-}
-
-/* '' */
-.icon-rdio:before {
-  content: '\e904';
-}
-
-/* '' */
-.icon-rdio-circled:before {
-  content: '\e905';
-}
-
-/* '' */
-.icon-spotify:before {
-  content: '\e906';
-}
-
-/* '' */
-.icon-spotify-circled:before {
-  content: '\e907';
-}
-
-/* '' */
-.icon-qq:before {
-  content: '\e908';
-}
-
-/* '' */
-.icon-instagram:before {
-  content: '\e909';
-}
-
-/* '' */
-.icon-dropbox:before {
-  content: '\e90a';
-}
-
-/* '' */
-.icon-evernote:before {
-  content: '\e90b';
-}
-
-/* '' */
-.icon-flattr:before {
-  content: '\e90c';
-}
-
-/* '' */
-.icon-skype:before {
-  content: '\e90d';
-}
-
-/* '' */
-.icon-skype-circled:before {
-  content: '\e90e';
-}
-
-/* '' */
-.icon-renren:before {
-  content: '\e90f';
-}
-
-/* '' */
-.icon-sina-weibo:before {
-  content: '\e910';
-}
-
-/* '' */
-.icon-paypal:before {
-  content: '\e911';
-}
-
-/* '' */
-.icon-picasa:before {
-  content: '\e912';
-}
-
-/* '' */
-.icon-soundcloud:before {
-  content: '\e913';
-}
-
-/* '' */
-.icon-mixi:before {
-  content: '\e914';
-}
-
-/* '' */
-.icon-behance:before {
-  content: '\e915';
-}
-
-/* '' */
-.icon-google-circles:before {
-  content: '\e916';
-}
-
-/* '' */
-.icon-vkontakte:before {
-  content: '\e917';
-}
-
-/* '' */
-.icon-smashing:before {
-  content: '\e918';
-}
-
-/* '' */
-.icon-sweden:before {
-  content: '\e919';
-}
-
-/* '' */
-.icon-db-shape:before {
-  content: '\e91a';
-}
-
-/* '' */
-.icon-logo-db:before {
-  content: '\e91b';
-}
-
-/* '' */
-table {
-  width: 100%;
-  border: 0;
-  border-collapse: separate;
-  font-size: 12px;
-  text-align: left;
-}
-
-thead {
-  background-color: #f5f5f4;
-}
-
-tbody {
-  background-color: #fff;
-}
-
-.table-striped tr:nth-child(even) {
-  background-color: #f5f5f4;
-}
-
-tr:active,
-.table-striped tr:active:nth-child(even) {
-  color: #fff;
-  background-color: #116cd6;
-}
-
-thead tr:active {
-  color: #333;
-  background-color: #f5f5f4;
-}
-
-th {
-  font-weight: normal;
-  border-right: 1px solid #ddd;
-  border-bottom: 1px solid #ddd;
-}
-
-th,
-td {
-  padding: 2px 15px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-th:last-child,
-td:last-child {
-  border-right: 0;
-}
-
-.tab-group {
-  margin-top: -1px;
-  display: flex;
-  border-top: 1px solid #989698;
-  border-bottom: 1px solid #989698;
-}
-
-.tab-item {
-  position: relative;
-  flex: 1;
-  padding: 3px;
-  font-size: 12px;
-  text-align: center;
-  border-left: 1px solid #989698;
-  background-color: #b8b6b8;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b8b6b8), color-stop(100%, #b0aeb0));
-  background-image: -webkit-linear-gradient(top, #b8b6b8 0%, #b0aeb0 100%);
-  background-image: linear-gradient(to bottom, #b8b6b8 0%, #b0aeb0 100%);
-}
-.tab-item:first-child {
-  border-left: 0;
-}
-.tab-item.active {
-  background-color: #d4d2d4;
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d4d2d4), color-stop(100%, #cccacc));
-  background-image: -webkit-linear-gradient(top, #d4d2d4 0%, #cccacc 100%);
-  background-image: linear-gradient(to bottom, #d4d2d4 0%, #cccacc 100%);
-}
-.tab-item .icon-close-tab {
-  position: absolute;
-  top: 50%;
-  left: 5px;
-  width: 15px;
-  height: 15px;
-  font-size: 15px;
-  line-height: 15px;
-  text-align: center;
-  color: #666;
-  opacity: 0;
-  transition: opacity .1s linear, background-color .1s linear;
-  border-radius: 3px;
-  transform: translateY(-50%);
-  z-index: 10;
-}
-.tab-item:after {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  content: "";
-  background-color: rgba(0, 0, 0, 0.08);
-  opacity: 0;
-  transition: opacity .1s linear;
-  z-index: 1;
-}
-.tab-item:hover:not(.active):after {
-  opacity: 1;
-}
-.tab-item:hover .icon-close-tab {
-  opacity: 1;
-}
-.tab-item .icon-close-tab:hover {
-  background-color: rgba(0, 0, 0, 0.08);
-}
-
-.tab-item-fixed {
-  flex: none;
-  padding: 3px 10px;
-}

front-end/index.html

@@ -2,7 +2,6 @@
 <html>
 <head>
     <title>Flasher.js</title>
-
     <!-- Stylesheets -->
     <link rel="stylesheet" href="css/photon.min.css">
 </head>

front-end/js/app.js

@@ -1,34 +1,83 @@
 "use strict";
 
-const URLS = {
-    manifestList: "http://flasher.thingssdk.com/v1/manifest-list.json"
+/**
+ * Constants for application
+ *
+ * manifestList is the url that contains all possible manifests
+ * pollTime is used to check for changes in the serial ports
+ *
+ * @type {{manifestList: string, pollTime: number}}
+ */
+const CONSTANTS = {
+    manifestList: "http://flasher.thingssdk.com/v1/manifest-list.json",
+    pollTime: 1000
 };
 
-//Relative to index.html not app.js
+var last_notification = "";
+
+/************************
+ * Backend dependencies.
+ * Note: Paths are relative to index.html not app.js
+ ************************/
+
 const SerialScanner = require("../back-end/serial_scanner");
 const PortSelect = require("./js/port_select");
 const prepareBinaries = require("../back-end/prepare_binaries");
 const log = require("../back-end/logger");
 const RomComm = require("../back-end/rom_comm");
 
-function $(id) { return document.getElementById(id); }
+const serialScanner = new SerialScanner();
+
+/************************
+ * UI Elements
+ ************************/
 
 const flashButton = $("flash-button");
 const appStatus = $("status");
 const portsSelect = new PortSelect($("ports"));
 const manifestsSelect = $("manifests");
-const serialScanner = new SerialScanner();
-const pollTime = 1000; // One second
 
-var last_notification = "";
+
+/************************
+ * Utility Functions
+ ************************/
+
+/**
+ * Simple helper returns HTML element from an element's id
+ *
+ * @param id a string of the id of an HTML element
+ * @returns {Element}
+ */
+function $(id) { return document.getElementById(id); }
+
+/**
+ * Processes the response from an HTTP fetch and returns the JSON promise.
+ *
+ * @param response from a fetch call
+ * @returns {Promise}
+ */
+function processJSON(response) {
+    return response.json();
+}
+
+
+
+/************************
+ * Handle UI
+************************/
 
 flashButton.addEventListener("click", event => {
+    disableInputs();
     fetch(manifestsSelect.value)
         .then(processJSON)
         .then(flashWithManifest);
 });
 
-serialScanner.on("ports", (ports) => {
+/************************
+ * Manage serial port events
+ ************************/
+
+ serialScanner.on("ports", (ports) => {
     portsSelect.addAll(ports);
     readyToFlash();
 });
@@ -56,11 +105,18 @@ function readyToFlash() {
 /**
  * Enabled the serial port SELECT and flash BUTTON elements.
  */
-function enableInputs(){
+function enableInputs() {
     portsSelect.disabled = false;
+    manifestsSelect.disabled = false;
     flashButton.disabled = false;
 }
 
+function disableInputs() {
+    portsSelect.disabled = true;
+    manifestsSelect.disabled = true;
+    flashButton.disabled = true;
+}
+
 /**
  * Generic catch all error. Shows notification at the moment.
  * @param error
@@ -73,12 +129,7 @@ function onError(error){
     appStatus.textContent = error.message;
 }
 
-function processJSON(response) {
-    return response.json();
-}
-
 function generateManifestList(manifestsJSON) {
-    console.log(manifestsJSON); 
     manifestsJSON.options.forEach((option) => {
         option.versions.forEach((version) => {
             const optionElement = document.createElement("option");
@@ -91,27 +142,16 @@ function generateManifestList(manifestsJSON) {
 }
 
 function getManifests() {
-    fetch(URLS.manifestList)
+    appStatus.textContent = "Getting latest manifests.";
+    fetch(CONSTANTS.manifestList)
         .then(processJSON)
-        .then(generateManifestList).catch((error) => {
-            console.log(error); 
+        .then(generateManifestList).catch(error => {
             setTimeout(getManifests, pollTime);
         });
 }
 
-/**
- * Sets up UI
- */
-function init() {
-    getManifests();
-    serialScanner.scan();
-    setInterval(serialScanner.checkForChanges.bind(serialScanner), pollTime);
-}
-
-init();
-
 function flashWithManifest(manifest) {
-    console.log(portsSelect.value);
+    appStatus.textContent = `Flashing ${portsSelect.value}`;
     prepareBinaries(manifest, (err, flashSpec) => {
         if(err) throw err;
 
@@ -121,22 +161,39 @@ function flashWithManifest(manifest) {
         });
 
         esp.open().then((result) => {
-            log.info("ESP is open", result);
-            let promise = Promise.resolve();
+            appStatus.textContent = `Flashing ${portsSelect.value}...Openned Port.`;            let promise = Promise.resolve();
 
-            flashSpec.forEach((spec) => {
+            flashSpec.forEach((spec, index) => {
                promise = promise.then(()=> {
+                   appStatus.textContent = `Flashing ${index+1}/${flashSpec.length} binaries.`;
                    return esp.flashAddress(Number.parseInt(spec.address), spec.buffer)
                });
             });
 
             return promise.then(() => esp.close())
                 .then((result) => {
-                    var notification = new Notification("Flash Finished!");        
+                    appStatus.textContent = `Flashing finished!`;
+                    new Notification("Flash Finished!");
+                    readyToFlash();
                     log.info("Flashed to latest Espruino build!", result);
                 });
         }).catch((error) => {
             log.error("Oh noes!", error);
         });
     });
-}
+}
+
+/**
+ * Get's manifest list for possibilities for flashing,
+ * scans serial ports and sets up timer for checking for changes.
+ */
+function start() {
+    getManifests();
+    serialScanner.scan();
+    setInterval(serialScanner.checkForChanges.bind(serialScanner), CONSTANTS.pollTime);
+}
+
+/** 
+ * Start Application
+ */
+start();