forked from science-ation/science-ation
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
This commit is contained in:
jacob
parent
964a855275
commit
c699135bce
@ -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 + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false);});');
|
||||
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); 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 + '].mouseleave(function(){' + this.name + '.highlight(' + id + ', false);});');
|
||||
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); 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{
|
||||
targetDiv = this.leftDiv;
|
||||
item.data('column', 'left');
|
||||
this.items[itemId].appendTo(this.rightDiv);
|
||||
}
|
||||
}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){
|
||||
|
||||
@ -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
|
||||
$query = "SELECT sominteamsize, somaxteamsize FROM schedule JOIN"
|
||||
// get the necessary data about the event itself
|
||||
$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 "%1" in the event "%2"',
|
||||
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
|
||||
// us the corresponding selection elements for this scheduled event
|
||||
// data returned will be:
|
||||
// - 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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user