ninegitea/templates/Scrum/stat.html.twig

353 lines
15 KiB
Twig

{% extends "base.html.twig" %}
{% block localstyle %}
#main {
padding-left:0px;
margin-bottom:0px;
}
#mycontent { display:none; }
.flot-chart {
display: block;
height: 450px;
}
.flot-chart-content {
width: 400px;
height: 250px;
}
.flot-chart-subcontent {
height: 200px;
width: 350px;
}
{% endblock %}
{% block body %}
<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>
<div style="width:100%" class="mt-3">
<label class="control-label" style="color:var(--colorftbodydark)">Filtre SPRINT</label>
<select id="filtersprints" multiple="multiple" class="form-control">
{% for sprint in sprints %}
<option value="{{sprint.giteamilestone~"-"~sprint.id}}">{{sprint.giteamilestonename}}-{{sprint.name}}</option>
{% endfor %}
{% for giteamilestone in giteamilestones %}
<option value="{{giteamilestone.id~"--100"}}">{{giteamilestone.title}}-Aucun</option>
{% endfor %}
</select>
</div>
<div style="width:100%" class="mt-3">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="filterbynumber">
<label class="custom-control-label" for="filterbynumber" style="color:var(--colorfttitledark);">Vue par {{ (filterbynumber=="true"?"nombre":"poids") }} de tickets</label>
</div>
</div>
</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>
<span id="textfilters"></span>
</div>
<h1>{{ scrum.name }}</h1>
<div id="tbestim" 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="ustify-content-center" style="display:flex" data-graphmilestone="{{ jalon.idjal }}">
<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">{{(filterbynumber?column.nbiss:column.nbjrs)}} = {{((filterbynumber?column.nbiss:column.nbjrs) * 100 / (filterbynumber?jalon.nbiss:jalon.nbjrs))|number_format}}%</<span></div>
{% endfor %}
<div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{(filterbynumber?jalon.nbiss:jalon.nbjrs)}} = 100%</<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">{{(filterbynumber?column.nbiss:column.nbjrs)}} = {{((filterbynumber?column.nbiss:column.nbjrs) * 100 / (filterbynumber?sprint.nbiss:sprint.nbjrs))|number_format}}%</<span></div>
{% endfor %}
<div style="padding: 3px;color: #000">TOTAL<span class="float-right">{{(filterbynumber?sprint.nbiss:sprint.nbjrs)}} = 100%</<span></div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block localjavascript %}
// View par nombre de tickets
{% if filterbynumber %}
$("#filterbynumber").prop( "checked", {{ filterbynumber }} )
{% endif %}
$('#filterbynumber').change(function() {
$.ajax({
method: "POST",
url: "{{ path('app_user_preference') }}",
data: {
key:'filterbynumber',
id:{{scrum.id}},
value: this.checked
}
}).done(function( data ) {
location.reload();
});
});
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
}
});
}
$(document).ready(function() {
// Apply Filter
function showhide() {
// Afficher masquer les jalons
if($("#filtermilestones").val().length !== 0) {
$("[data-milestone]").hide();
$.each($("#filtermilestones").val(), function( index, value ) {
$("[data-milestone="+value+"]").show();
$("[data-graphmilestone="+value+"]").show();
});
}
else {
$("[data-milestone]").show();
$("[data-graphmilestone]").show();
}
// Afficher masquer les sprints
if($("#filtersprints").val().length !== 0) {
$("[data-sprint]").hide();
$("[data-graphmilestone]").hide();
$.each($("#filtersprints").val(), function( index, value ) {
$("[data-sprint="+value+"]").show();
});
}
else if($("#filtermilestones").val().length === 0)$("[data-sprint]").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;
});
}
if($("#filtersprints").val().length!==0) {
data = $("#filtersprints").select2('data');
textfilters=textfilters+"&nbsp;&nbsp;&nbsp;&nbsp;<b>SPRINT</b> =";
$.each($("#filtersprints").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();
});
// Filter Sprints
function filtersprints() {
$.ajax({
method: "POST",
url: "{{ path('app_user_preference') }}",
data: {
key:'filtersprints',
id:{{scrum.id}},
value: $("#filtersprints").val()
}
});
showhide();
}
$('#filtersprints').select2();
{% if filtersprints %}
{% for sprint in filtersprints %}
$("#filtersprints").val($("#filtersprints").val().concat("{{sprint}}"));
{%endfor%}
$('#filtersprints').trigger('change');
{% endif %}
$('#filtersprints').on("select2:select", function(e) {
filtersprints();
});
$('#filtersprints').on("select2:unselect", function(e) {
filtersprints();
});
{% for jalon in tbestim %}
var data = [
{% for column in jalon.columns %}
{
label: "{{ column.nmcol}}",
data: {{ column.nbiss }},
color: "#{{ column.color }}",
},
{% endfor %}
];
var plotObj = $.plot($("#floatdonut{{ jalon.idjal }}"), 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,
},
});
console.log({{filterbynumber}});
{% for sprint in jalon.sprints %}
{% for column in sprint.columns %}
console.log({{ (filterbynumber ? column.nbiss:column.nbjrs) }});
{% endfor %}
var data = [
{% for column in sprint.columns %}
{
label: "{{ column.nmcol}}",
data: {{ (filterbynumber ? column.nbiss:column.nbjrs) }},
color: "#{{ column.color }}",
},
{% 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,
},
});
{% endfor %}
{% endfor %}
{% if not showfilters %}
$("#filters").addClass("d-none");
$("#filters").removeClass("d-flex");
{% endif %}
// Appliy filters
showhide();
$("#mycontent").show();
});
{% endblock %}