* show task progress in project task list with pie chart.

This commit is contained in:
Catouse
2016-11-30 14:22:51 +08:00
parent 413e80a3d5
commit 462abed288
9 changed files with 86 additions and 9 deletions
+52
View File
@@ -3,6 +3,12 @@
.table-chart tr > td.chart-color {padding-left: 0!important; text-align: center; padding-right: 0!important; color: #f1f1f1}
.chart-wrapper {padding: 10px; background-color: #f1f1f1; border: 1px solid #e5e5e5}
.table-wrapper > .table-bordered > thead > tr:first-child th {border-top: 1px solid #ddd}
.progress-pie {position: relative;}
.datatable td .progress-pie {position: relative; top: -2px; height: 19px;}
.progress-pie-label {position: absolute; top: 0; left: 0; width: 100%; text-align: center; height: 20px; line-height: 20px; font-size: 12px; top: 50%; margin-top: -10px; color: #555;}
.progress-pie-label .icon {line-height: 20px;}
.progress-pie[data-value="100"] .progress-pie-label {color: #4CAF50;}
.table td.has-progress-pie {padding: 3px;}
</style>
<!--[if lte IE 8]>
<?php
@@ -87,9 +93,55 @@ if($config->debug)
});
};
jQuery.fn.progressPie = function(setting)
{
$(this).each(function()
{
var $this = $(this);
var $canvas = $this.is('canvas') ? $this : $this.find('canvas');
if(!$canvas.length) $canvas = $('<canvas>').appendTo($this);
var options = $.extend(
{
value: 0,
color: '#4CAF50',
backColor: '#ddd',
doughnut: true,
doughnutSize: 0,
width: 24,
height: 24,
showTip: false,
name: '',
tipTemplate: "<%=value%>%",
animation: false
}, setting, $this.data());
if($canvas.attr('width') !== undefined) options.width = $canvas.attr('width');
else $canvas.attr('width', options.width);
if($canvas.attr('height') !== undefined) options.height = $canvas.attr('height');
else $canvas.attr('height', options.height);
options.value = Math.max(0, Math.min(100, options.value));
var data =
[
{value: options.value, label: options.name, color: options.color},
{value: 100 - options.value, label: '', color: options.backColor}
];
$canvas[options.doughnut ? 'doughnutChart' : 'pieChart'](data, $.extend(
{
segmentShowStroke: false,
animation: options.animation,
showTooltips: options.showTip,
tooltipTemplate: options.tipTemplate,
percentageInnerCutout: options.doughnutSize,
}, options.chartOptions));
});
};
$(function()
{
$('.table-chart').tableChart();
$('.progress-pie').progressPie();
});
}());
</script>
+1
View File
@@ -70,6 +70,7 @@ $(document).ready(function()
$dropdown.children('.dropdown').append($dropmenu);
this.$datatable.before($dropdown);
this.$datatable.find('[data-toggle=modal], a.iframe').modalTrigger();
if($.fn.progressPie) this.$datatable.find('.progress-pie').progressPie();
$("a[data-toggle='showModuleModal']").click(function(){$('#showModuleModal').modal('show')});
$('#customBtn').modalTrigger();
+6 -1
View File
@@ -145,7 +145,12 @@ function loadBranch(){}
/* Auto compute the work days. */
$(function()
{
if(typeof(replaceID) != 'undefined') setModal4List('iframe', replaceID);
if(typeof(replaceID) != 'undefined') setModal4List('iframe', replaceID, function($list)
{
$list.find('.progress-pie:visible').progressPie();
var datatable = $list.data('zui.datatable');
if(datatable) datatable.$datatable.find('.progress-pie:visible').progressPie();
});
$(".date").bind('dateSelected', function()
{
computeWorkDays(this.id);
+11 -1
View File
@@ -14,11 +14,21 @@
include '../../common/view/datatable.html.php';
$setting = $this->datatable->getSetting('project');
$widths = $this->datatable->setFixedFieldWidth($setting);
$columns = 0;
extract($widths);
?>
<table class='table table-condensed table-hover table-striped tablesorter table-fixed datatable' id='taskList' data-checkable='true' data-fixed-left-width='<?php echo $leftWidth?>' data-fixed-right-width='<?php echo $rightWidth?>' data-custom-menu='true' data-checkbox-name='taskIDList[]'>
<thead>
<tr><?php foreach ($setting as $key => $value) $this->datatable->printHead($value, $orderBy, $vars);?></tr>
<tr><?php
foreach ($setting as $key => $value)
{
if($value->show)
{
$this->datatable->printHead($value, $orderBy, $vars);
$columns++;
}
}
?></tr>
</thead>
<tbody>
<?php foreach($tasks as $task):?>
+3 -2
View File
@@ -12,6 +12,7 @@
?>
<?php
include '../../common/view/header.html.php';
include '../../common/view/chart.html.php';
include '../../common/view/datepicker.html.php';
include '../../common/view/datatable.fix.html.php';
include './taskheader.html.php';
@@ -49,7 +50,7 @@ js::set('browseType', $browseType);
?>
<tfoot>
<tr>
<?php $columns = ($this->cookie->windowWidth > $this->config->wideSize ? 16 : 13) - ($project->type == 'sprint' ? 0 : 1);?>
<?php if(!isset($columns)) $columns = ($this->cookie->windowWidth > $this->config->wideSize ? 15 : 13) - ($project->type == 'sprint' ? 0 : 1);?>
<td colspan='<?php echo $columns;?>'>
<div class='table-actions clearfix'>
<?php
@@ -125,7 +126,7 @@ js::set('browseType', $browseType);
</form>
</div>
<?php js::set('replaceID', 'taskList')?>
<script language='javascript'>
<script>
$('#project<?php echo $projectID;?>').addClass('active')
$('#listTab').addClass('active')
$('#<?php echo ($browseType == 'bymodule' and $this->session->taskBrowseType == 'bysearch') ? 'all' : $this->session->taskBrowseType;?>Tab').addClass('active');
+10 -2
View File
@@ -11,6 +11,7 @@
*/
?>
<?php include '../../common/view/tablesorter.html.php';?>
<?php $columns = 12; ?>
<table class='table table-condensed table-hover table-striped tablesorter table-fixed table-selectable' id='taskList'>
<thead>
<tr>
@@ -21,6 +22,7 @@
<th class='w-70px {sorter:false}'> <?php common::printOrderLink('deadline', $orderBy, $vars, $lang->task->deadlineAB);?></th>
<?php if($this->cookie->windowWidth > $this->config->wideSize):?>
<?php $columns++; ?>
<th class='w-id {sorter:false}'> <?php common::printOrderLink('openedDate', $orderBy, $vars, $lang->task->openedDateAB);?></th>
<?php endif;?>
@@ -28,6 +30,7 @@
<th class='w-user {sorter:false}'> <?php common::printOrderLink('finishedBy', $orderBy, $vars, $lang->task->finishedByAB);?></th>
<?php if($this->cookie->windowWidth > $this->config->wideSize):?>
<?php $columns++; ?>
<th class='w-50px {sorter:false}'> <?php common::printOrderLink('finishedDate', $orderBy, $vars, $lang->task->finishedDateAB);?></th>
<?php endif;?>
@@ -35,7 +38,12 @@
<th class='w-50px {sorter:false}'> <?php common::printOrderLink('consumed', $orderBy, $vars, $lang->task->consumedAB);?></th>
<th class='w-40px nobr {sorter:false}'> <?php common::printOrderLink('left', $orderBy, $vars, $lang->task->leftAB);?></th>
<th class='w-50px'><?php echo $lang->task->progess;?></th>
<?php if($project->type == 'sprint') print "<th class='w-100px {sorter:false}'>" and common::printOrderLink('story', $orderBy, $vars, $lang->task->story) and print '</th>';?>
<?php if($project->type == 'sprint'): ?>
<th class='w-100px {sorter:false}'><?php common::printOrderLink('story', $orderBy, $vars, $lang->task->story); ?></th>
<?php $columns++; ?>
<?php endif;?>
<th class='w-150px {sorter:false}'><?php echo $lang->actions;?></th>
</tr>
</thead>
@@ -88,7 +96,7 @@
<td><?php echo $task->estimate;?></td>
<td><?php echo $task->consumed;?></td>
<td><?php echo $task->left;?></td>
<td><?php echo $task->progess;?>%</td>
<td class='has-progress-pie'><div class='progress-pie' title="<?php echo $task->progess?>%" data-value='<?php echo $task->progess;?>'></div></td>
<?php
if($project->type == 'sprint')
{
+1 -1
View File
@@ -1628,7 +1628,7 @@ class taskModel extends model
echo round($task->left, 1);
break;
case 'progess':
echo $task->progess . '%';
echo "<div class='progress-pie' title='{$task->progess}%' data-value='{$task->progess}'></div>";
break;
case 'deadline':
if(substr($task->deadline, 0, 4) > 0) echo substr($task->deadline, 5, 6);
+1 -2
View File
@@ -1128,7 +1128,6 @@ function setModal()
}
showModal(options, modal, modalBody, dialog);
}
console.log('iframe modal options', options);
modal.modal(options);
}
@@ -1311,7 +1310,7 @@ function setModal4List(triggerClass, replaceID, callback, width)
if($list.is('.table-selectable:not(.table-datatable)')) checkTable($list);
else $list.find('tbody tr:not(.active-disabled) td').click(function(){$(this).closest('tr').toggleClass('active');});
if($.isFunction(callback)) callback();
if($.isFunction(callback)) callback($list);
$.cookie('selfClose', 0);
});
}
+1
View File
@@ -280,6 +280,7 @@ fieldset > .form-group {margin-bottom: 0;}
/* Table condensed */
.table-condensed th, .table-condensed td {padding: 6px 5px; line-height: 18px}
.table-condensed th > a, .table-condensed td > a, .table-condensed td > .btn-icon {vertical-align: middle}
.input-group > select.form-control {float:left; margin-left: -1px;}
.input-group-addon {background-color: #f5f5f5;}