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 au fonctionnement n'ont pas été trouvés dans le DOM;");

        const converter=new FreeDatas2HTML("CSV");
        const myRender=new Render();
        myRender.settings.allBegining="<table class='table-hover'><caption>Nombre de résultats : <span  id='counter'></span></caption>";
        converter.datasRender=myRender;

        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 document que vous avez sélectionné ne semble pas être un fichier CSV valide.</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>`;
                        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} checked> <span>${converter.fields[i]}</span></label>`;
                        fieldsSelectorHTML+=`</fieldset>`;
                        dataDisplayOptionsElt.innerHTML=fieldsSelectorHTML+`<button type="submit" class="btn-success">Valider</button>`;
                    };
                    reader.readAsText(selectedFiles[0]);
                }
            }
        });

        myForm.addEventListener("submit", function(e)
       {
            e.preventDefault();
            dataDisplayElt.innerHTML="";
            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( 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" };

                // + Un moteur de recherche :
                const mySearch=new SearchEngine(converter, { id:"search" });
                mySearch.label="Qui cherche trouve ?";
                mySearch.btnTxt="Va chercher !";
                mySearch.automaticSearch=true;
                mySearch.nbCharsForSearch=2;
                mySearch.placeholder="Saisir un moins 2 caractères";
                mySearch.filter2HTML();
                converter.datasFilters=[mySearch];

                // + Pagination :
                const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
                pagination.options={ displayElement: { id:"paginationOptions" }, values: [10,20,50,500] , name: "Choix de pagination :" };
                pagination.selectedValue=10;
                converter.pagination=pagination;
                pagination.options2HTML();

                // Actualisation de l'affichage
                converter.refreshView();

                // + Compteur :
                converter.datasCounterElt={ id:"counter" };
                converter.datasCounter2HTML();

                // +Toutes les colonnes classables :
                let sortingField: SortingField;
                for(let i=0; i < converter.fields2Rend.length; i++)
                {
                    sortingField=new SortingField(converter, i);
                    sortingField.field2HTML();
                    converter.datasSortingFields.push(sortingField);
                }
            }
       });
    }
    catch(e)
    {
        console.error(e);
        if(document.getElementById("datas")!==null)
            document.getElementById("datas")!.innerHTML=`<strong>Désolé, mais un problème imprévu empêche l'affichage des données.</strong>`;
    }
}
initialise();