From a530c81225fba57bf65e5d8c5fd3321a0697301d Mon Sep 17 00:00:00 2001
From: Jay <admin@trj.tw>
Date: Wed, 20 Sep 2017 22:40:25 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=87=8D=E6=96=B0=E5=95=9F?=
 =?UTF-8?q?=E5=8B=95=E6=8C=89=E9=88=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/dashboard/index.ejs      |   4 +-
 views/dashboard/setting.ejs    |   5 +-
 views/dashboard/statusview.ejs | 152 ++++++++++++++++++++++-----------
 3 files changed, 105 insertions(+), 56 deletions(-)

diff --git a/views/dashboard/index.ejs b/views/dashboard/index.ejs
index 4fdb537..2669911 100644
--- a/views/dashboard/index.ejs
+++ b/views/dashboard/index.ejs
@@ -1,5 +1,7 @@
 <%- 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 grid">
     <div class="row">
diff --git a/views/dashboard/setting.ejs b/views/dashboard/setting.ejs
index 1e52c05..7be47f8 100644
--- a/views/dashboard/setting.ejs
+++ b/views/dashboard/setting.ejs
@@ -39,10 +39,7 @@
       </div>
     </form>
   </div>
-  
-  <div class="ui dimmer" id="loader">
-    <div class="ui loader text">Rebooting...</div>
-  </div>
+
   
   <script>
     function getValue(obj){
diff --git a/views/dashboard/statusview.ejs b/views/dashboard/statusview.ejs
index 384b3fc..13dfae0 100644
--- a/views/dashboard/statusview.ejs
+++ b/views/dashboard/statusview.ejs
@@ -4,6 +4,7 @@
       <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>
+        <button class="ui button mini red" type="button" id="dev-reboot">Reboot</button>
       </div>
     </div>
     <div class="column sixteen wide">
@@ -14,34 +15,34 @@
             <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 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"></div>
+          </div>
+          <div class="item">
+            <div class="ui horizontal label basic">ServiceUUID</div>
+            <div class="description t-right" id="ble-service"></div>
+          </div>
+          <div class="item">
+            <div class="ui horizontal label basic">CharacteristicUUID</div>
+            <div class="description t-right" id="ble-character"></div>
           </div>
         </div>
       </div>
+    </div>
 
     <div class="column eight wide">
       <div class="segment ui">
@@ -49,15 +50,15 @@
         <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 class="description t-right" id="prt-con"></div>
           </div>
           <div class="item">
             <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 class="item">
             <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>
@@ -90,6 +91,20 @@
   </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>
   var setting = {
     mac: '',
@@ -98,49 +113,61 @@
   }
 
   var apikey = ''
+  var ws = null
 
-  var ws = new WebSocket('ws://' + location.host)
-  ws.onmessage = msg => {
-    // console.log(msg)
-    let data = {}
-    try {
-      data = JSON.parse(msg.data)
-    } catch (err) {
-      return
+  function connectSocket() {
+    ws = new WebSocket('ws://' + location.host)
+    ws.onclose = () => {
+      ws = null
+      setTimeout(() => {
+        console.log(`try reconnect`)
+        connectSocket()
+      }, 2000)
     }
+    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)
+      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
+          setting.mac = d.ble.mac
+          setting.service = d.ble.service
+          setting.characteristic = d.ble.characteristic
 
-        apikey = d.secret
-        $('#apikey').text(apikey)
+          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-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-count').text(d.pcount)
 
-        $('#prt-last').text(d.lastprint)
-        break
+          $('#prt-last').text(d.lastprint)
+          break
+      }
     }
   }
 
+  connectSocket()
+
   $('#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),
+      text: this.id === 'gen-ble-qr' ? JSON.stringify(setting, null, 2) : JSON.stringify({ apikey }, null, 2),
       colorDark: "#000000",
       colorLight: "#ffffff",
       correctLevel: QRCode.CorrectLevel.L
@@ -149,4 +176,27 @@
     $('#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>
\ No newline at end of file