commit 20240914

2026-03-31 15:09:10 +00:00 · 2024-09-14 18:03:24 +02:00
parent aea068a3d9
commit c02bc6fc47
9 changed files with 123 additions and 150 deletions
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@@ -3,20 +3,8 @@

 <head>
  <meta charset="utf-8">
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Texte.woff2"
-    crossorigin
-  />
-  <link
-    rel="preload"
-    as="font"
-    type="font/woff2"
-    href="./fonts/Fonte-Titre.woff2"
-    crossorigin
-  />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
+  <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
  <title>template TOPISTO</title>
  <meta name="description" content="Suivi activité">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -38,7 +26,8 @@
  <nav>
    <section id="ariane">
      <div id="fil"></div>
-      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
+      <div id="aide"><a onclick="show_modal('type=login')"><span id="username" style="font-weight: bold;">Log
+            In</span></a> - <a alt="aide" onclick="gotoHelp()">?</a></div>
    </section>
    <section id="bandeau">
      <div id="menu">
@@ -46,7 +35,7 @@
        <a onclick="activeMenu(this)">Menu2</a>
        <a onclick="activeMenu(this)">Menu3</a>
      </div>
-      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings" >
+      <svg viewBox="0 0 920 920" id="settings" class="js-open-modal-trigger" data-modal-info="type=settings">
        <use href="#topisto"></use>
      </svg>
    </section>
@@ -65,7 +54,9 @@
  <dialog id="modal" style="display:flex;flex-direction: row;">
    <section style="width:100%;height:100%">
      <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;">
-        <div style="float:left"><div class="modal_header">This is a modal header</div></div>
+        <div style="float:left">
+          <div class="modal_header">This is a modal header</div>
+        </div>
        <div style="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
        <div style="clear:both"></div>
      </div>
@@ -84,25 +75,10 @@
      <div style="clear:both"></div>
    </div>
    <div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></div>
-    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span class="modal_footer">This is a modal footer</span></div>
+    <div style="overflow-y: hidden;overflow-x: hidden;height: 10%;vertical-align: text-bottom;"><span
+        class="modal_footer">This is a modal footer</span></div>
  </dialog>

-  <template id="filtre_level">
-    <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>
-  </template>
-
  <template id="settings_header">
    <section style="display: flex">
      <svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()">
@@ -134,11 +110,18 @@
    </section>
  </template>

-  <template id="synthesis_body_accueil">
+  <template id="synthesis_body_Home">
+    <div class="statrow">
+      <div class="statbox2">Indicateur 1<br>110</div>
+      <div class="statbox1">Indicateur 2<br>45</div>
+      <div class="statbox1">Indicateur 3<br>0</div>
+      <div class="statbox1">Indicateur 4<br>0</div>
+      <div class="statbox2">Indicateur 5<br>26</div>
+    </div>
  </template>

-  <template id="footer_accueil">
-    <h2>Gestion de Projet</h2>
+  <template id="footer_Home">
+    <h2>Modèle de page HTML pour visulaisation de données</h2>
    <p>
      <small>
        Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat
--- a/frontend/src/scripts/UI/IntersectionObserver/footer.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/footer.js
@@ -3,10 +3,10 @@ const handleFooterIntersection = function (entries) {
  // Loop through all the observed elements
  entries.forEach(entry => {      // Check if the element is intersecting the viewport
      if (entry.isIntersecting) {
-        console.log("The footer is visible in the viewport");
+        msgConsole('IntersectionObserver','The footer is visible in the viewport');
        if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
      } else {
-        console.log("The footer is invisible in the viewport");
+        msgConsole('IntersectionObserver','The footer is invisible in the viewport');
        if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
      }
  });
--- a/frontend/src/scripts/UI/IntersectionObserver/header.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/header.js
@@ -1,7 +1,13 @@
 // Create a function that will handle any intersection between some elements and the viewport.
 const handleHeaderIntersection = function (entries) {
  entries.forEach(entry => {
-    if (typeof headerIsVisible === 'function') headerIsNowVisible(entry.isIntersecting);
+    if (entry.isIntersecting) {
+      msgConsole('IntersectionObserver','The header is visible in the viewport');
+      if (typeof headerIsNowVisible === 'function') headerIsNowVisible(entry);
+    } else {
+      msgConsole('IntersectionObserver','The header is invisible in the viewport');
+      if (typeof headerIsNowInvisible === 'function') headerIsNowInvisible(entry);
+    }
  });
 }

--- a/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
+++ b/frontend/src/scripts/UI/IntersectionObserver/synthesis.js
@@ -3,10 +3,10 @@ const handleSynthesisIntersection = function (entries) {
  entries.forEach(entry => {
    // Check if the element is intersecting the viewport
    if (entry.isIntersecting) {
-      myLog("The synthesis is visible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is visible in the viewport");
      if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
    } else {
-      myLog("The synthesis is invisible in the viewport");
+      msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
      if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
    }
  });
--- a/frontend/src/scripts/UI/datagrid.js
+++ b/frontend/src/scripts/UI/datagrid.js
@@ -145,3 +145,4 @@ datagrid_hooks['random'] = function(){
  let nblignes = 25 + Math.floor(Math.random() * 475); // Nbre entre ntre 25 et 500
  setDatagridRandomValues(element, nbCols, nblignes)
 };
+
--- a/frontend/src/scripts/UI/modal.js
+++ b/frontend/src/scripts/UI/modal.js
@@ -138,7 +138,7 @@ function modalSetFooter(valeur)
 */
 function open_modal_hook(parametre)
 {
-    console.log("open_modal_hook pour "+parametre);
+    myLog("open_modal_hook pour "+parametre);
    let hook = null;
    let paramSplit = parametre.split(':');
    paramSplit.forEach(element => {
@@ -147,7 +147,7 @@ function open_modal_hook(parametre)
            hook = modal_hooks[elemSplit[1]];
        }
    });
-    if ((hook===null)||(hook===undefined)) hook = modal_hooks['ITEM'];
+    if ((hook===null)||(hook===undefined)) hook = modal_hooks['random'];
    return hook(parametre);
 }

--- a/frontend/src/scripts/default.js
+++ b/frontend/src/scripts/default.js
@@ -130,12 +130,15 @@
    window.scrollTo(0, element.offsetHeight + 1);
  }

