Commit ca2f26ea10c4133aac1d5d6aa4c321dd7c5cc014

Authored by hitier
2 parents 5ad3eac3 6a82e64c

Nicer pages

@@ -24,6 +24,13 @@ or major refactoring improvments. @@ -24,6 +24,13 @@ or major refactoring improvments.
24 24
25 ## Unreleased 25 ## Unreleased
26 26
  27 +## [0.3.pre-3] - 2021-04-20 - Nicer display
  28 +### New
  29 +Left menu shows active page
  30 +
  31 +### Changed
  32 +Chart legend on bottom
  33 +
27 ## [0.3.pre-2] - 2021-04-21 - Display ETP 34 ## [0.3.pre-2] - 2021-04-21 - Display ETP
28 ### Changed 35 ### Changed
29 Chart now displays charge in ETP base 1 (was base 100 ) 36 Chart now displays charge in ETP base 1 (was base 100 )
1 -0.3.pre-2 1 +0.3.pre-3
app/main/static/css/charges.css
@@ -28,9 +28,10 @@ @@ -28,9 +28,10 @@
28 stroke-width: 0px; 28 stroke-width: 0px;
29 } 29 }
30 30
31 -#charge_table{ 31 +#charge_table, .charge_chart{
32 width: 95%; 32 width: 95%;
33 } 33 }
  34 +
34 #charge_table, 35 #charge_table,
35 #charge_table th, 36 #charge_table th,
36 #charge_table td { 37 #charge_table td {
app/main/static/js/charges.js
@@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -6,9 +6,9 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
6 6
7 const main_elt = document.getElementById("main") 7 const main_elt = document.getElementById("main")
8 8
9 - const margin = {top: 60, right: 350, bottom: 100, left: 90}, 9 + const margin = {top: 60, right: 150, bottom: 200, left: 90},
10 width = main_elt.offsetWidth * 0.95 - margin.left - margin.right, 10 width = main_elt.offsetWidth * 0.95 - margin.left - margin.right,
11 - height = 500 - margin.top - margin.bottom; 11 + height = 600 - margin.top - margin.bottom;
12 12
13 const height_ratio = 1.2; // how murch room to give above chart for lisibility 13 const height_ratio = 1.2; // how murch room to give above chart for lisibility
14 14
@@ -17,8 +17,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -17,8 +17,11 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
17 17
18 const y_ticks_num = 5 // dont show to many y ticks for lisibility 18 const y_ticks_num = 5 // dont show to many y ticks for lisibility
19 19
20 - const legend_cell_size = 15; // size of legend colored scare  
21 - const legend_x = width + 20; // begin legend a bit after the end of the chart 20 + const legendRectSize = 15; // size of rectangle in legend
  21 +
  22 + // const legend_cell_size = 15; // size of legend colored scare
  23 + // const legend_x = width + 20; // begin legend a bit after the end of the chart
  24 + // const legend_y = 600 - margin.bottom + 20; // begin legend a bit after the end of the chart
