Adds scaffold for motor control to frontend

1 files changed, 86 insertions, 0 deletions

diff --git a/hsm-web/Client/src/MotorCtl.vue b/hsm-web/Client/src/MotorCtl.vue
new file mode 100644
index 0000000..c66d9b9
--- /dev/null
+++ b/hsm-web/Client/src/MotorCtl.vue
@@ -0,0 +1,86 @@
+<template>
+  <h2>Motor Control</h2>
+  <table id='tmain'>
+    <tbody>
+      <tr>
+        <td><button id='bccw'>CCW</button></td>
+        <td>
+          <table id='tmot'>
+            <tbody>
+              <tr v-for='ds in [["NW", "N", "NE"], ["W", "", "E"], ["SW", "S", "SE"]]' :key='ds.id'>
+                <td v-for='d in ds' :key='d.id'>
+                  <button v-if='d' id='b{{ d.toLowerCase() }}'>{{ d }}</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td><button id='bcw'>CW</button></td>
+        <td>
+          <table id='tspeed'>
+            <tbody>
+              <tr v-for='s in ["Top", "Fast", "Slow", "Slow2", "Slow4"]' :key='s.id'>
+                <td><button id='s{{ s.toLowerCase() }}'>{{ s }}</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td>
+          <table id='ttime'>
+            <tbody>
+              <tr v-for='t in ["4s", "2s", "1s", "hs", "qs"]' :key='t.id'>
+                <td><button id='t{{ t }}'>{{ t }}</button></td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='thist'>
+    <tbody>
+      <tr>
+        <td><input id='ihist' disabled /></td>
+        <td v-for='h in ["hup", "hdown"]' :key='h.id'>
+          <button id='{{ h }}'>{{ h }}</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='tarm'>
+    <tbody>
+      <tr>
+        <td v-for='a in ["arm", "dispatch"]' :key='a.id'>
+          <button id='{{ a }}'>{{ a }}</button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+  mounted() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style>
+#tmot td {
+  height: 33%;
+  width:  33%;
+}
+#ihist {
+  border:  none;
+  margin:  0;
+  padding: 0;
+  resize:  none;
+  width:   100%;
+}
+</style>