257 lines
10 KiB
Twig
257 lines
10 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>
|
|
|
|
<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 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 %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
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() {
|
|
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+" <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();
|
|
});
|
|
|
|
{% for jalon in tbestim %}
|
|
var data = [
|
|
{% for column in jalon.columns %}
|
|
{
|
|
label: "{{ column.nmcol}}",
|
|
data: {{ column.nbjrs }},
|
|
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,
|
|
},
|
|
});
|
|
|
|
{% for sprint in jalon.sprints %}
|
|
var data = [
|
|
{% for column in sprint.columns %}
|
|
{
|
|
label: "{{ column.nmcol}}",
|
|
data: {{ 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 %} |