Skip to content

Commit

Permalink
Various improvements to the class changes grid
Browse files Browse the repository at this point in the history 
* Allow displaying all data all the time, instead of just in popups
  (Partial fix to #56 and #62; inspired by what appears without the
  previous commit applied)
* Put enrolled classes at the top (#58)
* Show prereqs, difficulty levels in tooltips (#59)
* Minor code cleanup
  • Loading branch information
@dehnert @gkanwar
dehnert authored and gkanwar committed May 14, 2012
1 parent 6ed3cf2 commit cf9cbf9
Show file tree
Hide file tree
Showing 4 changed files with 42 additions and 11 deletions.
2 changes: 1 addition & 1 deletion esp/esp/program/modules/handlers/onsiteclasslist.py
View file
Expand Up @@ -93,7 +93,7 @@ def catalog_status(self, request, tl, one, two, module, extra, prog):
# Fetch a reduced version of the catalog to save time
data = {
# Todo: section current capacity ? (see ClassSection.get_capacity())
'classes': list(ClassSubject.objects.filter(parent_program=prog, status__gt=0).extra({'teacher_names': """SELECT array_to_string(array_agg(auth_user.first_name || ' ' || auth_user.last_name), ', ') FROM users_userbit, auth_user, datatree_datatree WHERE users_userbit.user_id = auth_user.id AND users_userbit.qsc_id = program_class.anchor_id AND users_userbit.verb_id = datatree_datatree.id AND datatree_datatree.uri = 'V/Flags/Registration/Teacher'""", 'class_size_max_optimal': """SELECT program_classsizerange.range_max FROM program_classsizerange WHERE program_classsizerange.id = optimal_class_size_range_id"""}).values('id', 'class_size_max', 'class_size_max_optimal', 'class_info', 'grade_min', 'grade_max', 'anchor__name', 'anchor__friendly_name', 'teacher_names', 'category__symbol')),
'classes': list(ClassSubject.objects.filter(parent_program=prog, status__gt=0).extra({'teacher_names': """SELECT array_to_string(array_agg(auth_user.first_name || ' ' || auth_user.last_name), ', ') FROM users_userbit, auth_user, datatree_datatree WHERE users_userbit.user_id = auth_user.id AND users_userbit.qsc_id = program_class.anchor_id AND users_userbit.verb_id = datatree_datatree.id AND datatree_datatree.uri = 'V/Flags/Registration/Teacher'""", 'class_size_max_optimal': """SELECT program_classsizerange.range_max FROM program_classsizerange WHERE program_classsizerange.id = optimal_class_size_range_id"""}).values('id', 'class_size_max', 'class_size_max_optimal', 'class_info', 'prereqs', 'hardness_rating', 'grade_min', 'grade_max', 'anchor__name', 'anchor__friendly_name', 'teacher_names', 'category__symbol')),
'sections': list(ClassSection.objects.filter(parent_class__parent_program=prog, status__gt=0).extra({'event_ids': """SELECT list("cal_event"."id") FROM "cal_event", "program_classsection_meeting_times" WHERE ("program_classsection_meeting_times"."event_id" = "cal_event"."id" AND "program_classsection_meeting_times"."classsection_id" = "program_classsection"."id")"""}).values('id', 'max_class_capacity', 'parent_class__id', 'anchor__name', 'enrolled_students', 'event_ids')),
'timeslots': list(prog.getTimeSlots().extra({'label': """to_char("start", 'Dy HH:MI -- ') || to_char("end", 'HH:MI AM')"""}).values_list('id', 'label')),
'categories': list(prog.class_categories.all().order_by('-symbol').values('id', 'symbol', 'category')),
Expand Down
10 changes: 5 additions & 5 deletions esp/public/media/default_styles/onsite_ajax_status.css
View file
Expand Up @@ -193,23 +193,23 @@ span {
float: left;
}

.tooltip {
.compact-classes .tooltip {
position: relative; /*this is the key*/
z-index: 24;
color: #000000 !important;
text-decoration: none !important;
}

.tooltip:hover {
.compact-classes .tooltip:hover {
z-index: 25;
background-color: #ffff99;
}

.tooltip span.tooltip_hover {
.compact-classes .tooltip span.tooltip_hover {
display: none;
}

.tooltip:hover span.tooltip_hover { /*the span will display just on :hover state*/
.compact-classes .tooltip:hover span.tooltip_hover { /*the span will display just on :hover state*/
display: block;
position: absolute;
top: 2em;
Expand All @@ -224,6 +224,6 @@ span {
text-align: left;
}

.tooltip_wide span {
.compact-classes .tooltip_wide span {
width: 600px !important;
}
35 changes: 30 additions & 5 deletions esp/public/media/scripts/onsite/ajax_status.js
View file
Expand Up @@ -15,6 +15,7 @@ var settings = {
show_full_classes: true,
override_full: false,
disable_grade_filter: false,
compact_classes: true,
categories_to_display: []
};

Expand Down Expand Up @@ -126,13 +127,21 @@ function handle_students(new_data, text_status, jqxhr)
handle_completed();
}

function handle_compact_classes()
{
var div = $j('div[id=compact-classes-body]');
var val = settings.compact_classes;
div.toggleClass( "compact-classes" , val);
}

// I wonder why this variable is necessary...
var last_settings_event;
function handle_settings_change(event)
{
last_settings_event = event;
setup_settings();
render_table(state.display_mode, state.student_id);
handle_compact_classes();
update_checkboxes();
}

Expand All @@ -141,15 +150,18 @@ function setup_settings()
$j("#hide_full_control").unbind("change");
$j("#override_control").unbind("change");
$j("#grade_limits_control").unbind("change");
$j("#compact_classes").unbind("change");

// Apply settings
settings.show_full_classes = $j("#hide_full_control").prop("checked");
settings.override_full = $j("#override_control").prop("checked");
settings.disable_grade_filter = $j("#grade_limits_control").prop("checked");
settings.compact_classes = $j("#compact_classes").prop("checked");

$j("#hide_full_control").change(handle_settings_change);
$j("#override_control").change(handle_settings_change);
$j("#grade_limits_control").change(handle_settings_change);
$j("#compact_classes").change(handle_settings_change);
}

/* Event handlers */
Expand Down Expand Up @@ -224,7 +236,11 @@ function update_checkboxes()
for (var j in section.timeslots)
{
var studentcheckbox = $j("#classchange_" + section.id + "_" + state.student_id + "_" + section.timeslots[j]);
$j("#section_" + section.id + "_" + section.timeslots[j]).addClass("student_enrolled");
var section_elem = $j("#section_" + section.id + "_" + section.timeslots[j]);
section_elem.addClass("student_enrolled");
var section_col = section_elem.parent();
section_elem.detach();
section_col.prepend(section_elem);
studentcheckbox.attr("checked", "checked");
studentcheckbox.removeAttr("disabled");
studentcheckbox.change(handle_checkbox);
Expand Down Expand Up @@ -521,6 +537,7 @@ function render_table(display_mode, student_id)
var ts_div = $j("#" + div_name);

ts_div.append($j("<div/>").addClass("timeslot_header").html(data.timeslots[ts_id].label));
var classes_div = $j("<div/>");
for (var i in data.timeslots[ts_id].sections)
{
var section = data.sections[data.timeslots[ts_id].sections[i]];
Expand Down Expand Up @@ -558,10 +575,17 @@ function render_table(display_mode, student_id)
// Create a tooltip with more information about the class
new_div.addClass("tooltip");
var tooltip_div = $j("<span/>").addClass("tooltip_hover").attr("id", div_name);
tooltip_div.append($j("<div/>").addClass("tooltip_title").html(section.title + " - Grades " + data.classes[section.class_id].grade_min.toString() + "--" + data.classes[section.class_id].grade_max.toString()));
var class_data = data.classes[section.class_id];
var short_data = section.title + " - Grades " + class_data.grade_min.toString() + "--" + class_data.grade_max.toString();
if(class_data.hardness_rating) short_data = class_data.hardness_rating + " " + short_data;
tooltip_div.append($j("<div/>").addClass("tooltip_title").html(short_data));
tooltip_div.append($j("<div/>").html(section.num_students_checked_in.toString() + " students checked in, " + section.num_students_enrolled + " enrolled; capacity = " + section.capacity));
tooltip_div.append($j("<div/>").addClass("tooltip_teachers").html(data.classes[section.class_id].teacher_names));
tooltip_div.append($j("<div/>").attr("id", "tooltip_" + section.id + "_" + ts_id + "_desc").addClass("tooltip_description").html(data.classes[section.class_id].class_info));
tooltip_div.append($j("<div/>").addClass("tooltip_teachers").html(class_data.teacher_names));
tooltip_div.append($j("<div/>").attr("id", "tooltip_" + section.id + "_" + ts_id + "_desc").addClass("tooltip_description").html(class_data.class_info));
if(class_data.prereqs)
{
tooltip_div.append($j("<div/>").attr("id", "tooltip_" + section.id + "_" + ts_id + "_prereq").addClass("tooltip_prereq").html("Prereqs: " + class_data.prereqs));
}
new_div.append(tooltip_div);

// Set color of the cell based on check-in and enrollment of the section
Expand All @@ -579,8 +603,9 @@ function render_table(display_mode, student_id)
new_div.css("background", hslToHTML(hue, saturation, lightness));
new_div.attr("id", "section_" + section.id + "_" + ts_id);

ts_div.append(new_div);
classes_div.append(new_div);
}
ts_div.append(classes_div);
ts_div.append($j("<div/>").addClass("timeslot_header").html(data.timeslots[ts_id].label));
}
}
Expand Down
6 changes: 6 additions & 0 deletions esp/templates/program/modules/onsiteclasslist/ajax_status.html
View file
Expand Up @@ -9,6 +9,8 @@
$j.getScript("/media/scripts/csrf_init.js");
$j.getScript("/media/scripts/csrf_check.js");
});
function set_compact_classes() {
}
</script>
<script type="text/javascript" src="/media/scripts/onsite/hsl_colors.js"></script>
<script type="text/javascript" src="/media/scripts/onsite/ajax_status.js"></script>
Expand Down Expand Up @@ -50,21 +52,25 @@
</select>
</div>

<div id='compact-classes-body' class='compact-classes'>
<table class="narrow bordered">
<tr>{% for timeslot in timeslots %}
<td width="270px" valign="top"><div id="timeslot_{{ timeslot.id }}"></div></td>{% endfor %}
</tr>
</table>
</div>

<div id="space_at_bottom" style="height: 400px;">&nbsp;</div>

<a name="settings" />
<div id="settings_controls">
<b>Advanced settings</b>
<!-- make sure to update onsite/ajax_status.js when changing this -->
<ul>
<li><input type="checkbox" id="hide_full_control" checked="checked"/>Show full classes</li>
<li><input type="checkbox" id="override_control"/>Override size limits</li>
<li><input type="checkbox" id="grade_limits_control"/>Show classes outside student's grade range</li>
<li><input type="checkbox" id="compact_classes" checked="checked" />Display only class numbers</li>
</ul>
</div>

Expand Down

0 comments on commit cf9cbf9

Please sign in to comment.