<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>ACMEtron 9000 - Settings</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[type="text"] { 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) { if ($(el).attr('type') == 'radio' && !$(el).is(':checked')) return; 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><!--#call parameter_name --></code> blocks. For each such block, mongoose triggers <code>MG_EV_SSI_CALL</code> event, passing <code>parameter_name</code> string as an event parameter. A callback then can print some content, which will replace the <code><!--#call parameter_name --></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 -->" > <label>Setting 3:</label> <input type="radio" name="setting3" value="one" <!--#call setting3_is_one --> > One <input type="radio" name="setting3" value="two" <!--#call setting3_is_two --> > Two </fieldset> <div style="margin: 1em 0;"> <button type="submit">Save</button> </div> <div id="result"> </div> </form> </div> </body> </html>