commit 20240914

пре 1 година · c02bc6fc47
--- a/frontend/src/html/index.html
+++ b/frontend/src/html/index.html
@ -3,26 +3,14 @@

 <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" />

  <link rel="stylesheet" type="text/css" href="styles/app.css?TIMESTAMP">
  

 </head>

 <body>
@ -38,15 +26,16 @@
  <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">
        <a onclick="activeMenu(this)">Menu1</a>
        <a onclick="activeMenu(this)">Menu2</a>
        <a onclick="activeMenu(this)">Menu3</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,39 +75,24 @@
      <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()">
          <use href="#topisto"></use>
        <use href="#topisto"></use>
      </svg>
      <svg viewBox="0 0 550 550" onclick="settingsSetModeLogin()">
        <use href="#user"></use>
      </svg>  
      </svg>
      <svg viewBox="0 0 1024 1024" onclick="settingsSetModeFilter()">
        <use href="#filter"></use>
      </svg>  
      </svg>
      <svg viewBox="0 0 1024 1024" onclick="settingsSetModeSetup()">
        <use href="#setup"></use>
      </svg>  
      </svg>
    </section>
  </template>

@ -127,18 +103,25 @@
        <h3>Fournir un template générique pour les applis HTML</h3>
        <p>Version 0.1</p>
        <p><small>
          contributeurs:<br>
          Albert Seandhils<br>
        </small></p>
            contributeurs:<br>
            Albert Seandhils<br>
          </small></p>
      </div>
    </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
@ -163,47 +146,47 @@
        NB : En Tchèque, SMETI c'est la poussière (littéralement : "ce qui peut être balayé")
      </i>
    </p>
      <h2>Explications</h2>
      <p>
        L'objectif de cette page est de présenter des données sous forme de tableau.<br>
        La page permet en outre :
      <ul>
        <li>De rappeler l'identité visuelle : logo, bannière</li>
        <li>De naviguer dans l'application</li>
        <li>D'accéder à une synthèse et à une explication des données</li>
      </ul>
      </p>
      <p>
        Le header est une bannière qui fait 30% du viewport.
        Elle contient une image de background alignée à gauche et un texte aligné à droite.
      </p>
      <p>
        Lorsque le header sort de la partie visible de la page :
      <ul>
        <li>La barre de navigation devient "collée" au haut de page.</li>
        <li>Le pied de tableau devient "collé" en bas de page</li>
        <li>le logo apparaît à gauche de la barre de navigation.</li>
      </ul>
      </p>
      <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
        toute
        la page.</p>
      <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
        similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
        voluptatum nesciunt eligendi. Eos harum rerum vitae.
      </p>
      <h2>Focus sur la gestion des thèmes</h2>
      <p>
        Voici comment s'opère la gestion des couleurs.<br>
        Dans le default.css, la section CSS root contient des variables CSS.<br>
        On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
        Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
        <br>
        Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
      <ul>
        <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
        <li>- Soit par calul de dégradé</li>
      </ul>
    <h2>Explications</h2>
    <p>
      L'objectif de cette page est de présenter des données sous forme de tableau.<br>
      La page permet en outre :
    <ul>
      <li>De rappeler l'identité visuelle : logo, bannière</li>
      <li>De naviguer dans l'application</li>
      <li>D'accéder à une synthèse et à une explication des données</li>
    </ul>
    </p>
    <p>
      Le header est une bannière qui fait 30% du viewport.
      Elle contient une image de background alignée à gauche et un texte aligné à droite.
    </p>
    <p>
      Lorsque le header sort de la partie visible de la page :
    <ul>
      <li>La barre de navigation devient "collée" au haut de page.</li>
      <li>Le pied de tableau devient "collé" en bas de page</li>
      <li>le logo apparaît à gauche de la barre de navigation.</li>
    </ul>
    </p>
    <p>Lorsque le tableau sort de la partie visible de la page, le footer et la zone d'explication peuvent occuper
      toute
      la page.</p>
    <p> Provident pariatur fugit sint autem laudantium omnis. Dolores repudiandae voluptatem molestiae ratione placeat
      similique eaque. Aliquam sit ullam non non qui. Dicta molestiae neque repellendus dicta iure tempora. Et ipsam
      voluptatum nesciunt eligendi. Eos harum rerum vitae.
    </p>
    <h2>Focus sur la gestion des thèmes</h2>
    <p>
      Voici comment s'opère la gestion des couleurs.<br>
      Dans le default.css, la section CSS root contient des variables CSS.<br>
      On a le triplet (R,G,B) de la couleur dominante et celui de la couleur de fond.<br>
      Ces couleurs sont respectivement appelées "sombre" et "clair".<br>
      <br>
      Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".  
  </template>
      Des variables sont ensuite définies pour décliner des dégradés de couleurs.<br>
    <ul>
      <li>- Soit par ajout de transparence, ce sont les variables --nuance-{sombre|clair}-alpha-XX</li>
      <li>- Soit par calul de dégradé</li>
    </ul>
    <br>
    Enfin une batterie de fonctions javascript permettent de modifier à la volée les couleurs "sombre" et "clair".
  </template>
--- 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) {
      m
yLog(
"The synthesis is visible in the viewport");
      m
sgConsole('IntersectionObserver',
"The synthesis is visible in the viewport");
      if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
    } else {
      m
yLog(
"The synthesis is invisible in the viewport");
      m
sgConsole('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
@ -144,4 +144,5 @@ datagrid_hooks['random'] = function(){
  let element = document.querySelector('#datagrid');
  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.l
og("open_modal_hook pour "+parametre);
    
myL
og("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_s
ynthese(mode) {
  function 
initS
ynthese(mode) {
    let synthesis_body = document.querySelector('#synthesis_body');
    if (synthesis_body) {
      synthesis_body.innerHTML='';
@ -175,7 +180,7 @@
    }
  }

  function 
afficher_f
ooter(mode) {
  function 
initF
ooter(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();
      activeMode(element.innerText);
  }

  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"