Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML
<p>To display the number of PoE switches needed for your system, specify the number of cameras and (if required) Lock devices.</p>
	<form id="form" class="aui top-label">
		<div class="aui-group">		
			<div class="aui-item">	
				<div  class="field-group top-label">    
    				<label for="Vantage">Vantage:<span class="aui-icon icon-required aui-form-validation-initialised aui-form-notification-initialised">(required)</span></label>
		    	    <input class="text medium-field" type="number" id="Vantage" name="Vantage" value="0" data-aui-validation-when="aui-stop-typing" data-aui-validation-field min="0" max="200">
					<div class='error'></div>		
				</div>

				<div  class="field-group top-label">
					<label for="Vero">Vero:<span class="aui-icon icon-required">(required)</span></label>
					<input class="text medium-field" type="number" id="Vero" name="Vero" value="0" data-aui-validation-when="aui-stop-typing" data-aui-validation min="0" max="200">
					<div class='error'></div>
				</div>                        

				<div  class="field-group top-label">
					<label for="Vue">Vue:<span class="aui-icon icon-required">(required)</span></label>
					<input class="text medium-field" type="number" id="Vue" name="Vue" value="0" data-aui-validation-when="aui-stop-typing" data-aui-validation min="0" max="8" > 
					<div class='error'></div>
				</div>	

				<div  class="field-group top-label">
					<label for="Lock">Lock:<span class="aui-icon icon-required">(required)</span></label>
					<input class="text medium-field" type="number" id="Lock" name="Lock" value="0" data-aui-validation-when="aui-stop-typing" data-aui-validation min="0" max="2">
					<div class='error'></div>	
				</div>   	
			</div>  	 
			<div class="aui-item" style="width: 70%;">
				<div class="aui-item">
					<div class="aui-message" style="display:none">
						<p class="title">
					   		<strong>System Info</strong>
						</p>
						<p id="msg">Enter all values.</p>					
					</div> 
				</div> 
				<div class="aui-item" >
						<img id="img" style="width:100%;" />
				</div>              				
			</div>
			<div class="aui-item" style="width: 15%;"></div>
		</div>                       
	</form> 


<script> 
			$( "input" ).change(function() {

				var $input = $( this );
				
				// reset
				$input.next().text("");
	            $( ".aui-message" ).hide(); 
				$( "#img" ).attr( "src", "" )


				// set getmax inputstotal
				var val = parseInt( $inputif($input.attr("id") == "Vero") $input.prop("max", 200 - $( "#Vantage" ).val() );
				var max = parseInt( if($input.attr("maxid") );
				maxmsg == "You have exceeded the maximum total optical cameras " + max ;
				
				Vantage") $input.prop("max", 200 - $( "#Vero" ).val() );

				// setget max totalinputs
				if(var val = parseInt( $input.attrval("id") == "Vero") $input.prop("max", 200 - $( "#Vantage" ).val();
				var max = parseInt( $input.attr("max") );
				if($input.attr("id") =maxmsg = "Vantage") $input.prop("max", 200 - $( "#Vero" ).val() );

You have exceeded the maximum " + max ;				
									
				if( isNaN( val ) ) $input.next().text("Please enter a value");
				else if( val < 0) $input.next().text("Please enter a positive number");
				else if( val > max ) $input.next().text( maxmsg );
				else {					
					calc();
					$( ".aui-message" ).show(); 
				}
			});
			
			function calc(){
				var url = "";
                var Vantage = parseInt(document.getElementById("Vantage").value );                 
                var Vero = parseInt(document.getElementById("Vero").value);
                var Vue = parseInt(document.getElementById("Vue").value);
                var Lock = parseInt(document.getElementById("Lock").value);
                uplink = Vue > 0 ? 1 : 0;
                //power = ((Vantage * 23.5) + (Vero * 12.5) + (Vue * 8));
                power = ((Vantage * 30) + (Vero * 15) + (Vue * 8.5));
                ports = (Vantage + Vero + Vue + Vue - uplink );
                //alert("Power:" + power + " Ports: " + ports)
                //result = Math.max(Math.ceil(power / 370), Math.ceil(ports / 24), Math.ceil(Vantage / 12));
				result = Math.max(Math.ceil(power / 370), Math.ceil(ports / 24));


				//if there is only one switch the lock will be connected to we need to recalculate the power with lock.
				//with more than one switch the locks are connected to the link POE so will not count towards the total power budget. 				
				result = result == 1 ? Math.max(Math.ceil((power + (Lock * 8)) / 370), Math.ceil(ports / 24)) : result;


				
					var msg = "";
	                if( result == 1 ) {
	                    msg = "You will need a 26-port PoE switch. These switches can provide sufficient power for up to 12 Vantage cameras and 1 other device (Vue or Bonita reference video or Lock unit)."; 
						if( Vantage != 0 ) url = "/vicon/SimpleVantageSystem.png";
						else url = "/vicon/SimpleVero.png";
					}
	                if( result > 1 ){
	                    msg = "You will need " + result + " x 26-port PoE switches."; 
						// rework this if block:		
						console.log( "Lock: " + Lock + ", Vue: " + Vue );			
						if( Vantage != 0 ){
							if( Lock == 0 ){ 
								if( Vue == 0 ) url = "/vicon/Extra12VantageCams.png";
								else url = "/vicon/VantageVideoCams.png";
							}							
						}
						else url = "/vicon/ExtendedVero.png";
					}
	                if( Lock > 0 && result == 2 ) {
	                    msg += "You will also need a 1 Gig linking PoE.";
						if( Vantage != 0 ){ 							
							//vantage 2 lock image
							if( Lock == 2 ) {
								if( Vue == 0 ) url = "/vicon/VantageTwoLocks.png";	
								else url = "/vicon/Vantage2Locks2Vues.png";					
							}
							if( Lock == 1 ) {
								//vantage lock 
								if( Vue == 0 ) url = "/vicon/VantageWithLock.png";
								//vantage vue and lock 	
								else url = "/vicon/VantageExtendedSystem.png";
							}
						}
						//Vero 2 swiches
						else url = "/vicon/ExtendedVero.png"
					}
	                if( result > 2 ) {
	                    msg += "You will need a 10 GbE linking PoE with 10 GbE NIC."; 
		                if(Lock < 1) $( "#Lock" ).val( '1' );
						url = "/vicon/VantageThreePoEs.png";						
	                }
	                $( "#msg" ).html( msg ); 
					$( "#img" ).attr( "src", url )
	            }
</script>

...