-  function headerIsVisible(flagVisible) {
-    setLogoVisiblity(!flagVisible);
-    if (!flagVisible) gotoTop();
+  function headerIsNowVisible(header) {
+    setLogoVisiblity(false);
  }

-  function synthesisTopIsNowVisible(entry) {
+  function headerIsNowInvisible(header) {
+    setLogoVisiblity(true);
+  }
+
+  function synthesisIsNowVisible(entry) {

    setDatagridHeadSticky(false);
    setDataGridFootSticky(false);
@@ -159,11 +162,13 @@

  function initDatagrid()
  {
+    let fonctionAffichageDataGrid = datagrid_hooks['random'];
    datagridLoading();
+    fonctionAffichageDataGrid();
  }


-  function afficher_synthese(mode) {
+  function initSynthese(mode) {
    let synthesis_body = document.querySelector('#synthesis_body');
    if (synthesis_body) {
      synthesis_body.innerHTML='';
@@ -175,7 +180,7 @@
    }
  }

-  function afficher_footer(mode) {
+  function initFooter(mode) {
    let footer_body = document.querySelector('footer');
    if (footer_body) {
      footer_body.innerHTML='';
@@ -188,46 +193,15 @@
  }

  function activeMenu(element) {
-    datagridEmptyLines(50);
-
      activeMode(element.innerText);
-
-    gotoTop();
-  }
-
-  function modeToAffichage(mode)
-  {
-    let retour='taches';
-    switch (mode) {
-      case 'Releases':
-        retour='releases';
-      break;
-      case 'Hollidays':
-        retour='feries';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Rendez-Vous':
-        retour='rdv';
-      break;
-      case 'Items':
-        retour='items';
-      break;
-      case 'Project':
-        retour='prestations';
-      break;
-      default:
-      case 'Tasks':
-        retour='taches';
-      break;
-    }
-    return retour;
  }
  
  function activeMode(mode) {
-    setFilAriane(['Home', mode]);
-    initDatagrid();
+    setFilAriane(['Home']);
+    if (mode != 'Home') setFilAriane(['Home', mode]);
+    initDatagrid(mode);
+    initSynthese(mode);
+    initFooter(mode);
  }

  // UI
@@ -237,4 +211,4 @@
  setContexteValeur('user', 'Anonymous');

  // GO !
-  activeMode('Menu1');
+  activeMode('Home');
--- a/frontend/src/scripts/tools/logs.js
+++ b/frontend/src/scripts/tools/logs.js
@@ -1,10 +1,19 @@
-var useLog=false;
-var useError=true;
+const msgLevel = ['log','error','alert'];
+
+function msgConsole(level, message) {
+  if (msgLevel.includes(level)) {
+    if ((level == 'error')||(level == 'alert')) console.error(message);
+    else console.log(message);
+  }
+}
 function myLog(message) {
-  if (useLog)
-    console.log(message);
+  msgConsole('log',message);
 }
 function myError(message) {
-  if (useError)
-    console.error(message);
+  msgConsole('error',message);
 }
+function myAlert(message) {
+  msgConsole('alert',message);
+}
+
+
--- a/frontend/src/tools/cscripts.sh
+++ b/frontend/src/tools/cscripts.sh
@@ -6,7 +6,7 @@ export src=scripts
 sources=""
 sources="$sources tools/delai tools/logs tools/dates tools/postData"
 # Commenter les Observer
-# sources="$sources UI/IntersectionObserver/header UI/IntersectionObserver/footer UI/IntersectionObserver/synthesis"
+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"