Front fixes

hitier
2 parents e73a1a70 4d87aba1
Showing 18 changed files with 145 additions and 49 deletions Show diff stats
CHANGELOG.md
VERSION.txt
app/main/static/css/charges.css
app/main/static/js/charges.js
app/main/static/js/svg_to_png.js
app/main/templates/agent.html
app/main/templates/agents.html
app/main/templates/capacities.html
app/main/templates/charge.html
app/main/templates/periods.html
app/main/templates/project.html
app/main/templates/projects.html
app/main/templates/services.html
app/static/css/style.css
app/static/js/font-awesome.min.js
app/static/js/navbar.js
app/templates/base_page.html
app/templates/d3js-includes.html
@@ -23,6 +23,12 @@ Should be noted only functionnal changes,
 or major refactoring improvments.
  
 ## Unreleased
+## [0.3.pre-8] - 2021-05-06 - Front Fixes
+### Changed
+Sidebar menu enhanced
+New export button
+
+## Unreleased
 ## [0.3.pre-7] - 2021-05-03 - Better Tests Coverage
 ### Changed
 Add tests and fix some code issues
-0.3.pre-7
+0.3.pre-8
@@ -90,7 +90,53 @@ rect.bar:hover {
     pointer-events: none;
 }
  
-button.export {
-    float: right;
-    margin-right: 0;
+i.export {
+    padding: 7px;
+    position: absolute;
+    margin-top:8px;
+    right: 3%;
+}
+
+i.export:hover {
+    background: lightgrey;
+    border-radius: 2px;
+}
+
+.tooltip_hamburger {
+    border-radius: 0px;
+    box-shadow: 2px 2px 2px 2px darkgrey;
+    right: 2%;
+    pointer-events: auto;
+    width: 150px;
+    margin-top:15px;
+    padding: 0;
+}
+
+.tooltip_hamburger li {
+    list-style: none;
+    padding: 5px;
+    cursor: pointer;
+    pointer-events: auto;
+}
+
+.tooltip_hamburger li:hover {
+    background-color: lightgrey;
+}
+
+.tooltip_hamburger span {
+    width: 90%;
+    padding: 5px;
+    margin-left: 5px;
+    display: block;
+    border-bottom: 1px solid grey;
+}
+
+.rectmouseleave {
+    width: 200px;
+    height: 150px;
+    position: absolute;
+    padding: 10px;
+    top:0;
+    right: 0;
+    /*background-color: #0b2e13;*/
 }
 \ No newline at end of file
@@ -65,11 +65,39 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
         alert("ALERT ! Every body shall quit the boat, we are sinking ! ALERT !")
     }
  
+    // Configure the tooltip to export svg to png or csv
+    var update_export_menu = function (e, d) {
+
+        const tooltip_test = document.getElementsByClassName('tooltip_hamburger');
+
+        if (tooltip_test.length == 0) {
+            d3.select(".tooltip_hamburger").remove();
+
+            const tooltip_hamburger = hamburger.append("div")
+                .style("opacity", 0)
+                .attr("class", "tooltip tooltip_hamburger");
+
+            d3.select(this).transition()
+                .duration(1)
+            tooltip_hamburger
+                .transition()
+                .duration(200)
+                .style("opacity", 1)
+            tooltip_hamburger
+                .html("<span>Export </span>" +
+                    "<li>To CSV</li>" +
+                    "<li id='to_png'>To PNG</li>")
+            d3.select("#to_png").on("click", download_png);
+        } else {
+            d3.select(".tooltip_hamburger").remove();
+        }
+
+    }
     // Create a download button inside the div contaning svg chart
-    var dl_btn = d3.select(div_selector).append("button")
-        .text('png')
-        .attr('class', 'export')
-        .on('click', download_png)
+    const hamburger = d3.select(div_selector).append('i')
+        .attr('class', 'fas fa-bars fa-lg export')
+        .on("click", update_export_menu);
+
  
     const svg = d3.select(div_selector).append("svg")
         .attr("class", "svg_chart")
