fin control panel

This commit is contained in:
Jay
2017-09-14 15:55:10 +08:00
parent 0aad260946
commit 0ff6508d2f
5 changed files with 67 additions and 22 deletions
+11 -1
View File
@@ -27,6 +27,12 @@
<label for="en-ble">啟用藍芽</label>
</div>
</div>
<h3 class="ui dividing header">WebAPI設定</h3>
<div class="field">
<label for="api-secret">API密鑰</label>
<input type="text" name="api-secret" placeholder="請輸入密鑰,空白不設定" id="api-secret">
</div>
<div style="margin-top: 40px; text-align: right;">
<button class="ui button blue" type="submit">送出設定</button>
@@ -75,7 +81,8 @@
let json = {
tty: '',
feed: 0,
ble: ''
ble: '',
secret: ''
}
let dev = getValue(document.querySelector('select#tty'))
let feed = getValue(document.querySelector('input#feed'))
@@ -85,10 +92,13 @@
if(!dev) return alert('請選擇印表機連接埠')
if (!isFinite(feed) || feed < 0) return alert('切紙前空行請輸入整數')
let secret = getValue(document.querySelector('input#api-secret'))
json.tty = dev
json.feed = Math.floor(parseInt(feed))
json.ble = ble
json.secret = secret
$.ajax({
url: '/api/write_config',
+38 -19
View File
@@ -2,33 +2,47 @@
<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>
<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 eight wide">
<div class="column sixteen wide">
<div class="segment ui">
<h4 class="ui header dividing">藍芽狀態</h4>
<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 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>
@@ -83,6 +97,8 @@
characteristic: ''
}
var apikey = ''
var ws = new WebSocket('ws://' + location.host)
ws.onmessage = msg => {
// console.log(msg)
@@ -106,6 +122,9 @@
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)
@@ -117,11 +136,11 @@
}
}
$('#gen-qr').click(function () {
$('#gen-ble-qr, #gen-api-qr').click(function () {
let qrdiv = document.querySelector('div#qr')
qrdiv.innerHTML = ''
let qr = new QRCode(qrdiv, {
text: JSON.stringify(setting, null, 2),
text: this.id === 'gen-ble-qr' ? JSON.stringify(setting, null, 2) : JSON.stringify({apikey}, null, 2),
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L