feat: Aggiunta gestione delle traduzioni

Aggiungo il codice per la gestione delle traduzioni che prendendo un file di traduzioni sulla base di quanto scelto nella pagina traduce i testi nella lingua scelta

Author: polilluminato

js/app.js

@@ -13,12 +13,14 @@ $(function (e) {
     var arrayDataRegioni = [];
     var arrayRefGrafici = []; //Array che mi tiene i riferimenti ai grafici in modo che possa cambiare le loro impostazioni
 
+    var prefLang = 'it';
+
     //Nomi dei valori che vengono messi a disposizionne dal file JSON della protezione civile
     var tutteStats = [
-        { key: "totale_casi", titolo:"Totale Casi", color: "#FFDD57", backgroundColor: "#fff3c3"}, 
-        { key: "dimessi_guariti", titolo:"Dimessi Guariti", color: "#48C774", backgroundColor: "#cbffde"},
-        { key: "deceduti", titolo:"Deceduti", color: "#F14668", backgroundColor: "#ffb9c6"},
-        { key: "terapia_intensiva", titolo:"Terapia Intensiva", color: "#0066CC", backgroundColor: "#cce1ff"},
+        { key: "totale_casi", titolo: "c19ti_totale_casi", color: "#FFDD57", backgroundColor: "#fff3c3"}, 
+        { key: "dimessi_guariti", titolo: "c19ti_dimessi_guariti", color: "#48C774", backgroundColor: "#cbffde"},
+        { key: "deceduti", titolo:"c19ti_deceduti", color: "#F14668", backgroundColor: "#ffb9c6"},
+        { key: "terapia_intensiva", titolo:"c19ti_terapia_intensiva", color: "#0066CC", backgroundColor: "#cce1ff"},
         //{ key: "totale_attualmente_positivi", titolo:"Totale Attualmente Positivi"},
         //{ key: "nuovi_attualmente_positivi", titolo:"Nuovi Attualmente Positivi"},
         //{ key: "ricoverati_con_sintomi", titolo:"Ricoverati con sintomi"},
@@ -27,6 +29,32 @@ $(function (e) {
         //{ key: "tamponi", titolo:"Tamponi"}
     ];
 
+    //Funzione che mi traduce tutti i testi all'interno della pagina
+    function updateTraduzioniPage(){
+
+        $.getJSON(`i18n/${prefLang}.json`, function(json) {
+
+            let objTraduzioni = json;
+            
+            //Prendo tutti gli elementi che devo tradurre
+            let elems = document.querySelectorAll('[data-i18n]');
+            elems.forEach((single)=>{
+                let keyToSearch = single.getAttribute('data-i18n');
+                //Faccio il loop di tutto il mio oggetto per le traduzioni andando a cercare la chiave che mi serve tradurre
+                for (const key of Object.keys(objTraduzioni)) {
+                    //Ho trovato la chiave che devo tradurre
+                    if(keyToSearch == key){
+                        //Prendo la sua traduzione e la metto come testo
+                        $(`[data-i18n="${key}"]`).text(objTraduzioni[key])
+                        return;
+                    } else {
+                        console.log(key)
+                    }
+                }
+            });
+        });
+    }
+
     //Funzione che prendendo il JSON ritornato dalla chiamata al repo della protezione civile
     //  mi formatta i valori negli array che mi servono per creare i grafici
     function getValoriFormattati(allStats) {
@@ -77,23 +105,23 @@ $(function (e) {
             document.getElementById("sezione_grafici").innerHTML += 
                 `<div class="columns is-multiline singola_sezione">
                     <div class="column is-full">
-                        <p class="title is-4">${singolaStat.titolo}</p>
+                        <p class="title is-4" data-i18n="${singolaStat.titolo}"></p>
                     </div>
                     <div class="column is-half">
                         <div class="titolo">
-                            <p class="title is-5">Andamento Cumulativo</p>
+                            <p class="title is-5" data-i18n="c19ti_andamento_cumulativo"></p>
                             <div class="sezione_bottoni">
                                 <button class="button is-small bottone btn_change_scala_grafico is-info is-light" 
-                                    data-progressivo="${index*2}" data-tipo="logarithmic">LOGARTIMICO</button>
+                                    data-progressivo="${index*2}" data-tipo="logarithmic">LOG</button>
                                 <button class="button is-small bottone btn_change_scala_grafico is-info" 
-                                    data-progressivo="${index*2}" data-tipo="linear">LINEARE</button>
+                                    data-progressivo="${index*2}" data-tipo="linear">LIN</button>
                             </div>
                         </div>
                         <canvas id="chart-${singolaStat.key}_cumulativo"></canvas>
                     </div>
                     <div class="column is-half">
                         <div class="titolo">
-                            <p class="title is-5">Valori Singoli Giornalieri</p>
+                            <p class="title is-5" data-i18n="c19ti_valori_singoli_giornalieri"></p>
                         </div>
                         <canvas id="chart-${singolaStat.key}_giornaliero"></canvas>
                     </div>
@@ -165,6 +193,8 @@ $(function (e) {
 
         let objValori = getValoriFormattati(arrayDati);
         creaGrafici(objValori);
+        //Aggiorno le traduzioni
+        updateTraduzioniPage();
     }
 
     //Funzione che mi crea un array con solo le regioni per la select con cui filtro i dati
@@ -251,5 +281,22 @@ $(function (e) {
         $("button.btn_change_scala_grafico[data-progressivo='" + progressivo +"']").toggleClass('is-light');
     });
 
+    //Funzione che sente il click per il cambio di lingua
+    $('.btn-lingua').click(function(){
+        if($(this).hasClass('active')){ //Il bottone è già attivo e io lo sto premendo di nuovo
+            return;
+        }
+
+        let newPrefLang = $(this).data('lang');
+        console.log(newPrefLang);
+        prefLang = newPrefLang; //Setto la nuova lingua
+        //Aggiorno le traduzioni
+        updateTraduzioniPage();
+
+        //Cambio lo stato dei bottoni
+        $(this).closest('.col-switch-lingua').find('.active').removeClass('active');
+        $(this).addClass('active');
+
+    });
 
 })