Discussion :

[belilan]

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.



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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Watilin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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.

[Watilin]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[belilan]

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.

[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

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[belilan]

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

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)



Et même chose pour les suivants, à chaque changement de chargé de projets, le titre avec le statut se retrouve au mauvais endroit.

[Watilin]

Tu as essayé de déplacer une partie du code dans une troisième fonction comme je t’ai conseillé ?

[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.