Widget: DCTList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Marterer (talk | contribs)
No edit summary
(628 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<noinclude>Development verstion of the DCT List.<br><span style="color: red; font-weight: bold;">Not ready for production!</span></noinclude>
<noinclude>DCT list widget.<br><span style="color: red; font-weight: bold;">Currently in use &ndash; do not modify!</span></noinclude>
 
<includeonly>
<includeonly>
     <link href="https://unpkg.com/tabulator-tables@5.2.7/dist/css/tabulator.min.css" rel="stylesheet">
     <link href="/resources/assets/tabulator/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>
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
 
    <script>
    'use strict';
 
    /**
    * @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('|'));
        const imageUrlResponse = await fetch(imageUrlQuery).then(response => response.json());
        return Object.getOwnPropertyNames(imageUrlResponse.query.pages).map(pageKey => ({
            /** @type {string} */
            title: imageUrlResponse.query.pages[pageKey].title,
            /** @type {string} */
            url: imageUrlResponse.query.pages[pageKey].imageinfo[0].url
        }));
    }
 
    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 sources = Object.getOwnPropertyNames(sourceResponse.query.results).map(platformName => ({
            name: platformName,
            /** @type {string} */
            image: sourceResponse.query.results[platformName].printouts.IMAGE[0].fulltext.replace('PAGENAME:', '')
        }));
 
        const imageData = await getImages(sources.map(source => source.image));
        imageData.forEach(img => sources[sources.findIndex(source => source.image === img.title)].image = img.url);


        // console.log('Sources:', sources);
    <!-- STYLES BEGIN -->
        return sources;
<link rel="stylesheet" href="https://www.safetyinnovation.center/lcc/dct_list/styles.css">
    }
<!-- STYLES END -->


     async function getDcts() {
     <!-- SCRIPT BEGIN -->
        const dctQuery = '[[Category:Disaster Community Technology]]' +
    <script type="text/javascript" src="https://www.safetyinnovation.center/lcc/dct_list/script.js"></script>
                        '|?Image' +
    <!-- SCRIPT END -->
                        '|?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 dctList = Object.getOwnPropertyNames(dctResponse.query.results).map(dctKey => {
    <!-- Icon definitons -->
            const dct = {};
    <img src="https://www.safetyinnovation.center/lcc/dct_list/img/unknown.svg">
            dct.name = dctKey;
            /** @type {string} */
            dct.url = dctResponse.query.results[dctKey].fullurl;
            /** @type {string[]} */
            dct.dataSources = dctResponse.query.results[dctKey].printouts['Data Sources'].map(src => src.fulltext);
            /** @type {string} */
            dct.logo = dctResponse.query.results[dctKey].printouts['Image'][0] ? dctResponse.query.results[dctKey].printouts['Image'][0].fulltext : void 0;
            return dct;
        })
        console.log('DCT:', dctList);


         const logoData = await getImages(dctList.map(dct => dct.logo).filter(logo => !!logo));
    <div id="dct-list-wrapper">
         return dctList;
         <h1>
    }
            <img src="https://www.safetyinnovation.center/lcc/dct_list/img/1-dct.svg">
            <div>
                <div>Technologies</div>
                <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing Library</div>
            </div>
        </h1>
        <div id="dct-intro">
            <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Technologies Library is to face the growing
                heterogeneous use of technologies in disasters and the overwhelming number of technologies on the
                market. It gathers and structures information about existing technologies to provide an up-to-date overview and
                thus support the selection of suitable technologies.
            </p>
            <p>
                You can use the filters to identify relevant technologies according to your needs and then click on the
                name of the technology to get further information.
            </p>
         </div>


    Promise.all([Promise.resolve(666), getDcts()]).then(data => {
        <div id="filter-bar">
        const sources = data[0];
            <div style="display: flex; justify-content: space-between;">
        const dcts = data[1];
                <div style="flex: 1 1;">
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
                    <div id="filter-summary">No filter. Showing all results.</div>
                </div>
                <div>
                    <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open Filters</button>
                </div>
            </div>


        const table = new Tabulator("#dct-tabulator", {
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
            // autoColumns: true,
                 <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
            columns: [
                 <div><a href="/index.php/Form:Disaster_Community_Technology" style="color: var(--links-blue); font-size: 1.5em; font-variant:small-caps">Add new technology</a></div>
                 {
             </div>
                    title: 'Name',
                    field: 'name',
                    formatter: function (cell) {
                        const dct = cell.getData();
                        return '<a href="' + dct.url + '">' + dct.name + '</a>';
                    }
                 },
                {
                    title: 'Data Sources',
                    field: 'Data Sources',
                    formatter: function (cell) {
                        const sources = cell.getValue();
                        return sources ? sources.map(src => '<span>' + src + '</span>') : '';
                    }
                }
             ]
        });


        table.on("tableBuilt", () => { table.setData(dcts); });
            <div id="dct-filters">
     })
                <h2 style="display: flex; justify-content: space-between;">
                    <div>
                        <img src="filters.svg">
                        <span>Filters</span>
                    </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                </h2>
                <div style="text-align: center;">
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Functions <div class="plus icon"></div>
                    </h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#functions-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#functions-filter')">Clear all</button>
                        </div>
                        <div class="filter-content loose" id="functions-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
                    </h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
                        </div>
                        <div class="filter-content loose" id="data-source-filter"></div>
                    </div>
                </div>
                <div class="filter-wrapper">
                    <h4 class="filter-toggle">Pricing <div class="plus icon"></div>
                    </h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#business-model-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#business-model-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="business-model-filter"></div>
                    </div>
                </div>
                <!-- <div class="filter-wrapper">
                    <h4 class="filter-toggle">Used by Practitioners <div class="plus icon"></div>
                    </h4>
                    <div class="filter-container">
                        <div class="filter-button-wrapper">
                            <button type="button" onclick="selectAll('#dm-use-filter')">Select all</button> |
                            <button type="button" onclick="deselectAll('#dm-use-filter')">Clear all</button>
                        </div>
                        <div class="filter-content" id="dm-use-filter"></div>
                    </div>
                </div> -->
                <div id="bool-filters"
                    style="border-top: 1px solid var(--links-blue); margin-top: 1em; padding-top: 1em;">
                    <div>
                        <input type="checkbox" id="used-by-practitioners" value="yes">
                        <label for="used-by-practitioners">Used by practitioners</label>
                    </div>
                    <div>
                        <input type="checkbox" id="has-use-case" value="yes">
                        <label for="has-use-case">Use case available</label>
                    </div>
                    <div>
                        <input type="checkbox" id="show-archived" value="yes">
                        <label for="show-archived">Show archived</label>
                    </div>
                </div>
            </div>
        </div>
        <div id="dct-tabulator"></div>
     </div>


    </script>
    <div id="dct-tabulator"></div>
</includeonly>
</includeonly>

Revision as of 22:22, 10 May 2024

DCT list widget.
Currently in use – do not modify!


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