FreeDatas2HTML/src/exampleWithUserFile.ts

import { FreeDatas2HTML, Pagination, Render, SearchEngine, Selector, SortingField } from "./FreeDatas2HTML";

const initialise = async () =>
{
    try
    {
        const myForm=document.getElementById("userSettings") as HTMLElement;
        const myFile=document.getElementById("myFile") as HTMLInputElement;
        const  dataDisplayElt=document.getElementById("datas");
        const  dataDisplayOptionsElt=document.getElementById("displayOptions");

        if(myFile === null || myForm === null || dataDisplayOptionsElt === null || dataDisplayElt === null)
            throw new Error("Certains éléments nécessaires n'ont pas été trouvés dans le DOM;");

        const converter=new FreeDatas2HTML("CSV");

        myFile.addEventListener("change", function(e)
       {
            dataDisplayElt.innerHTML="";
            dataDisplayOptionsElt.innerHTML="";
            const selectedFiles=myFile.files;
            if(selectedFiles !== null && selectedFiles.length === 1)
            {
                if(selectedFiles[0].type !== "text/csv" && selectedFiles[0].type !== "text/tsv")
                    dataDisplayOptionsElt.innerHTML=`<p class='text-danger'>Le fichier que vous avez sélectionné ne semble pas être un fichier CSV ?</p>`;
                else
                {
                    const reader=new FileReader();
                    reader.onload=async function(e)
                    {
                        converter.parser.datas2Parse=reader.result as string;
                        await converter.run();

                        let fieldsSelectorHTML=`<fieldset class="form-group"><legend>Quels champs souhaitez-vous afficher ?</legend>`;
                        let filtersSelectorHTML=`<fieldset class="form-group"><legend>Avec quels champs souhaitez-vous pouvoir filtrer vos données ?</legend>`;
                        for(let i=0; i < converter.fields.length; i++)
                        {
                             fieldsSelectorHTML+=`<label for="selectedField_${i}" class="paper-check"> <input type="checkbox" class="selectedFields" id="selectedField_${i}" name="selectedField_${i}" value=${i}> <span>${converter.fields[i]}</span></label>`;
                             filtersSelectorHTML+=`<label for="selectedFilter_${i}" class="paper-check"> <input type="checkbox" class="selectedFilters" id="selectedFilter_${i}" name="selectedFilter_${i}" value=${i}> <span>${converter.fields[i]}</span></label>`;
                         }
                        fieldsSelectorHTML+=`</fieldset>`;
                        filtersSelectorHTML+=`</fieldset>`;
                        dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+filtersSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
                    };
                    reader.readAsText(selectedFiles[0]);
                }
            }
        });

        myForm.addEventListener("submit", function(e)
       {
            e.preventDefault();
            const fields2Rend: number[]=[];
            let checkBox: HTMLInputElement, nbSelector=0;
            for(let i=0; i < converter.fields.length; i++)
            {
                checkBox=document.getElementById("selectedField_"+i) as HTMLInputElement;
                if(checkBox !== null)
                {
                    if(checkBox.checked)
                        fields2Rend.push(i);
                }
                if(nbSelector < 3)
                {
                    checkBox=document.getElementById("selectedFilter_"+i) as HTMLInputElement;
                    if(checkBox !== null)
                    {
                        if(checkBox.checked)
                        {
                            nbSelector++;
                            let filtre1=new Selector(converter, i, { id:"filtre"+nbSelector} );
                            filtre1.filter2HTML();
                            converter.datasFilters.push(filtre1);
                        }
                    }
                }
            }

            /// + rendre classable toutes les colonnes
            /// + ajout moteur de recherche
            /// + nombre de résultat
            /// + rendu autre que tableau ou alors permettre scroll horizontale ?
            if( fields2Rend.length === 0)
                dataDisplayElt.innerHTML=`<p class='text-danger'>Vous n'avez sélectionné aucun champ à afficher !</p>`;
            else
            {
                converter.fields2Rend=fields2Rend;
                converter.datasViewElt={  id:"datas" };
                converter.run();// run pour prendre les champs à afficher, mais refreshView devrait suffire !
            }
       });
    }
    catch(e)
    {
        console.error(e);
        if(document.getElementById("datas")!==null)
            document.getElementById("datas")!.innerHTML="<strong>Désolé, mais un problème technique empêche l'affichage des données.</strong>";
    }
}
initialise();