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
 
(589 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>


     <style>
     <!-- STYLES BEGIN -->
        #dct-list-wrapper { font-family: 'Open Sans'; }
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.css">
        #dct-list-wrapper h1 {
<!-- STYLES END -->
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
            margin-bottom: 2em;
            color: var(--links-blue);
        }
        #dct-list-wrapper h2 {
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }
        #data-source-filter {
            font-size: 1.2em;
            margin-bottom: 4em;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
            gap: 1em 1em;
        }
        #data-source-filter img { width: 2em; height: 2em; margin: 0 .5em; }
        #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; }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col { border-right: 0 none; background: transparent; }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col-content { padding: .5em 0; }
        #dct-tabulator.tabulator .tabulator-header .tabulator-col-sorter { right: 1em; }
        #dct-tabulator.tabulator .tabulator-row { background-color: transparent; }
        #dct-tabulator.tabulator .tabulator-cell { border-right: 0 none; border-bottom: 1px solid var(--links-blue); padding: .5em 0; }
        .data-source-img { width: 2em; height: 2em; }
    </style>


     <script>
     <!-- SCRIPT BEGIN -->
     'use strict';
    <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.js"></script>
     <!-- SCRIPT END -->


     /**
     <!-- Icon definitons -->
    * @typedef {Object} DCT
    <!--<img src="https://assets.links.communitycenter.eu/v2/links/lib?q=unknown.svg">-->
    * @property {string} name
    * @property {string} url
    * @property {string[]} dataSources
    * @property {string} logo
    */


    /**
    <div id="dct-list-wrapper">
      * @param {string} title
        <h1>
      * @returns {string}
            <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=1-dct_list.svg">
      */
            <div>
    function getUrl(title) {
                <div>Technologies</div>
        return title ? '/index.php/Special:FilePath/' + title : title;
                <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>


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


        return sources;
            <div id="dct-filters">
    }


    async function getDcts() {
                <h2 style="display: flex; justify-content: space-between;">
        const dctQuery = '[[Category:Disaster Community Technology]]' +
                    <div>
                        '|?Image' +
                        <img src="https://www.safetyinnovation.center/lcc/dct_list/img/filters.svg">
                        '|?Data Sources';
                        <span>Filters</span>
        const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
                    </div>
        const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
        // console.log('DCT Response:', dctResponse);
                </h2>


        const results = dctResponse.query.results;
                <div style="text-align: center;">
        const dctList = Object.getOwnPropertyNames(results).map(dctKey => {
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
            /** @type {DCT} */
                </div>
            const dct = {};
            dct.name = dctKey;
            dct.url = results[dctKey].fullurl;
            dct.dataSources = results[dctKey].printouts['Data Sources'].map(source => source.fulltext).sort();
            dct.logo = results[dctKey].printouts['Image'][0] ? getUrl(results[dctKey].printouts['Image'][0].fulltext) : void 0;
            return dct;
        })


        return dctList;
                <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>


    Promise.all([getSources(), getDcts()]).then(data => {
                <div class="filter-wrapper">
        const dataSources = data[0];
                    <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
        const dcts = data[1];
                    </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>


        const filterHtml = dataSources.reduce((prev, curr) => {
                <div class="filter-wrapper">
            return prev + '<div><input type="checkbox" id="filter-' + curr.name + '" value="' + curr.name + '" checked >' +
                    <h4 class="filter-toggle">Pricing <div class="plus icon"></div>
                '<label for="filter-' + curr.name + '"><img src="' + curr.image + '"> ' + curr.name + '</label></div>'
                    </h4>
        }, '');
                    <div class="filter-container">
        document.getElementById('data-source-filter').innerHTML = filterHtml;
                        <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>


        console.log(data)
                <!-- <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> -->


        const table = new Tabulator("#dct-tabulator", {
                <div id="bool-filters"
            layout: 'fitColumns',
                    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>
                         /** @type {DCT} */
                         <input type="checkbox" id="has-use-case" value="yes">
                        const dct = cell.getData();
                        <label for="has-use-case">Use case available</label>
                         return '<a href="' + dct.url + '">' + dct.name + '</a>';
                    </div>
                     }
                    <div>
                },
                        <input type="checkbox" id="show-archived" value="yes">
                {
                         <label for="show-archived">Show archived</label>
                     title: 'Data Sources',
                     </div>
                    field: 'dataSources',
                 </div>
                    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); });
            </div>
    })
         </div>
 
    </script>
    <div id="dct-list-wrapper">
         <h1>Social Media and Crowdsourcing Technologies</h1>
        <h2>Filters</h2>
        <div id="data-source-filter"></div>
         <div id="dct-tabulator"></div>
         <div id="dct-tabulator"></div>
     </div>
     </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"