<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>
