Added rack location picker to devices screen. Continuation of #11

opendcim · Jul 19, 2012 · f8e0631 · f8e0631
1 parent 5a43a9f
commit f8e0631
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 2 deletions.
diff --git a/css/inventory.php b/css/inventory.php
@@ -16,6 +16,8 @@
 select {padding: .05em;}
 fieldset table, table {border: 1px solid grey;}
 textarea {white-space: pre;word-wrap: break-word;}
+.hide {display: none;}
+.show {display: block;}
 
 [readonly],[disabled] {
 	background-color: #dcdcdc;
@@ -295,6 +297,19 @@
 .device .table .table .table > div > div {padding: 3px;}
 .right .table + .table {margin-top: 1em;}
 
+.positionselector {font-size: .7em; background-color: white;}
+.positionselector > div > div > div {width: 1em; height: 1em; padding-left: .5em; padding-right: .5em; text-align: right;}
+.positionselector > div > div + div > div {width: 3em; padding-right: 1em; padding-right: 1em;}
+.notavail {background-color: black; border-color: black !important;}
+/* borders were too thick looking */
+.positionselector > div > div > div{ border-top: 0px; border-left: 0px;}
+.positionselector > div > div + div > div{ border-top: 0px; border-right: 0px;}
+.positionselector > div { border-width: 1px;}
+.positionselector, .positionselector > div > div {border-width: 0px;}
+#positionselector .positionselector > div > div {min-width: 0;}
+#positionselector {padding: 10px; position: absolute; left: -1000px; background-color: white; border: 1px solid black;}
+
+
 /* Button code primarily from http://somadesign.ca */
 /* Button */
 .button, input[type=button], input[type=submit], button {

diff --git a/devices.php b/devices.php
@@ -296,6 +296,68 @@ function swaplayout(){
 		setCookie("layout","Portrait");
 	}
 }
+$(document).ready(function() {
+	$('#position').focus(function()	{
+		var cab=$("select#cabinetid").val();
+		$.get('scripts/ajax_cabinetuse.php?cabinet='+cab, function(data) {
+			var rackhtmlleft='';
+			var rackhtmlright='';
+			$.each(data, function(i,inuse){
+				if(inuse){var cssclass='notavail'}else{var cssclass=''};
+				rackhtmlleft+='<div>'+i+'</div>';
+				rackhtmlright+='<div val='+i+' class="'+cssclass+'"></div>';
+			});
+			var rackhtml='<div class="table border positionselector"><div><div>'+rackhtmlleft+'</div><div>'+rackhtmlright+'</div></div></div>';
+			$('#positionselector').html(rackhtml);
+			setTimeout(function(){
+				var divwidth=$('.positionselector').width();
+				$('#positionselector').width(divwidth);
+				$('#height').focus(function(){$('#positionselector').css({'left': '-1000px'});});
+				$('#positionselector').css({'left':(($('.right').position().left)-(divwidth+20))});
+				$('#positionselector').mouseleave(function(){
+					$('#positionselector').css({'left': '-1000px'});
+				});
+				$('.positionselector > div > div + div > div').mouseover(function(){
+					$('.positionselector > div > div + div > div').each(function(){
+						$(this).removeAttr('style');
+					});
+					var unum=$("#height").val();
+					if(unum>=1 && $(this).attr('class')!='notavail'){
+						var test='';
+						var background='green';
+						// check each element start with pointer
+						for (var x=0; x<unum; x++){
+							if(x!=0){
+								test+='.prev()';
+								eval("if($(this)"+test+".attr('class')=='notavail' || $(this)"+test+".length ==0){background='red';}");
+								eval("console.log($(this)"+test+".attr('val')+' '+$(this)"+test+".attr('class'))");
+							}else{
+								if($(this).attr('class')=='notavail'){background='red';}
+							}
+						}
+						test='';
+						if(background=='red'){var pointer='default'}else{var pointer='pointer'}
+						for (x=0; x<unum; x++){
+							if(x!=0){
+								test+='.prev()';
+								eval("$(this)"+test+".css({'background-color': '"+background+"'})");
+								eval("console.log($(this)"+test+".attr('val'))");
+							}else{
+								$(this).css({'background-color': background, 'cursor': pointer});
+								if(background=='green'){
+									$(this).click(function(){
+										$('#position').val($(this).attr('val'));
+										$('#positionselector').css({'left': '-1000px'});
+									});
+								}
+							}
+						}
+					}
+				});
+			},100);
+		});
+	});
+});
 
 function setPreferredLayout() {<?php if(isset($_COOKIE["layout"]) && strtolower($_COOKIE["layout"])==="portrait"){echo 'swaplayout();setCookie("layout","Portrait");';}else{echo 'setCookie("layout","Landscape");';} ?>}
 </script>
@@ -313,7 +375,7 @@ function setPreferredLayout() {<?php if(isset($_COOKIE["layout"]) && strtolower(
 <h3>Data Center Device Detail</h3>
 <div class="center"><div>
 <div id="positionselector"></div>
-<form name="deviceform" id="deviceform" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
+<form name="deviceform" id="deviceform" action="<?php echo $_SERVER['PHP_SELF']; if(isset($dev->DeviceID) && $dev->DeviceID>0){print "?deviceid=$dev->DeviceID";} ?>" method="POST">
 <div class="left">
 <fieldset>
 	<legend>Asset Tracking</legend>

diff --git a/rackrequest.php b/rackrequest.php
@@ -339,7 +339,7 @@
 		if($req->DeviceClass==$tempRow->TemplateID){$selected = 'selected';}else{$selected = '';}
 		$mfg->ManufacturerID=$tempRow->ManufacturerID;
 		$mfg->GetManufacturerByID($facDB);
-		print "				<option value=\"$tempRow->TemplateID\" $selected>$mfg->Name - $tempRow->Model>\n";
+		print "				<option value=\"$tempRow->TemplateID\" $selected>$mfg->Name - $tempRow->Model</option>\n";
 	}
 ?>
 			</select>