https://www.tema-agriculture-terroirs.fr/js/comparateur.js

1$(window).on("load", () => {
2    if (window.location.href.indexOf("comparateur/comparer") > -1) {       
3        updatePage();
4    }
5    else if(window.location.href.indexOf("comparateur") > -1){
6        updateBandeau();
7    }
8});
9
10// tableau de correspondance pour les champs de la paage de comparaison
11let correspondance = {
12    'modele' : 'Modèle',
13    'p_max_no_boost' : 'Puissance maximum sans boost',
14    'p_max_boost' : 'Puissance maximum avec boost',
15    'regime_nominal' : 'Régime nominal',
16    'c_max_no_boost' : 'Couple maximum (en Nm) sans boost',
17    'c_max_boost' : 'Couple maximum (en Nm) avec boost',
18    'c_regime_max' : 'Régime du couple maximum (en tr/min)',
19    'marque_moteur' : 'Marque du moteur',
20    'norme_moteur' : 'Norme du moteur',
21    'cylindree' : 'Cylindrée',
22    'nb_cylindres' : 'Nombre de cylindres',
23    'type_boite_vitesse' : 'Type de boite de vitesse',
24    'nb_rapport_avant' : 'Nombre de rapports avant',
25    'nb_rapport_arriere' : 'Nombre de rapports arrière',
26    'type_pdf_arriere' : 'Type de prise de force arrière',
27    'regime_pdf_arriere' : 'Régime de prise de force arrière',
28    'pdf_avant' : 'Prise de force avant',
29    'regime_pdf_avant' : 'Régime prise de force avant',
30    'force_relevage_arriere_max' : 'Force de relevage arrière maximum (en kg)',
31    'relevage_avant' : 'Relevage avant',
32    'force_relevage_avant' : 'Force de relevage avant',
33    'type_circuit' : 'Type de circuit hydraulique',
34    'debit_max_circuit' : 'Débit maximum du circuit hydraulique (en L/min)',
35    'nb_distributeur_arriere' : 'Nombre de distributeurs à l\'arrière',
36    'poids_vide_indicatif' : 'Poids à vide indicatif (en kg)',
37    'empattement' : 'Empattement (en m)',
38    'largeur' : 'Largeur (en m)',
39    'rayon_braquage' : 'Rayon de braquage minimum (en m)',
40    'hauteur_mini_cabine_basse' : 'Hauteur minimum avec cabine basse (en m)',
41    'hauteur_max' : 'Hauteur maximum (en m)',
42    'volume_reservoir_carburant' : 'Volume du réservoir de carburant (en L)',
43    'volume_reservoir_adblue' : 'Volume du réservoir d\'Adblue (en L)',
44    'derniere_modification' : 'Dernière modification',
45}
46
47function changeSelected(fiche) {
48    // on récupère les variables et on les passe tout de suite en string pour éviter de le faire plusieurs fois de suite
49    let isgtp = JSON.parse(localStorage.getItem('gtp'));
50    let gtp   = [];
51
52    if(isgtp === null){
53        gtp.push(fiche);
54        localStorage.setItem('gtp', JSON.stringify(gtp));
55    }
56    else{
57        let exists = false;
58
59        isgtp.forEach((f, key) => {
60            if(JSON.stringify(f) === JSON.stringify(fiche)){
61                isgtp.splice(key, 1);
62                localStorage.setItem('gtp', JSON.stringify(isgtp));
63                exists = true;
64            }
65        });
66
67        if(!exists){
68            if(isgtp.length >= 3){
69                alert("Vous avez déjà 3 tracteurs");
70                return false;
71            }
72            isgtp.push(fiche);
73            localStorage.setItem('gtp', JSON.stringify(isgtp));
74        }
75    }
76
77    updateBandeau();
78}
79
80// type à 0, on update le bandeau et sinon la page de comparaison
81function deleteAll(type = 0){
82    localStorage.removeItem('gtp');
83    if(type === 0){
84        updateBandeau();
85    }
86    else{
87        updatePage();
88    }
89}
90
91function deleteOne(marque, titre, type = 0){
92    let gtp = JSON.parse(localStorage.getItem('gtp'));
93    gtp.forEach((tracteur, index) => {
94        if(tracteur[0] === marque && tracteur[1] === titre){
95            gtp.splice(index, 1);
96        }
97    });
98
99    if(gtp[0] === undefined){
100        localStorage.removeItem('gtp');
101    }
102    else{
103        localStorage.setItem('gtp', JSON.stringify(gtp));
104    }
105
106    if(type === 0){
107        updateBandeau();
108    }
109    else{
110        updatePage();
111    }
112
113}
114
115function loadTractors() {
116    let storage = JSON.parse(localStorage.getItem('gtp'));
117    if (storage === null) {
118        return Promise.resolve([]); // Retourne une promesse résolue avec un tableau vide si storage est null
119    }
120
121    // Crée un tableau de promesses pour chaque requête AJAX
122    let promises = storage.map(fiche => {
123        return $.ajax({
124            type: "POST",
125            url: "/comparateur/tracteur",
126            data: { "marque": fiche[0], "titre": fiche[1], "bandeau": true },
127            dataType: "json",
128        });
129    });
130
131    // Utilise Promise.all pour attendre la résolution de toutes les promesses
132    return Promise.all(promises).then(responses => {
133        return responses; // Retourne le tableau des réponses
134    }).catch(error => {
135        console.error("Error loading tractors", error);
136        throw error; // Propage l'erreur
137    });
138}
139
140function updatePage(){

141    loadTractors().then(tracteurs => {
142        let nbtracteurs = tracteurs.length;
143        let html        = "";
144        
145        if(nbtracteurs === 0){
146            html += "<tr>";
147            for(i = 0; i < 3; i++) {
148                html += "<th class='add-tracteur'>" +
149                            "<div class='block-add'>" +
150                                "<a href='/comparateur' class='add'></a>" +
151                                "<p>Ajouter un tracteur</p>" +
152                            "</div>" +
153                        "</th>";
154            };
155            html += "</tr>";
156            $('#contenu-comparateur').html(html);
157        }
158        else {
159            // on génère le header
160            html += "<tr>";
161            for(let i = 0; i < 3; i++){
162                if(tracteurs[i] !== undefined){
163                    url = baseUrl + 'files/' + tracteurs[i][0]['id_image'] + '/methodes/comparateur/image.jpg';
164                    html += "<th>" +
165                                "<div class='trash' onclick='javascript:deleteOne(\""+ tracteurs[i][0]['marque'] + "\",\"" + tracteurs[i][0]['titre'] + "\", 1)'></div>" +
166                                "<img src='" + url + "'/>" +
167                                "<p class='label'>Marque et gamme</p>" +
168                                "<p class='info-bold'>" + tracteurs[i][0]['marque'] + "</p>" +
169                                "<p class='info'>" + tracteurs[i][0]['gamme'] + "</p>" +
170                            "</th>";
171                }
172                else{
173                    html += "<th class='add-tracteur'>" +
174                                "<div class='block-add'>" +
175                                    "<a href='/comparateur' class='add'></a>" +
176                                    "<p>Ajouter un tracteur</p>" +
177                                "</div>" +
178                            "</th>";
179                }
180            }
181            html += "</tr>";
182
183            //on génère le contenu du tableau
184            for (key in tracteurs[0][0]){
185                if(!(["_id", "nom_photo", "vues"].includes(key))){
186                    html += "<tr>";
187                    for(let i = 0; i < 3; i++){
188                        if(tracteurs[i] !== undefined){
189                            html += "<td>" +
190                                        "<p class='label'>" + (correspondance[key] ?? key) + "</p>" +
191                                        "<p class='info-bold'>" + tracteurs[i][0][key] + "</p>" +
192                                    "</td>";
193                        }
194                        else{
195                            html += "<td></td>";
196                        }
197                    }
198                    html += "</tr>";
199                }
200            }
201
202            $('#contenu-comparateur').html(html);
203        }
204        $('#titre_bandeau').html("<strong>Comparateur</strong>" + "(" + tracteurs.length + "/3)");
205    });
206}
207
208function updateBandeau(){
209    loadTractors().then(tracteurs => {
210        let nbtracteurs = tracteurs.length;
211        let html        = "";
212        let spacer      = "<div class='more'>+</div>";
213        let boutons     = "<div class='card links'>" +
214                            "<a class='compare' href='/comparateur/comparer'>Voir la comparaison<span class='ico-compare'></span>" +
215                            "</a>" +
216                            "<a class='suppr' onclick='javascript:deleteAll()'>Tout supprimer<span class='ico-suppr'></span>" +
217                            "</a>" +
218                          "</div>";
219
220        if(nbtracteurs === 0){
221            for(i = 0; i < 3; i++) {
222                html += "<div class='card block no-selected'>" +
223                            "<div class='bg'>" +
224                                "<a href='/comparateur' class='add'></a>" +
225                                "<p>Ajouter un tracteur</p>" +
226                            "</div>" +
227                        "</div>";
228                if(i !== 2){
229                    html += spacer;
230                }
231            };
232            html += boutons;
233        }
234        else if(nbtracteurs !== 3){
235            nbtracteurs = 3 - nbtracteurs;

236            tracteurs.forEach((t, i) => {
237                url = baseUrl + 'files/' + tracteurs[i][0]['id_image'] + '/methodes/comparateur/image.jpg';
238                html += "<div class='card block selected'>" +
239                            "<div class='trash' onclick='javascript:deleteOne(\""+ tracteurs[i][0]['marque'] + "\",\"" + tracteurs[i][0]['titre'] + "\")'></div>" +
240                            "<div class='bg'>" +
241                                "<img src='" + url +"' alt=''>" +
242                            "</div>" +
243                            "<div class='contenu-card'>" +
244                                "<h3 class='tt'>" + t[0].titre + "</h3>" +
245                                "<p>" + t[0].marque + "</p>" +
246                                "<a href='/comparateur/fiche?id=" + t[0]._id.$oid + "'>En savoir plus</a>" +
247                            "</div>" +
248                        "</div>" +
249                        "<div class='more'>+</div>";
250            });
251
252            for (let i = 0; i < nbtracteurs; i++) {
253                html += "<div class='card block no-selected'>" +
254                            "<div class='bg'>" +
255                                "<a href='/comparateur' class='add'></a>" +
256                                "<p>Ajouter un tracteur</p>" +
257                            "</div>" +
258                        "</div>";
259                if(i === 0 && nbtracteurs !== 1){
260                    html += spacer;
261                }
262            }
263
264            html += boutons;
265        }
266        else {
267            tracteurs.forEach((t, i) => {
268                url = baseUrl + 'files/' + tracteurs[i][0]['id_image'] + '/methodes/comparateur/image.jpg';
269                html += "<div class='card block selected'>" +
270                            "<div class='trash' onclick='javascript:deleteOne(\""+ tracteurs[i][0]['marque'] + "\",\"" + tracteurs[i][0]['titre'] + "\")'></div>" +
271                            "<div class='bg'>" +
272                                "<img src='" + url + "' alt=''>" +
273                            "</div>" +
274                            "<div class='contenu-card'>" +
275                                "<h3 class='tt'>" + t[0].titre + "</h3>" +
276                                "<p>" + t[0].marque + "</p>" +
277                                "<a href='/comparateur/fiche?id=" + t[0]._id.$oid + "'>En savoir plus</a>" +
278                            "</div>" +
279                        "</div>";
280                if(i !== 2){
281                    html += spacer;
282                }
283            });
284
285            html += boutons;
286        }
287
288        $('#bandeau').html(html);
289        $('#titre_bandeau').html(
290            "<strong>Comparateur</strong>" +
291		        "(" + tracteurs.length + "/3)" +
292		    "<span class='bt-open-close'></span>"
293        );
294
295        $(".box-titre").click(function (event) {
296            $(".bt-open-close").toggleClass("toggle");
297            $(".box-comparatif").toggleClass("box-close");
298            event.stopPropagation();
299     
300        });
301    }).catch(error => {
302        console.error("Failed to load tractors", error);
303    });
304}