mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 15:09:10 +00:00
initialisation with SMETI code
This commit is contained in:
Thibaud
497
frontend/src/scripts/default.js
Normal file
497
frontend/src/scripts/default.js
Normal file
@@ -0,0 +1,497 @@
|
||||
window.addEventListener('load', function() {
|
||||
window.scrollTo(0,0);
|
||||
}, false);
|
||||
|
||||
/*
|
||||
* Personnalisation
|
||||
* Que se passe-t-il lorsque la bannière est invisible ?
|
||||
*/
|
||||
function setLogoVisiblity(visibilityFlag) {
|
||||
let element = document.querySelector("nav>*>#settings");
|
||||
let value = 'hidden';
|
||||
if (visibilityFlag) value = "visible";
|
||||
element.style.visibility = value;
|
||||
}
|
||||
|
||||
function setNavbarStickOnTop(topFlag) {
|
||||
let element = document.querySelector("#nav");
|
||||
if (topFlag) element.style.setProperty('top', '0px');
|
||||
else element.style.removeProperty('top');
|
||||
}
|
||||
|
||||
function setDataGridFootSticky(stickyFlag) {
|
||||
let element = null;
|
||||
if (stickyFlag) {
|
||||
//
|
||||
// Mettre le tfoot sticky au bottom
|
||||
//
|
||||
element = document.querySelector("#datagrid>table>tfoot");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('bottom', '0px');
|
||||
element.style.setProperty('z-index', '30');
|
||||
} else {
|
||||
element = document.querySelector("#datagrid>table>tfoot");
|
||||
element.style.setProperty('position', 'relative');
|
||||
element.style.setProperty('z-index', '10');
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Personnalisation
|
||||
* Que se passe-t-il lorsque la synthèse est invisible ?
|
||||
*/
|
||||
function setDatagridFirstColSticky(stickyFlag) {
|
||||
let element = null;
|
||||
|
||||
if (stickyFlag) {
|
||||
/*
|
||||
* Mettre la première case sticky au top left
|
||||
*/
|
||||
element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('left', '0px');
|
||||
element.style.setProperty('z-index', '30');
|
||||
|
||||
//
|
||||
// Mettre la dernière case sticky au bottom left
|
||||
//
|
||||
element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('left', '0px');
|
||||
element.style.setProperty('z-index', '30');
|
||||
|
||||
} else {
|
||||
element = document.querySelector("#datagrid>table>thead>tr>th:first-child");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('left', '0px');
|
||||
element.style.setProperty('z-index', '10');
|
||||
|
||||
element = document.querySelector("#datagrid>table>tfoot>tr>th:first-child");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('left', '0px');
|
||||
element.style.setProperty('z-index', '10');
|
||||
}
|
||||
}
|
||||
|
||||
function setDatagridHeadSticky(stickyFlag) {
|
||||
let element = document.querySelector("#datagrid>table>thead");
|
||||
let navbar = document.querySelector("nav");
|
||||
let offset = navbar.offsetHeight;
|
||||
|
||||
if (stickyFlag) {
|
||||
/*
|
||||
* Mettre le thead sticky au top
|
||||
*/
|
||||
//element = document.querySelector("#datagrid>table>thead");
|
||||
element.style.setProperty('position', 'sticky');
|
||||
element.style.setProperty('top', offset+'px');
|
||||
element.style.setProperty('z-index', '30');
|
||||
} else {
|
||||
//element = document.querySelector("#datagrid>table>thead");
|
||||
element.style.setProperty('position', 'relative');
|
||||
element.style.setProperty('top', '0px');
|
||||
element.style.setProperty('z-index', '10');
|
||||
}
|
||||
}
|
||||
|
||||
function smoothJump(hash) {
|
||||
location.replace("#" + hash);
|
||||
}
|
||||
|
||||
function documentGetElementById(id){
|
||||
element = document.getElementById(id);
|
||||
if (element === null ) return '';
|
||||
return element.value;
|
||||
}
|
||||
|
||||
function setElementHeight(elementSelector, elementHeight) {
|
||||
let element = document.querySelector(elementSelector);
|
||||
element.style.height = elementHeight;
|
||||
}
|
||||
|
||||
function slideElement(elementSelector, elementHeight) {
|
||||
let element = document.querySelector(elementSelector);
|
||||
element.style.transition = "all 2s ease-in-out";
|
||||
setElementHeight(elementSelector, elementHeight);
|
||||
}
|
||||
|
||||
function scrollToElement(elementSelector) {
|
||||
let element = document.querySelector(elementSelector);
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
function gotoHelp() {
|
||||
scrollToElement('#synthesis');
|
||||
setTimeout(scrollToElement, 500, '#footer');
|
||||
}
|
||||
|
||||
function gotoTop() {
|
||||
let element = document.querySelector('header');
|
||||
window.scrollTo(0, element.offsetHeight + 1);
|
||||
}
|
||||
|
||||
function headerIsVisible(flagVisible) {
|
||||
setLogoVisiblity(!flagVisible);
|
||||
if (!flagVisible) gotoTop();
|
||||
}
|
||||
|
||||
function synthesisTopIsNowVisible(entry) {
|
||||
|
||||
setDatagridHeadSticky(false);
|
||||
setDataGridFootSticky(false);
|
||||
/*
|
||||
setDatagridFirstColSticky(true);
|
||||
*/
|
||||
|
||||
myLog('Trigger synthesis is visible');
|
||||
}
|
||||
|
||||
function synthesisTopIsNowInvisible(entry) {
|
||||
|
||||
setDatagridHeadSticky(true);
|
||||
setDataGridFootSticky(true);
|
||||
/*
|
||||
setDatagridFirstColSticky(true);
|
||||
*/
|
||||
|
||||
myLog('Trigger synthesis is invisible');
|
||||
}
|
||||
|
||||
function initDatagrid()
|
||||
{
|
||||
let type = getContexteValeur('type');
|
||||
switch(type){
|
||||
case 'TODO':
|
||||
initDatagridTodos();
|
||||
break;
|
||||
default:
|
||||
initDatagridItems();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
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');
|
||||
if (synthesis_body) {
|
||||
synthesis_body.innerHTML='';
|
||||
let template = document.querySelector('#synthesis_body_' + mode);
|
||||
if (template) {
|
||||
let contenu = document.importNode(template.content, true);
|
||||
if (contenu) synthesis_body.appendChild(contenu);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function afficher_footer(mode) {
|
||||
let footer_body = document.querySelector('footer');
|
||||
if (footer_body) {
|
||||
footer_body.innerHTML='';
|
||||
let template = document.querySelector('#footer_' + mode);
|
||||
if (template) {
|
||||
let contenu = document.importNode(template.content, true);
|
||||
if (contenu) footer_body.appendChild(contenu);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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');
|
||||
}
|
||||
|
||||
// UI
|
||||
setLogoVisiblity(false);
|
||||
|
||||
// Contexte de départ
|
||||
setContexteValeur('intervenant', 'Anonymous');
|
||||
|
||||
init_filtres(['type','client','debut','fin','level'])
|
||||
|
||||
// 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');
|
||||
}
|
||||
Reference in New Issue
Block a user