r1168 Patch from Aaron Dummer (aaron@dummer.info)
authorDenis Yeldandi <dyeldandi@gmail.com>
Tue, 9 Oct 2007 07:24:46 +0000 (07:24 +0000)
committerDenis Yeldandi <dyeldandi@gmail.com>
Tue, 9 Oct 2007 07:24:46 +0000 (07:24 +0000)
- moved form fields from bottom of page to top (saves you from scrolling
down the page)
- combined ip & mask fields into a single 'range' field
- added live javascript validation function (field is red when invalid,
green when valid)

inc/functions.php
inc/interface.php
inc/ophandlers.php
index.php
live_validation.js [new file with mode: 0644]

index 3444d639d7d4c570b03734568b3b382e93371faf..154e44566c4f8fd6b527d705130d814920ca0165 100644 (file)
@@ -364,8 +364,13 @@ function binInvMaskFromDec ($maskL)
        return $binmask;
 }
 
-function addRange ($ip='', $mask='', $name='')
+function addRange ($range='', $name='')
 {
+       // $range is in x.x.x.x/x format, split into ip/mask vars
+       $rangeArray = explode('/', $range);
+       $ip = $rangeArray[0];
+       $mask = $rangeArray[1];
+
        $ipL = ip2long($ip);
        $maskL = ip2long($mask);
        if ($ipL == -1 || $ipL === FALSE)
index 586111a62cc689c8874b9386bd8e3732c24ba264..c1c8c1157365419809ab30b90fa26b0f2f1a52a4 100644 (file)
@@ -1620,7 +1620,21 @@ function renderAddNewRange ()
 {
        global $root, $pageno, $tabno;
        showMessageOrError();
-       echo "<table class='widetable' border=0 cellpadding=10 cellpadding=0 align='center'>\n";
+
+       echo "<center><h2>Add New Range</h2></center>\n";
+       echo "<table class='widetable' border=0 cellpadding=10 align='center'>\n";
+       echo "<tr><th>Address range</th><th>Name</th><th>&nbsp;</th></tr>\n";
+       echo "<form name='add_new_range' action='process.php'>\n";
+       echo "<input type=hidden name=op value=addRange>\n";
+       echo "<input type=hidden name=page value='${pageno}'>\n";
+       echo "<input type=hidden name=tab value='${tabno}'>\n";
+       echo "<tr><td class='tdcenter'><input type=text name='range' size=18 class='live-validate'></td>\n";
+       echo "<td class='tdcenter'><input type=text name='name' size='20'></td>\n";
+       echo "<td class='tdcenter'><input type=submit value='Add a new range'></td></tr>\n";
+       echo "</form></table><br><br>\n";
+
+       echo "<center><h2>Existing Ranges</h2></center>\n";
+       echo "<table class='widetable' border=0 cellpadding=10 align='center'>\n";
        $addrspaceList = getAddressspaceList();
        echo "<tr><th>&nbsp;</th><th>Address range</th><th>Name</th><th>Total/used addresses</th></tr>";
        foreach ($addrspaceList as $iprange)
@@ -1643,14 +1657,9 @@ function renderAddNewRange ()
                echo ($iprange['ip_bin'] | $iprange['mask_bin_inv']) - ($iprange['ip_bin'] & $iprange['mask_bin'])+1;
                echo "/";
                echo $usedips;
+               #echo "</td></tr></table>";
                echo "</td></tr>";
        }
-       echo "<form action='process.php'>";
-       echo "<input type=hidden name=op value=addRange>";
-       echo "<input type=hidden name=page value='${pageno}'>\n";
-       echo "<input type=hidden name=tab value='${tabno}'>\n";
-       echo "<tr><td colspan=4 class='tdcenter'><input type=text name=ip size=10>/<input type=text name=mask size=10>&nbsp;<input type=text name='name' size='20'>&nbsp;<input type=submit value='Add a new range'></td></tr>";
-       echo "</form></table>\n";
 }
 
 function renderIPRange ()
