littlewhite/ble-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

新增重新啟動按鈕

Browse Source
This commit is contained in:
Jay 2017-09-20 22:40:25 +08:00
parent 021b7fea8d
commit a530c81225
3 changed files with 105 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
views/dashboard/index.ejs
View File

@ -1,5 +1,7 @@
<%- include ../includes/header.ejs %> <%- include ../includes/header.ejs %>
<div class="ui dimmer" id="loader">
<div class="ui loader text">Rebooting...</div>
</div>
<div class="ui container" style="padding-top: 20px;"> <div class="ui container" style="padding-top: 20px;">
<div class="ui grid"> <div class="ui grid">
<div class="row"> <div class="row">

5
views/dashboard/setting.ejs
View File

@ -39,10 +39,7 @@
</div> </div>
</form> </form>
</div> </div>
<div class="ui dimmer" id="loader">
<div class="ui loader text">Rebooting...</div>
</div>
<script> <script>
function getValue(obj){ function getValue(obj){

152
views/dashboard/statusview.ejs
View File

@ -4,6 +4,7 @@
<div class="ui segment"> <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-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" 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> </div>
<div class="column sixteen wide"> <div class="column sixteen wide">
@ -14,34 +15,34 @@
<div class="ui horizontal label basic">API Key</div> <div class="ui horizontal label basic">API Key</div>
<div class="description t-right" id="apikey"></div> <div class="description t-right" id="apikey"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="column eight wide"> <div class="column eight wide">
<div class="segment ui"> <div class="segment ui">
<h4 class="ui header dividing">藍芽狀態</h4> <h4 class="ui header dividing">藍芽狀態</h4>
<div class="ui divided list"> <div class="ui divided list">
<div class="item"> <div class="item">
<div class="ui horizontal label basic">啟用狀態</div> <div class="ui horizontal label basic">啟用狀態</div>
<div class="description t-right" id="en-ble">On</div> <div class="description t-right" id="en-ble">On</div>
</div> </div>
<div class="item"> <div class="item">
<div class="ui horizontal label basic">Mac Address</div> <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 class="description t-right" id="ble-mac"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="ui horizontal label basic">ServiceUUID</div> <div class="ui horizontal label basic">ServiceUUID</div>
<div class="description t-right" id="ble-service">37B2975E-1A4B-4975-9211-9D47142B8183</div> <div class="description t-right" id="ble-service"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="ui horizontal label basic">CharacteristicUUID</div> <div class="ui horizontal label basic">CharacteristicUUID</div>
<div class="description t-right" id="ble-character">37B2975E-1A4B-4975-9211-9D47142B8183</div> <div class="description t-right" id="ble-character"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="column eight wide"> <div class="column eight wide">
<div class="segment ui"> <div class="segment ui">
@ -49,15 +50,15 @@
<div class="ui divided list"> <div class="ui divided list">
<div class="item"> <div class="item">
<div class="ui horizontal label basic">連線狀態</div> <div class="ui horizontal label basic">連線狀態</div>
<div class="description t-right" id="prt-con">Disconnected</div> <div class="description t-right" id="prt-con"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="ui horizontal label basic">連接埠</div> <div class="ui horizontal label basic">連接埠</div>
<div class="description t-right" id="prt-port">/dev/ttyUSB0</div> <div class="description t-right" id="prt-port"></div>
</div> </div>
<div class="item"> <div class="item">
<div class="ui horizontal label basic">切紙前空行</div> <div class="ui horizontal label basic">切紙前空行</div>
<div class="description t-right" id="prt-feed">8</div> <div class="description t-right" id="prt-feed"></div>
</div> </div>
</div> </div>
</div> </div>
@ -90,6 +91,20 @@
</div> </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> <script>
var setting = { var setting = {
mac: '', mac: '',
@ -98,49 +113,61 @@
} }
var apikey = '' var apikey = ''
var ws = null
var ws = new WebSocket('ws://' + location.host) function connectSocket() {
ws.onmessage = msg => { ws = new WebSocket('ws://' + location.host)
// console.log(msg) ws.onclose = () => {
let data = {} ws = null
try { setTimeout(() => {
data = JSON.parse(msg.data) console.log(`try reconnect`)
} catch (err) { connectSocket()
return }, 2000)
} }
ws.onmessage = msg => {
// console.log(msg)
let data = {}
try {
data = JSON.parse(msg.data)
} catch (err) {
return
}
switch (data.type) { switch (data.type) {
case 'status': case 'status':
console.log(data) console.log(data)
let d = data.data let d = data.data
$('#en-ble').text(d.ble.enable ? 'On' : 'Off') $('#en-ble').text(d.ble.enable ? 'On' : 'Off')
$('#ble-mac').text(d.ble.mac) $('#ble-mac').text(d.ble.mac)
$('#ble-service').text(d.ble.service) $('#ble-service').text(d.ble.service)
$('#ble-character').text(d.ble.characteristic) $('#ble-character').text(d.ble.characteristic)
setting.mac = d.ble.mac setting.mac = d.ble.mac
setting.service = d.ble.service setting.service = d.ble.service
setting.characteristic = d.ble.characteristic setting.characteristic = d.ble.characteristic
apikey = d.secret apikey = d.secret
$('#apikey').text(apikey) $('#apikey').text(apikey)
$('#prt-con').text(d.printer.connect ? 'Connected' : 'Disconnected') $('#prt-con').text(d.printer.connect ? 'Connected' : 'Disconnected')
$('#prt-port').text(d.printer.serial) $('#prt-port').text(d.printer.serial)
$('#prt-feed').text(d.printer.feed) $('#prt-feed').text(d.printer.feed)
$('#prt-count').text(d.pcount) $('#prt-count').text(d.pcount)
$('#prt-last').text(d.lastprint) $('#prt-last').text(d.lastprint)
break break
}
} }
} }
connectSocket()
$('#gen-ble-qr, #gen-api-qr').click(function () { $('#gen-ble-qr, #gen-api-qr').click(function () {
let qrdiv = document.querySelector('div#qr') let qrdiv = document.querySelector('div#qr')
qrdiv.innerHTML = '' qrdiv.innerHTML = ''
let qr = new QRCode(qrdiv, { let qr = new QRCode(qrdiv, {
text: this.id === 'gen-ble-qr' ? JSON.stringify(setting, null, 2) : JSON.stringify({apikey}, null, 2), text: this.id === 'gen-ble-qr' ? JSON.stringify(setting, null, 2) : JSON.stringify({ apikey }, null, 2),
colorDark: "#000000", colorDark: "#000000",
colorLight: "#ffffff", colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.L correctLevel: QRCode.CorrectLevel.L
@ -149,4 +176,27 @@
$('#qr-dimmer').dimmer('show') $('#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> </script>