22 25
23 const dot_radius = 6; // size of total line dot 26 const dot_radius = 6; // size of total line dot
24 27
@@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) { @@ -131,28 +134,60 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
131 134
132 var addlegend = function (color_scale) { 135 var addlegend = function (color_scale) {
133 136
  137 + // add horizontal legend
134 let reverse_keys = color_scale.domain().reverse(); 138 let reverse_keys = color_scale.domain().reverse();
  139 + var legendSpacing = 5;
135 140
136 - let legend = svg.append('g')  
137 - .attr('transform', 'translate(' + legend_x + ', -30)'); 141 + var legendWrap = svg.append('g')
  142 + .attr('width', '100%')
  143 + .attr('class', 'legendwrap');
138 144
139 - legend.selectAll() 145 + var legend = svg.select('.legendwrap').selectAll('.legend')
140 .data(reverse_keys) 146 .data(reverse_keys)
141 - .enter().append('rect')  
142 - .attr('height', legend_cell_size + 'px')  
143 - .attr('width', legend_cell_size + 'px')  
144 - .attr('class', 'legend')  
145 - .attr('x', 5)  
146 - .attr('y', (d, i) => i * legend_cell_size)  
147 - .style("fill", d => color_scale(d)); 147 + .enter()
  148 + .append('g')
  149 + .attr('class', 'legend');
148 150
149 - legend.selectAll()  
150 - .data(reverse_keys)  
151 - .enter().append('text')  
152 - .attr("transform", (d, i) => "translate(30, " + (i * legend_cell_size + legend_cell_size / 1.6) + ")") 151 + legend.append('rect')
  152 + .attr('width', legendRectSize)
  153 + .attr('height', legendRectSize)
  154 + .style('fill', color_scale)
  155 + .style('stroke', color_scale);
  156 +
  157 + legend.append('text')
153 .attr('class', 'legend') 158 .attr('class', 'legend')
154 - .style("fill", "black")  
155 - .text(d => d); 159 + .attr('x', legendRectSize + legendSpacing * 1.5)
  160 + .attr('y', 13)
  161 + .text(function(d) {
  162 + return d;
  163 + });
  164 +
  165 + var ypos = 0,
  166 + newxpos = 0,
  167 + maxwidth = 0,
  168 + xpos;
  169 +
  170 + legend
  171 + .attr("transform", function(d, i) {
  172 + var length = d3.select(this).select("text").node().getComputedTextLength() + 40;
  173 + xpos = newxpos;
  174 + if (width < xpos + length) {
  175 + newxpos = xpos = 0;
  176 + ypos += 30;
  177 + }
  178 + newxpos += length;
  179 + if (newxpos > maxwidth) maxwidth = newxpos;
  180 +
  181 + return 'translate(' + xpos + ',' + ypos + ')';
  182 +
  183 + });
  184 +
  185 +
  186 + legendWrap
  187 + .attr("transform", function(d, i) {
  188 + return "translate(0 ," + (height + 100) + ")";
  189 + });
  190 +
156 } 191 }
157 192
158 function draw_categories_grouped(data, categories) { 193 function draw_categories_grouped(data, categories) {
app/static/css/style.css
@@ -58,6 +58,10 @@ nav.sidebar a.disabled { @@ -58,6 +58,10 @@ nav.sidebar a.disabled {
58 border-bottom: 1px solid #ddd 58 border-bottom: 1px solid #ddd
59 } 59 }
60 60
  61 +.sublink_activate {
  62 + border-left: 5px solid #00c5ff;;
  63 + background-color: #e3e3e3;
  64 +}
61 /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */ 65 /* -- - - - - - - - - - per site icon settings - - - - - - - - - -- */
62 66
63 .admin-icon { 67 .admin-icon {
app/static/js/navbar.js 0 → 100644
@@ -0,0 +1,40 @@ @@ -0,0 +1,40 @@
  1 +// Script used with the navbar to color the menu items and leave them visible
  2 +
  3 +
  4 +// Check if an element of the navbar is stored in the local storage or not
  5 +var collapseItem_ul = localStorage.getItem('collapseItem_ul');
  6 +var collapseItem_a = localStorage.getItem('collapseItem_a');
  7 +
  8 +//
  9 +var sublink_activate = $("a[href='" + collapseItem_a + "']");
  10 +sublink_activate.addClass("sublink_activate");
  11 +
  12 +$("#" + collapseItem_ul).addClass("show");
  13 +
  14 +
  15 +//store the id of the collapsible element
  16 +$('.main-nav').click(function () {
  17 + localStorage.setItem('collapseItem_ul', $(this).next().attr("id"));
  18 +});
  19 +$('.sub_link').click(function (e) {
  20 + localStorage.setItem('collapseItem_a', $(this).attr("href"));
  21 +})
  22 +
  23 +
  24 +// a click to the connection bar or 'accueil' button desactivate the localstorage
  25 +$('.link_connect').click(function() {
  26 + $("#" + collapseItem_ul).removeClass("show");
  27 + $("#" + collapseItem_ul).addClass("hide");
  28 + sublink_activate.removeClass("sublink_activate");
  29 + localStorage.removeItem('collapseItem_ul');
  30 + localStorage.removeItem('collapseItem_a');
  31 +
  32 +});
  33 +$("#accueil").click(function (){
  34 + $("#" + collapseItem_ul).removeClass("show");
  35 + $("#" + collapseItem_ul).addClass("hide");
  36 + sublink_activate.removeClass("sublink_activate");
  37 + localStorage.removeItem('collapseItem_ul');
  38 + localStorage.removeItem('collapseItem_a');
  39 +});
  40 +
app/templates/base_page.html
@@ -8,8 +8,9 @@ @@ -8,8 +8,9 @@
8 </head> 8 </head>
9 <body> 9 <body>
10 <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg p-1"> 10 <nav class="navbar navbar-dark sticky-top bg-dark navbar-expand-lg p-1">
11 - <a class="navbar-brand col-sm-3 col-md-2 " href="{{url_for('main.index')}}"> 11 + <a id="accueil" class="navbar-brand col-sm-3 col-md-2 " href="{{url_for('main.index')}}">
12 <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/> 12 <img class="m-0 mr-1 {{config.PDC_SITE_CLASS}}" src="{{ url_for('static', filename='img/pdc-ico.png', version=config.VERSION) }}" height="30" width="30"/>
  13 +
13 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a> 14 {{config.PDC_APP_NAME}} - {{config.PDC_SITE_NAME}}</a>
14 <ul class="navbar-nav ml-auto"> 15 <ul class="navbar-nav ml-auto">
15 {% if not current_user.is_anonymous %} 16 {% if not current_user.is_anonymous %}
@@ -17,11 +18,11 @@ @@ -17,11 +18,11 @@
17 <span class="navbar-brand">{{current_user.name}}</span> 18 <span class="navbar-brand">{{current_user.name}}</span>
18 </li> 19 </li>
19 <li class="nav-item text-nowrap"> 20 <li class="nav-item text-nowrap">
20 - <a class="nav-link" href="{{ url_for('auth.logout') }}">Déconnexion</a> 21 + <a class="nav-link link_connect" href="{{ url_for('auth.logout') }}">Déconnexion</a>
21 </li> 22 </li>
22 {% else %} 23 {% else %}
23 <li class="nav-item text-nowrap"> 24 <li class="nav-item text-nowrap">
24 - <a class="nav-link" href="{{ url_for('auth.login') }}">Connexion</a> 25 + <a class="nav-link link_connect" href="{{ url_for('auth.login') }}">Connexion</a>
25 </li> 26 </li>
26 {% endif %} 27 {% endif %}
27 </ul> 28 </ul>
@@ -39,78 +40,78 @@ @@ -39,78 +40,78 @@
39 </a> 40 </a>
40 </li> 41 </li>
41 <li class="nav-item"> 42 <li class="nav-item">
42 - <a aria-expanded="false" class="nav-link" data-target="#agent" data-toggle="collapse" href="#"> 43 + <a aria-expanded="false" id="agents" class="main-nav nav-link" data-target="#agent" data-toggle="collapse" href="#">
43 <span data-feather="user"></span> 44 <span data-feather="user"></span>
44 Agent 45 Agent
45 </a> 46 </a>
46 <ul aria-expanded="false" class="collapse" class="nav" data-parent="#v_menu" id="agent"> 47 <ul aria-expanded="false" class="collapse" class="nav" data-parent="#v_menu" id="agent">
47 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.agents')}}">Liste des agents</a> 48 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.agents')}}">Liste des agents</a>
48 </li> 49 </li>
49 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li>  
50 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des responsabilités</a></li>  
51 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.capacities')}}">Liste des fonctions</a> 50 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
  51 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des responsabilités</a></li>
  52 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.capacities')}}">Liste des fonctions</a>
52 </li> 53 </li>
53 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des compétences</a></li>  
54 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des pôles</a></li>  
55 - <li class="nav-item"><a class="nav-link disabled" href="#">Liste des emplois types</a></li> 54 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des compétences</a></li>
  55 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des pôles</a></li>
  56 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Liste des emplois types</a></li>
56 </ul> 57 </ul>
57 </li> 58 </li>
58 <li class="nav-item"> 59 <li class="nav-item">
59 - <a aria-expanded="false" class="nav-link" data-target="#projet" data-toggle="collapse" href="#"> 60 + <a aria-expanded="false" class="main-nav nav-link" data-target="#projet" data-toggle="collapse" href="#">
60 <span data-feather="file"></span> 61 <span data-feather="file"></span>
61 Projet 62 Projet
62 </a> 63 </a>
63 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="projet"> 64 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="projet">
64 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.projects')}}">Liste des projets</a></li>  
65 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li>  
66 - <li class="nav-item"><a class="nav-link disabled" href="#">Listes des domaines</a></li>  
67 - <li class="nav-item"><a class="nav-link disabled" href="#">Listes des statuts de projets</a></li> 65 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.projects')}}">Liste des projets</a></li>
  66 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
  67 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Listes des domaines</a></li>
  68 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Listes des statuts de projets</a></li>
68 </ul> 69 </ul>
69 </li> 70 </li>
70 <li class="nav-item"> 71 <li class="nav-item">
71 - <a aria-expanded="false" class="nav-link" data-target="#service" data-toggle="collapse" href="#"> 72 + <a aria-expanded="false" class="main-nav nav-link" data-target="#service" data-toggle="collapse" href="#">
72 <span data-feather="home"></span> 73 <span data-feather="home"></span>
73 Service 74 Service
74 </a> 75 </a>
75 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="service"> 76 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="service">
76 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.services')}}">Liste des services</a> 77 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.services')}}">Liste des services</a>
77 </li> 78 </li>
78 - <li class="nav-item"><a class="nav-link disabled" href="#">Statistiques</a></li> 79 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Statistiques</a></li>
79 </ul> 80 </ul>
80 </li> 81 </li>
81 <li class="nav-item"> 82 <li class="nav-item">
82 - <a aria-expanded="false" class="nav-link" data-target="#cds" data-toggle="collapse" href="#"> 83 + <a aria-expanded="false" class="main-nav nav-link" data-target="#cds" data-toggle="collapse" href="#">
83 <span data-feather="users"></span> 84 <span data-feather="users"></span>
84 Chef de service 85 Chef de service
85 </a> 86 </a>
86 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="cds"> 87 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="cds">
87 - <li class="nav-item"><a class="nav-link disabled" href="#">Renseigner le statut d'un agent pour un 88 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Renseigner le statut d'un agent pour un
88 semestre</a></li> 89 semestre</a></li>
89 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.charge_add')}}">Affecter un agent à un 90 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.charge_add')}}">Affecter un agent à un
90 projet/service</a></li> 91 projet/service</a></li>
91 - <li class="nav-item"><a class="nav-link disabled" href="#">Création agent virtuel</a></li>  
92 - <li class="nav-item"><a class="nav-link disabled" href="#">Charge totale des agents</a></li>  
93 - <li class="nav-item"><a class="nav-link disabled" href="#">Détails des charges</a></li>  
94 - <li class="nav-item"><a class="nav-link disabled" href="#">Graphiques personnalisés</a></li> 92 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Création agent virtuel</a></li>
  93 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Charge totale des agents</a></li>
  94 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Détails des charges</a></li>
  95 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Graphiques personnalisés</a></li>
