FreeDatas2HTML/src/exampleWithJSON.ts

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

const initialise = async () =>
{
    try
    {        
        // Création d'un convertisseur parsant des données transmises en JSON
        let converter=new FreeDatas2HTML("JSON");
        converter.parser.setRemoteSource({ url: "http://localhost:8080/datas/posts.json", withCredentials:true, headers: [{ key:"Authorization", value:"Token YWxhZGRpbjpvcGVuc2VzYW1l" }] });
        converter.datasViewElt={  id:"datas" };
        await converter.run();
        // Adaptation du rendu suivant la taille de l'écran
        const myRender=new Render(converter);
        if(window.innerWidth < 800)
        {
            myRender.settings=
            {
                allBegining:"<h4>Affichage petits écrans !</h4>",
                allEnding:"",
                linesBegining:"<ul>",
                linesEnding:"</ul>",
                lineBegining:"<li><ul>",
                lineEnding:"</ul></li>",
                dataDisplaying:"<li><b>#FIELDNAME :</b> #VALUE</li>",
            };
            converter.datasRender=myRender;
        }
        else
        {
            myRender.settings.allBegining="<table class='table-hover'>";
            converter.datasRender=myRender;
        }

        // Configuration de la pagination
        const pagination=new Pagination(converter, { id:"pages" }, "Page à afficher :");
        pagination.options={ displayElement: { id:"paginationOptions" }, values: [15,30,50,100] , name: "Nombre de lignes par page :" };
        pagination.selectedValue=15;
        converter.pagination=pagination;
        pagination.options2HTML();
                
        // Affichage initial
        converter.datasCounter={ id:"compteur" };
        await converter.run(); 
       
        // Création d'un filtre par auteur :
        let filtre1=new Selector(converter, 0, { id:"filtre1"} );
        filtre1.selector2HTML();
        converter.datasSelectors=[filtre1];

        // Ajout de champs permettant de classer les données
        // Uniquement avec un rendu tableau (grand écran), car entêtes de colonne nécessaires
        if(window.innerWidth >= 800)
        {
            let sortingField1=new SortingField(converter, 0);
            sortingField1.field2HTML();
            let sortingField2=new SortingField(converter, 1);
            sortingField2.field2HTML();
            let sortingField3=new SortingField(converter, 2);
            sortingField3.field2HTML();
            converter.datasSortingFields=[sortingField1,sortingField2,sortingField3];
        }
    }
    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();