| @ -137,94 +137,6 @@ | |||||
| <template id="synthesis_body_accueil"> | <template id="synthesis_body_accueil"> | ||||
| </template> | </template> | ||||
| <template id="synthesis_body_taches"> | |||||
| <div class="statrow" style="margin-top: 5px"> | |||||
| <div class="statbox1" onclick="changeModeAffichage('taches','Tasks')">Tasks</div> | |||||
| <div class="statbox1" onclick="changeModeAffichage('releases','Realeases')">Realeases</div> | |||||
| <div class="statbox1" onclick="changeModeAffichage('feries','Hollidays')">Hollidays</div> | |||||
| <div class="statbox1" onclick="changeModeAffichage('rdv','Rendez-Vous')">RdV</div> | |||||
| <div class="statbox1" onclick="changeModeAffichage('items','Items')">Items</div> | |||||
| </div> | |||||
| <br> | |||||
| <!-- | |||||
| <select onchange="changeModeAffichageEvent(event)"> | |||||
| <option value="taches" selected>Tasks</option> | |||||
| <option value="releases">Releases</option> | |||||
| <option value="feries">Hollidays</option> | |||||
| <option value="rdv">Rendez-Vous</option> | |||||
| <option value="items">Items</option> | |||||
| </select> | |||||
| --> | |||||
| <select onchange="changeAffichageNiveauxEvent(event)"> | |||||
| <option value="9999" selected>Tous les niveaux</option> | |||||
| <option value="1">1 niveau</option> | |||||
| <option value="2">2 niveaux</option> | |||||
| <option value="3">3 niveaux</option> | |||||
| <option value="4">4 niveaux</option> | |||||
| <option value="5">5 niveaux</option> | |||||
| <option value="6">6 niveaux</option> | |||||
| <option value="7">7 niveaux</option> | |||||
| <option value="8">8 niveaux</option> | |||||
| <option value="9">9 niveaux</option> | |||||
| <option value="10">10 niveaux</option> | |||||
| </select> | |||||
| <select onchange="changeFiltreClient(event)"> | |||||
| <option value="ALL">Tous les clients</option> | |||||
| <option value="TME">TME</option> | |||||
| <option value="REL">Realeases</option> | |||||
| <option value="FER">Fériés</option> | |||||
| <option value="RDV">Rendez-vous</option> | |||||
| <option value="CGI">CGI</option> | |||||
| <option value="CD56">CD56</option> | |||||
| <option value="CD44">CD44</option> | |||||
| <option value="CD49">CD49</option> | |||||
| <option value="CD61">CD61</option> | |||||
| <option value="CD33">CD33</option> | |||||
| <option value="CD58">CD58</option> | |||||
| <option value="CD18">CD18</option> | |||||
| <option value="CTM">CTM</option> | |||||
| <option value="CNFPT">CNFPT</option> | |||||
| <option value="CRNA">CRNA</option> | |||||
| <option value="CRNA">TME</option> | |||||
| </select> | |||||
| <select onchange="changeAffichageItemsTermine(event)"> | |||||
| <option value="oui">Afficher les items terminés</option> | |||||
| <option value="non">Masquer les items terminés</option> | |||||
| </select> | |||||
| </template> | |||||
| <template id="synthesis_body_calendrier"> | |||||
| <select onchange="changeModeAffichageEvent(event)"> | |||||
| <option value="calendar_intervenants" selected>Calendrier Intervenants</option> | |||||
| <option value="calendar_clients">Calendrier Clients</option> | |||||
| </select><br> | |||||
| <select onchange="changeCalendarEvent(event)"> | |||||
| <option value="1" selected>Cette semaine</option> | |||||
| <option value="2">Cette année</option> | |||||
| </select><br> | |||||
| </template> | |||||
| <template id="synthesis_body_planning"> | |||||
| <select onchange="changeAffichageItemsTermine(event)"> | |||||
| <option value="non">Masquer les items terminés</option> | |||||
| <option value="oui">Afficher les items terminés</option> | |||||
| </select> | |||||
| </template> | |||||
| <template id="synthesis_body_project"> | |||||
| <select onchange="changeAffichageItemsTermine(event)"> | |||||
| <option value="non">Masquer les items terminés</option> | |||||
| <option value="oui" selected>Afficher les items terminés</option> | |||||
| </select> | |||||
| <select onchange="changeAffichageItemsPrestations(event)"> | |||||
| <option value="non">Tous les items</option> | |||||
| <option value="oui" selected>Uniquement les prestations</option> | |||||
| </select> | |||||
| </template> | |||||
| <template id="footer_accueil"> | <template id="footer_accueil"> | ||||
| <h2>Gestion de Projet</h2> | <h2>Gestion de Projet</h2> | ||||
| <p> | <p> | ||||
| @ -237,8 +149,7 @@ | |||||
| <br> | <br> | ||||
| <br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement. | <br>Loi de Parkinson : le travail s'étale de façon à occuper tout le temps disponible pour son achèvement. | ||||
| <br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement | <br>Loi de Hofstadter: il est presque impossible de prévoir le temps qui sera nécessaire à l'accomplissement | ||||
| d'une | |||||
| tâche complexe. | |||||
| d'une tâche complexe. | |||||
| <br>Principe de Pareto : 20% des efforts produisent 80% des effets. | <br>Principe de Pareto : 20% des efforts produisent 80% des effets. | ||||
| <br> | <br> | ||||
| <br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu. | <br>Loi de Conway : un produit est le reflet de l'organisation qui l'a conçu. | ||||
| @ -0,0 +1,33 @@ | |||||
| // Get the CSS root element | |||||
| const rootCSS = document.querySelector(':root'); | |||||
| // Create a function for getting a variable value | |||||
| function CSSgetSombre() { | |||||
| let rs = getComputedStyle(rootCSS); | |||||
| alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre')); | |||||
| } | |||||
| function CSSsetSombre(vr, vg, vb) { | |||||
| // Couleur | |||||
| rootCSS.style.setProperty('--r-sombre', vr); | |||||
| rootCSS.style.setProperty('--g-sombre', vg); | |||||
| rootCSS.style.setProperty('--b-sombre', vb); | |||||
| // Logo | |||||
| // let logo = document.querySelector('header>#logo>svg'); | |||||
| // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')'; | |||||
| } | |||||
| function CSSsetClair(vr, vg, vb) { | |||||
| // Couleur | |||||
| rootCSS.style.setProperty('--r-clair', vr); | |||||
| rootCSS.style.setProperty('--g-clair', vg); | |||||
| rootCSS.style.setProperty('--b-clair', vb); | |||||
| } | |||||
| function CSSswitchCouleurTexte() { | |||||
| let rs = getComputedStyle(rootCSS); | |||||
| let actuel = rs.getPropertyValue('--couleur-texte'); | |||||
| if (actuel == 'black') | |||||
| rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)'); | |||||
| else | |||||
| rootCSS.style.setProperty('--couleur-texte', 'black'); | |||||
| } | |||||
| @ -1,5 +1,5 @@ | |||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| // ---- Fonction s pour charger des lignes identiques dans le tableau | |||||
| // ---- Fonction pour charger des lignes identiques dans le tableau | |||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| function datagridLignesIdentiques(nblignes, valeur) { | function datagridLignesIdentiques(nblignes, valeur) { | ||||
| let element = document.querySelector('#datagrid'); | let element = document.querySelector('#datagrid'); | ||||
| @ -30,14 +30,14 @@ function datagridLignesIdentiques(nblignes, valeur) { | |||||
| element.innerHTML = contenu; | element.innerHTML = contenu; | ||||
| } | } | ||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| // ---- Fonction s pour charger des lignes vides | |||||
| // ---- Fonction pour charger des lignes vides | |||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| function datagridEmptyLines(nblignes) { | function datagridEmptyLines(nblignes) { | ||||
| return datagridLignesIdentiques(nblignes,' '); | return datagridLignesIdentiques(nblignes,' '); | ||||
| } | } | ||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| // ---- Fonction s utilitaires | |||||
| // ---- Fonction utilitaires | |||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| function datagridLoading() { | function datagridLoading() { | ||||
| let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500 | let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500 | ||||
| @ -45,7 +45,7 @@ function datagridLoading() { | |||||
| } | } | ||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| // ---- Fonction s pour charger des données au hasard dans le datagrid | |||||
| // ---- Fonction pour charger des données au hasard dans le datagrid | |||||
| // --------------------------------------------------------------------------------------- | // --------------------------------------------------------------------------------------- | ||||
| var nbCols = 5; | var nbCols = 5; | ||||
| @ -159,100 +159,9 @@ | |||||
| function initDatagrid() | function initDatagrid() | ||||
| { | { | ||||
| let type = getContexteValeur('type'); | |||||
| switch(type){ | |||||
| case 'TODO': | |||||
| initDatagridTodos(); | |||||
| break; | |||||
| default: | |||||
| initDatagridItems(); | |||||
| break; | |||||
| } | |||||
| datagridLoading(); | |||||
| } | } | ||||
| function changeModeAffichage(valeur, texte) | |||||
| { | |||||
| let type='TODO'; | |||||
| switch(valeur){ | |||||
| case 'absences': | |||||
| case 'releases': | |||||
| case 'rdv': | |||||
| case 'feries': | |||||
| case 'taches': | |||||
| type='TACHE'; | |||||
| break; | |||||
| } | |||||
| setContexteValeur('mode_affichage', valeur); | |||||
| setContexteValeur('type_courant', type); | |||||
| setFiltreValeur('type',type); | |||||
| setFilAriane(['Home', 'List', texte]); | |||||
| return afficherItems(); | |||||
| } | |||||
| function changeModeAffichageEvent(e) | |||||
| { | |||||
| return changeModeAffichage(e.target.value, e.target.options[e.target.selectedIndex].text); | |||||
| } | |||||
| function changeAffichageItemsTermine(e) | |||||
| { | |||||
| setContexteValeur('termine', e.target.value); | |||||
| setFiltreValeur('status',e.target.value); | |||||
| afficherItems(); | |||||
| } | |||||
| function changeAffichageItemsPrestations(e) | |||||
| { | |||||
| setContexteValeur('prestation', e.target.value); | |||||
| afficherItems(); | |||||
| } | |||||
| function changeFiltreClient(e) | |||||
| { | |||||
| let valeur = e.target.value; | |||||
| if (valeur == 'ALL') valeur=''; | |||||
| setContexteValeur('client', valeur); | |||||
| setFiltreValeur('client', valeur); | |||||
| afficherItems(); | |||||
| } | |||||
| function changeAffichageNiveauxEvent(e) | |||||
| { | |||||
| setContexteValeur('level', e.target.value); | |||||
| setFiltreValeur('level', e.target.value); | |||||
| afficherItems(); | |||||
| } | |||||
| function changeCalendarEvent(e) | |||||
| { | |||||
| let valeur = todayStringDate; | |||||
| switch(parseInt(e.target.value)) { | |||||
| case 2 : | |||||
| valeur = todayStringDate.substring(0,4)+'0101'; | |||||
| break; | |||||
| } | |||||
| setContexteValeur('debut',valeur); | |||||
| setFiltreValeur('debut', valeur); | |||||
| afficherItems(); | |||||
| } | |||||
| function updateValue(e) { | |||||
| if (e.target.value != '') editerItem(-1, e.target.value); | |||||
| e.target.value = ''; | |||||
| } | |||||
| function afficher_synthese(mode) { | function afficher_synthese(mode) { | ||||
| let synthesis_body = document.querySelector('#synthesis_body'); | let synthesis_body = document.querySelector('#synthesis_body'); | ||||
| @ -317,181 +226,15 @@ | |||||
| } | } | ||||
| function activeMode(mode) { | function activeMode(mode) { | ||||
| setContexteValeur('type_courant', 'TODO'); | |||||
| setContexteValeur('items_type', 'items'); | |||||
| switch (mode) { | |||||
| case 'Tree': | |||||
| case 'TreeList' : | |||||
| case 'List': | |||||
| mode='Tasks'; | |||||
| case 'Tasks': | |||||
| case 'Releases': | |||||
| case 'Hollidays': | |||||
| case 'Rendez-Vous': | |||||
| case 'Items': | |||||
| setContexteValeur('mode_feuille', false); | |||||
| setContexteValeur('type_courant', 'TACHE'); | |||||
| setContexteValeur('mode_affichage', modeToAffichage(mode)); | |||||
| afficher_synthese('taches'); | |||||
| afficher_footer('taches'); | |||||
| setFilAriane(['Home', 'TreeList', mode]); | |||||
| initDatagridItems(); | |||||
| break; | |||||
| case 'Project': | |||||
| setContexteValeur('mode_feuille', false); | |||||
| setContexteValeur('termine', true); | |||||
| setContexteValeur('prestation', true); | |||||
| setContexteValeur('type_courant', 'PRESTATION'); | |||||
| setContexteValeur('mode_affichage', modeToAffichage(mode)); | |||||
| afficher_synthese('project'); | |||||
| afficher_footer('taches'); | |||||
| setFilAriane(['Home', 'Project']); | |||||
| initDatagridItems(); | |||||
| break; | |||||
| case 'Plan': | |||||
| case 'Planning': | |||||
| setFilAriane([mode]); | |||||
| setContexteValeur('type_courant', 'TODO'); | |||||
| setContexteValeur('mode_feuille', true); | |||||
| setContexteValeur('mode_affichage', 'planning'); | |||||
| setContexteValeur('termine', 'non'); | |||||
| afficher_synthese('planning'); | |||||
| afficher_footer('planning'); | |||||
| initDatagridItems(); | |||||
| break; | |||||
| case 'Calendar': | |||||
| setFilAriane(['Todo', mode]); | |||||
| setContexteValeur('mode_feuille', true); | |||||
| setContexteValeur('mode_affichage', 'calendar_intervenants'); | |||||
| setContexteValeur('debut', todayStringDate); | |||||
| afficher_synthese('calendrier'); | |||||
| afficher_footer('calendrier'); | |||||
| initDatagridItems(); | |||||
| break; | |||||
| case 'Administration': | |||||
| setFilAriane(['Todo', mode]); | |||||
| initAdministration(); | |||||
| break; | |||||
| case 'Status': | |||||
| setFilAriane(['Todo', 'Administration', mode]); | |||||
| initDatagridStatus(); | |||||
| break; | |||||
| case 'Clients': | |||||
| setFilAriane(['Todo', 'Administration', mode]); | |||||
| initDatagridClients(); | |||||
| break; | |||||
| case 'Collaborateurs': | |||||
| setFilAriane(['Todo', 'Administration', mode]); | |||||
| initDatagridCollaborateurs(); | |||||
| break; | |||||
| default: | |||||
| case 'Home': | |||||
| mode='Todo'; | |||||
| case 'Todo': | |||||
| setFilAriane(['Home', mode]); | |||||
| setDefaultContext(); | |||||
| setContexteValeur('type', 'TODO'); | |||||
| setContexteValeur('items_type', 'todos'); | |||||
| setContexteValeur('mode_affichage', 'todos'); | |||||
| setContexteValeur('mode_feuille', true); | |||||
| setContexteValeur('parent', '1'); | |||||
| afficher_synthese('accueil'); | |||||
| afficher_footer('accueil'); | |||||
| initDatagridItems(); | |||||
| break; | |||||
| } | |||||
| } | |||||
| function initAdministration() { | |||||
| let element = document.querySelector('#synthesis_middle'); | |||||
| contenu = '<div style="padding:0px 10px;display: flex;flex-wrap: nowrap;justify-content: space-between;">'; | |||||
| contenu += '<a onclick="activeMenu(this)">Status</a>'; | |||||
| contenu += '<a onclick="activeMenu(this)">Clients</a>'; | |||||
| contenu += '<a onclick="activeMenu(this)">Collaborateurs</a>'; | |||||
| contenu += '</div>'; | |||||
| element.innerHTML = contenu; | |||||
| } | |||||
| function setDefaultContext() | |||||
| { | |||||
| // Contexte de départ | |||||
| setContexteValeur('level', '9999'); | |||||
| setContexteValeur('parent', '1'); | |||||
| setContexteValeur('parent_level','0'); | |||||
| setContexteValeur('client', ''); | |||||
| setContexteValeur('termine', 'oui'); | |||||
| setFilAriane(['Home', mode]); | |||||
| initDatagrid(); | |||||
| } | } | ||||
| // UI | // UI | ||||
| setLogoVisiblity(false); | setLogoVisiblity(false); | ||||
| // Contexte de départ | // Contexte de départ | ||||
| setContexteValeur('intervenant', 'Anonymous'); | |||||
| init_filtres(['type','client','debut','fin','level']) | |||||
| setContexteValeur('user', 'Anonymous'); | |||||
| // GO ! | // GO ! | ||||
| activeMode('Todo'); | |||||
| // Get the CSS root element | |||||
| const rootCSS = document.querySelector(':root'); | |||||
| // Create a function for getting a variable value | |||||
| function CSSgetSombre() { | |||||
| let rs = getComputedStyle(rootCSS); | |||||
| alert("The value of --couleur-sombre is: " + rs.getPropertyValue('--couleur-sombre')); | |||||
| } | |||||
| function CSSsetSombre(vr, vg, vb) { | |||||
| // Couleur | |||||
| rootCSS.style.setProperty('--r-sombre', vr); | |||||
| rootCSS.style.setProperty('--g-sombre', vg); | |||||
| rootCSS.style.setProperty('--b-sombre', vb); | |||||
| // Logo | |||||
| // let logo = document.querySelector('header>#logo>svg'); | |||||
| // if (logo) logo.style.fill = 'rgb(' + vr + ',' + vg + ',' + vb + ')'; | |||||
| } | |||||
| function CSSsetClair(vr, vg, vb) { | |||||
| // Couleur | |||||
| rootCSS.style.setProperty('--r-clair', vr); | |||||
| rootCSS.style.setProperty('--g-clair', vg); | |||||
| rootCSS.style.setProperty('--b-clair', vb); | |||||
| } | |||||
| function CSSswitchCouleurTexte() { | |||||
| let rs = getComputedStyle(rootCSS); | |||||
| let actuel = rs.getPropertyValue('--couleur-texte'); | |||||
| if (actuel == 'black') | |||||
| rootCSS.style.setProperty('--couleur-texte', 'var(--couleur-sombre)'); | |||||
| else | |||||
| rootCSS.style.setProperty('--couleur-texte', 'black'); | |||||
| } | |||||
| activeMode('Menu1'); | |||||
| @ -5,8 +5,9 @@ export src=scripts | |||||
| sources="" | sources="" | ||||
| sources="$sources tools/delai tools/logs tools/dates tools/postData" | sources="$sources tools/delai tools/logs tools/dates tools/postData" | ||||
| sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis" | |||||
| sources="$sources UI/modal UI/settings UI/datagrid UI/pomodoro" | |||||
| # Commenter les Observer | |||||
| # sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis" | |||||
| sources="$sources UI/CSS UI/modal UI/settings UI/datagrid UI/pomodoro" | |||||
| sources="$sources UI/calendrier UI/planning" | sources="$sources UI/calendrier UI/planning" | ||||
| sources="$sources filtres contexte parametres ariane" | sources="$sources filtres contexte parametres ariane" | ||||
| sources="$sources api/entities api/status api/clients api/collaborateurs" | sources="$sources api/entities api/status api/clients api/collaborateurs" | ||||