1 files changed, 162 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..d7d026e
--- /dev/null
+++ b/hsm-web/Client/src/MotorCtl.vue
@@ -0,0 +1,162 @@
+<template>
+  <h2>Motor Control</h2>
+  <table id='tmain'>
+    <tbody>
+      <tr>
+        <td>
+          <button :class='bdirClass("ccw")' @click='nextDir = "ccw"' :disabled='armed'>
+            {{ dirIcons.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' :class='bdirClass(d)' @click='nextDir = d' :disabled='armed'>
+                    {{ dirIcons[d] }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td>
+          <button :class='bdirClass("cw")' @click='nextDir = "cw"' :disabled='armed'>
+            {{ dirIcons.cw }}
+          </button>
+        </td>
+        <td>
+          <table id='tspeed'>
+            <tbody>
+              <tr v-for='s in ["top", "fast", "slow", "slow2", "slow4"]' :key='s.id'>
+                <td>
+                  <button :class='bspeedClass(s)' @click='nextSpeed = s' :disabled='armed'>
+                    {{ s }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td>
+          <table id='ttime'>
+            <tbody>
+              <tr v-for='t in ["4s", "2s", "1s", "0.5s", "0.25s"]' :key='t.id'>
+                <td>
+                  <button :class='btimeClass(t)' @click='nextTime = t' :disabled='armed'>
+                    {{ t }}
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='tcmd'>
+    <tbody>
+      <tr>
+        <td><input id='ihist' :value='renderCommand()' disabled /></td>
+      </tr>
+    </tbody>
+  </table>
+  <table id='tarm'>
+    <tbody>
+      <tr>
+        <td><button id='arm' @click='armed = !armed' :disabled='running'>{{ armed ? 'disarm' : 'arm' }}</button></td>
+        <td><button id='dispatch' @click='dispatch()' :disabled='!armed || running'>dispatch</button></td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import axios  from 'axios'
+import config from './config'
+
+export default {
+  data() {
+    return {
+      dirIcons: {
+        n:   '↑',
+        ne:  '↗',
+        e:   '→',
+        se:  '↘',
+        s:   '↓',
+        sw:  '↙',
+        w:   '←',
+        nw:  '↖',
+        ccw: '↺',
+        cw:  '↻'
+      },
+      nextDir:   'n',
+      nextSpeed: 'slow',
+      nextTime:  '1s',
+      armed:     false,
+      running:   false
+    }
+  },
+  methods: {
+    bdirClass(d) {
+      return 'bmot' + (d == this.nextDir ? ' bhigh' : '')
+    },
+    bspeedClass(d) {
+      return d == this.nextSpeed ? 'bhigh' : ''
+    },
+    btimeClass(t) {
+      return t == this.nextTime ? 'bhigh' : ''
+    },
+    renderCommand() {
+      const cmd   =  ['ccw', 'cw'].includes(this.nextDir) ? 'Tilt' : 'Move'
+      const dir   = this.nextDir.toUpperCase()
+      const speed = this.nextSpeed.charAt(0).toUpperCase() + this.nextSpeed.slice(1)
+      const time  = this.nextTime.slice(0, -1)
+
+      return `${cmd} ${dir} ${speed} ${time}`
+    },
+    async dispatch() {
+      this.running = true
+
+      const res = await axios.get(config.api + '/command?cmd=' + this.renderCommand())
+
+      if (res.status == 200) {
+        this.armed   = false
+        this.running = false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+#tmot td {
+  height: 33%;
+  width:  33%;
+}
+#tmain td, #tcmd td {
+  background-color: #2aa198;
+}
+.bmot {
+  font-size:   16px;
+  font-weight: bold;
+}
+.bhigh {
+  background-color: #b58900;
+  color:            #073642;
+}
+#tarm td:nth-child(1) {
+  width: 30%;
+}
+#arm {
+  background-color: #dc322f;
+}
+#dispatch {
+  background-color: #859900;
+}
+#arm, #dispatch {
+  color:       #073642;
+  font-weight: bold;
+}
+</style>