ble-server/views/dashboard/statusview.ejs
Jay a7f7653efa 修改服務啟動動作與QRCode產生按鈕
1.啟動時連接印表機
2.判斷是否要開啟藍芽
3.畫面加入QRCode產生按鈕,方便APP設定
2017-09-07 23:41:56 +08:00

133 lines
4.0 KiB
Plaintext

<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-qr">GenerateQR</button>
</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 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
$('#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-qr').click(function () {
let qrdiv = document.querySelector('div#qr')
qrdiv.innerHTML = ''
let qr = new QRCode(qrdiv, {
text: JSON.stringify(setting, null, 2),
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L
})
// qr.makeCode(JSON.stringify(setting, null, 2))
$('#qr-dimmer').dimmer('show')
})
</script>