Ouvrir une barre d'attente pendant l'exécution d'un script

**Aschel** · 21/02/2018, 18h00

Bonjour,

Mon problème me parait simple mais je n'arrive pas à trouver une solution sur internet.
J'ai créé une page HTML qui prend en entré un fichier texte (.txt), le lit puis le transforme en tableau. Je transforme le tableau et je fabrique un nouveau document texte.
Le problème, c'est qu'en fonction du document d'entré, le processus peut être assez long (quelque minutes parfois).

Je voudrais donc faire afficher une barre d'attente afin de montrer à l'utilisateur que la page tourne et n'a pas planté.
J'ai trouvé une barre qui corresponds à ce que je voudrais faire afficher (https://gist.github.com/taykcrane/bbf13fe4ce9589381f6c)

Mais lorsque j'intègre cette barre et que je lance le script, la barre se fige jusqu'à ce que les scripts ait fini de tourner.
J'ai vu qu'une solution serait d'utiliser <iframe> mais cela me rajoute juste ma barre dans l'affichage et elle se stop quand même lorsque je lance le script.

Il faudrait idéalement que la fenêtre avec la barre d'attente se lance à l'extérieur de ma page et que je puisse la fermer lorsque les scripts se finissent.

Si vous avez des solutions ou des suggestions, je suis preneur.

Cordialement

**psychadelic** · 21/02/2018, 22h49

Pas la moindre ligne de code pour voir déjà comment tu t'y prend et permettre de dire ce qui peut clocher dans ton code ??

On est sensés deviner ??

**Aschel** · 22/02/2018, 09h12

Bonjour,

Désolé pour le code.
Voici le code HTML que j'utilise dans ma page principale :

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
<!DOCTYPE html>
<html>
  <head>
</head>
<body onload="checkFileAPI();">
    <div id="container">    
        Choisissez un fichier FEC à importer <input type="file" onchange="readText(this)" accept=".txt"/>
        <br/>
        <hr/> 
        <iframe src="ProgressBar.html" name="targetframe" allowTransparency="false" scrolling="no" frameborder="2">
        </iframe>
        <textarea id="inputTexteAEnregistrer" style="width:2512px;height:256px;display:none"></textarea>
    </div>
</body>
</html>

Et voila le code de ProgressBar.html :

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
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
    <style>
        #loadingProgressG {
            width: 166px;
            height: 13px;
            overflow: hidden;
            background-color: rgb(29, 23, 181);
            margin: auto;
            border-radius: 6px;
            -o-border-radius: 6px;
            -ms-border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
        }
 
        .loadingProgressG {
            background-color: rgb(255, 255, 255);
            margin-top: 0;
            margin-left: -166px;
            animation-name: bounce_loadingProgressG;
            -o-animation-name: bounce_loadingProgressG;
            -ms-animation-name: bounce_loadingProgressG;
            -webkit-animation-name: bounce_loadingProgressG;
            -moz-animation-name: bounce_loadingProgressG;
            animation-duration: 3.45s;
            -o-animation-duration: 3.45s;
            -ms-animation-duration: 3.45s;
            -webkit-animation-duration: 3.45s;
            -moz-animation-duration: 3.45s;
            animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-timing-function: linear;
            -o-animation-timing-function: linear;
            -ms-animation-timing-function: linear;
            -webkit-animation-timing-function: linear;
            -moz-animation-timing-function: linear;
            width: 166px;
            height: 13px;
        }
 
 
 
        @keyframes bounce_loadingProgressG {
            0% {
                margin-left: -166px;
            }
 
            100% {
                margin-left: 166px;
            }
        }
 
        @-o-keyframes bounce_loadingProgressG {
            0% {
                margin-left: -166px;
            }
 
            100% {
                margin-left: 166px;
            }
        }
 
        @-ms-keyframes bounce_loadingProgressG {
            0% {
                margin-left: -166px;
            }
 
            100% {
                margin-left: 166px;
            }
        }
 
        @-webkit-keyframes bounce_loadingProgressG {
            0% {
                margin-left: -166px;
            }
 
            100% {
                margin-left: 166px;
            }
        }
 
        @-moz-keyframes bounce_loadingProgressG {
            0% {
                margin-left: -166px;
            }
 
            100% {
                margin-left: 166px;
            }
        }
    </style>
