新增重新啟動按鈕

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

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">

View File

@ -40,9 +40,6 @@
</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){

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">
@ -29,15 +30,15 @@
</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>
@ -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,8 +113,17 @@
} }
var apikey = '' var apikey = ''
var ws = null
var ws = new WebSocket('ws://' + location.host) function connectSocket() {
ws = new WebSocket('ws://' + location.host)
ws.onclose = () => {
ws = null
setTimeout(() => {
console.log(`try reconnect`)
connectSocket()
}, 2000)
}
ws.onmessage = msg => { ws.onmessage = msg => {
// console.log(msg) // console.log(msg)
let data = {} let data = {}
@ -135,12 +159,15 @@
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>