@@ -326,7 +354,6 @@ function build_chart(div_selector, data_url, entity_name, category_type) {
             .on("mouseover", mouseoverdot)
             .on("mouseleave", mouseleavedot)
             .lower();// set it below bars if called after
-        ;
  
     }
  
 var download_png = function () {
     // This callback is supposed to be called on the click event of a button child of the div containing the svg.
     // We then get the parent of this btn to guess the chart's title, width and heigth
-    var chart_div = this.parentNode;
+    var chart_div = this.parentNode.parentNode.parentNode;
     var chart_title = chart_div.id;
     width = chart_div.offsetWidth;
     height = chart_div.offsetHeight;
@@ -5,6 +5,10 @@
 {% endblock %}
  
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,agents</span>
+
 <div id="projects_chart" class="charge_chart"></div>
 <table id="charge_table">
   <thead>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,agents</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">agent,capacities</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">cds,charge/add</span>
+
   <form class="form-horizontal" id="new_affectation" action="#" method="post">
 <input name="utf8" type="hidden" value="✓">
 <input type="hidden" name="authenticity_token" value="NPVU9shCwiRt07EXMAroxTdsP61Et00VQjkBiit3MWeqQt3Eez9UdGK68RzZ6npLCFyg0gL+M1MR6VjK9WOCYw==">
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">admin,periods</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
@@ -5,6 +5,9 @@
 {% endblock %}
  
 {% block content %}
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">projet,projects</span>
+
 <div class="charge_chart" id="project_services_chart"></div>
 <hr/>
 <div class="charge_chart" id="project_capacities_chart"></div>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">projet,projects</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
 {% extends "base_page.html" %}
 {% block content %}
+
+<!-- Invisible span to definte wich ul and a in the navbar are actived -->
+<span id="nav_actived" style="display: none">service,services</span>
+
 <table class="table table-hover">
   <thead>
   <tr>
@@ -40,6 +40,10 @@ nav.sidebar a:hover {
     background-color: lightgrey;
 }
  
+nav.sidebar ul {
+    width: 100%;
+}
+
 nav.sidebar a {
     color: black;
     text-decoration: none;
@@ -82,9 +86,15 @@ nav.sidebar a.disabled {
 }
  
 /* Update the navbar for small screens. Replace bootstrap css for small screens only */
-@media (max-width: 600px) {
+@media (max-width: 768px) {
     .sidebar {
         position: static !important;
         margin-top: 0px !important;
     }
 }
+
+@media (min-width: 1670px) {
+    .sidebar {
+        max-width:12.499999995%;
+    }
+}
 \ No newline at end of file
@@ -0,0 +1,2 @@
+window.FontAwesomeKitConfig = {"asyncLoading":{"enabled":false},"autoA11y":{"enabled":true},"baseUrl":"https://ka-f.fontawesome.com","baseUrlKit":"https://kit.fontawesome.com","detectConflictsUntil":null,"iconUploads":{},"id":49010708,"license":"free","method":"css","minify":{"enabled":true},"token":"46c1ff7934","v4FontFaceShim":{"enabled":true},"v4shim":{"enabled":true},"version":"5.15.3"};
+!function(t){"function"==typeof define&&define.amd?define("kit-loader",t):t()}((function(){"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function r(t){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(n){e(t,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))}))}return t}function o(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var c,a=t[Symbol.iterator]();!(r=(c=a.next()).done)&&(n.push(c.value),!e||n.length!==e);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==a.return||a.return()}finally{if(o)throw i}}return n}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return i(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return i(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function i(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function c(t,e){var n=e&&e.addOn||"",r=e&&e.baseFilename||t.license+n,o=e&&e.minify?".min":"",i=e&&e.fileSuffix||t.method,c=e&&e.subdir||t.method;return t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/"+c+"/"+r+o+"."+i}function a(t){return t.baseUrlKit+"/"+t.token+"/"+t.id+"/kit-upload.css"}function u(t,e){var n=e||["fa"],r="."+Array.prototype.join.call(n,",."),o=t.querySelectorAll(r);Array.prototype.forEach.call(o,(function(e){var n=e.getAttribute("title");e.setAttribute("aria-hidden","true");var r=!e.nextElementSibling||!e.nextElementSibling.classList.contains("sr-only");if(n&&r){var o=t.createElement("span");o.innerHTML=n,o.classList.add("sr-only"),e.parentNode.insertBefore(o,e.nextSibling)}}))}var f,s=function(){},d="undefined"!=typeof global&&void 0!==global.process&&"function"==typeof global.process.emit,l="undefined"==typeof setImmediate?setTimeout:setImmediate,h=[];function m(){for(var t=0;t<h.length;t++)h[t][0](h[t][1]);h=[],f=!1}function p(t,e){h.push([t,e]),f||(f=!0,l(m,0))}function y(t){var e=t.owner,n=e._state,r=e._data,o=t[n],i=t.then;if("function"==typeof o){n="fulfilled";try{r=o(r)}catch(t){w(i,t)}}b(i,r)||("fulfilled"===n&&v(i,r),"rejected"===n&&w(i,r))}function b(e,n){var r;try{if(e===n)throw new TypeError("A promises callback cannot return that same promise.");if(n&&("function"==typeof n||"object"===t(n))){var o=n.then;if("function"==typeof o)return o.call(n,(function(t){r||(r=!0,n===t?g(e,t):v(e,t))}),(function(t){r||(r=!0,w(e,t))})),!0}}catch(t){return r||w(e,t),!0}return!1}function v(t,e){t!==e&&b(t,e)||g(t,e)}function g(t,e){"pending"===t._state&&(t._state="settled",t._data=e,p(S,t))}function w(t,e){"pending"===t._state&&(t._state="settled",t._data=e,p(O,t))}function A(t){t._then=t._then.forEach(y)}function S(t){t._state="fulfilled",A(t)}function O(t){t._state="rejected",A(t),!t._handled&&d&&global.process.emit("unhandledRejection",t._data,t)}function j(t){global.process.emit("rejectionHandled",t)}function E(t){if("function"!=typeof t)throw new TypeError("Promise resolver "+t+" is not a function");if(this instanceof E==!1)throw new TypeError("Failed to construct 'Promise': Please use the 'new' operator, this object constructor cannot be called as a function.");this._then=[],function(t,e){function n(t){w(e,t)}try{t((function(t){v(e,t)}),n)}catch(t){n(t)}}(t,this)}E.prototype={constructor:E,_state:"pending",_then:null,_data:void 0,_handled:!1,then:function(t,e){var n={owner:this,then:new this.constructor(s),fulfilled:t,rejected:e};return!e&&!t||this._handled||(this._handled=!0,"rejected"===this._state&&d&&p(j,this)),"fulfilled"===this._state||"rejected"===this._state?p(y,n):this._then.push(n),n.then},catch:function(t){return this.then(null,t)}},E.all=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.all().");return new E((function(e,n){var r=[],o=0;function i(t){return o++,function(n){r[t]=n,--o||e(r)}}for(var c,a=0;a<t.length;a++)(c=t[a])&&"function"==typeof c.then?c.then(i(a),n):r[a]=c;o||e(r)}))},E.race=function(t){if(!Array.isArray(t))throw new TypeError("You must pass an array to Promise.race().");return new E((function(e,n){for(var r,o=0;o<t.length;o++)(r=t[o])&&"function"==typeof r.then?r.then(e,n):e(r)}))},E.resolve=function(e){return e&&"object"===t(e)&&e.constructor===E?e:new E((function(t){t(e)}))},E.reject=function(t){return new E((function(e,n){n(t)}))};var _="function"==typeof Promise?Promise:E;function P(t,e){var n=e.fetch,r=e.XMLHttpRequest,o=e.token,i=t;return"URLSearchParams"in window?(i=new URL(t)).searchParams.set("token",o):i=i+"?token="+encodeURIComponent(o),i=i.toString(),new _((function(t,e){if("function"==typeof n)n(i,{mode:"cors",cache:"default"}).then((function(t){if(t.ok)return t.text();throw new Error("")})).then((function(e){t(e)})).catch(e);else if("function"==typeof r){var o=new r;o.addEventListener("loadend",(function(){this.responseText?t(this.responseText):e(new Error(""))}));["abort","error","timeout"].map((function(t){o.addEventListener(t,(function(){e(new Error(""))}))})),o.open("GET",i),o.send()}else{e(new Error(""))}}))}function C(t,e,n){var r=t;return[[/(url\("?)\.\.\/\.\.\/\.\./g,function(t,n){return"".concat(n).concat(e)}],[/(url\("?)\.\.\/webfonts/g,function(t,r){return"".concat(r).concat(e,"/releases/v").concat(n,"/webfonts")}],[/(url\("?)https:\/\/kit-free([^.])*\.fontawesome\.com/g,function(t,n){return"".concat(n).concat(e)}]].forEach((function(t){var e=o(t,2),n=e[0],i=e[1];r=r.replace(n,i)})),r}function F(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},o=e.document||o,i=u.bind(u,o,["fa","fab","fas","far","fal","fad","fak"]),f=Object.keys(t.iconUploads||{}).length>0;t.autoA11y.enabled&&n(i);var s=[{id:"fa-main",addOn:void 0}];t.v4shim.enabled&&s.push({id:"fa-v4-shims",addOn:"-v4-shims"}),t.v4FontFaceShim.enabled&&s.push({id:"fa-v4-font-face",addOn:"-v4-font-face"}),f&&s.push({id:"fa-kit-upload",customCss:!0});var d=s.map((function(n){return new _((function(o,i){P(n.customCss?a(t):c(t,{addOn:n.addOn,minify:t.minify.enabled}),e).then((function(i){o(U(i,r(r({},e),{},{baseUrl:t.baseUrl,version:t.version,id:n.id,contentFilter:function(t,e){return C(t,e.baseUrl,e.version)}})))})).catch(i)}))}));return _.all(d)}function U(t,e){var n=e.contentFilter||function(t,e){return t},r=document.createElement("style"),o=document.createTextNode(n(t,e));return r.appendChild(o),r.media="all",e.id&&r.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&r.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),r}function k(t,e){e.autoA11y=t.autoA11y.enabled,"pro"===t.license&&(e.autoFetchSvg=!0,e.fetchSvgFrom=t.baseUrl+"/releases/"+("latest"===t.version?"latest":"v".concat(t.version))+"/svgs",e.fetchUploadedSvgFrom=t.uploadsUrl);var n=[];return t.v4shim.enabled&&n.push(new _((function(n,o){P(c(t,{addOn:"-v4-shims",minify:t.minify.enabled}),e).then((function(t){n(I(t,r(r({},e),{},{id:"fa-v4-shims"})))})).catch(o)}))),n.push(new _((function(n,o){P(c(t,{minify:t.minify.enabled}),e).then((function(t){var o=I(t,r(r({},e),{},{id:"fa-main"}));n(function(t,e){var n=e&&void 0!==e.autoFetchSvg?e.autoFetchSvg:void 0,r=e&&void 0!==e.autoA11y?e.autoA11y:void 0;void 0!==r&&t.setAttribute("data-auto-a11y",r?"true":"false");n&&(t.setAttributeNode(document.createAttribute("data-auto-fetch-svg")),t.setAttribute("data-fetch-svg-from",e.fetchSvgFrom),t.setAttribute("data-fetch-uploaded-svg-from",e.fetchUploadedSvgFrom));return t}(o,e))})).catch(o)}))),_.all(n)}function I(t,e){var n=document.createElement("SCRIPT"),r=document.createTextNode(t);return n.appendChild(r),n.referrerPolicy="strict-origin",e.id&&n.setAttribute("id",e.id),e&&e.detectingConflicts&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n}function L(t){var e,n=[],r=document,o=r.documentElement.doScroll,i=(o?/^loaded|^c/:/^loaded|^i|^c/).test(r.readyState);i||r.addEventListener("DOMContentLoaded",e=function(){for(r.removeEventListener("DOMContentLoaded",e),i=1;e=n.shift();)e()}),i?setTimeout(t,0):n.push(t)}function T(t){"undefined"!=typeof MutationObserver&&new MutationObserver(t).observe(document,{childList:!0,subtree:!0})}try{if(window.FontAwesomeKitConfig){var x=window.FontAwesomeKitConfig,M={detectingConflicts:x.detectConflictsUntil&&new Date<=new Date(x.detectConflictsUntil),detectionIgnoreAttr:"data-fa-detection-ignore",fetch:window.fetch,token:x.token,XMLHttpRequest:window.XMLHttpRequest,document:document},D=document.currentScript,N=D?D.parentElement:document.head;(function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return"js"===t.method?k(t,e):"css"===t.method?F(t,e,(function(t){L(t),T(t)})):void 0})(x,M).then((function(t){t.map((function(t){try{N.insertBefore(t,D?D.nextSibling:null)}catch(e){N.appendChild(t)}})),M.detectingConflicts&&D&&L((function(){D.setAttributeNode(document.createAttribute(M.detectionIgnoreAttr));var t=function(t,e){var n=document.createElement("script");return e&&e.detectionIgnoreAttr&&n.setAttributeNode(document.createAttribute(e.detectionIgnoreAttr)),n.src=c(t,{baseFilename:"conflict-detection",fileSuffix:"js",subdir:"js",minify:t.minify.enabled}),n}(x,M);document.body.appendChild(t)}))})).catch((function(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}))}}catch(t){console.error("".concat("Font Awesome Kit:"," ").concat(t))}}));
-// Script used with the navbar to color the menu items and leave them visible
+/* Read the <span> with information about ul and li to active */
+const navbar_active = $("#nav_actived").html();
+const navbar_active_split = navbar_active.split(',');
  
