From aea068a3d960a32dec452a846566f21b0ae11c61 Mon Sep 17 00:00:00 2001
From: Thibaud <tibo@topisto.net>
Date: Fri, 13 Sep 2024 19:14:31 +0200
Subject: [PATCH] commit 20240913

---
 frontend/src/html/index.html        |  91 +---------
 frontend/src/scripts/UI/CSS.js      |  33 ++++
 frontend/src/scripts/UI/datagrid.js |   8 +-
 frontend/src/scripts/default.js     | 267 +---------------------------
 frontend/src/tools/cscripts.sh      |   5 +-
 5 files changed, 46 insertions(+), 358 deletions(-)
 create mode 100644 frontend/src/scripts/UI/CSS.js

diff --git a/frontend/src/html/index.html b/frontend/src/html/index.html
index 94dae5f..ccf7bc7 100644
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -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.
diff --git a/frontend/src/scripts/UI/CSS.js b/frontend/src/scripts/UI/CSS.js
new file mode 100644
index 0000000..afd9359
--- /dev/null
+++ b/frontend/src/scripts/UI/CSS.js
@@ -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');
+  }
diff --git a/frontend/src/scripts/UI/datagrid.js b/frontend/src/scripts/UI/datagrid.js
index d4ab6e6..efed85a 100644
--- a/frontend/src/scripts/UI/datagrid.js
+++ b/frontend/src/scripts/UI/datagrid.js
@@ -1,5 +1,5 @@
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions 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;
 }
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions pour charger des lignes vides
+// ---- Fonction pour charger des lignes vides
 // ---------------------------------------------------------------------------------------
 function datagridEmptyLines(nblignes) {
   return datagridLignesIdentiques(nblignes,'&nbsp;');
 }
 
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions 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() {
 }
 
 // ---------------------------------------------------------------------------------------
-// ---- Fonctions pour charger des données au hasard dans le datagrid
+// ---- Fonction pour charger des données au hasard dans le datagrid
 // ---------------------------------------------------------------------------------------
 
 var nbCols = 5;
diff --git a/frontend/src/scripts/default.js b/frontend/src/scripts/default.js
index b3eb4c3..0792179 100644
--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -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');
diff --git a/frontend/src/tools/cscripts.sh b/frontend/src/tools/cscripts.sh
index 7507aa9..6cdc63d 100755
--- a/frontend/src/tools/cscripts.sh
+++ b/frontend/src/tools/cscripts.sh
@@ -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"