Created a javascript "listSelector" class that can be used to select a list of items from an existing list.

Added a form in schoolschedule.php which uses that class to select students on a team
This commit is contained in:
jacob 2010-06-21 22:06:18 +00:00
parent e02e5ba687
commit 54f6a2e251
2 changed files with 530 additions and 112 deletions

232
js/listSelector.js Normal file
View File

@ -0,0 +1,232 @@
// a generic tool for doing list selection, passing elements between two divs 'left' and 'right'
// the styling needs to be cleaned up a bit, making some options more configurable and others less
function listSelector(left, right, globalName){
var name;
var wrapper;
var leftDiv, rightDiv, leftTitle, rightTitle, leftColours, rightColours;
var items;
var styleTags, boxStyle, itemStyle, rowStyle;
this.name = globalName;
this.leftColours = [];
this.rightColours = [];
this.rowStyle = "height:1.2em; margin-top:1px; width:100%;";
this.styleTags = {
'height' : '100%',
};
this.boxStyle = {
'position' : 'absolute',
'width' : '100%',
'height' : '100%',
'line-height' : '1.2em'
};
this.boxBackdropStyle = {
'position' : 'absolute',
'width' : '40%',
'height' : '90%',
'background' : '#FFF',
'border' : 'solid 1px',
'overflow' : 'hidden'
}
this.itemStyle = {
'margin-top' : '1px',
'height':'1.2em',
'width':'100%'
};
this.headerStyle = {
'width' : '50%',
'position' : 'absolute',
'text-align' : 'center',
'font-size' : '120%',
'font-weight' : 'bold'
};
this.highlightStyle = {
'background-color' : '#25BEFF'
};
this.unhighlightStyle = {
'background' : 'none'
};
this.drawLeftColumn = function(){
this.leftBackdrop = $('<div id="ls_leftBackdrop"></div>');
this.leftBackdrop.css(this.boxBackdropStyle);
this.leftBackdrop.css({
'top' : '5%',
'left' : '5%',
});
this.leftBackdrop.appendTo(this.wrapper);
this.leftHighlight = $('<div id="ls_leftHighlight"></div>');
this.leftHighlight.css(this.boxStyle);
this.leftHighlight.css({'overflow':'auto'});
this.leftHighlight.appendTo(this.leftBackdrop);
this.leftDiv = $('<div id="ls_leftItems"></div>');
this.leftDiv.css(this.boxStyle);
this.leftDiv.appendTo(this.leftHighlight);
if(this.leftTitle != undefined){
var pos = this.leftDiv.position();
var caption = $('<div>' + this.leftTitle + '</div>');
caption.appendTo(this.wrapper);
caption.css(this.headerStyle);
caption.css({
'left' : pos.left + 'px',
'top' : (pos.top - 15) + 'px'
});
}
// if any highlights were added, place them in the column now
var m = 0;
for(var n in this.leftColours){
while(m < n){
d = $('<div></div>');
d.css(this.itemStyle);
this.leftHighlight.append(d);
m++;
}
d = $('<div style="background-color:' + this.leftColours[n] + '"></div>');
d.css(this.itemStyle);
this.leftHighlight.append(d);
m = 1.0 * n + 1;
}
}
this.drawRightColumn = function(){
this.rightBackdrop = $('<div id="ls_rightBackdrop"></div>');
this.rightBackdrop.css(this.boxBackdropStyle);
this.rightBackdrop.css({
'top' : '5%',
'left' : '55%',
});
this.rightBackdrop.appendTo(this.wrapper);
this.rightHighlight = $('<div id="ls_rightHighlight"></div>');
this.rightHighlight.css(this.boxStyle);
this.rightHighlight.css({'overflow':'auto'});
this.rightHighlight.appendTo(this.rightBackdrop);
this.rightDiv = $('<div id="ls_rightItems"></div>');
this.rightDiv.css(this.boxStyle);
this.rightDiv.appendTo(this.rightHighlight);
if(this.rightTitle != undefined){
var pos = this.rightDiv.position();
var caption = $('<div>' + this.rightTitle + '</div>');
caption.appendTo(this.wrapper);
caption.css(this.headerStyle);
caption.css({
'left' : '50%',
'top' : (pos.top - 15) + 'px'
});
}
// if any highlights were added, place them in the column now
var m = 0, d;
for(var n in this.rightColours){
while(m < n){
d = $('<div></div>');
d.css(this.itemStyle);
this.rightHighlight.append(d);
m++;
}
d = $('<div style="background-color:' + this.rightColours[n] + '"></div>');
d.css(this.itemStyle);
this.rightHighlight.append(d);
m = 1.0 * n + 1;
}
}
this.draw = function(){
this.wrapper = $('<div id="ls_wrapper" style="position:relative"></div>');
this.wrapper.css(this.styleTags);
// create the columns
this.drawLeftColumn();
this.drawRightColumn();
// build our list of selectable items in each column
this.items = [];
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);});');
this.items[id].css(this.itemStyle);
this.items[id].appendTo(this.leftDiv);
this.items[id].data('column', 'left');
}
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);});');
this.items[id].css(this.itemStyle);
this.items[id].appendTo(this.rightDiv);
this.items[id].data('column', 'right');
}
return this.wrapper;
}
this.highlight = function(itemId, on){
if(on){
this.items[itemId].css(this.highlightStyle);
}else{
this.items[itemId].css(this.unhighlightStyle);
}
}
this.switch = function(itemId){
item = this.items[itemId];
if(item.data('column') == 'left'){
targetDiv = this.rightDiv;
item.data('column', 'right');
}else{
targetDiv = this.leftDiv;
item.data('column', 'left');
}
this.highlight(itemId, false);
this.items[itemId].appendTo(targetDiv);
}
this.setStyle = function(newTags){
for(var n in newTags){
this.styleTags[n] = newTags[n];
}
}
this.getLeftList = function(){
return this.getList('left');
}
this.getRightList = function(){
return this.getList('right');
}
this.getList = function(side){
var returnval = [];
var n = 0;
for(id in this.items){
if(this.items[id].data('column') == side){
returnval[n] = id;
n++;
}
}
return returnval;
}
}

