jjsm01/kimai2
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

added pagination to working time widget (#1418)

Browse Source
This commit is contained in:
Kevin Papst
2020-01-30 21:51:27 +01:00
committed by GitHub
parent f2c6d8aee1
commit 9e2fccb105
9 changed files with 302 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
templates/widget/paginatedworkingtimechart.html.twig Normal file
View File

@@ -0,0 +1 @@
{{ render_widget('PaginatedWorkingTimeChart', {'year': year, 'week': week}) }}

131
templates/widget/widget-dailyworkingtimechart.html.twig
View File

@@ -12,76 +12,85 @@
{% endif %}
{% endif %}
{{ encore_entry_link_tags('chart') }}
{{ encore_entry_script_tags('chart') }}
<div class="chart">
<canvas id="{{ chart_id }}" style="height: {{ kimai_context.chart.height }}px;"></canvas>
</div>
<script type="text/javascript">
document.addEventListener('kimai.initialized', function() {
new Chart(
document.getElementById('{{ chart_id }}').getContext('2d'), {
type: '{{ type }}',
data: {
labels: [
{% for day in data -%}
moment('{{ day.day|date_format('Y-m-d') }}').format('ll')
{% if not loop.last %},{% endif -%}
{%- endfor %}
],
datasets: [
{
backgroundColor: '{{ backgroundColor }}',
borderColor: '{{ borderColor }}',
data: [
{% for day in data -%}
{{ (day.totalDuration / 3600)|number_format(2, '.', '') }}
{%- if not loop.last %},{% endif -%}
{%- endfor %}
],
realData: [
{% for day in data -%}
'{{ day.totalDuration|duration }}'
{%- if not loop.last %},{% endif -%}
{%- endfor %}
]
}
]
},
options: {
maintainAspectRatio: true,
responsive: true,
legend: false,
barPercentage: 0.5,
categoryPercentage: 0.9,
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true,
color: '{{ gridColor }}',
lineWidth: 1
var myChart = null;
var paintChart = function() {
myChart = new Chart(
document.getElementById('{{ chart_id }}').getContext('2d'), {
type: '{{ type }}',
data: {
labels: [
{% for day in data -%}
moment('{{ day.day|date_format('Y-m-d') }}').format('ll')
{% if not loop.last %},{% endif -%}
{%- endfor %}
],
datasets: [
{
backgroundColor: '{{ backgroundColor }}',
borderColor: '{{ borderColor }}',
data: [
{% for day in data -%}
{{ (day.totalDuration / 3600)|number_format(2, '.', '') }}
{%- if not loop.last %},{% endif -%}
{%- endfor %}
],
realData: [
{% for day in data -%}
'{{ day.totalDuration|duration }}'
{%- if not loop.last %},{% endif -%}
{%- endfor %}
]
}
}]
]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
options: {
maintainAspectRatio: true,
responsive: true,
legend: false,
barPercentage: 0.5,
categoryPercentage: 0.9,
scales: {
xAxes: [{
gridLines: {
display: false
},
}],
yAxes: [{
ticks: {
beginAtZero: true
},
gridLines: {
display: true,
color: '{{ gridColor }}',
lineWidth: 1
}
}]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
return data.datasets[tooltipItem.datasetIndex].realData[tooltipItem.index];
}
}
}
}
}
}
);
});
);
};
var destroyChart = function () {
myChart.destroy();
};
{% if app.request.xmlHttpRequest %}
paintChart();
{% else %}
document.addEventListener('kimai.initialized', paintChart);
{% endif %}
</script>

74
templates/widget/widget-paginatedworkingtimechart.html.twig Normal file
View File

@@ -0,0 +1,74 @@
<div class="row">
<div class="col-md-12">
{% embed '@AdminLTE/Widgets/box-widget.html.twig' %}
{% block box_title %}
{% if not title is empty %}{{ title|trans }}{% endif %}
{% endblock %}
{% block box_attributes %}
id="PaginatedWorkingTimeChart" data-href="#" data-reload=""
{% endblock %}
{% block box_tools %}
<ul class="pagination pagination-sm inline">
{% set prevYear = options.year %}
{% set prevWeek = options.week %}
{% set nextYear = options.year %}
{% set nextWeek = options.week %}
{% if prevWeek == 1 %}
{% set prevYear = prevYear - 1 %}
{% set prevWeek = 52 %}
{% else %}
{% set prevWeek = prevWeek - 1 %}
{% endif %}
{% if nextWeek == 52 %}
{% set nextYear = nextYear + 1 %}
{% set nextWeek = 1 %}
{% else %}
{% set nextWeek = nextWeek + 1 %}
{% endif %}
<li class="prev"><a onclick="destroyChart()" href="{{ path('widgets_working_time_chart', {'year': prevYear, 'week': prevWeek}) }}" rel="prev">← </a></li>
<li class="next"><a onclick="destroyChart()" href="{{ path('widgets_working_time_chart', {'year': nextYear, 'week': nextWeek}) }}" rel="next"> →</a></li>
</ul>
{% endblock %}
{% block box_body %}
<div class="row">
<div class="col-md-12">
{{ render_widget('DailyWorkingTimeChart', options|merge({'begin': data.begin, 'end': data.end})) }}
</div>
</div>
{% endblock %}
{% block box_footer %}
<div class="row">
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<h5 class="description-header">{{ data.day|duration }}</h5>
<span class="description-text">{{ 'stats.durationToday'|trans }}</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<h5 class="description-header">{{ data.week|duration }}</h5>
<span class="description-text">{{ 'stats.durationWeek'|trans }}</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<h5 class="description-header">{{ data.month|duration }}</h5>
<span class="description-text">{{ 'stats.durationMonth'|trans }}</span>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="description-block border-right">
<h5 class="description-header">{{ data.year|duration }}</h5>
<span class="description-text">{{ 'stats.durationYear'|trans }}</span>
</div>
</div>
</div>
{% endblock %}
{% endembed %}
</div>
</div>
<script type="text/javascript">
document.addEventListener('kimai.initialized', function() {
KimaiPaginatedBoxWidget.create('#PaginatedWorkingTimeChart');
});
</script>