ble-server/views/dashboard/setting.ejs

<div class="ui container" style="padding-top: 20px;">
    <h1 class="ui header">系統安裝設定</h1>
    <form id="setup" class="ui form">
      <h3 class="ui dividing header">印表機設定</h3>
      <div class="field">
        <label for="tty">印表機連接埠</label>
        <select name="tty" id="tty">
          <option value="">選擇裝置</option>
          <% for(let i of ttys) { %>
            <option value="<%= i %>" <%= i == defConfig.printer.serial ? 'selected' : '' %>><%= i %></option>
          <% } %>
        </select>
      </div>
      <div class="field">
        <label for="feed">切紙前空行</label>
        <input type="text" name="feed" value="<%= defConfig.printer.feed %>" id="feed">
      </div>
      <div class="field">
        <button class="ui button mini" type="button" id="test-printer">測試印表機</button>
      </div>
  
      <h3 class="ui dividing header">藍芽列印設定</h3>
      <div class="field">
        <div class="ui checkbox">
          <input type="checkbox" class="hidden" id="en-ble" <%= defConfig.ble.enable ? 'checked' : '' %>>
          <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" value="<%= defConfig.api.secret %>" placeholder="請輸入密鑰，空白不設定" id="api-secret">
      </div>
  
      <div style="margin-top: 40px; text-align: right;">
        <button class="ui button blue" type="submit">送出設定</button>
      </div>
    </form>
  </div>
  
  <div class="ui dimmer" id="loader">
    <div class="ui loader text">Rebooting...</div>
  </div>
  
  <script>
    function getValue(obj){
      if(!obj || !('value' in obj)) return ''
      return obj.value
    }
  
    $('#test-printer').click(function(){
      let json = {
        device: '',
        feed: 0
      }
      let dev = getValue(document.querySelector('select#tty'))
      let feed = getValue(document.querySelector('input#feed'))
  
      if(!dev) return alert('請選擇印表機連接埠')
      if (!isFinite(feed) || feed < 0) return alert('切紙前空行請輸入整數')
  
      json.device = dev
      json.feed = Math.floor(parseInt(feed))
  
      $.ajax({
        url: '/api/printer_test',
        type: 'post',
        data: json,
        success: function(e){
          alert(e.msg || '資料傳送失敗')
        }
      })
  
    })
  
    $('form#setup').submit(function(e) {
      e.preventDefault()
  
      let json = {
        tty: '',
        feed: 0,
        ble: '',
        secret: ''
      }
      let dev = getValue(document.querySelector('select#tty'))
      let feed = getValue(document.querySelector('input#feed'))
      let elBle = document.querySelector('input#en-ble')
      let ble = ''
      if(elBle != null && 'checked' in elBle) ble = elBle.checked ? 'yes' : 'no'
  
      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',
        type: 'post',
        data: json,
        success: function(e){
          if(e.status != 1) {
            alert(e.msg || '寫入失敗')
            return
          }
  
          $.ajax({
            url: '/reboot_sys',
            type: 'put',
            success: function(){
              setTimeout(function(){
                location.replace('/')
              }, 30000)
              $('#loader').addClass('active')
            },
            error: function(){
              alert('系統重新啟動失敗')
            }
          })
        }
      })
  
      return false
    })
  </script>