Added some last tidbits to the UI for selecting team members at a specific event

Added functionality in listSelector.js to validate data when it's switched from one list to another

js/listSelector.js

@@ -6,6 +6,8 @@
 	var leftDiv, rightDiv, leftTitle, rightTitle, leftColours, rightColours;
 	var items;
 	var styleTags, boxStyle, itemStyle, rowStyle;
+	var leftValidator = null;
+	var rightValidator = null;
 
 	this.name = globalName;
 	this.leftColours = [];
@@ -160,8 +162,8 @@
 		for(id in left){
 			this.items[id] = $('<div id="ls_item_' + id + '">' + left[id] + '</div>');
 			eval(this.name + '.items[' + id + '].click(function(){' + this.name + '.switch(' + id + ');});');
-			eval(this.name + '.items[' + id + '].mouseenter(function(){' + this.name + '.highlight(' + id + ', true);});');
+			eval(this.name + '.items[' + id + '].mouseenter(function(){' + this.name + '.highlight(' + id + ', true); document.body.style.cursor="pointer";});');
-			eval(this.name + '.items[' + id + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false);});');
+			eval(this.name + '.items[' + id + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false); document.body.style.cursor="default";});');
 			this.items[id].css(this.itemStyle);
 			this.items[id].appendTo(this.leftDiv);
 			this.items[id].data('column', 'left');
@@ -170,8 +172,8 @@
 		for(id in right){
 			this.items[id] = $('<div id="ls_item_' + id + '">' + right[id] + '</div>');
 			eval(this.name + '.items[' + id + '].click(function(){' + this.name + '.switch(' + id + ');});');
-			eval(this.name + '.items[' + id + '].mouseenter(function(){' + this.name + '.highlight(' + id + ', true);});');
+			eval(this.name + '.items[' + id + '].mouseenter(function(){' + this.name + '.highlight(' + id + ', true); document.body.style.cursor="pointer";});');
-			eval(this.name + '.items[' + id + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false);});');
+			eval(this.name + '.items[' + id + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false); document.body.style.cursor="default";});');
 			this.items[id].css(this.itemStyle);
 			this.items[id].appendTo(this.rightDiv);
 			this.items[id].data('column', 'right');
@@ -191,14 +193,18 @@
 	this.switch = function(itemId){
 		item = this.items[itemId];
 		if(item.data('column') == 'left'){
-			targetDiv = this.rightDiv;
+			if(this.rightValidator == null || this.rightValidator(itemId)){
 				item.data('column', 'right');
-		}else{
+				this.items[itemId].appendTo(this.rightDiv);
-			targetDiv = this.leftDiv;
-			item.data('column', 'left');
 			}
+		}else{
+			if(this.leftValidator == null || this.leftValidator(itemId)){
+				item.data('column', 'left');
+				this.items[itemId].appendTo(this.leftDiv);
+			}
+		}
+
 		this.highlight(itemId, false);
-		this.items[itemId].appendTo(targetDiv);
 	}
 
 	this.setStyle = function(newTags){

schoolschedule.php

@@ -175,10 +175,10 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
  }else if($_GET['action'] == "getteamlist"){
  	// first we'll get the basic info, and do a quick check that the selected team is in this user's domain
  	if(!array_key_exists('regId', $_POST)){
-		echo "error code PEBKAC\n";
+		echo "error\n";
 		return;
 	}
-	$query = "SELECT sr.* FROM schedule_registrations sr";
+	$query = "SELECT sr.*, so_teams.name as name FROM schedule_registrations sr";
 	$query .= " JOIN so_teams ON so_teams.id = sr.so_teams_id";
 	$query .= " WHERE sr.id=" . $_POST['regId'];
 	$query .= " AND so_teams.schools_id = " . $_SESSION['schoolid'];
@@ -189,6 +189,7 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
 		return;
 	}
 	$record = mysql_fetch_array($results);
+	$teamName = $record['name'];
 
 	// get a list of all students that could be put on this team
 	$query = 'SELECT * FROM users_student';
@@ -218,18 +219,24 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
 		}
 	}
 
