Refactoring componant

front-end/js/app.js

@@ -1,12 +1,15 @@
+"use strict";
+
+//Relative to index.html not app.js
 const SerialScanner = require("../back-end/serial_scanner");
+const PortSelect = require("./js/port_select");
 
 function $(id) { return document.getElementById(id) }
 
 const flashButton = $("flash-button");
 const appStatus = $("status");
-const portsSelect = $("ports");
+const portsSelect = new PortSelect($("ports"));
 const serialScanner = new SerialScanner();
-const portToElementMap = {}; // Cache of option elements for the port select
 const pollTime = 1000; // One second
 
 var last_notification = "";
@@ -16,55 +19,22 @@ flashButton.addEventListener("click", event => {
 });
 
 serialScanner.on("ports", (ports) => {
-   addPortsToSelect(ports);
-   readyToFlash();
+    portsSelect.addAll(ports);
+    readyToFlash();
 });
 
 serialScanner.on("deviceAdded", (port) => {
-    appendPortToSelect(port);
+    portsSelect.add(port);
     new Notification(`Added: ${port}!`);
 });
 
 serialScanner.on("deviceRemoved", (port ) => {
-    removePortFromSelect(port);
+    portsSelect.remove(port);
     new Notification(`Removed: ${port}!`);
 });
 
 serialScanner.on("error", onError);
 
-/**
- * Removes existing comment, adds ports to the serial port SELECT element.
- * @param ports An Array of strings.
- */
-function addPortsToSelect(ports) {
-    //Empty Select
-    ports.forEach(port => {
-        appendPortToSelect(port);
-    });
-}
-
-/**
- * Appends a single port to the end of serial port SELECT element.
- * @param port
- */
-function appendPortToSelect(port){
-    const option = createPortOption(port);
-    portToElementMap[port] = option;
-    portsSelect.appendChild(option);
-}
-
-function createPortOption(port) {
-    const option = document.createElement("option");
-    option.textContent = port;
-    option.value = port;
-    return option;
-}
-
-function removePortFromSelect(port) {
-    portsSelect.removeChild(portToElementMap[port]);
-    delete portToElementMap[port];
-}
-
 /**
  * Updates UI to say it's ready
  */

front-end/js/port_select.js

@@ -0,0 +1,61 @@
+"use strict";
+
+module.exports = class PortSelect {
+    constructor(selectElement) {
+        this.selectElement = selectElement;
+        this.map = {}; // Cache matching the text value of a port to OPTION element.
+    }
+
+    /**
+     * Appends a single port to the end of serial port SELECT element.
+     * Adds port to map.
+     * @param port
+     */
+    add(port) {
+        const option = this.createOption(port);
+        this.map[port] = option;
+        this.selectElement.appendChild(option);
+    }
+
+    /**
+     * Removed single port from the serial port SELECT element.
+     * Removes port from map.
+     * @param port
+     */
+    remove(port) {
+        this.selectElement.removeChild(this.map[port]);
+        delete this.map[port];
+    }
+
+    /**
+     * Removes existing comment, adds ports to the serial port SELECT element.
+     * @param ports. An Array of strings.
+     */
+    addAll(ports) {
+        ports.forEach(port => {
+            this.add(port);
+        });
+    }
+
+
+    /**
+     * Creates option with the port text and value.
+     * @param port
+     * @returns {Element}
+     */
+    createOption(port) {
+        const option = document.createElement("option");
+        option.textContent = port;
+        option.value = port;
+        return option;
+    }
+
+    /**
+     * Pass through.
+     * Updates the disabled attribute on the SELECT element.
+     * @param value
+     */
+    set disabled (value) {
+        this.selectElement.disabled = value;
+    }
+}