Imbrication de fonctions

Version imprimable

1 pièce(s) jointe(s)

Bonjour,
Je construits des rapports en HTML.
J'en ai fait une qui fait des sections par chargé de projet, et dans cette section, des sous sections par "statut" de projet, et pour chacun de ces statuts, un total des coûts planifiés et des prix.
Mon problème c'est que lorsqu'on est sur un nouveau chargé de projet, il me crée la section avant les sous-totaux de la précédente.
Voici un exemple ci-dessous. En clair, la somme de Amy apparaît après le changement de chargé de projet en Aymar.
Ensuite, les totaux se font bien par statuts, mais dès qu'on change de chargé de projet, rebelote.

Qty, Qty1 et ctr sont bien évidemment déclarés.

Pièce jointe 513031

Voici mes différent scripts:
Cette fonction vérifie sur quel chargé de projet on est:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function CheckTechnician(value) {
				if(previous_tech!=value){
					document.writeln('<tr><td></td></tr>');
					document.writeln('<tr style="background-color: lightgray">');
					document.writeln('<th colspan="2" style="background-color: lightgray;color: red">Project Manager:</th>');
					document.writeln('<th colspan="10" style="background-color: lightgray;color:red ">'+value+'</th>');
					document.writeln('</tr style="background-color: lightgray">');
					document.writeln('<tr><td></td></tr>');
 
				}
				previous_tech = value;
			}

celle-ci vérifie le statuts de chaque projet

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function Checkstatus(value) {
			if(previous_status!=value){
				if(ctr>0) {
					document.writeln('<td colspan="5"></td>');
					document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">Sums:</td>');
					document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty + '</td>');
					document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty1 + '</td>');
 
					qty = 0.0;
					qty1 = 0.0;
				}
				ctr++;
 
				document.writeln('<tr><td></td></tr>');
				document.writeln('<tr>');
				document.writeln('<th colspan="3"></th>');
				document.writeln('<th colspan="10">'+value+'</th>');
				document.writeln('</tr>');
				document.writeln('<th width="3%">Req_ID</th>')
				document.writeln('<th width="25%">PM</th>')
				document.writeln('<th width="45%">Name</th>')
				document.writeln('<th width="10%">Status</th>')
				document.writeln('<th width="5%">Start Date</th>')
				document.writeln('<th width="5%">End Date</th>')
				document.writeln('<th width="5%">Pl. Cost</th>')
				document.writeln('<th width="5%">Pl. Price</th>')
				document.writeln('<th width="5%">Margin</th>')
				document.writeln('<tr><td></td></tr>');
 
			}
				previous_status = value;
		}

Enfin, c'est ici que j'appelle les fonctions

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<tbody>
 
					{{#rec.rows}}
					<script>CheckTechnician('{{fields.pm}}')</script>
					<script>Checkstatus('{{fields.status}}')</script>
 
 
 
						<tr>
							<td width="3%">{{fields.request}}</td>
							<td width="25%">{{fields.pm}}</td>
							<td width="45%">{{fields.name}}</td>
							<td width="10%">{{fields.status1}}</td>
							<td width="5%">{{fields.planned_start_date}}</td>
							<td width="5%">{{fields.planned_end_date}}</td>
							<td width="5%">{{fields.planned_cost}} <script>QuantitySum({{fields.planned_cost}})</script></td>
							<td width="5%">{{fields.planned_price}}<script>QuantitySum1({{fields.planned_price}})</script></td>
							<td width="5%">{{fields.planned_margin}}</td>
 
 
 
						</tr>
 
					{{/rec.rows}}
 
 
 
				</tbody>

Également, j'ai le petit soucis que mes totaux ne se font pas à la dernière section.
Merci

Citation:

Envoyé par belilan

Qty, Qty1 et ctr sont bien évidemment déclarés.

Tu fais bien de le préciser.

Il y a un truc qui m’interroge ici :
Code:

1 2 3 4 5 6 document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty + '</td>'); document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty1 + '</td>'); qty = 0.0; qty1 = 0.0; }
Pourquoi tu remets à zéro les variables après les avoir utilisées, et pas avant ?