-	// get our minimum and maximum number of students for the event
+	// get the necessary data about the event itself
-	$query = "SELECT sominteamsize, somaxteamsize FROM schedule JOIN"
+	$query = "SELECT sominteamsize, somaxteamsize, title FROM schedule JOIN"
 		 . " schedule_registrations sr ON sr.schedule_id = schedule.id WHERE"
 		 . " sr.id = " . $_POST['regId'];
 	$results = mysql_fetch_array(mysql_query($query));
 	$minTeamSize = $results['sominteamsize'];
 	$maxTeamSize = $results['somaxteamsize'];
+	$eventName = $results['title'];
 	
-
+	// and let's put out the script to pass this data back to the browser
 	echo '<script type="text/javascript">';
 	echo "minTeamSize = $minTeamSize;";
 	echo "maxTeamSize = $maxTeamSize;";
+	$caption = i18n(
+		'Select team members for team &quot;%1&quot; in the event &quot;%2&quot;',
+		array(0 => $teamName, 1 => $eventName)
+	);
+	echo "caption = '$caption';";
 	// build our student lists
 	echo "available={";
 	$n = 0;
@@ -298,30 +305,65 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
 		};
 
 		$("#debug").load("schoolschedule.php?action=getteamlist", params, function(response){
-			// at this point, the arrays "available" and "selected" should be defined, giving
+			// data returned will be:
-			// us the corresponding selection elements for this scheduled event
+			//  - selected: an array of students already assigned to this event
+			//  - available: an array of students not assigned to this event
+			//  - caption: text instructions briefly explaining the window
+			//  - minTeamSize: the minimum allowable size for a team in the event
+			//  - maxTeamSize: the maximum allowable size for a team in the event
 
 			// create a list selector that can use these lists
+			var n;
 			selector = new listSelector(selected, available, 'selector');
-			selector.setStyle({'height' : '70%', 'margin-top' : '10%'});
+			selector.setStyle({'height' : '60%', 'margin-top' : '10%'});
 			selector.leftTitle = '<?=i18n("assigned");?>';
 			selector.rightTitle = '<?=i18n("available");?>';
-			var n;
+			// highlight the lists appropriately
 			for(n = 0; n < minTeamSize; n++){
 				selector.leftColours[n] = '#AFA';
 			}
 			for(;n < maxTeamSize; n++){
 				selector.leftColours[n] = '#FFA';
 			}
+			// add our validator to limit the number that can be selected
+			selector.leftValidator = function(){
+				// note that in this case "this" refers to the selector
+				leftTally = 0;
+				for(var n in this.items){
+					if(this.items[n].data('column') == 'left'){
+						leftTally ++;
+					}
+				}
+				return leftTally < maxTeamSize;
+			}
 
+			// create the legend
+			var legend = $('<div></div>');
+			legend.append('<span style="margin:5px;background-color:#AFA"><?=i18n('Required'); ?></span>');
+			legend.append('<span style="margin:5px;background-color:#FFA"><?=i18n('Optional'); ?></span>');
+			legend = $('<div><strong><?=i18n("Legend")?></strong></div>').append(legend);
+			legend.css({
+				'background-color' : '#FFF',
+				'width' : '12em',
+				'border' : 'solid',
+				'border-width' : '1px',
+				'text-align' : 'center',
+				'padding' : '5px',
+				'line-height': '1.6em',
+				'margin' : 'auto'
+
+			});
+
+			// now put all the parts together into a dialog
 			var sdialog = $('<div></div>');
-//			sdialog.append('this is a test');
+			sdialog.append(caption);
 			sdialog.append(selector.draw());
+			sdialog.append(legend);
 			sdialog.dialog({
+				title : '<?=i18n('Team Member Selector');?>',
 				width : 600,
 				height : 400,
 				resizable: false,
-				draggable: false,
 				buttons: {
 					"<?=i18n("Save")?>": function() {
 						saveTeamList($(this), regId, eventId);
@@ -335,10 +377,9 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
 		});
 	 }
 
+	 // save the selected team members for the selected team in the selected event
 	 function saveTeamList(ddiv, regId, eventId){
 		selectedList = selector.getLeftList();
-
-		//params = selector.getLeftList();
 		params = {
 			'regId' : regId,
 			'eventId' : eventId,