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