tibo/template
1
0
Fork 0
mirror of https://git.topisto.net/tibo/template.git synced 2026-03-31 19:29:10 +00:00
Code Issues Releases Wiki Activity

commit 20240914

Browse Source
This commit is contained in:
Thibaud
2024-09-14 18:03:24 +02:00
parent aea068a3d9
commit c02bc6fc47
9 changed files with 123 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/html/index.html
View File

@@ -3,20 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Texte.woff2" crossorigin />
rel="preload" <link rel="preload" as="font" type="font/woff2" href="./fonts/Fonte-Titre.woff2" crossorigin />
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> <title>template TOPISTO</title>
<meta name="description" content="Suivi activité"> <meta name="description" content="Suivi activité">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -38,7 +26,8 @@
<nav> <nav>
<section id="ariane"> <section id="ariane">
<div id="fil"></div> <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>
<section id="bandeau"> <section id="bandeau">
<div id="menu"> <div id="menu">
@@ -65,7 +54,9 @@
<dialog id="modal" style="display:flex;flex-direction: row;"> <dialog id="modal" style="display:flex;flex-direction: row;">
<section style="width:100%;height:100%"> <section style="width:100%;height:100%">
<div style="overflow-y: hidden;overflow-x: hidden;height: 10%;"> <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="float:right"><span class="js-close-modal-trigger" data-modal-info="">&#x2715;</span></div>
<div style="clear:both"></div> <div style="clear:both"></div>
</div> </div>
@@ -84,25 +75,10 @@
<div style="clear:both"></div> <div style="clear:both"></div>
</div> </div>
<div class="modal_body" style="overflow-y: auto;overflow-x: hidden;height: 80%;"></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> </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"> <template id="settings_header">
<section style="display: flex"> <section style="display: flex">
<svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()"> <svg viewBox="0 0 920 920" onclick="settingsSetModeInfo()">
@@ -134,11 +110,18 @@
</section> </section>
</template> </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>
<template id="footer_accueil"> <template id="footer_Home">
<h2>Gestion de Projet</h2> <h2>Modèle de page HTML pour visulaisation de données</h2>
<p> <p>
<small> <small>
Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat Un projet est un ensemble d'efforts fournis de manière limitée dans le temps afin de produire un résultat

4
frontend/src/scripts/UI/IntersectionObserver/footer.js
View File

@@ -3,10 +3,10 @@ const handleFooterIntersection = function (entries) {
// Loop through all the observed elements // Loop through all the observed elements
entries.forEach(entry => { // Check if the element is intersecting the viewport entries.forEach(entry => { // Check if the element is intersecting the viewport
if (entry.isIntersecting) { 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); if (typeof footerIsNowVisible === 'function') footerIsNowVisible(entry);
} else { } 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); if (typeof footerIsNowInvisible === 'function') footerIsNowInvisible(entry);
} }
}); });

8
frontend/src/scripts/UI/IntersectionObserver/header.js
View File

@@ -1,7 +1,13 @@
// Create a function that will handle any intersection between some elements and the viewport. // Create a function that will handle any intersection between some elements and the viewport.
const handleHeaderIntersection = function (entries) { const handleHeaderIntersection = function (entries) {
entries.forEach(entry => { 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);
}
}); });
} }

4
frontend/src/scripts/UI/IntersectionObserver/synthesis.js
View File

@@ -3,10 +3,10 @@ const handleSynthesisIntersection = function (entries) {
entries.forEach(entry => { entries.forEach(entry => {
// Check if the element is intersecting the viewport // Check if the element is intersecting the viewport
if (entry.isIntersecting) { 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); if (typeof synthesisTopIsNowVisible === 'function') synthesisIsNowVisible(entry);
} else { } else {
myLog("The synthesis is invisible in the viewport"); msgConsole('IntersectionObserver',"The synthesis is invisible in the viewport");
if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry); if (typeof synthesisTopIsNowInvisible === 'function') synthesisIsNowInvisible(entry);
} }
}); });

