improve dhcp/static-ip UI

html/ui.js

@@ -1,13 +1,121 @@
-//===== 140medley.min.js with mods
+//===== Collection of small utilities
+
+/*
+ * Bind/Unbind events
+ *
+ * Usage:
+ *   var el = document.getElementyById('#container');
+ *   bnd(el, 'click', function() {
+ *     console.log('clicked');
+ *   });
+ */
+
+var bnd = function(
+  d, // a DOM element
+  e, // an event name such as "click"
+  f  // a handler function
+){
+  d.addEventListener(e, f, false);
+}
+
+/*
+ * Create DOM element
+ *
+ * Usage:
+ *   var el = m('<h1>Hello</h1>');
+ *   document.body.appendChild(el);
+ *
+ * Copyright (C) 2011 Jed Schmidt <http://jed.is> - WTFPL
+ * More: https://gist.github.com/966233
+ */
+
+var m = function(
+  a, // an HTML string
+  b, // placeholder
+  c  // placeholder
+){
+  b = document;                   // get the document,
+  c = b.createElement("p");       // create a container element,
+  c.innerHTML = a;                // write the HTML to it, and
+  a = b.createDocumentFragment(); // create a fragment.
+
+  while (                         // while
+    b = c.firstChild              // the container element has a first child
+  ) a.appendChild(b);             // append the child to the fragment,
+
+  return a                        // and then return the fragment.
+}
 
-var p=function(a,b,c,d){c=c||document;d=c[b="on"+b];a=c[b]=function(e){d=d&&d(e=e||c.event);return(a=a&&b(e))?b:d};c=this},
+/*
-m=function(a,b,c){b=document;c=b.createElement("p");c.innerHTML=a;for(a=b.createDocumentFragment();b=
+ * DOM selector
-c.firstChild;)a.appendChild(b);return a},
+ *
-$=function(a,b){a=a.match(/^(\W)?(.*)/);return(b||document)["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2])},
+ * Usage:
-j=function(a){for(a=0;a<4;a++)try{return a?new ActiveXObject([,"Msxml2","Msxml3","Microsoft"][a]+".XMLHTTP"):new XMLHttpRequest}catch(b){}};
+ *   $('div');
-e=function(a){return document.createElement(a);}
+ *   $('#name');
+ *   $('.name');
+ *
+ * Copyright (C) 2011 Jed Schmidt <http://jed.is> - WTFPL
+ * More: https://gist.github.com/991057
+ */
+
+var $ = function(
+  a,                         // take a simple selector like "name", "#name", or ".name", and
+  b                          // an optional context, and
+){
+  a = a.match(/^(\W)?(.*)/); // split the selector into name and symbol.
+  return(                    // return an element or list, from within the scope of
+    b                        // the passed context
+    || document              // or document,
+  )[
+    "getElement" + (         // obtained by the appropriate method calculated by
+      a[1]
+        ? a[1] == "#"
+          ? "ById"           // the node by ID,
+          : "sByClassName"   // the nodes by class name, or
+        : "sByTagName"       // the nodes by tag name,
+    )
+  ](
+    a[2]                     // called with the name.
+  )
+}
+
+/*
+ * Get cross browser xhr object
+ *
+ * Copyright (C) 2011 Jed Schmidt <http://jed.is>
+ * More: https://gist.github.com/993585
+ */
+
+var j = function(
+  a // cursor placeholder
+){
+  for(                     // for all a
+    a=0;                   // from 0
+    a<4;                   // to 4,
+    a++                    // incrementing
+  ) try {                  // try
+    return a               // returning
+      ? new ActiveXObject( // a new ActiveXObject
+          [                // reflecting
+            ,              // (elided)
+            "Msxml2",      // the various
+            "Msxml3",      // working
+            "Microsoft"    // options
+          ][a] +           // for Microsoft implementations, and
+          ".XMLHTTP"       // the appropriate suffix,
+        )                  // but make sure to
+      : new XMLHttpRequest // try the w3c standard first, and
+  }
+
+  catch(e){}               // ignore when it fails.
+}
+
+// createElement short-hand
+
+e = function(a) { return document.createElement(a); }
 
 // chain onload handlers
+
 function onLoad(f) {
   var old = window.onload;
   if (typeof old != 'function') {
@@ -186,6 +294,8 @@ function showWifiInfo(data) {
       else el.innerHTML = data[v];
     }
   });
+  var dhcp = $('#dhcp-r'+data.dhcp);
+  if (dhcp) dhcp.click();
   $("#wifi-spinner").setAttribute("hidden", "");
   $("#wifi-table").removeAttribute("hidden");
   currAp = data.ssid;

html/wifi/wifi.html

@@ -36,18 +36,29 @@
       <div class="pure-g">
         <div class="pure-u-12-24"><div class="card">
           <h1>Special Settings</h1>
-          <form action="#" id="specform" class="pure-form pure-form-stacked">
+          <form action="#" id="specform" class="pure-form">
-            <legend>Special settings, use with care! If the Static IP field is empty
+            <legend>Special settings, use with care!</legend>
-            then DHCP will be used, else DHCP will be off.</legend>
+            <div class="form-horizontal">
-            <label>Hostname used when requesting DHCP lease</label>
+              <input type="radio" name="dhcp" value="on" id="dhcp-ron"/>
+              <label for="dhcp-ron">DHCP</label>
+              <input type="radio" name="dhcp" value="off" id="dhcp-roff"
+                     style="margin-left:1em"/>
+              <label for="dhcp-roff">Static IP</label>
+            <div>
+            <div id="dhcp-on" class="pure-form-stacked">
+              <label>Hostname when requesting DHCP lease</label>
               <input id="wifi-hostname" type="text" name="hostname">
