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>
      </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">00:11:22:33:44:55:66</div>
            </div>
            <div class="item">
              <div class="ui horizontal label basic">ServiceUUID</div>
              <div class="description t-right" id="ble-service">37B2975E-1A4B-4975-9211-9D47142B8183</div>
            </div>
            <div class="item">
              <div class="ui horizontal label basic">CharacteristicUUID</div>
              <div class="description t-right" id="ble-character">37B2975E-1A4B-4975-9211-9D47142B8183</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">Disconnected</div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">連接埠</div>
            <div class="description t-right" id="prt-port">/dev/ttyUSB0</div>
          </div>
          <div class="item">
            <div class="ui horizontal label basic">切紙前空行</div>
            <div class="description t-right" id="prt-feed">8</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>

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

  var apikey = ''

  var ws = new WebSocket('ws://' + location.host)
  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
    }
  }

  $('#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')
  })

</script>