258 lines
10 KiB
Twig
258 lines
10 KiB
Twig
{% extends '@CadolesCore/base.html.twig' %}
|
|
|
|
{% block beforepage %}
|
|
<div id="mapid" style="width:100%;height:500px"></div>
|
|
{% endblock %}
|
|
|
|
{% block pagewrapper %}
|
|
<div class="row" style="margin-top:20px">
|
|
|
|
|
|
<div class="col-md-6 col-md-offset-1" style="padding:20px;text-align:center;">
|
|
<div class="col-md-12">
|
|
<h1 style="margin-top:0px; margin-bottom:25px""><i class="fa fa-cubes fa-fw"></i>Applications = {{ totalapplications }} </h1>
|
|
</div>
|
|
|
|
<h1>Applications Installées</h1>
|
|
|
|
<div class="col-md-8" >
|
|
<div id='byapplication-chart'></div>
|
|
</div>
|
|
<div id="byapplication-legend" class="col-md-4"></div>
|
|
</div>
|
|
|
|
<div class="col-md-4" style="padding:20px;text-align:center;">
|
|
<div class="col-md-12">
|
|
<h1 style="margin-top:0px"><i class="fa fa-server fa-fw"></i>Serveurs = {{ totalservers }} </h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6" >
|
|
<h2>Serveurs par Académies</h2>
|
|
<div id='byacademie-chart' style="height:250px"></div>
|
|
<div id="byacademie-legend"></div>
|
|
</div>
|
|
|
|
<div class="col-md-6" >
|
|
<h2>Serveurs par Secteurs</h2>
|
|
<div id='bysecteur-chart' style="height:250px"></div>
|
|
<div id="bysecteur-legend"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6" >
|
|
<h2>Serveurs par Natures</h2>
|
|
<div id='bynature-chart' style="height:250px"></div>
|
|
<div id="bynature-legend"></div>
|
|
</div>
|
|
|
|
<div class="col-md-6" >
|
|
<h2>Serveurs par Module</h2>
|
|
<div id='bymodule-chart' style="height:250px"></div>
|
|
<div id="bymodule-legend"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6" >
|
|
<h2>Serveurs par Version</h2>
|
|
<div id='byversion-chart' style="height:250px"></div>
|
|
<div id="byversion-legend"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block localjavascript %}
|
|
|
|
// On initialise la latitude et la longitude de Paris (centre de la carte)
|
|
var lat = 48.852969;
|
|
var lon = 2.349903;
|
|
var macarte = null;
|
|
// Fonction d'initialisation de la carte
|
|
function initMap() {
|
|
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
|
|
macarte = L.map('mapid').setView([lat, lon], 3);
|
|
|
|
// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
|
|
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
|
|
// Il est toujours bien de laisser le lien vers la source des données
|
|
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
|
|
minZoom: 1,
|
|
maxZoom: 20
|
|
}).addTo(macarte);
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
initMap();
|
|
marker=[];
|
|
|
|
{% for etab in etabs %}
|
|
{% if not etab.servers is empty and not etab.latitude is null%}
|
|
var marker = L.marker([{{ etab.latitude }}, {{ etab.longitude }}]).addTo(macarte);
|
|
html ="<h3>Etablissement</h3>";
|
|
{% if(etab.id!=-100) %}
|
|
html+="<b>UAI</b> = {{etab.numerouai}}<br>";
|
|
html+="<b>Nom</b> = {{etab.denominationprincipale}}<br>";
|
|
html+="<b>Adresse</b> = {{etab.adresseuai}} {{etab.codecommune}} {{etab.libellecommune}}<br>";
|
|
html+="<b>Académie</b> = {{etab.libelleacademie}}<br>";
|
|
html+="<b>Secteur</b> = {{etab.secteurpublicprivelibe}}<br>";
|
|
html+="<b>Nature</b> = {{etab.natureuailibe}}<br>";
|
|
{% else %}
|
|
html+="Non Localisé<br>";
|
|
{% endif %}
|
|
|
|
html+="<hr>";
|
|
{% for server in etab.servers %}
|
|
html+="<a style='cursor:pointer' onClick='showModal({{server.id}})'>Serveur id = {{ server.id}}</a><br>";
|
|
{% endfor %}
|
|
marker.bindPopup(html);
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
//== byAcademie
|
|
var byacademie = Morris.Donut({
|
|
element: 'byacademie-chart',
|
|
data: [
|
|
{% for total in totalbyacademies %}
|
|
{'label':'{{ total.label }}','value':{{ total.total }}},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
byacademie.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', byacademie.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '5px');
|
|
$('#byacademie-legend').append(legendItem)
|
|
});
|
|
|
|
//== byNature
|
|
var bynature = Morris.Donut({
|
|
element: 'bynature-chart',
|
|
data: [
|
|
{% for total in totalbynatures %}
|
|
{'label':'{{ total.label }}','value':{{ total.total }}},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
bynature.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', bynature.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '5px');
|
|
$('#bynature-legend').append(legendItem)
|
|
});
|
|
|
|
//== bySecteur
|
|
var bysecteur = Morris.Donut({
|
|
element: 'bysecteur-chart',
|
|
data: [
|
|
{% for total in totalbysecteurs %}
|
|
{'label':'{{ total.label }}','value':{{ total.total }}},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
bysecteur.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', bysecteur.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '5px');
|
|
$('#bysecteur-legend').append(legendItem)
|
|
});
|
|
|
|
//== byModule
|
|
var bymodule = Morris.Donut({
|
|
element: 'bymodule-chart',
|
|
data: [
|
|
{% for total in totalbymodules %}
|
|
{'label':'{{ total.label }}','value':{{ total.total }}},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
bymodule.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', bymodule.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '5px');
|
|
$('#bymodule-legend').append(legendItem)
|
|
});
|
|
|
|
//== byVersion
|
|
var byversion = Morris.Donut({
|
|
element: 'byversion-chart',
|
|
data: [
|
|
{% for total in totalbyversions %}
|
|
{'label':'{{ total.label }}','value':{{ total.total }}},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
byversion.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="margin:auto; display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', byversion.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '5px');
|
|
$('#byversion-legend').append(legendItem)
|
|
});
|
|
|
|
//== byApplication
|
|
var byapplication = Morris.Donut({
|
|
element: 'byapplication-chart',
|
|
data: [
|
|
{% for total in totalbyapplications %}
|
|
{
|
|
'label':'{{ total.label }}',
|
|
'value':{{ total.total }},
|
|
},
|
|
{% endfor %}
|
|
],
|
|
resize: true
|
|
});
|
|
|
|
byapplication.options.data.forEach(function(label, i) {
|
|
var legendItem = $('<span style="display: block;text-align: left;"></span>').text( label['label'] + " ( " +label['value'] + " )" ).prepend('<span> </span>');
|
|
legendItem.find('span')
|
|
.css('backgroundColor', byapplication.options.colors[i])
|
|
.css('width', '20px')
|
|
.css('display', 'inline-block')
|
|
.css('margin', '0px 5px 5px 0px');
|
|
$('#byapplication-legend').append(legendItem)
|
|
|
|
});
|
|
});
|
|
|
|
function showModal(id) {
|
|
var url="{{ path('cadoles_core_server',{id:'xx'})}}";
|
|
|
|
url=url.replace('xx',id);
|
|
|
|
console.log("pouet");
|
|
$("#mymodal .modal-title").html("Informations Serveur");
|
|
$("#mymodal #framemodal").attr("src",url);
|
|
|
|
$("#mymodal").modal('show');
|
|
}
|
|
{% endblock %} |