加入狀態畫面

2017-09-07 17:18:51 +08:00
parent 3c06bf5d8b
commit 97ee7dc6cd
8 changed files with 272 additions and 5 deletions
@@ -0,0 +1,24 @@
+<%- include ../includes/header.ejs %>
+
+<div class="ui container" style="padding-top: 20px;">
+  <div class="ui grid">
+    <div class="row">
+      <div class="three wide column">
+        <div class="ui vertical menu">
+          <a href="/" class="item">Dashboard</a>
+          <div class="item">
+            <div class="header">系統功能</div>
+            <div class="menu">
+              <a href="#" class="item">Func1</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="thirteen wide column">
+        <%- include statusview.ejs %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<%- include ../includes/footer.ejs %>
@@ -0,0 +1,98 @@
+<div class="ui container">
+  <div class="ui grid">
+    <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">Disconnect</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>
+
+<script>
+  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)
+
+        $('#prt-con').text(d.printer.connect ? 'Connect' : 'Disconnect')
+        $('#prt-port').text(d.printer.serial)
+        $('#prt-feed').text(d.printer.feed)
+
+        $('#prt-count').text(d.pcount)
+
+        $('#prt-last').text(d.lastprint)
+        break
+    }
+  }
+</script>