607A Yorktown Place, Statesboro, GA 30461
http://www.chrissterling.me — chris@chrissterling.me
770-689-6679

Return to Resume

<?php
/*

Created By: Chris Sterling
Created On: 4/30/2015

*/

session_start();
//create bootstrap style alert divs for displaying messages
function createAlert($type, $message){
	?>
	<div class="alert alert-<?php echo $type;?>" role="alert"><?php echo $message; ?></div>
	<?php
}

//do the sorting
function doSort(){
	//is the next number larger then our current number?
	if($_SESSION['randNumbers'][$_SESSION['currentStep']] < $_SESSION['randNumbers'][$_SESSION['currentStep']+1]){
		$position1 = $_SESSION['randNumbers'][$_SESSION['currentStep']];
		$_SESSION['randNumbers'][$_SESSION['currentStep']] = $_SESSION['randNumbers'][$_SESSION['currentStep']+1];
		$_SESSION['randNumbers'][$_SESSION['currentStep']+1] = $position1;
	}
	//save steps, have we already sorted 2 digits past our current position, or have we reached the end
	if($_SESSION['currentStep'] == ($_SESSION['defaultCount']-2) || $_SESSION['randSorted'][$_SESSION['currentStep']+2] === true){
		$_SESSION['randSorted'][$_SESSION['currentStep']+1] = true;
		//restart
		$_SESSION['currentStep'] = 0;
	}else{
		$_SESSION['currentStep']++;
	}
	//how many moves have we made
	$_SESSION['totalMoves']++;
}

