web app does not look good but seems to be working

Author: lastmjs

.bowerrc

@@ -1,3 +1,3 @@
 {
-	"directory": "src/bower_components"
+	"directory": "src/client/bower_components"
 }

bower.json

@@ -15,6 +15,9 @@
     "tests"
   ],
   "dependencies": {
-    "polymer": "^1.8.0"
+    "polymer": "^1.8.0",
+    "express-web-components": "^0.4.2",
+    "jfive-web-components": "^0.0.7",
+    "iron-ajax": "^1.4.3"
   }
 }

src/client/components/copter-user-controls/copter-user-controls.html

@@ -1,10 +1,83 @@
-<link rel="import" href="bower_components/polymer/polymer.html">
-<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
 
 <dom-module id="copter-user-controls">
     <template>
+        <iron-ajax auto method="post" url="[[urlCommand]]"></iron-ajax>
+
+        <div>All Motors</div>
+		<button on-click="motorOnClick">On</button>
+        <button on-click="motorOffClick">Off</button>
+        <button on-click="motorIncreaseSpeedClick">Speed Up</button>
+        <button on-click="motorDecreaseSpeedClick">Speed Down</button>
+        <button on-click="motorReverseClick">Reverse</button>
+
+        <div>Motor 1</div>
+        <button on-click="motorOnClick" data-motor-id="1">On</button>
+        <button on-click="motorOffClick" data-motor-id="1">Off</button>
+        <button on-click="motorIncreaseSpeedClick" data-motor-id="1">Speed Up</button>
+        <button on-click="motorDecreaseSpeedClick" data-motor-id="1">Speed Down</button>
+        <button on-click="motorReverseClick" data-motor-id="1">Reverse</button>
+
+        <div>Motor 2</div>
+        <button on-click="motorOnClick" data-motor-id="2">On</button>
+        <button on-click="motorOffClick" data-motor-id="2">Off</button>
+        <button on-click="motorIncreaseSpeedClick" data-motor-id="2">Speed Up</button>
+        <button on-click="motorDecreaseSpeedClick" data-motor-id="2">Speed Down</button>
+        <button on-click="motorReverseClick" data-motor-id="2">Reverse</button>
+
+        <div>Motor 3</div>
+        <button on-click="motorOnClick" data-motor-id="3">On</button>
+        <button on-click="motorOffClick" data-motor-id="3">Off</button>
+        <button on-click="motorIncreaseSpeedClick" data-motor-id="3">Speed Up</button>
+        <button on-click="motorDecreaseSpeedClick" data-motor-id="3">Speed Down</button>
+        <button on-click="motorReverseClick" data-motor-id="3">Reverse</button>
+
+        <div>Motor 4</div>
+        <button on-click="motorOnClick" data-motor-id="4">On</button>
+        <button on-click="motorOffClick" data-motor-id="4">Off</button>
+        <button on-click="motorIncreaseSpeedClick" data-motor-id="4">Speed Up</button>
+        <button on-click="motorDecreaseSpeedClick" data-motor-id="4">Speed Down</button>
+        <button on-click="motorReverseClick" data-motor-id="4">Reverse</button>
     </template>
 
     <script>
+        class CopterUserControls {
+            beforeRegister() {
+                this.is = 'copter-user-controls';
+            }
+
+            motorOnClick(e) {
+                const motorId = e.target.dataset.motorId;
+                this.urlCommand = '';
+				this.urlCommand = `motor-on/${motorId}`;
+            }
+
+            motorOffClick(e) {
+                const motorId = e.target.dataset.motorId;
+                this.urlCommand = '';
+				this.urlCommand = `motor-off/${motorId}`;
+            }
+
+            motorIncreaseSpeedClick(e) {
+                const motorId = e.target.dataset.motorId;
+                this.urlCommand = '';
+				this.urlCommand = `motor-increase-speed/${motorId}`;
+            }
+
+            motorDecreaseSpeedClick(e) {
+                const motorId = e.target.dataset.motorId;
+                this.urlCommand = '';
+				this.urlCommand = `motor-decrease-speed/${motorId}`;
+            }
+
+            motorReverseClick(e) {
+                const motorId = e.target.dataset.motorId;
+                this.urlCommand = '';
+				this.urlCommand = `motor-reverse/${motorId}`;
+            }
+        }
+
+        Polymer(CopterUserControls);
     </script>
 </dom-module>