95 </ul> 96 </ul>
96 </li> 97 </li>
97 <li class="nav-item"> 98 <li class="nav-item">
98 - <a aria-expanded="false" class="nav-link" data-target="#admin" data-toggle="collapse" href="#"> 99 + <a aria-expanded="false" class="main-nav nav-link" data-target="#admin" data-toggle="collapse" href="#">
99 <span data-feather="settings"></span> 100 <span data-feather="settings"></span>
100 Administrateur 101 Administrateur
101 </a> 102 </a>
102 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="admin"> 103 <ul aria-expanded="false" class="collapse" data-parent="#v_menu" id="admin">
103 104
104 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau projet</a></li>  
105 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau service</a></li>  
106 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle compétence</a></li>  
107 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle fonction</a></li>  
108 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau domaine</a></li>  
109 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouvelle responsabilité</a></li>  
110 - <li class="nav-item"><a class="nav-link disabled" href="#">Affecter un responsable de projet</a></li>  
111 - <li class="nav-item"><a class="nav-link disabled" href="#">Affecter un responsable de service</a></li>  
112 - <li class="nav-item"><a class="nav-link " href="{{url_for('main.periods')}}">Liste des périodes</a></li>  
113 - <li class="nav-item"><a class="nav-link disabled" href="#">Nouveau semestre</a></li> 105 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau projet</a></li>
  106 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau service</a></li>
  107 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle compétence</a></li>
  108 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle fonction</a></li>
  109 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau domaine</a></li>
  110 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouvelle responsabilité</a></li>
  111 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Affecter un responsable de projet</a></li>
  112 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Affecter un responsable de service</a></li>
  113 + <li class="nav-item"><a class="sub_link nav-link " href="{{url_for('main.periods')}}">Liste des périodes</a></li>
  114 + <li class="nav-item"><a class="sub_link nav-link disabled" href="#">Nouveau semestre</a></li>
114 115
115 </ul> 116 </ul>
116 </li> 117 </li>
@@ -138,7 +139,11 @@ @@ -138,7 +139,11 @@
138 <script> 139 <script>
139 feather.replace() 140 feather.replace()
140 </script> 141 </script>
  142 +
  143 + <script type="text/javascript" src="{{ url_for('static', filename='js/navbar.js', version=config.VERSION) }}"></script>
  144 +
141 {% block more_scripts %} 145 {% block more_scripts %}
142 {% endblock %} 146 {% endblock %}
  147 +
143 </body> 148 </body>
144 </html> 149 </html>