-            <label>Static IP address, blank to use DHCP</label>
+            </div>
-            <input id="wifi-staticip" type="text" name="staticip">
+            <div id="dhcp-off" class="pure-form-stacked">
+              <label>Static IP address</label>
+              <input id="wifi-staticip" type="text" name="staticip"/>
               <label>Netmask (for static IP)</label>
-            <input id="wifi-netmask" type="text" name="netmask">
+              <input id="wifi-netmask" type="text" name="netmask"/>
               <label>Gateway (for static IP)</label>
-            <input id="wifi-gateway" type="text" name="gateway">
+              <input id="wifi-gateway" type="text" name="gateway"/>
-            <button id="special-button" type="submit" class="pure-button button-primary">Change!</button>
+            </div>
+            <button id="special-button" type="submit"
+                    class="pure-button button-primary">Change!</button>
           </form>
         </div></div>
       </div>
@@ -56,17 +67,15 @@
 </div>
 
 <script type="text/javascript">
-console.log("before wifi.js");
 </script>
 <script src="wifi.js"></script>
 <script type="text/javascript">
-	console.log("wifi html");
 onLoad(function() {
-	console.log("wifi html onload");
   getWifiInfo();
-  $("#wifiform").onsubmit = changeWifiAp;
+  bnd($("#wifiform"), "submit", changeWifiAp);
-  $("#specform").onsubmit = changeSpecial;
+  bnd($("#specform"), "submit", changeSpecial);
-	console.log("scanning in 500ms");
+  bnd($("#dhcp-ron"), "click", doDhcp);
+  bnd($("#dhcp-roff"), "click", doStatic);
   scanTimeout = window.setTimeout(scanAPs, 500);
 });
 </script>

html/wifi/wifi.js

@@ -29,7 +29,7 @@ function createInputForAp(ap) {
   var label = e("div");
   label.innerHTML = ap.essid;
 
-  var div = m('<label for=\"opt-' + ap.essid + '"></label>').children[0];
+  var div = m('<label for=\"opt-' + ap.essid + '"></label>').childNodes[0];
   div.appendChild(input);
   div.appendChild(encrypt);
   div.appendChild(bars);
@@ -168,7 +168,8 @@ function changeWifiAp(e) {
 function changeSpecial(e) {
   e.preventDefault();
   var url = "special";
-  url += "?hostname=" + encodeURIComponent($("#wifi-hostname").value);
+  url += "?dhcp=" + document.querySelector('input[name="dhcp"]:checked').value;
+  url += "&hostname=" + encodeURIComponent($("#wifi-hostname").value);
   url += "&staticip=" + encodeURIComponent($("#wifi-staticip").value);
   url += "&netmask=" + encodeURIComponent($("#wifi-netmask").value);
   url += "&gateway=" + encodeURIComponent($("#wifi-gateway").value);
@@ -185,4 +186,13 @@ function changeSpecial(e) {
       getWifiInfo();
     });
 }
-console.log("wifi.js done");
+
+function doDhcp() {
+	$('#dhcp-on').removeAttribute('hidden');
+	$('#dhcp-off').setAttribute('hidden', '');
+}
+
+function doStatic() {
+	$('#dhcp-off').removeAttribute('hidden');
+	$('#dhcp-on').setAttribute('hidden', '');
+}

user/cgiwifi.c

@@ -381,27 +381,29 @@ static void ICACHE_FLASH_ATTR configWifiIP() {
 
 // Change special settings
 int ICACHE_FLASH_ATTR cgiWiFiSpecial(HttpdConnData *connData) {
+	char dhcp[8];
 	char hostname[32];
-	char staticip[32];
+	char staticip[20];
-	char netmask[32];
+	char netmask[20];
-	char gateway[32];
+	char gateway[20];
 
 	if (connData->conn==NULL) return HTTPD_CGI_DONE;
 
 	// get args and their string lengths
+	int dl = httpdFindArg(connData->getArgs, "dhcp", dhcp, sizeof(dhcp));
 	int hl = httpdFindArg(connData->getArgs, "hostname", hostname, sizeof(hostname));
 	int sl = httpdFindArg(connData->getArgs, "staticip", staticip, sizeof(staticip));
 	int nl = httpdFindArg(connData->getArgs, "netmask", netmask, sizeof(netmask));
 	int gl = httpdFindArg(connData->getArgs, "gateway", gateway, sizeof(gateway));
 
-	if (!(hl >= 0 && sl >= 0 && nl >= 0 && gl >= 0)) {
+	if (!(dl > 0 && hl >= 0 && sl >= 0 && nl >= 0 && gl >= 0)) {
 		jsonHeader(connData, 400);
 		httpdSend(connData, "Request is missing fields", -1);
 		return HTTPD_CGI_DONE;
 	}
 
 	char url[64]; // redirect URL
-	if (sl > 0) {
+	if (os_strcmp(dhcp, "off") == 0) {
 		// parse static IP params
 		struct ip_info ipi;
 		bool ok = parse_ip(staticip, &ipi.ip);
@@ -515,10 +517,8 @@ int ICACHE_FLASH_ATTR printWifiInfo(char *buff) {
 	} else {
 		len += os_sprintf(buff+len, ", \"ip\": \"-none-\"");
 	}
-	if (flashConfig.staticip > 0)
 	len += os_sprintf(buff+len, ", \"staticip\": \"%d.%d.%d.%d\"", IP2STR(&flashConfig.staticip));
-	else
+	len += os_sprintf(buff+len, ", \"dhcp\": \"%s\"", flashConfig.staticip > 0 ? "off" : "on");
-		len += os_sprintf(buff+len, ", \"staticip\": \"\"");
 
 	return len;
 }