//print the table
function printTable($background){
	//ajax hidden element to tell the play button that we've finished sorting
	if($_SESSION['randSorted'][1]){
	?>
<input type="hidden" id="sortComplete" name="sortComplete" value="true" />
	<?php
	}
	?>
	<table class="table table-condensed">
			<thead>
				<tr>
					<th>Position</th>
					<th colspan="2">Number</th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td colspan="3">Total Moves: <?php echo $_SESSION['totalMoves']; ?></td>
				</tr>
			</tfoot>
			<tbody>
	<?php
	//display the numbers in a table
	foreach($_SESSION['randNumbers'] as $key=>$value){
		$class = '';
		if($key == $_SESSION['currentStep'] && !$_SESSION['randSorted'][1]){
			$class = " progress-bar-success ";
		}else if($key-1 == $_SESSION['currentStep'] && !$_SESSION['randSorted'][1]){
			$class = " progress-bar-info ";
		}
		?>
		<tr>
			<td><?php echo $key; ?></td>
			<td><?php echo $value; ?></td>
			<td style="width:75%">
				<div class="progress">
					<div class="progress-bar <?php echo $class;?>" role="progressbar" aria-valuenow="<?php echo $value;?>" aria-valuemin="<?php echo $_SESSION['minNumber']; ?>" aria-valuemax="<?php echo $_SESSION['maxNumber']; ?>" style="width: <?php echo number_format(($value / $_SESSION['maxNumber']) * 100,0);?>%;">
						<span class="sr-only"><?php echo $value;?></span>
					</div>
				</div>
			</td>
		</tr>
		<?php
	}
	?>
				</tbody>
		</table>
	<?php
	
}
//if we aren't pushing the play button, show the document
if(!isset($_GET['play'])){
?>
<!-- start head stuff -->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Bubble Sort</title>

  <!-- Bootstrap -->
  <link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/flatly/bootstrap.min.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
   <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
   <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
 </head>
 <body style="margin-top:15px;">
 <div class="container">
<!-- end head stuff -->
<?php
}
//set some default values to use in the code
$_SESSION['defaultCount'] = (isset($_SESSION['defaultCount']))? $_SESSION['defaultCount'] : 10;
$_SESSION['defaultStart'] = (isset($_SESSION['defaultStart']))? $_SESSION['defaultStart'] : 0;
$_SESSION['defaultEnd'] = (isset($_SESSION['defaultEnd']))? $_SESSION['defaultEnd'] : 100;
$_SESSION['currentStep'] = (isset($_SESSION['currentStep']))? $_SESSION['currentStep'] : 0;
$_SESSION['totalMoves'] = (isset($_SESSION['totalMoves']))? $_SESSION['totalMoves'] : 0;
//are we updating the settings?
if(isset($_POST['editSettings'])){
	//update the count, start, and stop positions. attempt to take the user input and convert to int.
	//gets converted to 0 if that's the case.
	$defaultCount = intval($_POST['defaultCount']);
	$defaultStart = intval($_POST['defaultStart']);
	$defaultEnd = intval($_POST['defaultEnd']);
	if(($defaultStart < $defaultEnd) && $defaultCount >= 2){
		$_SESSION['defaultCount'] = $defaultCount;
		$_SESSION['defaultStart'] = $defaultStart;
		$_SESSION['defaultEnd'] = $defaultEnd;
		unset($_SESSION['randNumbers']);
		unset($_SESSION['randSorted']);
		//updated settings
		createAlert('success','Settings updated.');
	}else{
		//can't have a start higher then the finish
		if($defaultCount < 2){
			createAlert('warning','You need to have a least 2 numbers generated.');
		}else{
			createAlert('warning','You cannot have a start number higher then the end number. Please try again.');	
		}
		
	}
	
}
//are we running the shuffle function?
if(isset($_POST['shuffle'])){
	$i = 0;
	$numbers = array();
	if($_SESSION['defaultStart'] < $_SESSION['defaultEnd']){
		//help with calculating percentages
		$max = $_SESSION['defaultStart'];
		$min = $_SESSION['defaultEnd'];
		//create the array
		while($i < $_SESSION['defaultCount']){
			$num = rand($_SESSION['defaultStart'],$_SESSION['defaultEnd']);
			if($num > $max){
				$max = $num;
			}
			if($num < $min){
				$min = $num;
			}
			$numbers[] = $num;
			$sorted[] = false;
			$i++;
		}
		//save some session data for the rest of the script
		$_SESSION['minNumber'] = $min;
		$_SESSION['maxNumber'] = $max;
		$_SESSION['randNumbers'] = $numbers;
		$_SESSION['randSorted'] = $sorted;
		$_SESSION['currentStep'] = 0;
		$_SESSION['totalMoves'] = 0;
	}else{
		//the user currently configured it so the start number is higher.
		createAlert('warning','You cannot have a start number higher then the end number. Please try again.');
	}
}
//do the sort and reload the page
if(isset($_POST['doSort'])){
	doSort();
}
//play button, do the sort and generate the table
if(isset($_GET['play'])){
	doSort();
	printTable();
}else{
//present the page to the user
?>
	<div class="row">
		<div class="col-md-8">
			<div class="clearfix">
			<form class="form-inline pull-left" method="post" action="">
				<button type="submit" name="shuffle" class="btn btn-warning"><span class="glyphicon glyphicon-random"></span>&nbsp;&nbsp;Shuffle</button>
			</form>
				<?php
				$disableButton = '';
				//did we finish the sorting, if so, disable the buttons?
				if($_SESSION['randSorted'][1]){
					$disableButton = ' disabled ';
				}
				?>
				<span class="pull-right">
					<button name="doSort" id="doSort" onclick="nextSort();" class="btn btn-info" <?php echo $disableButton;?>><span class="glyphicon glyphicon-chevron-right"></span> Step</button>
					<button name="play" id="play" onclick="doAutoSort();" class="btn btn-success" <?php echo $disableButton;?>><span class="glyphicon glyphicon-play-circle"></span> Play</button>
				</span>
				</div>
			<br />
			<span id="finishedMessage">
			<?php
			//let the user know we are complete!
			if($_SESSION['randSorted'][1]){
				createAlert('success','The sort has been completed');
			}
			?>
			</span>
			<span id="sortTable">
				<?php
					if($_SESSION['randNumbers'] != null){
						printTable();
					}else{
						//we need some data, let the user know
						createAlert('info','Lets get started. Click the "Shuffle" button to generate some numbers.');
					}
				?>
			</span>
		</div>
		<!-- update settings for the sorting -->
		<div class="col-md-4">
			<div class="panel panel-default">
			 <div class="panel-heading">
			  <h3 class="panel-title">Bubble Sort Settings</h3>
			 </div>
			 <div class="panel-body">
			  <form method="post" action="">
						<div class="form-group">
						<label for="defaultCount">Default Numbers to Generate</label>
						<input type="text" class="form-control" id="defaultCount" name="defaultCount" value="<?php echo $_SESSION['defaultCount']; ?>">
						</div>
						<div class="form-group">
						<label for="defaultCount">Low Range</label>
						<input type="text" class="form-control" id="defaultStart" name="defaultStart" value="<?php echo $_SESSION['defaultStart']; ?>">
						</div>
						<div class="form-group">
						<label for="defaultCount">High Range</label>
						<input type="text" class="form-control" id="defaultEnd" name="defaultEnd" value="<?php echo $_SESSION['defaultEnd']; ?>">
						</div>
					<button type="submit" name="editSettings" class="btn btn-default">Update Settings</button>
				</form>
				 <p><small>Designed/Created by: <strong>Chris Sterling</strong> for <strong>Third & Grove</strong></small></p>
			 </div>
			</div>

		</div>
	</div>
</div>
<!-- start footer -->
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
		<!-- Include all compiled plugins (below), or include individual files as needed -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			//disable buttons when we hit play or are completely finished
			function disableButtons(){
				$("#doSort").prop("disabled",true);
				$("#play").prop("disabled",true);
			}
			//the play button code
			function doAutoSort(){
				disableButtons();
				getData(true);
			}
			//single step button
			function nextSort(e){
				getData(false);
			}
			//get the data
			function getData(runMultiple){
				//self referencing file path
				var pageLocation = location.pathname+"?play=true";
				$.ajax({
					method: 'GET',
					url: pageLocation,
				})
				.success(function( msg ) {
					//have we included the hidden element to tell the play button to stop?
					var isFinished = $(msg).filter('#sortComplete').val();
					if(isFinished !== undefined){
						var finishedMessage = '<div class="alert alert-success" role="alert">The sort has been completed</div>';
						disableButtons();
						//show the finish message
						$('#finishedMessage').html(finishedMessage);
						$('#sortTable').html(msg);
					}else{
						//update the table and try again after .3 of a second
						$('#sortTable').html(msg);
						if(runMultiple){
							setTimeout(getData(runMultiple),300)
						}
					}
				});
			}
		</script>
	</body>
</html>
<!-- end footer -->
<?php
}
?>
Return to Resume