www: End Point Mode changed to dropdown list

can you change to have the dropdown list with modes in Endpoint Mode Configuration and in "Endpoint Configuration"

userspace/rootfs_override/var/www/endpointmode.php

@@ -3,6 +3,7 @@
 <div class="main">
 <div class="page">
 <div class="header" >
+<script type="text/javascript" src="js/dropmodes.js"></script>
 <!--<h1>White-Rabbit Switch Tool</h1>-->
 <div class="header-ports" ><?php wrs_header_ports(); ?></div>
 <div class="topmenu">
@@ -25,16 +26,38 @@
 		//Load all
 		$modes = parse_endpoint_modes();
 
+		$names = array("slave", "auto", "non_wr", "none", "master"); 
+
 		echo '<table class="altrowstable" id="alternatecolor" style="width:100%;text-align:center">';
 		for($i = 0; $i < 9; $i++){
 			echo '<tr>';
-			echo '<th>wri'.($i+1).'</td>';
-			echo '<td><a href="modifymode.php?wri='.($i+1).'&mode='.$modes[$i].'">'.$modes[$i].'</a></th>';
+			echo '<th>wri' .($i+1). '</th>';
+
+			$tmp = $i+1;
+			echo '<td><select name="selected" id="selected-'.$tmp.'" class="drop">
+			<option selected="selected" ">'.$modes[$i].'</option>
+			<option value='. $names[0] .'>'. $names[0] .'</option>
+			<option value='. $names[1] .'>'. $names[1] .'</option>
+			<option value='. $names[2] .'>'. $names[2] .'</option>  
+			<option value='. $names[3] .'>'. $names[3] .'</option>
+			<option value='. $names[4] .'>'. $names[4] .'</option>               
+			</select></td>';
 
 			echo '<th>wri'.($i+10).'</th>';
-			echo '<td><a href="modifymode.php?wri='.($i+10).'&mode='.$modes[$i+9].'">'.$modes[$i+9].'</a></td>';
+
+			$tmp2 = $i+10;
+			echo '<td><select name="selected" id="selected-'.$tmp2.'" class="drop">
+			<option selected="selected" ">'.$modes[$i+9].'</option>
+			<option value='. $names[0] .'>'. $names[0] .'</option>
+			<option value='. $names[1] .'>'. $names[1] .'</option>
+			<option value='. $names[2] .'>'. $names[2] .'</option>  
+			<option value='. $names[3] .'>'. $names[3] .'</option>
+			<option value='. $names[4] .'>'. $names[4] .'</option>               
+			</select></td>';
+
 			echo '</tr>';
 		}
+
 		echo '</table>';
 		echo '<br>';
 

userspace/rootfs_override/var/www/js/dropmodes.js

+/*
+ * Javascripts for endpointmode.php
+ *
+ * @author Anne M. Muñoz <amunoz@sevensols.com>
+ *
+ * Depending on the dropdown list option selected updates the port status
+ * without the need of procesing a POST call in PHP
+ * The process is controlled by javascript, avoiding to reload the page
+ * improving user experience
+ *
+ * Result: A Dropdown List with the choices for the port status
+ *
+ */
+
+$(document).ready(function() {
+    $('.drop').on('change', set_endpoint_mode);
+});
+
+function set_endpoint_mode(){
+    var selected = $("#"+this.id).val();
+    var wri = "wri" + this.id.replace( /^\D+/g, '');
+    
+    console.log(selected, wri);
+    $.ajax({
+        url: 'modifymode.php',
+        type: 'GET',
+        data: {
+            wri : wri,
+            mode : selected
+        }
+    });
+}
+

userspace/rootfs_override/var/www/modifymode.php

@@ -22,32 +22,19 @@
 
 	<?php
 
-		$endpoint = intval($_GET["wri"]);
+		$endpoint = $_POST["wri"];
+		$endpoint = preg_replace("/[^0-9]/", '', $endpoint);
 		$endpoint = sprintf("%02s", $endpoint);
 		$endpoint = strval($endpoint);
 
-		$mode = $_GET["mode"];
+		$mode = $_POST["mode"];
+ 
+		$string = $_SESSION["KCONFIG"]["CONFIG_PORT".$endpoint."_PARAMS"];
 
-		switch ($mode) {
-		case "master":
-			$new_mode = "slave";
-			break;
-		case "slave":
-			$new_mode = "auto";
-			break;
-		case "auto":
-			$new_mode = "non-wr";
-			break;
-		case "non-wr":
-			$new_mode = "none";
-			break;
-		case "none":
-			$new_mode = "master";
-			break;
-		}
+		$portions = explode(",", $string);
+		$portions[4] = "role=".$mode;
+		$string = implode(",", $portions);
 
-		$string = $_SESSION["KCONFIG"]["CONFIG_PORT".$endpoint."_PARAMS"];
-		$string = str_replace($mode,$new_mode,$string);
 		$_SESSION["KCONFIG"]["CONFIG_PORT".$endpoint."_PARAMS"] = $string;
 
 		save_kconfig();