MDL-15680 Redesigned the weights interface using table layout. It will eventually replace the current "Edit categories and items" page

This commit is contained in:
nicolasconnault 2008-10-13 14:38:36 +00:00
parent 7a90f48c38
commit a84ce52ecf
4 changed files with 152 additions and 216 deletions

View File

@ -28,14 +28,14 @@ require_once $CFG->dirroot.'/grade/lib.php';
require_once $CFG->dirroot.'/grade/report/lib.php'; // for preferences
require_once $CFG->dirroot.'/grade/edit/weights/lib.php';
require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_json', 'yui_connection', 'yui_dragdrop', 'yui_treeview'));
$courseid = required_param('id', PARAM_INT);
$action = optional_param('action', 0, PARAM_ALPHA);
$eid = optional_param('eid', 0, PARAM_ALPHANUM);
$category = optional_param('category', null, PARAM_INT);
$aggregationtype = optional_param('aggregationtype', null, PARAM_INT);
require_js(array('yui_yahoo', 'yui_dom', 'yui_event', 'yui_json', 'yui_connection', 'yui_dragdrop', 'yui_treeview'));
/// Make sure they can even access this course
if (!$course = $DB->get_record('course', array('id' => $courseid))) {
@ -84,12 +84,10 @@ print_header_simple($strgrades . ': ' . $strgraderreport, ': ' . $strcategoriese
print_grade_plugin_selector($courseid, 'edit', 'tree');
print_heading(get_string('weightsedit', 'grades'));
$tree_json = json_encode(get_tree_json($gtree, $gtree->top_element));
$form_key = optional_param('sesskey', null, PARAM_ALPHANUM);
if ($form_key) {
$data = data_submitted();
if ($form_key && $data = data_submitted()) {
foreach ($data as $key => $value) {
if (preg_match('/aggregation_type_([0-9]*)/', $key, $matches)) {
@ -147,25 +145,39 @@ if ($form_key) {
}
}
// AJAX interface not really needed: adds nice tree functions but not very useful
// require_once('ajax.php');
print_box_start('gradetreebox generalbox');
// echo '<div id="expandcontractdiv"> <a id="expand" href="#">Expand all</a> <a id="collapse" href="#">Collapse all</a> </div> ';
echo '<button type="button" onclick="toggle_advanced_columns()">Show/Hide advanced columns</button>';
echo '<form method="post" action="'.$returnurl.'">';
echo '<input type="hidden" name="sesskey" value="'.sesskey().'" />';
echo '<div id="gradetree">';
echo build_html_tree(get_tree_json($gtree, $gtree->top_element), null, $returnurl);
echo '<input type="hidden" name="sesskey" value="'.sesskey().'" />';
echo build_html_tree(get_tree_json($gtree, $gtree->top_element, 0, $gpr), null, $returnurl);
// print_grade_tree($gtree, $gtree->top_element, $gpr, $switch);
//
echo '</div><div>';
echo '<input type="submit" value="Update weights" />';
echo '</div></form>';
print_box_end();
echo '</div></form>
<script type="text/javascript">
function toggle_advanced_columns() {
var advEls = YAHOO.util.Dom.getElementsByClassName("advanced");
var shownAdvEls = YAHOO.util.Dom.getElementsByClassName("advancedshown");
for (var i = 0; i < advEls.length; i++) {
YAHOO.util.Dom.replaceClass(advEls[i], "advanced", "advancedshown");
}
for (var i = 0; i < shownAdvEls.length; i++) {
YAHOO.util.Dom.replaceClass(shownAdvEls[i], "advancedshown", "advanced");
}
}
</script>
<noscript>
<!-- Print a button for hiding/showing the advanced columns -->
</noscript>';
print_footer($course);
die;

View File

@ -23,7 +23,8 @@
// //
///////////////////////////////////////////////////////////////////////////
function get_tree_json(&$gtree, $element, $totals=false) {
function get_tree_json(&$gtree, $element, $totals=false, $gpr) {
global $CFG, $COURSE;
$return_array = array();
@ -33,36 +34,67 @@ function get_tree_json(&$gtree, $element, $totals=false) {
$return_array['item'] = $object;
$return_array['item']->actions = $gtree->get_edit_icon($element, $gpr);
$return_array['item']->actions .= $gtree->get_calculation_icon($element, $gpr);
if ($element['type'] == 'item' or ($element['type'] == 'category' and $element['depth'] > 1)) {
if (element_deletable($element)) {
$return_array['item']->actions .= '<a href="index.php?id='.$COURSE->id.'&amp;action=delete&amp;eid='
. $eid.'&amp;sesskey='.sesskey().'"><img src="'.$CFG->pixpath.'/t/delete.gif" class="iconsmall" alt="'
. get_string('delete').'" title="'.get_string('delete').'"/></a>';
}
$return_array['item']->actions .= '<a href="index.php?id='.$COURSE->id.'&amp;action=moveselect&amp;eid='
. $eid.'&amp;sesskey='.sesskey().'"><img src="'.$CFG->pixpath.'/t/move.gif" class="iconsmall" alt="'
. get_string('move').'" title="'.get_string('move').'"/></a>';
}
$return_array['item']->actions .= $gtree->get_hiding_icon($element, $gpr);
$return_array['item']->actions .= $gtree->get_locking_icon($element, $gpr);
if ($element['type'] == 'category') {
foreach($element['children'] as $child_el) {
if (!empty($child_el['object']->itemtype) && ($child_el['object']->itemtype == 'course' || $child_el['object']->itemtype == 'category') && !$totals) {
continue;
}
$return_array['children'][] = get_tree_json($gtree, $child_el);
$return_array['children'][] = get_tree_json($gtree, $child_el, $totals, $gpr);
}
}
return $return_array;
}
function build_html_tree($tree, $element=null) {
function build_html_tree($tree, $element=null, $level=0) {
global $CFG;
$options = array(GRADE_AGGREGATE_MEAN =>get_string('aggregatemean', 'grades'),
GRADE_AGGREGATE_WEIGHTED_MEAN =>get_string('aggregateweightedmean', 'grades'),
GRADE_AGGREGATE_WEIGHTED_MEAN2 =>get_string('aggregateweightedmean2', 'grades'),
GRADE_AGGREGATE_EXTRACREDIT_MEAN=>get_string('aggregateextracreditmean', 'grades'),
GRADE_AGGREGATE_MEDIAN =>get_string('aggregatemedian', 'grades'),
GRADE_AGGREGATE_MIN =>get_string('aggregatemin', 'grades'),
GRADE_AGGREGATE_MAX =>get_string('aggregatemax', 'grades'),
GRADE_AGGREGATE_MODE =>get_string('aggregatemode', 'grades'),
GRADE_AGGREGATE_SUM =>get_string('aggregatesum', 'grades'));
$options = array(GRADE_AGGREGATE_MEAN => get_string('aggregatemean', 'grades'),
GRADE_AGGREGATE_WEIGHTED_MEAN => get_string('aggregateweightedmean', 'grades'),
GRADE_AGGREGATE_WEIGHTED_MEAN2 => get_string('aggregateweightedmean2', 'grades'),
GRADE_AGGREGATE_EXTRACREDIT_MEAN => get_string('aggregateextracreditmean', 'grades'),
GRADE_AGGREGATE_MEDIAN => get_string('aggregatemedian', 'grades'),
GRADE_AGGREGATE_MIN => get_string('aggregatemin', 'grades'),
GRADE_AGGREGATE_MAX => get_string('aggregatemax', 'grades'),
GRADE_AGGREGATE_MODE => get_string('aggregatemode', 'grades'),
GRADE_AGGREGATE_SUM => get_string('aggregatesum', 'grades'));
$html = '';
$root = false;
if (is_null($element)) {
$html .= "<ul>\n";
$html .= '<table cellpadding="5" class="generaltable">
<tr>
<th class="header name">'.get_string('name').'</th>
<th class="header advanced">'.get_string('aggregation', 'grades').'</th>
<th class="header advanced">'.get_string('weightorextracredit', 'grades').'</th>
<th class="header advanced">'.get_string('range', 'grades').'</th>
<th class="header advanced" style="width: 40px">'.get_string('aggregateonlygraded', 'grades').'</th>
<th class="header advanced" style="width: 40px">'.get_string('aggregatesubcats', 'grades').'</th>
<th class="header advanced" style="width: 40px">'.get_string('aggregateoutcomes', 'grades').'</th>
<th class="header advanced">'.get_string('droplow', 'grades').'</th>
<th class="header advanced">'.get_string('keephigh', 'grades').'</th>
<th class="header advanced">'.get_string('multfactor', 'grades').'</th>
<th class="header advanced">'.get_string('plusfactor', 'grades').'</th>
<th class="header actions">'.get_string('actions').'</th>
</tr>';
$element = $tree;
$root = true;
}
@ -74,7 +106,6 @@ function build_html_tree($tree, $element=null) {
$category = grade_category::fetch(array('id' => $element['item']->id));
$item = $category->get_grade_item();
$html .= "<li class=\"category\">\n";
$script = "window.location='index.php?id=$id&amp;category={$category->id}&amp;aggregationtype='+this.value";
$aggregation_type = choose_from_menu($options, 'aggregation_type_'.$category->id, $category->aggregation, get_string('choose'), $script, 0, true);
@ -82,23 +113,12 @@ function build_html_tree($tree, $element=null) {
$subcatscheck = ($category->aggregatesubcats == 1) ? 'checked="checked"' : '';
$outcomescheck = ($category->aggregateoutcomes == 1) ? 'checked="checked"' : '';
$aggregateonlygraded = '<label for="aggregateonlygraded_'.$category->id.'">'
. '<img src="'.$CFG->pixpath.'/t/nonempty.gif" class="icon caticon" alt="'.get_string('aggregateonlygraded', 'grades').'" '
. 'title="'.get_string('aggregateonlygraded', 'grades').'" /></label>'
. '<input type="checkbox" id="aggregateonlygraded_'.$category->id.'" name="aggregateonlygraded_'.$category->id.'" '
. $onlygradedcheck . ' />';
$aggregateonlygraded ='<input type="checkbox" id="aggregateonlygraded_'.$category->id.'" name="aggregateonlygraded_'.$category->id.'" '.$onlygradedcheck . ' />';
$aggregatesubcats = '<input type="checkbox" id="aggregatesubcats_'.$category->id.'" name="aggregatesubcats_'.$category->id.'" ' . $subcatscheck.' />';
$aggregateoutcomes = '<input type="checkbox" id="aggregateoutcomes_'.$category->id.'" name="aggregateoutcomes_'.$category->id.'" ' . $outcomescheck.' />';
$aggregatesubcats = '<label for="aggregatesubcats_'.$category->id.'">'
. '<img src="'.$CFG->pixpath.'/t/sigmaplus.gif" class="icon caticon" alt="'.get_string('aggregatesubcats', 'grades').'" '
. 'title="'.get_string('aggregatesubcats', 'grades').'" /></label>'
. '<input type="checkbox" id="aggregatesubcats_'.$category->id.'" name="aggregatesubcats_'.$category->id.'" '
. $subcatscheck.' />';
$aggregateoutcomes = '<label for="aggregateoutcomes_'.$category->id.'">'
. '<img src="'.$CFG->pixpath.'/t/outcomes.gif" class="icon caticon" alt="'.get_string('aggregateoutcomes', 'grades').'" '
. 'title="'.get_string('aggregateoutcomes', 'grades').'" /></label>'
. '<input type="checkbox" id="aggregateoutcomes_'.$category->id.'" name="aggregateoutcomes_'.$category->id.'" '
. $outcomescheck.' />';
$droplow = '<input type="text" size="3" id="droplow_'.$category->id.'" name="droplow_'.$category->id.'" value="'.$category->droplow.'" />';
$keephigh = '<input type="text" size="3" id="keephigh_'.$category->id.'" name="keephigh_'.$category->id.'" value="'.$category->keephigh.'" />';
$hidden = '<input type="hidden" name="aggregateonlygraded_original_'.$category->id.'" value="'.$category->aggregateonlygraded.'" />';
$hidden .= '<input type="hidden" name="aggregatesubcats_original_'.$category->id.'" value="'.$category->aggregatesubcats.'" />';
@ -107,17 +127,29 @@ function build_html_tree($tree, $element=null) {
// Add aggregation coef input if not a course item and if parent category has correct aggregation type
$aggcoef_input = get_weight_input($item);
$html .= '<span class="name">' . $element['item']->name . '</span>'
. $aggregation_type . $aggregateonlygraded . $aggregatesubcats . $aggregateoutcomes . $aggcoef_input . $hidden . "<ul>\n";
$html .= '
<tr class="category">
<td class="cell name" style="padding-left:' . ($level * 20)
. 'px; background: #DDDDDD url(img/ln.gif) no-repeat scroll ' . (($level - 1) * 20) . 'px 8px">' . $element['item']->name . $hidden . '</td>
<td class="cell advanced">' . $aggregation_type . '</td>
<td class="cell advanced">' . $aggcoef_input . '</td>
<td class="cell advanced">' . $item->get_formatted_range() . '</td>
<td class="cell advanced">' . $aggregateonlygraded . '</td>
<td class="cell advanced">' . $aggregatesubcats . '</td>
<td class="cell advanced">' . $aggregateoutcomes . '</td>
<td class="cell advanced">' . $droplow . '</td>
<td class="cell advanced">' . $keephigh . '</td>
<td class="cell advanced"> - </td>
<td class="cell advanced"> - </td>
<td class="cell actions">' . $element['item']->actions . '</td>
</tr>
';
foreach ($element['children'] as $child) {
$html .= build_html_tree($tree, $child);
$html .= build_html_tree($tree, $child, $level+1);
}
$html .= "</ul>\n";
} else { // Dealing with a grade item
$html .= "<li>\n";
$item = grade_item::fetch(array('id' => $element['item']->id));
$element['type'] = 'item';
@ -140,13 +172,31 @@ function build_html_tree($tree, $element=null) {
// Determine aggregation coef element
$aggcoef_input = get_weight_input($item);
$html .= '<span class="gradeitem">' . "\n$aggcoef_input\n{$element['item']->name} (" . $item->get_formatted_range() . ")</span>\n";
$multfactor = '<input type="text" size="3" id="multfactor'.$item->id.'" name="multfactor'.$item->id.'" value="'.$item->multfactor.'" />';
$plusfactor = '<input type="text" size="3" id="plusfactor_'.$item->id.'" name="plusfactor_'.$item->id.'" value="'.$item->plusfactor.'" />';
$html .= '
<tr class="item">
<td class="cell name" style="padding-left:' . ($level * 20)
. 'px; background: #FFFFFF url(img/ln.gif) no-repeat scroll ' . (($level - 1) * 20) . 'px 8px">' . $element['item']->name . '</td>
<td class="cell advanced"> - </td>
<td class="cell advanced">' . $aggcoef_input . '</td>
<td class="cell advanced">' . $item->get_formatted_range() . '</td>
<td class="cell advanced"> - </td>
<td class="cell advanced"> - </td>
<td class="cell advanced"> - </td>
<td class="cell advanced"> - </td>
<td class="cell advanced"> - </td>
<td class="cell advanced">'.$multfactor.'</td>
<td class="cell advanced">'.$plusfactor.'</td>
<td class="cell actions">' . $element['item']->actions . '</td>
</tr>
';
}
$html .= "</li>\n";
if ($root) {
$html .= "</ul>\n";
$html .= "</table>\n";
}
return $html;
@ -182,18 +232,39 @@ function get_weight_input($item) {
}
if ($aggcoef == 'aggregationcoefweight' || $aggcoef == 'aggregationcoefextra') {
return '<label class="weight" for="weight_'.$item->id.'">'.get_string($aggcoef, 'grades').'</label>'
. '<input type="text" size="6" id="weight_'.$item->id.'" name="weight_'.$item->id.'" value="'.$item->aggregationcoef.'" />';
return '<input type="text" size="6" id="weight_'.$item->id.'" name="weight_'.$item->id.'" value="'.$item->aggregationcoef.'" />';
} elseif ($aggcoef == 'aggregationcoefextrasum' ) {
$checked = ($item->aggregationcoef > 0) ? 'checked="checked"' : '';
$extracredit = ($item->aggregationcoef > 0) ? 1 : 0;
return '<label class="weight" for="extracredit_'.$item->id.'">'.get_string($aggcoef, 'grades').'</label>'
. '<input type="checkbox" id="extracredit_'.$item->id.'" name="extracredit_'.$item->id.'" ' . "$checked />\n"
return '<input type="checkbox" id="extracredit_'.$item->id.'" name="extracredit_'.$item->id.'" ' . "$checked />\n"
. '<input type="hidden" name="extracredit_original_'.$item->id.'" value="'.$extracredit.'" />';
} else {
return '';
}
}
}
function element_deletable($element) {
global $COURSE;
if ($element['type'] != 'item') {
return true;
}
$grade_item = $element['object'];
if ($grade_item->itemtype != 'mod' or $grade_item->is_outcome_item() or $grade_item->gradetype == GRADE_TYPE_NONE) {
return true;
}
$modinfo = get_fast_modinfo($COURSE);
if (!isset($modinfo->instances[$grade_item->itemmodule][$grade_item->iteminstance])) {
// module does not exist
return true;
}
return false;
}
?>

View File

@ -1,171 +1,23 @@
/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */
/* first or middle sibling, no children */
.ygtvtn {
background: url(img/tn.gif) 0 0 no-repeat;
width:17px;
height:22px;
#gradetree tr.category td {
background-color: #DDDDDD;
}
/* first or middle sibling, collapsable */
.ygtvtm {
background: url(img/tm.gif) 0 0 no-repeat;
width:34px;
height:22px; cursor:pointer
}
/* first or middle sibling, collapsable, hover */
.ygtvtmh {
background: url(img/tmh.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* first or middle sibling, expandable */
.ygtvtp {
background: url(img/tp.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* first or middle sibling, expandable, hover */
.ygtvtph {
background: url(img/tph.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* last sibling, no children */
.ygtvln {
background: url(img/ln.gif) 0 0 no-repeat;
width:17px;
height:22px;
}
/* Last sibling, collapsable */
.ygtvlm {
background: url(img/lm.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* Last sibling, collapsable, hover */
.ygtvlmh {
background: url(img/lmh.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* Last sibling, expandable */
.ygtvlp {
background: url(img/lp.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* Last sibling, expandable, hover */
.ygtvlph {
background: url(img/lph.gif) 0 0 no-repeat;
width:34px;
height:22px;
cursor:pointer
}
/* Loading icon */
.ygtvloading {
background: url(img/loading.gif) 0 0 no-repeat;
width:16px;
height:22px;
}
/* the style for the empty cells that are used for rendering the depth
* of the node */
.ygtvdepthcell {
background: url(img/vline.gif) 0 0 no-repeat;
width:17px;
height:22px;
}
.ygtvblankdepthcell {
width:17px;
height:22px;
}
/* the style of the div around each node */
.ygtvitem { }
.ygtvitem table{
margin-bottom:0;
}
.ygtvitem td {
border:none;padding:0;
}
/* the style of the div around each node's collection of children */
.ygtvchildren { }
* html .ygtvchildren {
height:1%;
}
/* the style of the text label in ygTextNode */
.ygtvlabel, .ygtvlabel:link, .ygtvlabel:visited, .ygtvlabel:hover {
margin-left:2px;
text-decoration: none;
}
#expandcontractdiv {
border:1px dotted #dedede;
background-color:#EBE4F2;
margin:0 0 .5em 0;
padding:0.4em;
}
#weightstree {
background: #fff;
padding:1em;
margin-top:1em;
}
span.gradeitem input {
margin-right: 10px;
}
span.gradeitem label,
li.category label.weight {
margin-right: 10px;
}
li.category label.weight {
margin-left: 5px;
}
li.category span.name {
#gradetree .category td.name {
font-weight: bold;
}
img.caticon {
width: 11px;
height: 11px;
margin: 0px -1px 3px 5px;
#gradetree td.name {
}
#gradetree select {
margin-left: 10px;
#gradetree th.actions {
width: 80px;
}
li.category {
margin-top: 10px;
.child {
background-image: url(img/ln.gif);
}
li.category ul {
margin-top: 10px;
.advanced {
display: none;
}

View File

@ -519,6 +519,7 @@ $string['weightedascending'] = 'Sort by weighted percent ascending';
$string['weighteddescending'] = 'Sort by weighted percent descending';
$string['weightedpct'] = 'weighted %%';
$string['weightedpctcontribution'] = 'weighted %% contribution';
$string['weightorextracredit'] = 'Weight or extra credit';
$string['weights'] = 'Weights';
$string['weightsedit'] = 'Edit weights and extra credits';
$string['writinggradebookinfo'] = 'Writing gradebook settings';