Statistics
| Branch: | Tag: | Revision:

mongoose / examples / settings_panel_for_a_device / web_root / index.shtml @ eaef5bd1

History | View | Annotate | Download (3.69 KB)

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8" />
5
  <title>ACMEtron 9000 - Settings</title>
6
  <meta name="viewport" content="width=device-width, initial-scale=1" />
7
  <style type="text/css">
8
    * { outline: none; }
9
    body {
10
      background-color: #789; margin: 0;
11
      padding: 0; font: 16px/1.4 Helvetica, Arial, sans-serif;
12
      font: 16px/1.4 Helvetica, Arial, sans-serif;
13
    }
14
    div.content {
15
      width: 800px; margin: 2em auto; padding: 20px 50px;
16
      background-color: #fff; border-radius: 1em;
17
    }
18
    code { background: #eee; padding: 0 0.3em; border-radius: 0.2em; }
19
    label { display: inline-block; min-width: 5em; }
20
    input[type="text"] { border: 1px solid #ccc; padding: 0.2em; margin-right: 2em; }
21
    a:link, a:visited { color: #69c; text-decoration: none; }
22
    @media (max-width: 900px) {
23
      div.content { width: auto; margin: 2em; padding: 1em; }
24
    }
25
    fieldset { border: 1px solid #ccc; padding: 1em; }
26
    #result {
27
      background: #cfc; border: 1px solid #ccc; padding: 2px 1em;
28
      white-space: pre-wrap; font-size: 85%; display: none; text-align: center;
29
    }
30
</style>
31

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

    
36
    $(document).on('submit', '#settings_form', function() {
37
      var data = {};
38
      $('#settings_form [name]').each(function(index, el) {
39
        if ($(el).attr('type') == 'radio' && !$(el).is(':checked')) return;
40
        data[$(el).attr('name')] = $(el).val();
41
      });
42
      $('#result').text('');
43
      $.ajax({
44
        url: '/save',
45
        method: 'POST',
46
        dataType: 'html',
47
        data: data,
48
        success: function(data) {
49
          $('#result').text('saved').show().fadeOut(2000);
50
        }
51
      });
52
      return false;
53
    });
54

    
55

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

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

    
68
    <h3>How to show device parameters on the page</h3>
69
    <p>This page has embedded
70
      <code>&lt;!--#call parameter_name --&gt;</code> blocks. For each such
71
      block, mongoose triggers <code>MG_EV_SSI_CALL</code> event, passing
72
      <code>parameter_name</code> string as an event parameter. A callback
73
      then can print some content, which will replace the
74
      <code>&lt;!--#call parameter_name --&gt;</code> block.
75
      Take a look at <code>handle_ssi_call()</code> to see how that is done.
76
    </p>
77

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

    
84

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

    
88
    <form method="POST" id="settings_form">
89
    <fieldset>
90
      <legend>Device settings</legend>
91
      <label>Setting 1:</label> <input type="text"
92
        name="setting1" value="<!--#call setting1 -->" >
93
      <label>Setting 2:</label> <input type="text"
94
        name="setting2" value="<!--#call setting2 -->" >
95
      <label>Setting 3:</label>
96
        <input type="radio" name="setting3" value="one" <!--#call setting3_is_one --> > One
97
        <input type="radio" name="setting3" value="two" <!--#call setting3_is_two --> > Two
98
    </fieldset>
99

    
100
    <div style="margin: 1em 0;">
101
     <button type="submit">Save</button>
102
    </div>
103
     <div id="result">&nbsp;</div>
104
    </form>
105

    
106
  </div>
107
</body>
108
</html>