284 lines
10 KiB
Twig
284 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: 40%;
|
|
}
|
|
|
|
{% 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 EQUIPES</label>
|
|
<select id="filterteams" multiple="multiple" class="form-control">
|
|
{% for team in scrum.scrumteams %}
|
|
<option value="{{team.giteaid}}">{{team.name}}</option>
|
|
{% endfor %}
|
|
</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_issuescrum',{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 milestone in tbstat %}
|
|
<div class="flot-chart mr-4" data-milestone="{{ milestone.id }}">
|
|
<h4>{{milestone.name}}</h4>
|
|
<div class="mt-4">
|
|
<div id="floatdonut{{ milestone.id }}" class="flot-chart-content" style="float:left"></div>
|
|
<div class="mt-3 pb-3" style="width:100%">
|
|
|
|
<div class="d-flex justify-content-between mt-4">
|
|
{% for column in milestone.stat %}
|
|
<div style="width:250px">
|
|
<div style="background-color:{{column.color}}; padding:3px;margin-bottom:3px;">{{ column.label }} = {{ column.total }}</div>
|
|
<small>
|
|
<div style="line-height:15px; width:100%">
|
|
{% for label in column.labels %}
|
|
<li >{{label.label}} = {{label.total}}</li>
|
|
{% endfor %}
|
|
</div>
|
|
</small>
|
|
</div>
|
|
{%endfor%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% 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;
|
|
});
|
|
}
|
|
|
|
if($("#filterteams").val().length!==0) {
|
|
data = $("#filterteams").select2('data');
|
|
textfilters=textfilters+" <b>EQUIPES</b> =";
|
|
$.each($("#filterteams").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 Teams
|
|
function filterteams() {
|
|
$.ajax({
|
|
method: "POST",
|
|
url: "{{ path('app_user_preference') }}",
|
|
data: {
|
|
key:'filterteams',
|
|
id:{{scrum.id}},
|
|
value: $("#filterteams").val()
|
|
}
|
|
});
|
|
|
|
location.reload();
|
|
}
|
|
$('#filterteams').select2();
|
|
{% if filterteams %}
|
|
{% for team in filterteams %}
|
|
$("#filterteams").val($("#filterteams").val().concat("{{team}}"));
|
|
{%endfor%}
|
|
$('#filterteams').trigger('change');
|
|
{% endif %}
|
|
$('#filterteams').on("select2:select", function(e) {
|
|
filterteams();
|
|
});
|
|
$('#filterteams').on("select2:unselect", function(e) {
|
|
filterteams();
|
|
});
|
|
|
|
{% for milestone in tbstat %}
|
|
var data = [
|
|
{% for data in milestone.stat %}
|
|
{
|
|
label: "{{ data.label}}",
|
|
data: {{ data.total }},
|
|
color: "{{ data.color }}",
|
|
},
|
|
{% endfor %}
|
|
];
|
|
|
|
var plotObj = $.plot($("#floatdonut{{ milestone.id }}"), 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 data in milestone.stat %}
|
|
{% for data in milestone.stat %}
|
|
var data = [
|
|
{% for label in data.labels %}
|
|
{
|
|
label: "{{ label.label}}",
|
|
data: {{ label.total }},
|
|
color: "{{ label.color }}",
|
|
},
|
|
{% endfor %}
|
|
];
|
|
var plotObj = $.plot($("#floatsubdonut{{ milestone.id }}-{{ data.id }}"), data, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
label: {
|
|
show: false,
|
|
radius: 3/4,
|
|
threshold: 0.1,
|
|
background: {
|
|
opacity: 0.5,
|
|
color: '#cdcdcd',
|
|
},
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
});
|
|
{% endfor %}
|
|
{% endfor %}
|
|
{% endfor %}
|
|
|
|
{% if not showfilters %}
|
|
$("#filters").addClass("d-none");
|
|
$("#filters").removeClass("d-flex");
|
|
{% endif %}
|
|
|
|
// Appliy filters
|
|
showhide();
|
|
$("#mycontent").show();
|
|
});
|
|
{% endblock %} |