28/10/2019, 13h35
belilan

Je vérifie les status des projets. Tant que c'est le même statut, j'additionne les montants. Dès que le statut change, je remets les sommes à zéro. Ça fonctionne bien, le seul problème c'est comme je l'ai expliqué, le positionnement de la somme au moment où on change de chargé de projet.

Citation:

Envoyé par belilan

Dès que le statut change, je remets les sommes à zéro.

Mais tu les inscris dans le HTML avant de les remettre à zéro. Tu ne fais pas les choses dans le bon ordre.

Cette confusion est sans doute dûe en partie au fait que tu utilises document.writeln qui t’oblige à suivre une façon de faire très linéaire et peu pratique. Je me suis retenu de faire une remarque là-dessus dans mon précédent post, mais il y a d’autres raisons encore plus importantes pour lesquelles tu devrais arrêter d’utiliser cette fonction, en particulier parce que document.write (ou writeln, c’est pareil) peut être désactivé par le navigateur dans certains cas, ce n’est donc aujourd’hui plus fiable de l’utiliser.
Je t’invite à lire Comprendre document.write() et Intervening against document.write().

En manipulant le HTML via son modèle objet (le DOM), tu gagneras en souplesse.

document.createElement() pour créer un tableau ;
table.insertRow() pour créer une ligne de tableau ;
row.insertCell() pour créer une cellule de tableau ;
la propriété .textContent pour insérer du texte dans un élément ;
appendChild() pour insérer un élément dans le DOM.

Un exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8" /> <title>Création de tableau via le DOM</title> <style> table { border-collapse: collapse; } td { padding: 0.5ex 1ex; min-width: 4em; } thead td { text-align: center; font-weight: bold; border-top: solid 2px black; border-bottom: solid 2px black; background-color: lightgray; color: red; } tbody tr:last-child { border-bottom: solid 2px black; } </style> </head> <body> <script> "use strict"; // voir https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode const table = document.createElement("table"); const thead = table.createTHead(); const headCell = thead.insertRow().insertCell(); headCell.colSpan = 2; headCell.textContent = "Machin"; const tbody = table.createTBody(); const row1 = tbody.insertRow(); const cell1a = row1.insertCell(); cell1a.textContent = "1a"; const cell1b = row1.insertCell(); cell1b.textContent = "1b"; const row2 = tbody.insertRow(); const cell2a = row2.insertCell(); cell2a.textContent = "2a"; const cell2b = row2.insertCell(); cell2b.textContent = "2b"; document.body.appendChild(table); </script> </body> </html>
Et si tu entends parler de innerHTML, sache qu’il existe mieux : insertAdjacentHTML, et bien qu’elle soit moins efficace que la méthode DOM pur en termes de temps de processeur, je reconnais qu’elle peut faire gagner du temps et de la clarté dans l’écriture du code. En gros, c’est une question de choix personnel.

28/10/2019, 16h26
belilan
Citation:

Envoyé par Watilin

Mais tu les inscris dans le HTML avant de les remettre à zéro. Tu ne fais pas les choses dans le bon ordre.

Okay, je me rends compte que la situation n'est pas facile à comprendre d'un point de vue externe, donc je vais m'expliquer plus clairement.

Tout d'abord, je voudrais dire que j'ai un niveau très basique en JavaScript, comme tu as pu t'en douter.
Ensuite, laisse moi t'expliquer dans quel cadre j'utilise ces rapports.

