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
 
(629 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>
 
    <!-- STYLES BEGIN -->
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.css">
<!-- STYLES END -->
 
    <!-- SCRIPT BEGIN -->
    <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.js"></script>
    <!-- SCRIPT END -->
 
    <!-- Icon definitons -->
    <!--<img src="https://assets.links.communitycenter.eu/v2/links/lib?q=unknown.svg">-->


     <script>
     <div id="dct-list-wrapper">
    'use strict';
        <h1>
            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=1-dct_list.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>


    /**
        <div id="filter-bar">
    * @param {string[]} imageTitles - Array of image titles, e.g, ['File:Image1.png', 'File:Image2.png']
            <div style="display: flex; justify-content: space-between;">
    */
                <div style="flex: 1 1;">
    async function getImages(imageTitles) {
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
        const imageUrlQuery = '/api.php?action=query&format=json&prop=imageinfo&iiprop=url&titles=' + encodeURIComponent(imageTitles.join('|'));
                    <div id="filter-summary">No filter. Showing all results.</div>
        const imageUrlResponse = await fetch(imageUrlQuery).then(response => response.json());
                </div>
        return Object.getOwnPropertyNames(imageUrlResponse.query.pages).map(pageKey => ({
                <div>
            /** @type {string} */
                    <button class="large-button open-filters" type="button" onclick="toggleFilter()">Open Filters</button>
             title: imageUrlResponse.query.pages[pageKey].title,
                </div>
            /** @type {string} */
             </div>
            url: imageUrlResponse.query.pages[pageKey].imageinfo[0].url
        }));
    }


    async function getSources() {
            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
        const sourceQuery = '/api.php?action=ask&format=json&query=' + encodeURIComponent('[[Category:Social media platform]]|?IMAGE');
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
        const sourceResponse = await fetch(sourceQuery).then(response => response.json());
                <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>


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


        const imageData = await getImages(sources.map(source => source.image));
                <h2 style="display: flex; justify-content: space-between;">
        imageData.forEach(img => sources[sources.findIndex(source => source.image === img.title)].image = img.url);
                    <div>
                        <img src="https://www.safetyinnovation.center/lcc/dct_list/img/filters.svg">
                        <span>Filters</span>
                    </div>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                </h2>


        // console.log('Sources:', sources);
                <div style="text-align: center;">
        return sources;
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
    }
                </div>


    async function getDcts() {
                <div class="filter-wrapper">
        const dctQuery = '[[Category:Disaster Community Technology]]' +
                    <h4 class="filter-toggle">Functions <div class="plus icon"></div>
                        '|?Image' +
                    </h4>
                        '|?Data Sources';
                    <div class="filter-container">
        const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
                        <div class="filter-button-wrapper">
        const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
                            <button type="button" onclick="selectAll('#functions-filter')">Select all</button> |
        console.log('DCT Response:', dctResponse);
                            <button type="button" onclick="deselectAll('#functions-filter')">Clear all</button>
                        </div>
                        <div class="filter-content loose" id="functions-filter"></div>
                    </div>
                </div>


        const dctList = Object.getOwnPropertyNames(dctResponse.query.results).map(dctKey => {
                <div class="filter-wrapper">
            const dct = {};
                    <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
            dct.name = dctKey;
                    </h4>
            /** @type {string} */
                    <div class="filter-container">
            dct.url = dctResponse.query.results[dctKey].fullurl;
                        <div class="filter-button-wrapper">
            /** @type {string[]} */
                            <button type="button" onclick="selectAll('#data-source-filter')">Select all</button> |
            dct.dataSources = dctResponse.query.results[dctKey].printouts['Data Sources'].map(src => src.fulltext);
                            <button type="button" onclick="deselectAll('#data-source-filter')">Clear all</button>
            /** @type {string} */
                        </div>
            dct.logo = dctResponse.query.results[dctKey].printouts['Image'][0] ? dctResponse.query.results[dctKey].printouts['Image'][0].fulltext : void 0;
                        <div class="filter-content loose" id="data-source-filter"></div>
            return dct;
                    </div>
        })
                </div>
        console.log('DCT:', dctList);


        const logoData = await getImages(dctList.map(dct => dct.logo).filter(logo => !!logo));
                <div class="filter-wrapper">
        return dctList;
                    <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>


    Promise.all([Promise.resolve(666), getDcts()]).then(data => {
                <!-- <div class="filter-wrapper">
        const sources = data[0];
                    <h4 class="filter-toggle">Used by Practitioners <div class="plus icon"></div>
        const dcts = data[1];
                    </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> -->


        const table = new Tabulator("#dct-tabulator", {
                <div id="bool-filters"
            // autoColumns: true,
                    style="border-top: 1px solid var(--links-blue); margin-top: 1em; padding-top: 1em;">
            columns: [
                     <div>
                {
                         <input type="checkbox" id="used-by-practitioners" value="yes">
                    title: 'Name',
                         <label for="used-by-practitioners">Used by practitioners</label>
                     field: 'name',
                     </div>
                    formatter: function (cell) {
                    <div>
                         const dct = cell.getData();
                        <input type="checkbox" id="has-use-case" value="yes">
                         return '<a href="' + dct.url + '">' + dct.name + '</a>';
                        <label for="has-use-case">Use case available</label>
                     }
                     </div>
                },
                     <div>
                {
                         <input type="checkbox" id="show-archived" value="yes">
                    title: 'Data Sources',
                        <label for="show-archived">Show archived</label>
                     field: 'dataSources',
                     </div>
                     formatter: function (cell) {
                 </div>
                         const sources = cell.getValue();
                        let out = sources.reduce((prev, curr) => {
                            return prev + '<span>' + curr + '</span>'
                        }, '');
                        return out;
                     }
                 }
            ]
        });


         table.on("tableBuilt", () => { table.setData(dcts); });
            </div>
     })
         </div>
        <div id="dct-tabulator"></div>
     </div>


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

Latest revision as of 09:46, 2 October 2024

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


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