index 5e5330d0b3b1bb60099f9bb0ad579e3c0928362e..226e096ac2c58d18bb66da6b80ff896e29b9928d 100644 (file)
@@ -408,10 +408,9 @@ function addNewRange ()
 {
        global $root, $pageno, $tabno;
 
-       $ip = $_REQUEST['ip'];
-       $mask = $_REQUEST['mask'];
+       $range = $_REQUEST['range'];
        $name = $_REQUEST['name'];
-       $error = addRange($ip, $mask, $name);
+       $error = addRange($range, $name);
        if ($error != '')
        {
                return "${root}?page=${pageno}&tab=${tabno}&error=".urlencode($error);
index 0b5b866204d8713695a0f9c8349ce486c75f7e4a..566898e35a2449f7508bf98665fe022e9093d7be 100644 (file)
--- a/index.php
+++ b/index.php
@@ -13,13 +13,29 @@ echo "<style type='text/css'>\n";
 foreach ($color as $statecode => $colorcode)
 {
        echo "td.state_${statecode} {\n";
-       echo "text-align: center;\n";
-       echo "background-color: #${colorcode};\n";
-       echo "font: bold 10px Verdana, sans-serif;\n";
+       echo "\ttext-align: center;\n";
+       echo "\tbackground-color: #${colorcode};\n";
+       echo "\tfont: bold 10px Verdana, sans-serif;\n";
        echo "}\n\n";
 }
 ?>
+.validation-error {
+       border:1px solid red;
+}
+
+.validation-success {
+       border:1px solid green;
+}
        </style>
+       <script language='javascript' type='text/javascript' src='live_validation.js'></script>
+       <script type="text/javascript">
+       function init() {
+               document.add_new_range.range.setAttribute('match', "^\\d\\d?\\d?\\.\\d\\d?\\d?\\.\\d\\d?\\d?\\.\\d\\d?\\d?\\/\\d\\d?$");
+
+               Validate.init();
+       }
+       window.onload=init;
+       </script>
        </head>
 <body>
  <table border=0 cellpadding=0 cellspacing=0 width='100%' height='100%' class=maintable>
diff --git a/live_validation.js b/live_validation.js
new file mode 100644 (file)
index 0000000..d4e6485
--- /dev/null
@@ -0,0 +1,134 @@
+var Validate = {
+       elements:[],
+       //Some General purpose functions
+       hasClass:function(ele,cls) {
+               return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
+       },
+       addClass:function (ele,cls) {
+               if (!this.hasClass(ele,cls)) ele.className += " "+cls;
+       },
+       removeClass:function (ele,cls) {
+               if (this.hasClass(ele,cls)) {
+                       var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
+                       ele.className=ele.className.replace(reg,' ');
+               }
+       },
+       stopEvent:function(e) {
+               //e.cancelBubble is supported by IE - this will kill the bubbling process.
+               e.cancelBubble = true;
+               e.returnValue = false;
+               //e.stopPropagation works in Mozilla.
+               if (e.stopPropagation) {
+                       e.stopPropagation();
+                       e.preventDefault();
+               }
+       },
+       success:function(ele) {
+               this.removeClass(ele,"validation-error");
+               this.addClass(ele,"validation-success");
+       },
+       failure:function(ele) {
+               this.removeClass(ele,"validation-success");
+               this.addClass(ele,"validation-error");
+       },
+       //Logic starts here...
+       //Deny keyboard input for some specific chars.
+       validateKeys : function(e,ele) {
+               //Find Which key is pressed
+               if (e.keyCode) code = e.keyCode;
+               else if (e.which) code = e.which;
+               var character = String.fromCharCode(code);
+
+               //We need only valid keypresses - not stuff like shift, Enter, Backspace etc.
+               if(     e.ctrlKey || 
+                       code == 46 //Delete Key
+               ) return;
+               if(e.shiftKey) {
+                       if(!(code >= 37 && code <= 40)) return; //Up,Down,Right and Left - same keycode as %,&,' and (
+               } else {
+                       if(!(code >= 41 && code <= 126)) return;
+               }
+       
+               if(ele.getAttribute("allowedkeys")) {
+                       var allowed_chars = new RegExp(ele.getAttribute("allowedkeys"));
+                       if(!allowed_chars.test(character)) { //If a character was entered that is not allowed.
+                               this.stopEvent(e);
+                       }
+               }
+       },
+       //See if the match is made - this is called on every keyup event.
+       testMatch : function(ele) {
+               if(ele.getAttribute("match")) {
+                       var match_reg = new RegExp(ele.getAttribute("match"));
+                       if(match_reg.test(ele.value)) this.success(ele);
+                       else {
+                               this.failure(ele);
+                               return false;//Don't continue if it is a faluire
+                       }
+               }
+               if(ele.getAttribute("equals")) {
+                       if(ele.value == eval(ele.getAttribute("equals"))) this.success(ele);//Yes I know, 'evil eval'.
+                       else {
+                               this.failure(ele);
+                               return false;
+                       }
+               }
+               if(ele.getAttribute("istrue")) {
+                       if(eval(ele.getAttribute("istrue"))) this.success(ele);//Again, eval.
+                       else {
+                               this.failure(ele);
+                               return false;
+                       }
+               }
+               return true;
+       },
+       //Show error message on form submission
+       attachForm : function(form_id) {
+               var ths = this;//Closure
+               $(form_id).onsubmit=function(e) {
+                       if(!e) var e = window.event;
+                       var ele = this;
+                       var err = 0;
+                       for(var i=0,len=ths.elements.length; i<len; i++) {//Go thru all validation elements
+                               var ele = ths.elements[i];
+                               if(!ths.testMatch(ele)) {
+                                       err++;
+                                       if(document.getElementById("validation-error-message-"+ele.id)) continue; //Error message there already.
+                                       //Insert an error message span after the input element.
+                                       var msg = ele.getAttribute('errormessage');
+                                       if(!msg) msg = "Error!!";
+                                       
+                                       var error_message = document.createElement("span");
+                                       error_message.className = "validation-error-message";
+                                       error_message.setAttribute("id","validation-error-message-"+ele.id);
+                                       error_message.appendChild(document.createTextNode(msg));
+
+                                       ele.parentNode.insertBefore(error_message,ele.nextSibling);
+                               }
+                       }
+                       if(err) {//Stop the submit action
+                               ths.stopEvent(e);
+                       }
+               }
+       },
+       init : function () {
+               var all_elements = document.getElementsByTagName("*");
+               var ths = this;
+               for(var i=0;ele=all_elements[i],i<all_elements.length;i++) {
+                       if(!ele.className.match(new RegExp('(\\s|^)live\-validate(\\s|$)'))) continue;
+                       this.elements.push(ele);
+                       //Attach the keyup event to the function. We are doing this in a round-about way because we need the 'this' keyword functionality
+                       if(ele.getAttribute("allowedkeys")) ele.onkeypress = function(e) {
+                               if(!e) var e = window.event;
+                               ths.validateKeys(e,this);
+                       }
+
+                       if(ele.getAttribute("match") || ele.getAttribute("equals") || ele.getAttribute("istrue")) {
+                               this.testMatch(ele);//The first mach should happen at page load
+                               ele.onkeyup = function() {
+                                       ths.testMatch(this);
+                               }
+                       }
+               }
+       }
+}