</head>
 
<body>
    <div id="loadingProgressG">
        <div id="loadingProgressG_1" class="loadingProgressG"></div>
    </div>
</body>
 
</html>

Et finalement, voici le code en JS. Je précise que le code js est pas finalisé (je travaille dessus à l'heure actuelle) et qu'il provient de plusieurs morceaux de codes que j'ai déjà dev et j'ai compilé ici.

Code Javascript :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
var reader;
 
/**
 * Check for the various File API support.
 */
function checkFileAPI() {
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        reader = new FileReader();
        return true;
    } else {
        alert('The File APIs are not fully supported by your browser. Fallback required.');
        return false;
    }
}
 
/********************************************************
 * Lit le fichier d'entré puis lance les différentes fonction de test
 * Fabrique ensuite le fichier FEC modifié à importer
 *********************************************************/
function readText(filePath) {
    var output = "";
    var typeFEC = "";
 
    if (filePath.files && filePath.files[0]) {
        reader.onload = function (e) {
            console.log("début");
            output = e.target.result;
            var tableau = decoupeTxt(output);
            console.log("découpé terminé");
            var erreurDebitCreditVide = testDebitCredit(tableau);
            if (erreurDebitCreditVide > 0) {
                alert('Ligne sans Debit/credit ou ligne à 0/0 à la ligne : ' + erreurDebitCreditVide)
                return;
            }
            var typeFEC = selectTypeFEC(tableau);
            console.log("type FEC terminé")
            var tableauFull = fillTableau(tableau, typeFEC);
            console.log("retraitement terminé");
 
            creationFECModifie(tableauFull);
            sommeDebitCredit(tableauFull);
            console.log("création terminé");
            enregistreTexteCommeFichier();
            console.log("terminé");
        };
        reader.readAsText(filePath.files[0]);
    }
    return true;
}
 
/***********************************************************
 * On découpe le fichier en un tableau pour faire les tests
 ***********************************************************/
function decoupeTxt(texte) {
    var tableau = [];
    var tableau2 = [];
    tableau = texte.split(/\r\n/);
    tableau2 = tableau[0].split('\t');
    var delimiter = '\t';
    if (tableau2.length == 1) {
        tableau2 = tableau[0].split('|');
        var delimiter = '|';
    }
    var nbColonne = tableau2.length;
    for (var i = 0; i < tableau.length; i++) {
        var tab = tableau[i].split(delimiter);
        tableau[i] = new Array(nbColonne);
        for (var j = 0; j < nbColonne; j++) {
            tableau[i][j] = tab[j];
        }
    }
    return tableau;
}
 
function testDebitCredit(tableau) {
    for (var i = 0; i < tableau.length; i++) {
        if (tableau[i][12] == "" & tableau[i][11] == "") {
            return i;
        }
        if (tableau[i][12] == 0 & tableau[i][11] == 0) {
            return i;
        }
    }
}
 
function selectTypeFEC(tableau) {
    var cwfAbs = 0;
 
    if (tableau[1][12] == "D" | tableau[1][12] == "C") {
        return "D/C";
    }
 
    for (var i = 0; i < tableau.length; i++) {
        cwfAbs += Math.abs(tableau[i][12])
    }
    if (cwfAbs == tableau.length) {
        return "+1/-1";
    }
 
    return "Debit/Credit";
}
 