+const ul_active = navbar_active_split[0];
+const a_active = navbar_active_split[1];
  
-// Check if an element of the navbar is stored in the local storage or not
-var collapseItem_ul = localStorage.getItem('collapseItem_ul');
-var collapseItem_a = localStorage.getItem('collapseItem_a');
-
-//
-var sublink_activate = $("a[href='" + collapseItem_a + "']");
-sublink_activate.addClass("sublink_activate");
-
-$("#" + collapseItem_ul).addClass("show");
-
-
-//store the id of the collapsible element
-$('.main-nav').click(function () {
-    localStorage.setItem('collapseItem_ul', $(this).next().attr("id"));
-});
-$('.sub_link').click(function (e) {
-    localStorage.setItem('collapseItem_a', $(this).attr("href"));
-})
-
-
-// a click to the connection bar or 'accueil' button desactivate the localstorage
-$('.link_connect').click(function() {
-    $("#" + collapseItem_ul).removeClass("show");
-    $("#" + collapseItem_ul).addClass("hide");
-    sublink_activate.removeClass("sublink_activate");
-    localStorage.removeItem('collapseItem_ul');
-    localStorage.removeItem('collapseItem_a');
-
-});
-$("#accueil").click(function (){
-    $("#" + collapseItem_ul).removeClass("show");
-    $("#" + collapseItem_ul).addClass("hide");
-    sublink_activate.removeClass("sublink_activate");
-    localStorage.removeItem('collapseItem_ul');
-    localStorage.removeItem('collapseItem_a');
-});
+/* Open the ul */
+$("#" + ul_active).addClass("show");
  
+/* Active the li */
+var sublink_activate = $("a[href='/" + a_active + "']");
+sublink_activate.addClass("sublink_activate");
 \ No newline at end of file
@@ -30,7 +30,7 @@
  
   <div class="container-fluid">
     <div class="row">
-      <nav class="col-md-2 col-sm-auto col-xs-auto navbar-light bg-light navbar-expand-md sidebar mt-5">
+      <nav class="col-md-half col-lg-2 col-md-2 navbar-light bg-light navbar-expand-md sidebar mt-5">
           <button id="test" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
   <script src="{{ url_for('static', filename='js/d3.v6.min.js') }}" type="text/javascript"></script>
+  <script src="{{ url_for('static', filename='js/font-awesome.min.js') }}" type="text/javascript"></script>