Nous utilisons une plateforme pour pour la gestion de nos taches et elle a été développée de telle façon que nous devons créer nos rapports de la manières suivantes:
1. Je crée différentes requêtes SQL pour accéder aux données désirées
2. Je récupère les données en les mentionnant via {{fields.planned_cost}}, et je peux les manipuler via des scripts
3. J'effectue mes sous-totaux via JavaScript car je ne peux faire que les totaux généraux via SQL
Je comprends qu'il y a certainement des manières plus modernes, mais d'une part, n'oublions pas que je n'affiche pas des pages WEB mais des rapports en PDF, et que certaines de ces manières peuvent ne pas fonctionner car notre système est plus ancien (nous attendons une nouvelle version l'année prochaine).

Pour finir, la question sur la remise à zéro de mes variables, c'est le seul endroit valide où je peux le faire, à tout autre endroit, mes sommes restent à 0, et si je ne fais pas mes remises à zéro, les sommes s'accumulent.
De plus, cette partie fonctionne correctement, puisque tous mes sous-totaux sont corrects, mon seul problème étant l'affichage du sous-total précédant le changement de chargé de projet se fait au mauvais endroit, soit après l'affichage du nom du nouveau chargé de projet au lieu d'avant.
Là est mon problème, si tu pouvais voir pourquoi, cela serait génial.

Merci

PS: Si je pouvais t'envoyer le rapport PDF, tu auras une vision complète du problème.

Aaaah ça y est je crois que j’ai compris ! Les chiffres entourés en rouge sont corrects, ils ne sont juste pas au bon endroit :mrgreen:

En fait, tu veux pouvoir détecter « à l’avance » que le technicien ou le statut va changer, et si oui, afficher le sous-total. Encore une fois, désolé d’insister mais c’est typiquement le genre de situation où document.writeln rend les choses inutilement compliquées. Mais bon, je vais essayer de respecter les contraintes du problème, parce que c’est aussi ça le dev :aie:

Il y a une moitié du problème qui est facile à résoudre, simplement en appelant Checkstatus() avant CheckTechnician(). Ça permettra d’afficher les sous-totaux avant l’en-tête de technicien.
Pour les derniers sous-totaux qui ne s’affichent pas, il faut rajouter un « semi-appel » à Checkstatus() à la fin de {{/rec.rows}}, je veux dire par-là qu’on a besoin d’une partie du code de la fonction, celui qui affiche qty et qty1, mais pas les <th> derrière. L’idéal serait de déplacer ce code dans une nouvelle fonction.
Un truc comme ça :
Code:

1 2 3 4 5 6 function writeSubtotals() { document.writeln('<td colspan="5"></td>'); document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">Sums:</td>'); document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty + '</td>'); document.writeln('<td colspan="1" style="border-top-style:solid;border-top-width: thin;font-weight: bold">' + qty1 + '</td>'); }
... Et :
Code:

1 2 3 4 5 6 7 8 9 10 11 function Checkstatus(value) { if (previous_status!=value) { if (ctr > 0) { writeSubtotals(); qty = 0.0; qty1 = 0.0; } ctr++; ...
… Et enfin :
Code:

1 2 {{/rec.rows}} <script>writeSubtotals();</script>

28/10/2019, 19h40
belilan

1 pièce(s) jointe(s)

Citation:

Envoyé par Watilin

Aaaah ça y est je crois que j’ai compris ! Les chiffres entourés en rouge sont corrects, ils ne sont juste pas au bon endroit :mrgreen:

Oui, c'est exactement cela.
Et j'avais déjà essayé d'inverser les scripts, mais alors le problème s'inverse. Le status s'affiche avant le chargé de projet comme dans la partie droite de la capture ci-dessous(en rouge) alors que c'téait correct dans la partie de gauche (en vert)

Pièce jointe 513644

Et même chose pour les suivants, à chaque changement de chargé de projets, le titre avec le statut se retrouve au mauvais endroit.
30/10/2019, 22h58
Watilin

Tu as essayé de déplacer une partie du code dans une troisième fonction comme je t’ai conseillé ?
31/10/2019, 13h35
belilan

J'ai commencé, mais je me suis arrêté à une question, dans cette troisième fonction, je n'ai plus le "value". Comment je récupère les sommes?
Et de plus, cela n'est que pour résoudre le problème de la dernière ligne, mais cela ne résout pas le problème principal du positionnement.