preference.html

<script type="text/javascript">

   

$(document).ready(function () {


    $("#frm_preference").autofill(pref);

    
    // $(":input").addClass("required");
    $(".btn-save").click(function(){
        ret = $("#frm_preference").valid();
        if(ret == true){
          pref.devMode = $("#devMode").val()
          pref.productionServer = $("#productionServer").val()
          pref.arduinoPath = $("#arduinoPath").val()

          try{
            fs.writeFileSync('./preference.ini', ini.stringify(pref));
                swal({
                  type: 'success',
                  title: 'Save successfully',
                  text: 'Preference saved',				
                });                  
                app.readPref();
          }
          catch(e){
            swal("An error ocurred creating the file "+ e.message)
          }
          

        }else{
            swal("You must set all settings!")
        }
    })

    $(".btn-arduino-path-folder").click(function (e) { 
      try{
        var folderPath = dialog.showOpenDialog({
            properties: ['openDirectory'],
            title: "Path to Arduino IDE,eg: D:\\Program Files (x86)\\Arduino"
        });
        arduinoPath = `${folderPath[0]}${path.sep}`;
        $("#arduinoPath").val(arduinoPath);
      }catch(e){  }
    });
});
</script>   

<!-- Modal content-->
<div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4>PREFERENCES <span style="font-size: 0.5em">- Save to "preference.json"</span></h4>
    </div>
    <div class="modal-body">

      <form id="frm_preference">
          <table style="width: 100%" class="table table-bordered table-striped tbl-devices">
            <thead>
            <tr>
              <th style="width:5px">#</th>
              <th style="width:10%">Config</th>
              <th style="width:10%">Attribute</th>
              <th>Description</th>
            </tr>
            </thead>
            
            <tbody>
          
              <tr>
                  <td></td>
                  <td>Dev mode</td>
                  <td>
                      <select class="required" name="devMode" id="devMode">
                          <option value="0">False</option>
                          <option value="1">True</option>
                      </select>
                  </td>
                  <td>Dev mode = true will activate usage of local API and other debug feature. Dont touch if you dont know what to do</td>
              </tr>  
              <tr>
                  <td></td>
                  <td>Production server</td>
                  <td><input type = "text" name="productionServer" id="productionServer" class="required"/></td>
                  <td>Production Server, http with NO SLASH at end. Example: http://www.quickiots.com</td>
              </tr>      
              <tr>
                  <td></td>
                  <td>Arduino Path</td>
                  <td>
                    <div class="btn-group">
                    <input class="required" readonly type = "text" name="arduinoPath" id="arduinoPath"/>
                    <btn class="btn btn-small btn-info btn-arduino-path-folder"><i class="icon-folder-open"></i></btn>
                  </div>
                  </td>
                  <td>Path to Arduino</td>
              </tr>    
                          
          
            </tbody>
          </table>
          </form>



    </div>  <!-- end div body -->   
    <div class="modal-footer">
      <span class="btn btn-danger btn-small btn-save"><i class="icon-save"></i> Save preference</span>
      <button type="button" class="btn btn-default btn-small" data-dismiss="modal">Close</button>
    </div>
</div>