* show task progress in project task list with pie chart.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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):?>
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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')
|
||||
{
|
||||
|
||||
@@ -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
@@ -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);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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;}
|
||||
|
||||
Reference in New Issue
Block a user