function fillTableau(tableau, typeFEC) {
    //On rempli la colonne du nom de compte
    tableau[0][22] = "Nom du compte";
    for (var i = 1; i < tableau.length; i++) {
        if (tableau[i][7] != "") {
            tableau[i][22] = tableau[i][7];
        }
        else {
            tableau[i][22] = tableau[i][5];
        }
    }
 
    //On rempli les nouvelles colonnes Débit/Crédit en fonction du type
    tableau[0][23] = "Débit";
    tableau[0][24] = "Crédit";
    for (var i = 1; i < tableau.length; i++) {
        switch (typeFEC) {
            case "D/C":
                if (tableau[i][12] == "D") {
                    tableau[i][23] = tableau[i][11];
                    tableau[i][24] = 0;
                }
                else if (tableau[i][12] == "C") {
                    tableau[i][23] = 0;
                    tableau[i][24] = tableau[i][11];
                }
                break;
            case "+1/-1":
                if (tableau[i][12] == "-1") {
                    tableau[i][23] = tableau[i][11];
                    tableau[i][24] = 0;
                }
                else if (tableau[i][12] == "1") {
                    tableau[i][23] = 0;
                    tableau[i][24] = tableau[i][11];
                }
                break;
            default:
                tableau[i][23] = tableau[i][11];
                tableau[i][24] = tableau[i][12];
                break
        }
    }
 
    //On remplit la colonne des numéros de compte
    tableau[0][25] = "Numéro de compte";
    for (var i = 1; i < tableau.length; i++) {
        var aux = tableau[i][6];
        if ((tableau[i][6] + "").replace(/^\s+|\s+$/g, "") != "") {
            tableau[i][25] = tableau[i][4] + "." + tableau[i][6];
        }
        else {
            tableau[i][25] = tableau[i][4];
        }
    }
 
    //On remplit la colonne des ID
    var tabId = [];
    var iDJournaux = new Object();
 
    var cwfId = "";
    var nbId = 1;
 
    tableau[0][26] = "ID de journal";
    for (var i = 1; i < tableau.length; i++) {
        var exist = false;
        var existCour = false;
        cwfId = tableau[i][0];
        for (var j in iDJournaux) {
            if (cwfId == j) {
                exist = true;
            }
        }
        if (exist == false) {
            if (cwfId.length < 3) {
                iDJournaux[cwfId] = cwfId;
            }
            else {
                cwfIdCourt = tableau[i][0].substr(0, 2);
                for (var k in iDJournaux) {
                    if (cwfIdCourt == iDJournaux[k]) {
                        existCour = true;
                    }
                }
                if (existCour) {
                    cwfIdCourt = tableau[i][0].substr(0, 1) + nbId;
                    nbId++;
                }
                iDJournaux[cwfId] = cwfIdCourt;
            }
        }
        tableau[i][26] = iDJournaux[cwfId];
    }
    return tableau;
}
 
function sommeDebitCredit(tableau) {
    var cwfSommeCredit = 0;
    var cwfSommeDebit = 0;
    for (var i = 1; i < tableau.length - 1; i++) {
        cwfSommeCredit = cwfSommeCredit + Number((tableau[i][24] + "").replace(",", "."));
        cwfSommeDebit = cwfSommeDebit + Number((tableau[i][23] + "").replace(",", "."));
    }
    if (cwfSommeCredit != cwfSommeDebit) {
        return false
    }
}
 
function creationFECModifie(tableau) {
    var el = document.getElementById('inputTexteAEnregistrer');
    var m = 0;
    var text = "";
 
    for (var i = 0; i < tableau.length - 1; i++) {
        for (var j = 0; j < 26; j++) {
            if (m < 25) {
                text += tableau[i][j] + "\t";
                m++;
            }
            else {
                text += tableau[i][j] + "\n";
                m = 0;
            }
        }
    }
    el.value = text;
}
 
function enregistreTexteCommeFichier() {
    var texteAecrire = document.getElementById("inputTexteAEnregistrer").value;
    var texteFichierVersBlob = new Blob([texteAecrire], { type: 'text/plain' });
    var fichierAEnregistrerSous = "FEC test";
 
    var lienDeTelechargement = document.createElement("a");
    lienDeTelechargement.download = fichierAEnregistrerSous;
    lienDeTelechargement.innerHTML = "Télécharger le fichier";
    if (window.webkitURL != null) {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        lienDeTelechargement.href = window.webkitURL.createObjectURL(texteFichierVersBlob);
    }
    else {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        lienDeTelechargement.href = window.URL.createObjectURL(texteFichierVersBlob);
        lienDeTelechargement.onclick = destroyClickedElement;
        lienDeTelechargement.style.display = "none";
        document.body.appendChild(lienDeTelechargement);
    }
 
    lienDeTelechargement.click();
}
 
