Working schedule event editor for adding, editing and removing events from the schedule.

This commit is contained in:
james 2010-06-11 19:36:50 +00:00
parent 80fc39bf7f
commit 4edd9baad3
3 changed files with 131 additions and 36 deletions

View File

@ -29,7 +29,7 @@
$ROWHEIGHT=20; $ROWHEIGHT=20;
$BORDERSIZE=2; $BORDERSIZE=2;
if($_POST['date']) { if($_GET['action']=="loadschedule") {
$date=$_POST['date']; $date=$_POST['date'];
$starthour=$_POST['starthour']; $starthour=$_POST['starthour'];
$endhour=$_POST['endhour']; $endhour=$_POST['endhour'];
@ -74,14 +74,6 @@
echo "</td>"; echo "</td>";
foreach($locations AS $id=>$name) { foreach($locations AS $id=>$name) {
echo "<td id=\"{$h}_{$m}_{$id}\" onclick=\"clickTableCell(this)\">"; echo "<td id=\"{$h}_{$m}_{$id}\" onclick=\"clickTableCell(this)\">";
/*
if($h==8&&$m==0&&$id==3) {
$height=4;
$pxheight=$height*25;
echo "<div class=\"scheduleevent\" style=\"height: {$pxheight}px;\">";
echo "</div>";
}
*/
echo "</td>"; echo "</td>";
} }
echo "</tr>"; echo "</tr>";
@ -94,10 +86,21 @@
//now make all our DIV's for the events that are scheduled in the database //now make all our DIV's for the events that are scheduled in the database
$x=0; $x=0;
//they will be moved by javascript after the fact //they will be moved by javascript after the fact
$q=mysql_query("SELECT * FROM schedule WHERE conferences_id='{$conference['id']}' AND date='{$date}'"); $q=mysql_query("SELECT schedule.*, events.name FROM schedule JOIN events ON schedule.events_id=events.id WHERE schedule.conferences_id='{$conference['id']}' AND date='{$date}'");
echo mysql_error();
while($r=mysql_fetch_object($q)) { while($r=mysql_fetch_object($q)) {
echo "<div class=\"scheduleevent\" id=\"event_{$r->id}\">"; echo "<div class=\"scheduleevent\" id=\"event_{$r->id}\" onclick=\"editEvent($r->id)\">";
print_r($r); echo "<div style=\"width: 99%; text-align: right;\"><a href=\"#\" onclick=\"return deleteEvent(event,$r->id)\"><img style=\"border: 0px;\" src=\"".$config['SFIABDIRECTORY']."/images/16/button_cancel.{$config['icon_extension']}\"></a></div>\n";
echo "<span class=\"scheduleevent_title\">";
echo $r->name;
echo "</span>";
echo "<br />";
$starttime=strtotime($r->hour.":".$r->minute);
$endtime=$starttime+$r->duration*60;
echo format_time($starttime);
echo " to ";
echo format_time($endtime);
echo "</div>"; echo "</div>";
$js.="eventdivs[$r->id]={hour:$r->hour,minute:$r->minute,location:$r->locations_id,duration:$r->duration};\n"; $js.="eventdivs[$r->id]={hour:$r->hour,minute:$r->minute,location:$r->locations_id,duration:$r->duration};\n";
$x++; $x++;
@ -106,6 +109,38 @@
echo $js; echo $js;
echo "</script>"; echo "</script>";
} }
else if($_GET['action']=="loadevent") {
$id=intval($_GET['id']);
$q=mysql_query("SELECT * FROM schedule WHERE id='$id' AND conferences_id='{$conference['id']}'");
if($r=mysql_fetch_array($q)) {
echo json_encode($r);
}
else
echo json_encode(array("id"=>0));
exit;
}
else if($_GET['action']=="saveevent") {
$id=intval($_POST['id']);
if(!$id) {
mysql_query("INSERT INTO schedule (conferences_id) VALUES ('{$conference['id']}')");
$id=mysql_insert_id();
}
mysql_query("UPDATE schedule SET
date='".mysql_real_escape_string($_POST['date'])."',
hour='".mysql_real_escape_string($_POST['hour'])."',
minute='".mysql_real_escape_string($_POST['minute'])."',
duration='".mysql_real_escape_string($_POST['duration'])."',
events_id='".mysql_real_escape_string($_POST['event_id'])."',
locations_id='".mysql_real_escape_string($_POST['location_id'])."'
WHERE id='$id' AND conferences_id='{$conference['id']}'");
echo mysql_error();
exit;
}
else if($_GET['action']=="deleteevent") {
$id=intval($_POST['id']);
mysql_query("DELETE FROM schedule WHERE conferences_id='{$conference['id']}' AND id='{$id}'");
exit;
}
else { else {
send_header("Schedule Management", send_header("Schedule Management",
@ -118,21 +153,33 @@
$(document).ready(function() { $(document).ready(function() {
$(".date").datepicker({ dateFormat: 'yy-mm-dd' }); $(".date").datepicker({ dateFormat: 'yy-mm-dd' });
changeDate(); changeDate();
/* Setup the editor dialog */
$("#event_editor_dialog").dialog({
bgiframe: true, autoOpen: false,
modal: true, resizable: false,
draggable: false,
buttons: {
"<?=i18n('Cancel')?>": function() {
$(this).dialog("close");
},
"<?=i18n('Save')?>": function() {
saveEvent();
$(this).dialog("close");
}
}
});
}); });
function changeDate() { function changeDate() {
$("#schedulediv").load("schedule.php",{date:$("#date").val(),starthour:$("#starthour").val(),endhour:$("#endhour").val()},function() { $("#schedulediv").load("schedule.php?action=loadschedule",{date:$("#date").val(),starthour:$("#starthour").val(),endhour:$("#endhour").val()},function() {
placeEvents(); placeEvents();
}); });
} }
function clickTableCell(t) { function clickTableCell(t) {
var p=$("#"+t.id).offset(); var p=$("#"+t.id).offset();
// alert('You clicked in empty cell : '+t.id+' at top:'+position.top+' left:'+position.left); editEvent(null,t.id);
$("#scheduleeventeditor").css(p);
// $("#scheduleeventeditor").width(150);
// $("#scheduleeventeditor").height(100);
$("#scheduleeventeditor").show();
} }
@ -153,6 +200,58 @@
} }
); );
} }
function editEvent(id,cell) {
if(id) {
var eventobj=eventdivs[id];
$("#event_editor_dialog").dialog('option','title','Edit Event');
$.getJSON("schedule.php?action=loadevent&id="+id,function(json) {
$("#edit_schedule_id").val(json.id);
$("#edit_date").val(json.date);
$("#edit_hour").val(json.hour);
$("#edit_minute").val(json.minute);
$("#edit_duration").val(json.duration);
$("#edit_location").val(json.locations_id);
$("#edit_event").val(json.events_id);
});
}
else {
$("#event_editor_dialog").dialog('option','title','Create Event');
var a=cell.split("_");
$("#edit_schedule_id").val(0);
$("#edit_date").val($("#date").val());
$("#edit_hour").val(a[0]);
$("#edit_minute").val(a[1]);
$("#edit_duration").val(60);
$("#edit_location").val(a[2]);
$("#edit_event").val("");
}
$("#event_editor_dialog").dialog('option','width',600);
$("#event_editor_dialog").dialog('option','height',400);
$("#event_editor_dialog").dialog('open');
}
function saveEvent() {
var o=$("#edit_event_form").serializeArray();
//alert(o);
$.post("schedule.php?action=saveevent",o,function() {
changeDate();
});
}
function deleteEvent(event,id) {
event.stopPropagation();
if(confirmClick('Are you sure you want to delete this event from the schedule?')) {
$.post('schedule.php?action=deleteevent',{id:id},function() {
changeDate();
});
}
return false;
}
</script> </script>
<? <?
@ -172,7 +271,8 @@
<hr /> <hr />
<div id="schedulediv"> <div id="schedulediv">
</div> </div>
<div id="scheduleeventeditor"> <div id="event_editor_dialog">
<? include "schedule_edit_dialog.php"; ?>
</div> </div>
<? <?

View File

@ -851,10 +851,10 @@ function emit_date_selector($name,$selected="")
echo "</table>"; echo "</table>";
} }
function emit_hour_selector($name,$selected="") function emit_hour_selector($name,$selected="",$extra)
{ {
if($selected!="") $selected=(int)$selected; if($selected!="") $selected=(int)$selected;
echo "<select name=\"$name\">\n"; echo "<select name=\"$name\" id=\"$name\" $extra>\n";
echo "<option value=\"\">HH</option>\n"; echo "<option value=\"\">HH</option>\n";

View File

@ -510,7 +510,7 @@ ul.conferencenav li a:hover {
.schedule td { .schedule td {
border: 1px solid #CCCCCC; border: 1px solid #CCCCCC;
height: 25px; height: 20px;
overflow: auto; overflow: auto;
} }
@ -525,26 +525,21 @@ ul.conferencenav li a:hover {
.scheduleevent { .scheduleevent {
position: absolute; position: absolute;
border: 2px solid red; border: 2px solid #777777;
background: orange; background: #FFC143;
width: 150px; width: 150px;
margin:0; margin:0;
width: 148px; width: 148px;
z-index: 1000; z-index: 1000;
display: none; display: none;
overflow: auto; overflow: auto;
font-size: 0.75em; font-size: 0.9em;
text-align: center;
cursor: pointer;
} }
#scheduleeventeditor { .scheduleevent_title {
position: absolute; font-weight: bold;
top: 100px; font-size: 1.2em;
left: 100px;
display: none;
background-color: orange;
border: 2px solid grey;
width: 148px;
height: 95px;
z-index: 1000;
} }