View source for Widget:DCTList

<noinclude>Development verstion of the DCT List.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
<includeonly>
    <link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://unpkg.com/tabulator-tables@5.2.7/dist/js/tabulator.min.js"></script>

    <style>
        #dct-list-wrapper { font-family: 'Open Sans'; }
        #dct-list-wrapper h1 {   
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
            margin-bottom: 1em;
        }
        #dct-tabulator.tabulator { border: 0 none; background-color: transparent; font-size: 1.2em; }
        #dct-tabulator.tabulator .tabulator-header { border-color: var(--links-blue); background-color: transparent; color: var(--links-blue); }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col { border-right: 0 none; background: transparent; }
        #dct-tabulator.tabulator .tabulator-row { background-color: transparent; }
        #dct-tabulator.tabulator .tabulator-cell { border-right: 0 none; border-bottom: 1px solid var(--links-blue); }
        .data-source-img { width: 2em; height: 2em; }
    </style>

    <script>
    'use strict';

    /**
     * @typedef {Object} DCT
     * @property {string} name
     * @property {string} url
     * @property {string[]} dataSources
     * @property {string} logo
     */

     /**
      * @param {string} title
      * @returns {string}
      */
    function getUrl(title) {
        return title ? '/index.php/Special:FilePath/' + title : title;
    }

    async function getSources() {
        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 results = sourceResponse.query.results;
        const sources = Object.getOwnPropertyNames(results).map(platformName => ({
            name: platformName,
            image: getUrl(results[platformName].printouts.IMAGE[0].fulltext.replace('PAGENAME:', ''))
        }));

        return sources;
    }

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

        const results = dctResponse.query.results;
        const dctList = Object.getOwnPropertyNames(results).map(dctKey => {
            /** @type {DCT} */
            const dct = {};
            dct.name = dctKey;
            dct.url = results[dctKey].fullurl;
            dct.dataSources = results[dctKey].printouts['Data Sources'].map(source => source.fulltext);
            dct.logo = results[dctKey].printouts['Image'][0] ? getUrl(results[dctKey].printouts['Image'][0].fulltext) : void 0;
            return dct;
        })

        return dctList;
    }

    Promise.all([getSources(), getDcts()]).then(data => {
        const dataSources = data[0];
        const dcts = data[1];

        console.log(data)

        const table = new Tabulator("#dct-tabulator", {
            layout: 'fitColumns',
            columns: [
                {
                    title: 'Name',
                    field: 'name',
                    formatter: function (cell) {
                        /** @type {DCT} */
                        const dct = cell.getData();
                        return '<a href="' + dct.url + '">' + dct.name + '</a>';
                    }
                },
                {
                    title: 'Data Sources',
                    field: 'dataSources',
                    formatter: function (cell) {
                        const output = cell.getValue().reduce((prev, curr) => {
                            const src = dataSources.find(src => src.name === curr);
                            const url = src ? src.image : '';
                            return url ? prev + '<img class="data-source-img" src="' + url + '">' : prev + ' ' + curr;
                        }, '');
                        return output;
                    }
                }
            ]
        });

        table.on("tableBuilt", () => { table.setData(dcts); });
    })

    </script>
    <div id="dct-list-wrapper">
        <h1>Social Media and Crowdsourcing Technologies</h1>
        <div id="dct-tabulator"></div>
    </div>
</includeonly>