Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
Line 5: Line 5:


     <script>
     <script>
        // Returns a mapping from ['File:Img1.png', 'File:Img2.png'] to [{ title: 'File:Img1.png', url: 'http...'}, { title: 'File...', url: 'http...'}]
    /**
        // Original order is NOT preserved
    * @param {string[]} imageTitles - Array of image titles, e.g, ['File:Image1.png', 'File:Image2.png']
        async function getImages(imageTitles) {
    */
            const imageUrlQuery = '/api.php?action=query&format=json&prop=imageinfo&iiprop=url&titles=' + encodeURIComponent(imageTitles.join('|'));
    async function getImages(imageTitles) {
            const imageUrlResponse = await fetch(imageUrlQuery).then(response => response.json());
        const imageUrlQuery = '/api.php?action=query&format=json&prop=imageinfo&iiprop=url&titles=' + encodeURIComponent(imageTitles.join('|'));
            return Object.getOwnPropertyNames(imageUrlResponse.query.pages).map(pageKey => ({
        const imageUrlResponse = await fetch(imageUrlQuery).then(response => response.json());
                title: imageUrlResponse.query.pages[pageKey].title,
        return Object.getOwnPropertyNames(imageUrlResponse.query.pages).map(pageKey => ({
                url: imageUrlResponse.query.pages[pageKey].imageinfo[0].url
            /** @type {string} */
            }));
            title: imageUrlResponse.query.pages[pageKey].title,
        }
            /** @type {string} */
            url: imageUrlResponse.query.pages[pageKey].imageinfo[0].url
        }));
    }


        async function getSources() {
    async function getSources() {
            const sourceQuery = '/api.php?action=ask&format=json&query=' + encodeURIComponent('[[Category:Social media platform]]|?IMAGE');
        const sourceQuery = '/api.php?action=ask&format=json&query=' + encodeURIComponent('[[Category:Social media platform]]|?IMAGE');
            const sourceResponse = await fetch(sourceQuery).then(response => response.json());
        const sourceResponse = await fetch(sourceQuery).then(response => response.json());


            const sources = Object.getOwnPropertyNames(sourceResponse.query.results).map(platformName => ({
        const sources = Object.getOwnPropertyNames(sourceResponse.query.results).map(platformName => ({
                name: platformName,
            name: platformName,
                image: sourceResponse.query.results[platformName].printouts.IMAGE[0].fulltext.replace('PAGENAME:', '')
            /** @type {string} */
            }));
            image: sourceResponse.query.results[platformName].printouts.IMAGE[0].fulltext.replace('PAGENAME:', '')
        }));


            const imageData = await getImages(sources.map(source => source.image));
        const imageData = await getImages(sources.map(source => source.image));
            imageData.forEach(img => sources[sources.findIndex(source => source.image === img.title)].image = img.url);
        imageData.forEach(img => sources[sources.findIndex(source => source.image === img.title)].image = img.url);


            console.log('Sources:', sources);
        console.log('Sources:', sources);
            return sources;
        return sources;
        }
    }


        async function getDcts() {
    async function getDcts() {
            const dctQuery = '[[Category:Disaster Community Technology]]' +
        const dctQuery = '[[Category:Disaster Community Technology]]' +
                            '|?Image' +
                        '|?Image' +
                            '|?Data Sources';
                        '|?Data Sources';
            const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
        const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
            const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
        const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
            console.log('Response:', dctResponse)
        console.log('Response:', dctResponse);


            const dctList = Object.getOwnPropertyNames(dctResponse.query.results).map(dctKey => {
        const dctList = Object.getOwnPropertyNames(dctResponse.query.results).map(dctKey => {
                const dct = {};
            const dct = {};
                dct.name = dctKey;
            dct.name = dctKey;
                dct.url = dctResponse.query.results[dctKey].fullurl;
            dct.url = dctResponse.query.results[dctKey].fullurl;
                dct.dataSources = dctResponse.query.results[dctKey].printouts['Data Sources'].map(src => src.fulltext);
            dct.dataSources = dctResponse.query.results[dctKey].printouts['Data Sources'].map(src => src.fulltext);
                dct.logo = dctResponse.query.results[dctKey].printouts['Image'][0] ? dctResponse.query.results[dctKey].printouts['Image'][0].fulltext : undefined;
            dct.logo = dctResponse.query.results[dctKey].printouts['Image'][0] ? dctResponse.query.results[dctKey].printouts['Image'][0].fulltext : void 0;
                return dct;
            return dct;
            })
        })
            console.log('DCT:', dctList);
        console.log('DCT:', dctList);


            const logoData = await getImages(dctList.map(dct => dct.logo).filter(logo => !!logo));
        const logoData = await getImages(dctList.map(dct => dct.logo).filter(logo => !!logo));
            console.log('images', logoData)
        console.log('images', logoData);


            const table = new Tabulator("#tabulator", {
        // table.on("tableBuilt", () => {
                data: dctList,
                autoColumns: true,
            });


            // table.on("tableBuilt", () => {
        // });
        return dctList;
    }


            // });
    // const table = new Tabulator("#dct-tabulator", {
         }
    //    data: dctList,
    //    autoColumns: true,
    // });
 
    Promise.all([getSources(), getDcts()]).then(data => {
         console.log('OUTPUT', data);
    })


        getSources();
        getDcts();
     </script>
     </script>
     <div id="tabulator"></div>
     <div id="dct-tabulator"></div>
</includeonly>
</includeonly>

Revision as of 13:12, 7 June 2022

Development verstion of the DCT List.
Not ready for production!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:DCTList&oldid=4349"