1
frontend/src/scripts/UI/datagrid.js
View File

@@ -145,3 +145,4 @@ datagrid_hooks['random'] = function(){
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
setDatagridRandomValues(element, nbCols, nblignes) setDatagridRandomValues(element, nbCols, nblignes)
}; };

4
frontend/src/scripts/UI/modal.js
View File

@@ -138,7 +138,7 @@ function modalSetFooter(valeur)
*/ */
function open_modal_hook(parametre) function open_modal_hook(parametre)
{ {
console.log("open_modal_hook pour "+parametre); myLog("open_modal_hook pour "+parametre);
let hook = null; let hook = null;
let paramSplit = parametre.split(':'); let paramSplit = parametre.split(':');
paramSplit.forEach(element => { paramSplit.forEach(element => {
@@ -147,7 +147,7 @@ function open_modal_hook(parametre)
hook = modal_hooks[elemSplit[1]]; 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); return hook(parametre);
} }

60
frontend/src/scripts/default.js
View File

@@ -130,12 +130,15 @@
window.scrollTo(0, element.offsetHeight + 1); window.scrollTo(0, element.offsetHeight + 1);
} }
function headerIsVisible(flagVisible) { function headerIsNowVisible(header) {
setLogoVisiblity(!flagVisible); setLogoVisiblity(false);
if (!flagVisible) gotoTop();
} }
function synthesisTopIsNowVisible(entry) { function headerIsNowInvisible(header) {
setLogoVisiblity(true);
}
function synthesisIsNowVisible(entry) {
setDatagridHeadSticky(false); setDatagridHeadSticky(false);
setDataGridFootSticky(false); setDataGridFootSticky(false);
@@ -159,11 +162,13 @@
function initDatagrid() function initDatagrid()
{ {
let fonctionAffichageDataGrid = datagrid_hooks['random'];
datagridLoading(); datagridLoading();
fonctionAffichageDataGrid();
} }
function afficher_synthese(mode) { function initSynthese(mode) {
let synthesis_body = document.querySelector('#synthesis_body'); let synthesis_body = document.querySelector('#synthesis_body');
if (synthesis_body) { if (synthesis_body) {
synthesis_body.innerHTML=''; synthesis_body.innerHTML='';
@@ -175,7 +180,7 @@
} }
} }
function afficher_footer(mode) { function initFooter(mode) {
let footer_body = document.querySelector('footer'); let footer_body = document.querySelector('footer');
if (footer_body) { if (footer_body) {
footer_body.innerHTML=''; footer_body.innerHTML='';
@@ -188,46 +193,15 @@
} }
function activeMenu(element) { function activeMenu(element) {
datagridEmptyLines(50);
activeMode(element.innerText); 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) { function activeMode(mode) {
setFilAriane(['Home', mode]); setFilAriane(['Home']);
initDatagrid(); if (mode != 'Home') setFilAriane(['Home', mode]);
initDatagrid(mode);
initSynthese(mode);
initFooter(mode);
} }
// UI // UI
@@ -237,4 +211,4 @@
setContexteValeur('user', 'Anonymous'); setContexteValeur('user', 'Anonymous');
// GO ! // GO !
activeMode('Menu1'); activeMode('Home');

21
frontend/src/scripts/tools/logs.js
View File

@@ -1,10 +1,19 @@
var useLog=false; const msgLevel = ['log','error','alert'];
var useError=true;
function msgConsole(level, message) {
if (msgLevel.includes(level)) {
if ((level == 'error')||(level == 'alert')) console.error(message);
else console.log(message);
}
}
function myLog(message) { function myLog(message) {
if (useLog) msgConsole('log',message);
console.log(message);
} }
function myError(message) { function myError(message) {
if (useError) msgConsole('error',message);
console.error(message);
} }
function myAlert(message) {
msgConsole('alert',message);
}

2
frontend/src/tools/cscripts.sh
View File

@@ -6,7 +6,7 @@ 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"
# Commenter les Observer # 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/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"