uci-base/examples/ws-fio-client/src/pages/Index.vue

<template>
<q-page padding :class="{greyedout: offLine}" >
<q-list class="">
<q-item class="">
  <q-item-section side>
    <q-btn :disabled="offLine" color="secondary" round @click="send" icon="send">
      <q-tooltip>
        Click to send this command and payload to the sever
      </q-tooltip>
    </q-btn>
  </q-item-section>
  <q-item-section >
    <q-item-label>Command</q-item-label>
    <q-select
        v-model="cmd"
        :options="commands"
        label="Choose An Available Command to Send"
        emit-value
      ></q-select>
  </q-item-section>
</q-item>

<q-item><div class="col">Property</div>:<div class="col">Value</div></q-item>
<q-item><q-input  class="col" readonly v-model="key[0]" />:<q-input dense class="col" v-model="value[0]" /></q-item>
<q-item><q-input class="col" readonly v-model="key[1]" />:<q-input class="col" v-model="value[1]" /></q-item>
<q-item><q-input class="col" label="a custom property in payload" v-model="key[2]" />:<q-input class="col" v-model="value[2]" /></q-item>
</q-list>
<q-btn :class="switches[0]" @click="toggle(1)" label="Switch 1"><q-tooltip>Click to Toggle Switch</q-tooltip></q-btn>
<q-btn :class="switches[1]" @click="toggle(2)" label="Switch 2"><q-tooltip>Click to Toggle Switch</q-tooltip></q-btn>
<q-btn :class="switches[2]" @click="toggle(3)" label="Switch 3"><q-tooltip>Click to Toggle Switch</q-tooltip></q-btn>
<q-btn :class="switches[3]" @click="toggle(4)" label="Switch 4"><q-tooltip>Click to Toggle Switch</q-tooltip></q-btn>
<q-list class="response">
<q-input  v-model="packet" readonly  label="Sending Packet:" />
<q-input  v-model="res" readonly label="Socket/Server Response Packet" />
<q-input  v-model="pushed" readonly type="textarea" label="A Packet Pushed from Socket/Server:" />
</q-list>
</q-page>
</template>
<script>
import btc from 'better-try-catch'
// import socket from '../socket.js'

export default {
  data () {
    return {
      cmd: 'switch/toggle',
      offLine: false,
      commands: [
        {
          label: 'turn a switch on',
          value: 'switch/on',
          description: 'turn on something',
          icon: 'mdi:lightbulb'
        },
        {
          label: 'turn a switch off',
          value: 'switch/off',
          description: 'turn off something',
          icon: 'lightbulb-off'
        },
        {
          label: 'toggle a switch',
          value: 'switch/toggle',
          description: 'turn off something',
          icon: 'mdi:lightbulb'
        },
        {
          label: 'ack',
          value: 'ack',
          description: 'turn off something',
          icon: 'no'
        },
        {
          label: 'echo',
          value: 'echo',
          description: 'echo',
          icon: 'no'
        }
      ],
      packet: '',
      res: '',
      key: ['id', 'state', 'sender'],
      value: [1, 'off', 'websocket client'],
      pushed: '',
      switches: ['off', 'off', 'off', 'off']
    }
  },
  methods: {
    async send (packet) {
      this.clear()
      if (!packet.cmd) {
        packet = {
          cmd: this.cmd,
          [this.key[0]]: this.value[0],
          [this.key[1]]: this.value[1],
          [this.key[2]]: this.value[2]
        }
      }
      this.packet = JSON.stringify(packet)
      let [err, res] = await btc(this.$socket.send)(packet)
      if (err) {
        console.log('error ', err)
        this.$q.notify({
          color: 'negative',
          message: 'Error in repsonse of packet send'
        })
      } else {
        delete res._header
        if (res.ack) {
          this.$q.notify({
            color: 'positive',
            message: 'ack reply received'
          })
        }
        this.res = JSON.stringify(res)
      }
    },
    clear () {
      this.pushed = ''
      this.resMsg = ''
      this.resPayload = ''
      this.packet = ''
    },
    toggle (id) {
      let packet = { cmd: 'switch/toggle', id: id, state: this.switches[id - 1] }
      this.send(packet)
    }
  },
  async mounted () {
    this.$q.notify({
      color: 'info',
      message: `Client connecting to', ${this.$socket.url}`
    })
    let [err] = await btc(this.$socket.connect)()
    if (err) {
      this.$q.notify({
        color: 'negative',
        // message: 'Websocket Server Not Available'
        message: err.msg
      })
      this.offLine = true
    } else {
      this.$q.notify({ color: 'positive', message: 'Ready' })
      this.$socket.listen()
      this.clear()
      this.offLine = false
    }
    this.$socket.on('pushed', packet => {
      delete packet._header
      this.pushed = JSON.stringify(packet)
      if (packet.cmd === 'switch/status') {
        this.switches[packet.id - 1] = packet.state
      }
    })
  }
}
</script>

<style lang="stylus">

.on
    background $positive

.off
    background grey

</style>