function destroyClickedElement(event) {
    document.body.removeChild(event.target);
};
 
function trim(stringToTrim) {
    return stringToTrim.replace(/^\s+|\s+$/g, "");
}

Merci d'avance pour vos retours.

Cordialement

**Vil'Coyote** · 22/02/2018, 12h02

une progresse barre sur un travail dont tu ne connais la durée cela me paraît inutile. il serait plus simple d'afficher un élément indiquant que le travail est en cour et une fois terminer masquer cette élément

https://www.w3schools.com/howto/howto_css_loader.asp

**Aschel** · 22/02/2018, 12h21

Bonjour,

C'est que je voulais dire par barre d'attente.
Désolé si je me suis mal exprimé.
Dans le code que j'ai montré, la barre en question fait simplement des allez/retour sans arrêt. Elle n'est aucunement progressive.

J'avais déjà trouvé les loaders mais c'est le coté circulaire qui me dérangeait un peu (je préfèrerait une barre horizontal qui fait des aller/retour). Mais si il n'y a rien de mieux, je prendrais ça.

Je précise (si cela a une importance) que tous les fichiers (y compris la page HTML) sont en local et ne sont pas hébergé sur un serveur.

Cordialement

**psychadelic** · 22/02/2018, 14h05

Heu,
tu utilise des fonction purement Microsoft pour lire tes fichiers non ?
Cad dire que ton code est fait pour ne fonctionner uniquement que sur un pc sous Windows ?
Et popint de vue navigateur, est-ce qu'il s'agit de vielles versions IE ou est-ce uniquement sur Edge ?

J'ai rien contre, mais c'est quand même important à savoir pour la suite.

**Aschel** · 22/02/2018, 14h20

Je fonctionne uniquement pour Windows
Pour être exact, je travaille pour une boite qui vends/dev un logiciel qui n'est compatible que sur Windows donc je n'est pas d’intérêt de développer des scripts qui tourneraient sur d'autre OS

Concernant le navigateur, il ne s'agit pas de veille version de IE mais plutôt des récentes.

**psychadelic** · 22/02/2018, 16h57

de toutes facçons, ton pb est relativement simple à résoudre :

1 - avant toute opération "longue" : lancer l'animation
en général on rens un ojet visible et on met lui fout dedans soit un gif annimé, soit une animation css qu'on attribue via une class, soit une animation js avec un jeu de setTimeout qui se relance.

On effectue "l'opération longue en tache de fond"

Quand cette opération est terminée on retire l'annimation
si c'était en css on enleve la classe, si c'était en js on stop le timeout (il a un identifiant)

et on affiche le résultat en lieu et place.

je coté pratique de javascript c'est qu'il permet de lancer des opération asynchrones.

exemple avec un fetch :

Code javascript :

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
    // afficher l' animation...
	document.getElementById("loadingProgressG").style.display = 'block';
	document.getElementById("loadingProgressG_1").classList.add('loadingProgressG');
 
	var myRequest = new Request('fichierxyz.txt');
 
	fetch(myRequest)
	.then(function(response) { return response.text() })
	.then(function(text) {
 
		 // retirrer_animation...
		document.getElementById("loadingProgressG_1").classList.remove('loadingProgressG');
		document.getElementById("loadingProgressG").style.display = 'none';
 
		myArticle.innerHTML = text;
	});

**Aschel** · 01/03/2018, 16h21

Bonjour,

Je connais pas les fetch
Je vais essayer de voir ce que je peux faire avec ça.

Merci de l'info

Ouvrir une barre d'attente pendant l'exécution d'un script

HTML

Discussions similaires

Partager

Partager