| @ -137,94 +137,6 @@ | |||
| <template id="synthesis_body_accueil"> | |||
| </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"> | |||
| <h2>Gestion de Projet</h2> | |||
| <p> | |||
| @ -237,8 +149,7 @@ | |||
| <br> | |||
| <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 | |||
| d'une | |||
| tâche complexe. | |||
| d'une tâche complexe. | |||
| <br>Principe de Pareto : 20% des efforts produisent 80% des effets. | |||
| <br> | |||
| <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) { | |||
| let element = document.querySelector('#datagrid'); | |||
| @ -30,14 +30,14 @@ function datagridLignesIdentiques(nblignes, valeur) { | |||
| element.innerHTML = contenu; | |||
| } | |||
| // --------------------------------------------------------------------------------------- | |||
| // ---- Fonction s pour charger des lignes vides | |||
| // ---- Fonction pour charger des lignes vides | |||
| // --------------------------------------------------------------------------------------- | |||
| function datagridEmptyLines(nblignes) { | |||
| return datagridLignesIdentiques(nblignes,' '); | |||
| } | |||
| // --------------------------------------------------------------------------------------- | |||
| // ---- Fonction s utilitaires | |||
| // ---- Fonction utilitaires | |||
| // --------------------------------------------------------------------------------------- | |||
| function datagridLoading() { | |||
| 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; | |||
| @ -159,100 +159,9 @@ | |||
| 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) { | |||
| let synthesis_body = document.querySelector('#synthesis_body'); | |||
| @ -317,181 +226,15 @@ | |||
| } | |||
| 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 | |||
| setLogoVisiblity(false); | |||
| // Contexte de départ | |||
| setContexteValeur('intervenant', 'Anonymous'); | |||
| init_filtres(['type','client','debut','fin','level']) | |||
| setContexteValeur('user', 'Anonymous'); | |||
| // 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 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 filtres contexte parametres ariane" | |||
| sources="$sources api/entities api/status api/clients api/collaborateurs" | |||