mirror of
https://git.topisto.net/tibo/template.git
synced 2026-03-31 21:39:10 +00:00
commit 20240913
This commit is contained in:
@@ -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.
|
||||
|
||||
33
frontend/src/scripts/UI/CSS.js
Normal file
33
frontend/src/scripts/UI/CSS.js
Normal file
@@ -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');
|
||||
}
|
||||
@@ -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,' ');
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------------------
|
||||
// ---- 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;
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user