Convert mac address selection to input field with datalist

to allow for arbitrary device mac addresses.
 * Add a datalist to the target broadcast ip input, containing the last
target mac and 255.255.255.255
 * Reset target broadcast ip to last valid ip when an invalid one is
received.

Author: ToMe25

TODO.md

@@ -1,5 +1,4 @@
 # TODO
- * Add support for arbitrary mac addresses on the web interface
  * Add Wake on Lan password support
  * Add basic unit test(s)
  * Add persistent config

images/web-interface.png

@@ -84,19 +84,11 @@ void NetworkHandler::setupWebServer() {
 
 	std::istringstream deviceStream(deviceMacs);
 	std::string device;
-	std::string devices;
 	while (std::getline(deviceStream, device, '\n')) {
 		if (device.length() > 0) {
 			NetworkHandler::deviceMacs.push_back(device);
-			devices += "<option value=\"";
-			devices += device;
-			devices += "\">";
-			devices += device;
-			devices += "</option>\n";
 		}
 	}
-	indexHtml = std::regex_replace(indexHtml, std::regex("\\$devices"),
-			devices.c_str());
 
 	webServer.on("/", HTTP_GET, onIndexGet);
 	webServer.on("/", HTTP_POST, onIndexPost);
@@ -151,19 +143,68 @@ void NetworkHandler::setupOTA() {
 
 void NetworkHandler::onIndexGet(AsyncWebServerRequest *request) {
 	std::string response = indexHtml;
+
+	std::string devices;
+	for (std::string device : deviceMacs) {
+		devices += "<option value=\"";
+		devices += device;
+		devices += "\">\n";
+	}
+	response = std::regex_replace(response, std::regex("\\$devices"),
+			devices.c_str());
+
+	std::string targets = "<option value=\"";
+	targets += targetBroadcast.toString().c_str();
+	targets += "\">\n";
+	IPAddress broadcast(255, 255, 255, 255);
+	if (targetBroadcast != broadcast) {
+		targets += "<option value=\"";
+		targets += broadcast.toString().c_str();
+		targets += "\">\n";
+	}
+	response = std::regex_replace(response, std::regex("\\$targets"),
+			targets.c_str());
+
+	response = std::regex_replace(response, std::regex("\\$device"), "");
 	response = std::regex_replace(response, std::regex("\\$target"),
 			targetBroadcast.toString().c_str());
+
 	request->send(200, "text/html", response.c_str());
 }
 
 void NetworkHandler::onIndexPost(AsyncWebServerRequest *request) {
 	if (request->hasParam("device", true) && request->hasParam("target", true)) {
 		String device = request->getParam("device", true)->value();
 		String target = request->getParam("target", true)->value();
-
 		std::string response = indexHtml;
+
+		std::string devices;
+		for (std::string device : deviceMacs) {
+			devices += "<option value=\"";
+			devices += device;
+			devices += "\">\n";
+		}
+		response = std::regex_replace(response, std::regex("\\$devices"),
+				devices.c_str());
+
+		std::string targets = "<option value=\"";
+		targets += targetBroadcast.toString().c_str();
+		targets += "\">\n";
+		IPAddress broadcast(255, 255, 255, 255);
+		if (targetBroadcast != broadcast) {
+			targets += "<option value=\"";
+			targets += broadcast.toString().c_str();
+			targets += "\">\n";
+		}
+		response = std::regex_replace(response, std::regex("\\$targets"),
+				targets.c_str());
+
 		response = std::regex_replace(response, std::regex("\\$target"),
 				target.c_str());
+		response = std::regex_replace(response, std::regex("\\$device"),
+				device.c_str());
+
+		IPAddress originalBroadcastTarget = targetBroadcast;
 
 		if (!WakeOnLanGenerator::isValidMac(device.c_str())) {
 			std::string message = "error\">Received invalid device mac address \"";
@@ -173,6 +214,7 @@ void NetworkHandler::onIndexPost(AsyncWebServerRequest *request) {
 			response = std::regex_replace(response, std::regex("\\$message_type\" hidden>\\$message"), message.c_str());
 			request->send(400, "text/html", response.c_str());
 		} else if (!targetBroadcast.fromString(target)) {
+			targetBroadcast = originalBroadcastTarget;
 			std::string message = "error\">Received invalid target IP address \"";
 			message += target.c_str();
 			message += "\".";

src/NetworkHandler.cpp

@@ -12,14 +12,26 @@
 		<br />
 		<h1>ESP Wake on Lan Server</h1>
 		<h1>Wake up settings:</h1>
-		<label for="device">Device: </label> <select class="input"
-			name="device" id="device" required> $devices
-		</select><br /> <label for="target">Target: </label> <input class="input"
+		<label for="device">Device: </label> <input class="input" type="text"
+			name="device" id="device"
+			pattern="[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}:[a-fA-F0-9]{2}"
+			title="The MAC address of the device to wake up."
+			alt="The MAC address of the device to wake up."
+			placeholder="The MAC address of the device to wake up."
+			list="devices" value="$device" minlength="17" maxlength="17"
+			size="11" required />
+		<datalist id="devices">$devices
+		</datalist>
+		<br /> <label for="target">Target: </label> <input class="input"
 			type="text" pattern="\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}"
 			name="target" id="target"
 			title="The broadcast IP address to send the wake on lan packet to."
 			alt="The broadcast IP address to send the wake on lan packet to."
-			value="$target" size="11" maxlength="15" required /><br />
+			placeholder="The broadcast IP address to send the wake on lan packet to."
+			list="targets" value="$target" size="11" maxlength="15" required />
+		<datalist id="targets">$targets
+		</datalist>
+		<br />
 		<button class="wakeup" type="submit">Wake Up</button>
 	</form>
 </body>