|
|
- <!DOCTYPE html>
- <html>
- <head>
- <title>{appname} - Configuration</title>
- <meta charset="utf-8" />
- <link rel="stylesheet" href="index.css" />
- <script src="jquery-1.12.3.min.js"></script>
- <script>
-
- $(function() {
-
- var updateInterval = 1000;
-
- $("#config").submit(function(event) {
- $(":submit").prop("value", "Wait...").attr("disabled", true);
- $.ajax({
- 'method': 'POST',
- 'url': '/save',
- 'dataType': 'json',
- 'data': $(this).serializeArray()
- }).done(function(data) {
- $(":submit").prop("value", "Connect").removeAttr("disabled");
- }).fail(function() {
- $(":submit").prop("value", "Connect").removeAttr("disabled");
- });
- event.preventDefault();
- });
-
- function update() {
- $.ajax({
- 'method': 'GET',
- 'url': '/status',
- 'dataType': 'json'
- }).done(function(data) {
- $("span.device").html(data.device);
- $("span.network").html(data.network.toUpperCase());
- $("span.ip").html(data.ip);
- $("span.mqtt").html(data.mqtt ? "CONNECTED" : "NOT CONNECTED");
- $("span.relay").html(data.relay ? "ON" : "OFF");
- updateInterval = parseInt(data.interval);
- setTimeout(update, updateInterval);
- }).fail(function() {
- setTimeout(update, updateInterval);
- });
- }
-
- update();
-
-
- });
-
- </script>
- </head>
- <body>
-
- <form id="config" action="/" method="post">
-
- <header>
- <h2>{appname} - Configuration</h2>
- <div>This form lets you define the WIFI network this device should try to join.</div>
- </header>
-
- <div>
- <p>Device: <span class="device"></span></p>
- <p>Network: <span class="network"></span></p>
- <p>IP: <span class="ip"></span></p>
- <p>MQTT: <span class="mqtt"></span></p>
- <p>Relay: <span class="relay"></span></p>
- </div>
-
- <div>
- <label class="desc" for="ssid0">Network SSID 0</label>
- <div>
- <input id="ssid0" name="ssid0" type="text" class="field text fn" value="{ssid0}" size="8" tabindex="1">
- </div>
- </div>
-
- <div>
- <label class="desc" for="pass0">Network Password 0</label>
- <div>
- <input id="pass0" name="pass0" type="text" spellcheck="false" value="{pass0}" maxlength="255" tabindex="2">
- </div>
- </div>
-
- <div>
- <label class="desc" for="ssid1">Network SSID 1</label>
- <div>
- <input id="ssid1" name="ssid1" type="text" class="field text fn" value="{ssid1}" size="8" tabindex="3">
- </div>
- </div>
-
- <div>
- <label class="desc" for="pass1">Network Password 1</label>
- <div>
- <input id="pass1" name="pass1" type="text" spellcheck="false" value="{pass1}" maxlength="255" tabindex="4">
- </div>
- </div>
-
- <div>
- <label class="desc" for="ssid2">Network SSID 2</label>
- <div>
- <input id="ssid2" name="ssid2" type="text" class="field text fn" value="{ssid2}" size="8" tabindex="5">
- </div>
- </div>
-
- <div>
- <label class="desc" for="pass2">Network Password 2</label>
- <div>
- <input id="pass2" name="pass2" type="text" spellcheck="false" value="{pass2}" maxlength="255" tabindex="6">
- </div>
- </div>
-
- <div>
- <label class="desc" for="mqttServer">MQTT Server</label>
- <div>
- <input id="mqttServer" name="mqttServer" type="text" class="field text fn" value="{mqttServer}" size="8" tabindex="7">
- </div>
- </div>
-
- <div>
- <label class="desc" for="mqttPort">MQTT Port</label>
- <div>
- <input id="mqttPort" name="mqttPort" type="text" spellcheck="false" value="{mqttPort}" maxlength="255" tabindex="8">
- </div>
- </div>
-
- <div>
- <label class="desc" for="mqttTopic">MQTT Topic</label>
- <div>
- <input id="mqttTopic" name="mqttTopic" type="text" class="field text fn" value="{mqttTopic}" size="8" tabindex="9">
- </div>
- </div>
-
- <div>
- <label class="desc" for="rfChannel">RF Channel</label>
- <div>
- <input id="rfChannel" name="rfChannel" type="text" spellcheck="false" value="{rfChannel}" maxlength="255" tabindex="10">
- </div>
- </div>
-
- <div>
- <label class="desc" for="rfDevice">RF Device</label>
- <div>
- <input id="rfDevice" name="rfDevice" type="text" class="field text fn" value="{rfDevice}" size="8" tabindex="11">
- </div>
- </div>
-
- <div>
- <div>
- <input id="submit" name="submit" type="submit" value="Connect">
- </div>
- </div>
-
- </form>
-
- </body>
- </html>
|
