Skip to content

M
mongoose
Switch branch/tag
Find file
Normal viewHistoryPermalink
index.shtml 3.38 KB
Newer Older
Marko Mikulicic's avatar
Merge dev branch code named Fossa as next stable Mongoose
8927c9d2
 
Marko Mikulicic committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>RESTful API demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style type="text/css">
    * { outline: none; }
    body {
      background-color: #789; margin: 0;
      padding: 0; font: 16px/1.4 Helvetica, Arial, sans-serif;
      font: 16px/1.4 Helvetica, Arial, sans-serif;
    }
    div.content {
      width: 800px; margin: 2em auto; padding: 20px 50px;
      background-color: #fff; border-radius: 1em;
    }
    code { background: #eee; padding: 0 0.3em; border-radius: 0.2em; }
    label { display: inline-block; min-width: 5em; }
    input { border: 1px solid #ccc; padding: 0.2em; margin-right: 2em; }
    a:link, a:visited { color: #69c; text-decoration: none; }
    @media (max-width: 900px) {
      div.content { width: auto; margin: 2em; padding: 1em; }
    }
    fieldset { border: 1px solid #ccc; padding: 1em; }
    #result {
      background: #cfc; border: 1px solid #ccc; padding: 2px 1em;
      white-space: pre-wrap; font-size: 85%; display: none; text-align: center;
    }
</style>

<script src="jquery-1.11.3.min.js"></script>
<script language="javascript" type="text/javascript">
  jQuery(function() {

    $(document).on('submit', '#settings_form', function() {
      var data = {};
      $('#settings_form [name]').each(function(index, el) {
        data[$(el).attr('name')] = $(el).val();
      });
      $('#result').text('');
      $.ajax({
        url: '/save',
        method: 'POST',
        dataType: 'html',
        data: data,
        success: function(data) {
          $('#result').text('saved').show().fadeOut(2000);
        }
      });
      return false;
    });


  });
</script>
</head>
<body>
  <div class="content">
    <img src="mongoose.jpg" style="float:right; height: 50px; border-radius: 3px;">
    <h1>Device Configurator demo.</h1>

    <p>
      This page demonstrates how Mongoose could be used to implement
      device settings page.</p>

    <h3>How to show device parameters on the page</h3>
    <p>This page has embedded
      <code>&lt;!--#call parameter_name --&gt;</code> blocks. For each such
Sergey Lyubka's avatar
Rename Mongoose constants: NS_ -> MG_, NSF_ -> MG_F_
e1dd3f06
 
Sergey Lyubka committed
70 
      block, mongoose triggers <code>MG_EV_SSI_CALL</code> event, passing
Marko Mikulicic's avatar
Merge dev branch code named Fossa as next stable Mongoose
8927c9d2
 
Marko Mikulicic committed
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 
      <code>parameter_name</code> string as an event parameter. A callback
      then can print some content, which will replace the
      <code>&lt;!--#call parameter_name --&gt;</code> block.
      Take a look at <code>handle_ssi_call()</code> to see how that is done.
    </p>

    <h3>How to save updated values</h3>
    <p>When Save button is clicked, this page makes Ajax call and passes
    values to the backend in a POST request. Backend extracts values from
    the POST request and updates the configuration. Take a look at
    <code>handle_save()</code> to see how that is done.</p>


    <p>You can change values, click Save button, refresh this page - make sure
    settings values stay intact between refreshes. </p>

    <form method="POST" id="settings_form">
    <fieldset>
      <legend>Device settings</legend>
      <label>Setting 1:</label> <input type="text"
        name="setting1" value="<!--#call setting1 -->" >
      <label>Setting 2:</label> <input type="text"
        name="setting2" value="<!--#call setting2 -->" >
    </fieldset>

    <div style="margin: 1em 0;">
     <button type="submit">Save</button>
    </div>
     <div id="result">&nbsp;</div>
    </form>

  </div>
</body>
</html>