ble-server/views/dashboard/statusview.ejs

<div class="ui container">
  <div class="ui grid">
    <div class="column sixteen wide t-right">
      <div class="ui segment">
        <button class="ui button mini" type="button" id="gen-api-qr">Generate API QR</button>
        <button class="ui button mini" type="button" id="gen-ble-qr">Generate BLE QR</button>
        <button class="ui button mini red" type="button" id="dev-reboot">Reboot</button>
      </div>
    </div>
    <div class="column sixteen wide">
      <div class="segment ui">
        <h4 class="ui header dividing">系統狀態</h4>
        <div class="ui divided list">
          <div class="item">
            <div class="ui horizontal label basic">API Key</div>
            <div class="description t-right" id="apikey"></div>
          </div>

        </div>
      </div>
    </div>

    <div class="column eight wide">
      <div class="segment ui">
        <h4 class="ui header dividing">藍芽狀態</h4>
        <div class="ui divided list">
          <div class="item">
            <div class="ui horizontal label basic">啟用狀態</div>
            <div class="description t-right" id="en-ble">On</div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">Mac Address</div>
            <div class="description t-right" id="ble-mac"></div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">ServiceUUID</div>
            <div class="description t-right" id="ble-service"></div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">CharacteristicUUID</div>
            <div class="description t-right" id="ble-character"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column eight wide">
      <div class="segment ui">
        <h4 class="ui header dividing">印表機狀態</h4>
        <div class="ui divided list">
          <div class="item">
            <div class="ui horizontal label basic">連線狀態</div>
            <div class="description t-right" id="prt-con"></div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">連接埠</div>
            <div class="description t-right" id="prt-port"></div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">切紙前空行</div>
            <div class="description t-right" id="prt-feed"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="column eight wide">
      <div class="segment ui">
        <h4 class="ui header dividing">列印計數器</h4>
        <div class="ui divided list">
          <div class="item">
            <div class="ui horizontal label basic">列印次數</div>
            <div class="description t-right" id="prt-count">0</div>
          </div>
        </div>
      </div>
    </div>

    <div class="column eight wide">
      <div class="segment ui">
        <h4 class="ui header dividing">最後列印內容</h4>
        <div id="prt-last"></div>
      </div>
    </div>
  </div>
</div>

<div class="ui page dimmer" id="qr-dimmer">
  <div class="content">
    <div class="center" id="qr"></div>
  </div>
</div>

<div class="ui mini modal" id="confirm-box">
  <div class=" content">
    確定要把設備重新啟動嗎?
  </div>
  <div class="actions">
    <div class="ui black deny button" id="close">
      取消
    </div>
    <div class="ui button red" id="run">
      確定
    </div>
  </div>
</div>

<script>
  var setting = {
    mac: '',
    service: '',
    characteristic: ''
  }

  var apikey = ''
  var ws = null

  function connectSocket() {
    ws = new WebSocket('ws://' + location.host)
    ws.onclose = () => {
      ws = null
      setTimeout(() => {
        console.log(`try reconnect`)
        connectSocket()
      }, 2000)
    }
    ws.onmessage = msg => {
      // console.log(msg)
      let data = {}
      try {
        data = JSON.parse(msg.data)
      } catch (err) {
        return
      }

      switch (data.type) {
        case 'status':
          console.log(data)
          let d = data.data
          $('#en-ble').text(d.ble.enable ? 'On' : 'Off')
          $('#ble-mac').text(d.ble.mac)
          $('#ble-service').text(d.ble.service)
          $('#ble-character').text(d.ble.characteristic)

          setting.mac = d.ble.mac
          setting.service = d.ble.service
          setting.characteristic = d.ble.characteristic

          apikey = d.secret
          $('#apikey').text(apikey)

          $('#prt-con').text(d.printer.connect ? 'Connected' : 'Disconnected')
          $('#prt-port').text(d.printer.serial)
          $('#prt-feed').text(d.printer.feed)

          $('#prt-count').text(d.pcount)

          $('#prt-last').text(d.lastprint)
          break
      }
    }
  }

  connectSocket()

  $('#gen-ble-qr, #gen-api-qr').click(function () {
    let qrdiv = document.querySelector('div#qr')
    qrdiv.innerHTML = ''
    let qr = new QRCode(qrdiv, {
      text: this.id === 'gen-ble-qr' ? JSON.stringify(setting, null, 2) : JSON.stringify({ apikey }, null, 2),
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.L
    })
    // qr.makeCode(JSON.stringify(setting, null, 2))
    $('#qr-dimmer').dimmer('show')
  })

  $('#dev-reboot').click(function(){
    $('#confirm-box').modal('show')
    $('#confirm-box #close').unbind('click').click(function(){
      $('#confirm-box').modal('hide')
    })
    $('#confirm-box #run').unbind('click').click(function(){
      $('#confirm-box').modal('hide')
      $.ajax({
        url: '/reboot_sys',
        type: 'put',
        success: function(){
          setTimeout(function(){
            location.replace('/')
          }, 30000)
          $('#loader').addClass('active')
        },
        error: function(){
          alert('系統重新啟動失敗')
        }
      })
    })
  })

</script>