View File

@ -114,7 +114,7 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
$maxteams=$r->somaxteams;
echo i18n("%1 of %2",array($regteams,$maxteams))."<br />";
$regq=mysql_query("SELECT so_teams.name
$regq=mysql_query("SELECT so_teams.name, schedule_registrations.id
FROM schedule_registrations
JOIN so_teams ON so_teams_id=so_teams.id
WHERE schedule_registrations.conferences_id='{$conference['id']}'
@ -122,7 +122,7 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
AND schedule_registrations.schedule_id='$r->id'");
echo mysql_error();
while($regr=mysql_fetch_object($regq)) {
echo "<div style=\"padding: 2px; border: 1px solid black; background-color: yellow;\">";
echo "<div style=\"padding: 2px; border: 1px solid black; background-color: yellow;\" onclick=\"handleTeamClick(event, {$regr->id}, {$r->events_id});\">";
echo $regr->name;
echo "</div>";
}
@ -135,131 +135,317 @@ if($_SESSION['schoolid'] && $_SESSION['schoolaccesscode']){
echo "<script type=\"text/javascript\">\n";
echo $js;
echo "</script>";
}
else if($_GET['action']=="loadevent") {
}
else if($_GET['action']=="saveevent") {
}
else {
}else if($_GET['action']=="loadevent") {
send_header("Event Registration",
array('School Home' => 'schoolaccess.php'),
"events_scheduling" );
echo "<br />";
?>
<script type="text/javascript">
$(document).ready(function() {
$(".date").datepicker({ dateFormat: 'yy-mm-dd' });
changeDate();
}else if($_GET['action']=="saveevent") {
/* Setup the editor dialog */
$("#event_dialog").dialog({
bgiframe: true, autoOpen: false,
modal: true, resizable: false,
draggable: false,
buttons: {
"<?=i18n('Close')?>": function() {
$(this).dialog("close");
changeDate();
}else if($_GET['action'] == "saveteamlist"){
// print_r($_POST);
// get a list of all students that could be put on this team
$query = 'SELECT * FROM users_student';
$query .= ' JOIN users ON users_student.users_id = users.uid';
$query .= ' JOIN users_conferences_link ucl ON ucl.users_uid = users_student.users_id';
$query .= ' WHERE schools_id = ' . $_SESSION['schoolid'];
$query .= ' AND ucl.conferences_id=' . $conference['id'];
$query .= ' AND users.deleted = "no"';
$results = mysql_query($query);
$availList = array();
while($record = mysql_fetch_array($results)){
$availList[$record['uid']] = $record['firstname'] . ' ' . $record['lastname'];
}
// let's empty the current list of students for this team
$query = "DELETE FROM schedule_registrations_users_link";
$query .= " WHERE users_uid IN (";
$query .= implode(',', array_keys($availList)) . ')';
$query .= " AND schedule_registrations_id = " . (int)$_POST['regId'];
$results = mysql_query($query);
// and now we'll insert only those that were selected
$query = "INSERT INTO schedule_registrations_users_link (schedule_registrations_id, users_uid)";
$query .= " VALUES ";
$valueSet = array();
for($n = 0; $n < $_POST['numSelected']; $n++){
$valueSet[] = '(' . (int)$_POST['regId'] . ',' . (int)$_POST[$n] .')';
}
$query .= implode(',', $valueSet);
$results = mysql_query($query);
}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";
return;
}
$query = "SELECT sr.* 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'];
$results = mysql_query($query);
if(!$results){
echo 'team not found';
return;
}
$record = mysql_fetch_array($results);
// get a list of all students that could be put on this team
$query = 'SELECT * FROM users_student';
$query .= ' JOIN users ON users_student.users_id = users.uid';
$query .= ' JOIN users_conferences_link ucl ON ucl.users_uid = users_student.users_id';
$query .= ' WHERE schools_id = ' . $_SESSION['schoolid'];
$query .= ' AND ucl.conferences_id=' . $conference['id'];
$query .= ' AND users.deleted = "no"';
$results = mysql_query($query);
$availList = array();
while($record = mysql_fetch_array($results)){
$availList[$record['uid']] = $record['firstname'] . ' ' . $record['lastname'];
}
// now find out which of these students are already selected
$query = "SELECT * FROM schedule_registrations_users_link srul";
$query .= " WHERE users_uid IN (";
$query .= implode(',', array_keys($availList)) . ')';
$query .= " AND schedule_registrations_id = " . $_POST['regId'];
$results = mysql_query($query);
$selectedList = array();
if($results){
while($record = mysql_fetch_array($results)){
$idx = $record['users_uid'];
$selectedList[$idx] = $availList[$idx];
unset($availList[$idx]);
}
}
// get our minimum and maximum number of students for the event
$query = "SELECT sominteamsize, somaxteamsize 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'];
echo '<script type="text/javascript">';
echo "minTeamSize = $minTeamSize;";
echo "maxTeamSize = $maxTeamSize;";
// build our student lists
echo "available={";
$n = 0;
foreach($availList as $id => $name){
if($n > 0) echo ',';
echo "$id:\"$name\"";
$n++;
}
echo '};';
echo "selected={";
$n = 0;
foreach($selectedList as $id => $name){
if($n > 0) echo ',';
echo "$id:\"$name\"";
$n++;
}
echo '};';
// pass the additional parameters
/*
$query = "SELECT default_min_team_size, default_max_team_size FROM events WHERE id=" . $_POST['eventId'];
$results = mysql_fetch_array(mysql_query($query));
echo "min_size=" . $results['default_min_team_size'] . ';';
echo "max_size=" . $results['default_max_team_size'] . ';';
*/
echo '</script>';
}else{
send_header("Event Registration",
array('School Home' => 'schoolaccess.php'),
"events_scheduling" );
echo "<br />";
?>
<script type="text/javascript" src="js/listSelector.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".date").datepicker({ dateFormat: 'yy-mm-dd' });
changeDate();
/* Setup the editor dialog */
$("#event_dialog").dialog({
bgiframe: true, autoOpen: false,
modal: true, resizable: false,
draggable: false,
buttons: {
"<?=i18n('Close')?>": function() {
$(this).dialog("close");
changeDate();
}
}
});
$(window).resize(function() {
placeEvents();
}
);
});
function handleTeamClick(event, regId, eventId){
var e = event || window.event;
e.stopPropagation();
params={
'regId' : regId,
'eventId' : eventId
};
$("#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
// create a list selector that can use these lists
selector = new listSelector(selected, available, 'selector');
selector.setStyle({'height' : '70%', 'margin-top' : '10%'});
selector.leftTitle = '<?=i18n("assigned");?>';
selector.rightTitle = '<?=i18n("available");?>';
var n;
for(n = 0; n < minTeamSize; n++){
selector.leftColours[n] = '#AFA';
}
for(;n < maxTeamSize; n++){
selector.leftColours[n] = '#FFA';
}
var sdialog = $('<div></div>');
// sdialog.append('this is a test');
sdialog.append(selector.draw());
sdialog.dialog({
width : 600,
height : 400,
resizable: false,
draggable: false,
buttons: {
"<?=i18n("Save")?>": function() {
saveTeamList($(this), regId, eventId);
},
"<?=i18n('Close')?>": function() {
$(this).dialog("close");
changeDate();
}
}
}
});
});
$(window).resize(function() {
placeEvents();
}
);
});
function changeDate() {
$("#schedulediv").load("schoolschedule.php?action=loadschedule",{date:$("#date").val()},function() {
placeEvents();
});
}
function placeEvents() {
$('.scheduleevent').each(function(idx,item) {
var eventid=item.id.substr(6);
var eventobj=eventdivs[eventid];
var tablecellid=eventobj.hour+'_'+eventobj.minute+'_'+eventobj.location;
if($("#"+tablecellid).length) {
var eheight=((eventobj.duration/15)*<?=$ROWHEIGHT?>)-<? echo $BORDERSIZE*2; ?>;
var ewidth=$("#"+tablecellid).width()-<? echo $BORDERSIZE; ?>;
var p=$("#"+tablecellid).offset();
$("#"+item.id).css(p);
$("#"+item.id).show();
$("#"+item.id).height(eheight);
$("#"+item.id).width(ewidth);
}
else {
$("#"+item.id).hide();
}
}
);
}
var scheduleId;
function viewEvent(id) {
scheduleId=id;
var eventobj=eventdivs[id];
function saveTeamList(ddiv, regId, eventId){
selectedList = selector.getLeftList();
if(id) {
//params = selector.getLeftList();
params = {
'regId' : regId,
'eventId' : eventId,
'numSelected' : selectedList.length
};
for(var n in selectedList){
params[n] = selectedList[n];
}
$("#debug").load("schoolschedule.php?action=saveteamlist", params, function(response){
ddiv.dialog("close");
});
}
function changeDate() {
$("#schedulediv").load("schoolschedule.php?action=loadschedule",{date:$("#date").val()},function() {
placeEvents();
});
}
function placeEvents() {
$('.scheduleevent').each(function(idx,item) {
var eventid=item.id.substr(6);
var eventobj=eventdivs[eventid];
var tablecellid=eventobj.hour+'_'+eventobj.minute+'_'+eventobj.location;
if($("#"+tablecellid).length) {
var eheight=((eventobj.duration/15)*<?=$ROWHEIGHT?>)-<? echo $BORDERSIZE*2; ?>;
var ewidth=$("#"+tablecellid).width()-<? echo $BORDERSIZE; ?>;
var p=$("#"+tablecellid).offset();
$("#"+item.id).css(p);
$("#"+item.id).show();
$("#"+item.id).height(eheight);
$("#"+item.id).width(ewidth);
}
else {
$("#"+item.id).hide();
}
}
);
}
var scheduleId;
function viewEvent(id) {
scheduleId=id;
var eventobj=eventdivs[id];
$("#event_dialog").dialog('option','title',unescape(eventobj.title));
$("#event_dialog").dialog('option','width',600);
$("#event_dialog").dialog('option','height',400);
$("#event_dialog").dialog('open');
$("#event_tabs").tabs('select',0);
if(eventobj.eventtype=='scienceolympic')
$("#event_tabs").tabs('option','disabled',[]);
else
$("#event_tabs").tabs('option','disabled',[1]);
update_tab_summary();
if(id) {
var eventobj=eventdivs[id];
$("#event_dialog").dialog('option','title',unescape(eventobj.title));
$("#event_dialog").dialog('option','width',600);
$("#event_dialog").dialog('option','height',400);
$("#event_dialog").dialog('open');
$("#event_tabs").tabs('select',0);
}
if(eventobj.eventtype=='scienceolympic')
$("#event_tabs").tabs('option','disabled',[]);
else
$("#event_tabs").tabs('option','disabled',[1]);
update_tab_summary();
}
}
function saveEvent() {
var o=$("#edit_event_form").serializeArray();
//alert(o);
$("#debug").load("schoolschedule.php?action=saveevent",o,function() {
changeDate();
});
}
</script>
}
<?
$q=mysql_query("SELECT DISTINCT(date) AS date FROM schedule WHERE conferences_id='{$conference['id']}' ORDER BY date");
$dates=array();
while($r=mysql_fetch_object($q)) {
$dates[]=$r->date;
}
if(count($dates))
$editdate=$dates[0];
else
list($editdate,$bla)=explode(" ",$config['dates']['fairdate']);
function saveEvent() {
var o=$("#edit_event_form").serializeArray();
//alert(o);
$("#debug").load("schoolschedule.php?action=saveevent",o,function() {
changeDate();
});
}
</script>
echo "<form method=\"post\">\n";
echo i18n("Schedule date").": ";
echo "<select id=\"date\" name=\"date\" onchange=\"changeDate()\">";
foreach($dates AS $d) {
echo "<option value=\"$d\">".format_date($d)."</option>\n";
}
echo "</select>";
echo "</form>\n";
?>
<hr />
<div id="schedulediv">
</div>
<div id="event_dialog">
<? include "schoolschedule_event_dialog.php"; ?>
</div>
<?
<?
$q=mysql_query("SELECT DISTINCT(date) AS date FROM schedule WHERE conferences_id='{$conference['id']}' ORDER BY date");
$dates=array();
while($r=mysql_fetch_object($q)) {
$dates[]=$r->date;
}
if(count($dates))
$editdate=$dates[0];
else
list($editdate,$bla)=explode(" ",$config['dates']['fairdate']);
send_footer();
echo "<form method=\"post\">\n";
echo i18n("Schedule date").": ";
echo "<select id=\"date\" name=\"date\" onchange=\"changeDate()\">";
foreach($dates AS $d) {
echo "<option value=\"$d\">".format_date($d)."</option>\n";
}
echo "</select>";
echo "</form>\n";
?>
<hr />
<div id="schedulediv">
</div>
<div id="event_dialog">
<? include "schoolschedule_event_dialog.php"; ?>
</div>
<div id="selector_dialog"></div>
<?
send_footer();
}
}