ninegitea/templates/Scrum/stat.html.twig

257 lines
10 KiB
Twig
Raw Normal View History

2022-01-28 16:54:46 +01:00
{% extends "base.html.twig" %}
{% block localstyle %}
2022-02-03 17:26:35 +01:00
#main {
padding-left:0px;
margin-bottom:0px;
}
#mycontent { display:none; }
2022-01-28 16:54:46 +01:00
.flot-chart {
display: block;
2022-02-03 17:26:35 +01:00
height: 450px;
2022-01-28 16:54:46 +01:00
}
.flot-chart-content {
2022-02-03 17:26:35 +01:00
width: 400px;
height: 250px;
2022-01-28 16:54:46 +01:00
}
.flot-chart-subcontent {
height: 200px;
width: 350px;
2022-01-28 16:54:46 +01:00
}
{% endblock %}
{% block body %}
2022-02-03 17:26:35 +01:00
<div class="d-flex">
<div id="filters" class="d-flex flex-column pl-2 pr-2 " style="width:350px; background-color:var(--colorbgbodydark);min-height:1500px;">
<div style="width:100%" class="mt-3">
<label class="control-label" style="color:var(--colorftbodydark)">Filtre JALONS</label>
<select id="filtermilestones" multiple="multiple" class="form-control">
{% for giteamilestone in giteamilestones %}
<option value="{{giteamilestone.id}}">{{giteamilestone.title}}</option>
{% endfor %}
<option value="-100">Aucun</option>
</select>
</div>
2022-02-03 17:26:35 +01:00
</div>
<div class="pl-3" style="width:100%;">
<div class="mt-4 mb-3" style="zoom:80%">
<button class="btn btn-success" onClick="showFilters()"><i class="fas fa-filter"></i></button>
<a class="btn btn-success" href="{{path('app_scrum_view',{id:scrum.id})}}"><i class="fas fa-columns"></i></a>
<a class="btn btn-success" href="{{path('app_scrum_table',{id:scrum.id})}}"><i class="fas fa-ticket-alt"></i></a>
2022-02-03 17:26:35 +01:00
<span id="textfilters"></span>
</div>
<h1>{{ scrum.name }}</h1>
<div class="d-flex flex-column mt-4">
{% for jalon in tbestim %}
{% if jalon.nbjrs>0 %}
<div class="card mb-4" data-milestone="{{ jalon.idjal }}">
<div class="card-header">{{jalon.nmjal}}</div>
<div class="card-body d-flex justify-content-center">
<div class="d-flex flex-column">
<div class="d-flex justify-content-center">
<div id="floatdonut{{ jalon.idjal }}" class="flot-chart-content"></div>
<div style="min-width:250px; color: #ffffff; padding: 3px;">
{% for column in jalon.columns %}
<div style="padding: 3px; background-color:#{{column.color}}">{{column.nmcol}}<span class="float-right">{{column.nbjrs}}</<span></div>
{% endfor %}
<div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{jalon.nbjrs}}</<span></div>
</div>
</div>
<div class="d-flex flex-wrap justify-content-center">
{% for sprint in jalon.sprints %}
{% if jalon.nbjrs != sprint.nbjrs and sprint.nbjrs>0 %}
<div class="card mt-4 mr-4" data-sprint="{{ jalon.idjal~"-"~sprint.idspr }}">
<div class="card-header">{{sprint.nmspr}}</div>
<div class="card-body d-flex flex-column">
<div id="floatdonut{{ jalon.idjal~"-"~sprint.idspr }}" class="flot-chart-subcontent" style="float:left"></div>
<div class="mt-3" style="color: #ffffff;">
{% for column in sprint.columns %}
<div style="padding: 3px; background-color:#{{column.color}}">{{column.nmcol}}<span class="float-right">{{column.nbjrs}}</<span></div>
{% endfor %}
<div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{sprint.nbjrs}}</<span></div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
2022-02-03 17:26:35 +01:00
</div>
</div>
2022-02-03 17:26:35 +01:00
</div>
</div>
{% endif %}
{% endfor %}
2022-02-03 17:26:35 +01:00
</div>
</div>
2022-01-28 16:54:46 +01:00
</div>
2022-02-03 17:26:35 +01:00
2022-01-28 16:54:46 +01:00
{% endblock %}
{% block localjavascript %}
2022-02-03 17:26:35 +01:00
function showFilters() {
if($("#filters").hasClass("d-flex")) {
toshow=0;
$("#filters").addClass("d-none");
$("#filters").removeClass("d-flex");
}
else {
toshow=1;
$("#filters").addClass("d-flex");
$("#filters").removeClass("d-none");
}
$.ajax({
method: "POST",
url: "{{ path('app_user_preference') }}",
data: {
key:'showfilters',
id:{{scrum.id}},
value: toshow
}
});
}
2022-01-28 16:54:46 +01:00
$(document).ready(function() {
2022-02-03 17:26:35 +01:00
// Apply Filter
function showhide() {
if($("#filtermilestones").val().length !== 0) {
$("[data-milestone]").hide();
$.each($("#filtermilestones").val(), function( index, value ) {
$("[data-milestone="+value+"]").show();
});
}
else $("[data-milestone]").show();
textfilters="";
if($("#filtermilestones").val().length!==0) {
data = $("#filtermilestones").select2('data');
textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>JALONS</b> =";
$.each($("#filtermilestones").val(), function( index, value ) {
if(index>0)textfilters=textfilters+" &";
textfilters=textfilters+" "+data[index].text;
});
}
$("#textfilters").html(textfilters);
}
// Filter Milestones
function filtermilestones() {
$.ajax({
method: "POST",
url: "{{ path('app_user_preference') }}",
data: {
key:'filtermilestones',
id:{{scrum.id}},
value: $("#filtermilestones").val()
}
});
showhide();
}
$('#filtermilestones').select2();
{% if filtermilestones %}
{% for milestone in filtermilestones %}
$("#filtermilestones").val($("#filtermilestones").val().concat("{{milestone}}"));
{%endfor%}
$('#filtermilestones').trigger('change');
{% endif %}
$('#filtermilestones').on("select2:select", function(e) {
filtermilestones();
});
$('#filtermilestones').on("select2:unselect", function(e) {
filtermilestones();
});
2022-02-03 17:26:35 +01:00
{% for jalon in tbestim %}
2022-01-28 16:54:46 +01:00
var data = [
{% for column in jalon.columns %}
2022-01-28 16:54:46 +01:00
{
label: "{{ column.nmcol}}",
data: {{ column.nbjrs }},
color: "#{{ column.color }}",
2022-01-28 16:54:46 +01:00
},
{% endfor %}
];
var plotObj = $.plot($("#floatdonut{{ jalon.idjal }}"), data, {
2022-01-28 16:54:46 +01:00
series: {
pie: {
2022-02-03 17:26:35 +01:00
show: true,
radius: 1,
label: {
show: true,
radius: 1,
threshold: 0.1,
background: {
opacity: 0.5,
color: '#cdcdcd',
},
formatter: function(label, series) {
return '<span style="color:#000; padding:3px;">' + label + '</span>';
}
}
2022-01-28 16:54:46 +01:00
}
},
2022-02-03 17:26:35 +01:00
legend: {
show: false,
},
2022-01-28 16:54:46 +01:00
});
{% for sprint in jalon.sprints %}
var data = [
{% for column in sprint.columns %}
{
label: "{{ column.nmcol}}",
data: {{ column.nbjrs }},
color: "#{{ column.color }}",
},
2022-01-28 16:54:46 +01:00
{% endfor %}
];
var plotObj = $.plot($("#floatdonut{{ jalon.idjal~"-"~sprint.idspr }}"), data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 1,
threshold: 0.1,
background: {
opacity: 0.5,
color: '#cdcdcd',
},
formatter: function(label, series) {
return '<span style="color:#000; padding:3px;">' + label + '</span>';
}
}
}
},
legend: {
show: false,
},
});
2022-01-28 16:54:46 +01:00
{% endfor %}
{% endfor %}
2022-02-03 17:26:35 +01:00
{% if not showfilters %}
$("#filters").addClass("d-none");
$("#filters").removeClass("d-flex");
{% endif %}
// Appliy filters
showhide();
$("#mycontent").show();
2022-01-28 16:54:46 +01:00
});
{% endblock %}