<script>
import { RouterLink, RouterView } from 'vue-router'
import SerialPortHandler from './serial/serial.js'

export default {
  data() {
    return {
      serialPortHandler: this.serialPortHandler,
      lastMessage: ""
    }
  },

  computed: {
    isOpened() {
      if (this.serialPortHandler) {
        return (this.serialPortHandler.isOpened == true)
      }
      return false
    }
  },

  methods: {
    async connect() {
      try {
        if (this.serialPortHandler.isOpened) return;
        const info = await this.serialPortHandler.open()
        this.lastMessage = ''
      } catch (error) {
        console.log(error)
        this.lastMessage = 'Failed to open serial port'
      }
    },

    disconnect() {
      if (this.serialPortHandler.isOpened) {
        let counter = 0
        while (this.serialPortHandler.port.readable.locked || this.serialPortHandler.port.writable.locked) {
          console.log('waiting...')
          setTimeout(10)
          counter++
          if (counter > 10) {
            break
          }
        }
        this.serialPortHandler.close()
      }
    },
  },
  
  mounted() {
    if (!('serial' in navigator)) {
      this.lastMessage = 'Web Serial API is not supported in your browser'
      console.error(this.lastMessage)
      return;
    }    
    this.serialPortHandler = new SerialPortHandler (
      { baudRate: 115200 },
      () => {
        console.log('Device connected')
      },
      () => {
        this.serialPortHandler.isOpened = false
        console.log('Device disconnected')
      }
    );

  },
}
</script>

<template>
<div class="container">
  <header>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">

      <div></div>

      <div class="text-danger p-1 m-0" role="alert">
        <span v-if="lastMessage!=''">&#9888; {{lastMessage}}</span>
      </div>

      <div>
      <form>
        <div class="row">
          <div class="col">
          </div>
          <div class="col-auto text-center">
            <span :class="isOpened==true?'fs-4 text-success':'fs-4 text-secondary'" :title="isOpened==true?'Connected':'Disconnected'">&#9679; &#9881;</span>
          </div>

          <div class="col-auto">
            <button type="button" @click="connect()" v-if="isOpened == false" class="btn btn-dark btn-sm">Connect</button>
            <button type="button" @click="disconnect()" v-if="isOpened == true" class="btn btn-dark btn-sm">Disconnect</button>
          </div>
        </div>
      </form>
      </div>

      </div>
    </nav>

  </header>

  <RouterView />
  
</div>
</template>

<style>
@import '@/assets/style.css';
@import '@/assets/bootstrap.css';

body {
    font-size: 12px;
    user-select: none;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: #FFC300;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 5px #FFC300;
  outline: 0 none;
}

.container {
  max-width: 1200px;
}

</style>
