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
 
(651 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>
     <script>
    <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
        // Returns a mapping from ['File:Img1.png', 'File:Img2.png'] to [{ title: 'File:Img1.png', url: 'http...'}, { title: 'File...', url: 'http...'}]
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
         // Original order is NOT preserved
 
         async function getImages(imageTitles) {
    <!-- STYLES BEGIN -->
             const imageUrlQuery = '/api.php?action=query&format=json&prop=imageinfo&iiprop=url&titles=' + encodeURIComponent(imageTitles.join('|'));
<link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=dct_list.css">
             const imageUrlResponse = await fetch(imageUrlQuery).then(response => response.json());
<!-- STYLES END -->
             return Object.getOwnPropertyNames(imageUrlResponse.query.pages).map(pageKey => ({
 
                 title: imageUrlResponse.query.pages[pageKey].title,
    <!-- SCRIPT BEGIN -->
                 url: imageUrlResponse.query.pages[pageKey].imageinfo[0].url
    <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">-->
 
    <div id="dct-list-wrapper">
        <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">
            <div style="display: flex; justify-content: space-between;">
                <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>
 
             <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;">
                <h2 style="margin-bottom: 0;">Results: <span id="result-count"></span></h2>
                <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>
 
             <div id="dct-filters">
 
                <h2 style="display: flex; justify-content: space-between;">
                    <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>
 
                 <div style="text-align: center;">
                    <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                </div>


        async function getSources() {
                <div class="filter-wrapper">
            const sourceQuery = '/api.php?action=ask&format=json&query=' + encodeURIComponent('[[Category:Social media platform]]|?IMAGE');
                    <h4 class="filter-toggle">Functions <div class="plus icon"></div>
            const sourceResponse = await fetch(sourceQuery).then(response => response.json());
                    </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>


            const sources = Object.getOwnPropertyNames(sourceResponse.query.results).map(platformName => ({
                <div class="filter-wrapper">
                name: platformName,
                    <h4 class="filter-toggle">Supported Platforms <div class="plus icon"></div>
                image: sourceResponse.query.results[platformName].printouts.IMAGE[0].fulltext.replace('PAGENAME:', '')
                    </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 imageData = await getImages(sources.map(source => source.image));
                <div class="filter-wrapper">
            imageData.forEach(img => sources[sources.findIndex(source => source.image === img.title)].image = img.url);
                    <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>


            // console.log('Sources:', sources)
                <!-- <div class="filter-wrapper">
            return sources;
                    <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> -->


        async function getDcts() {
                <div id="bool-filters"
            const dctQuery = '[[Category:Disaster Community Technology]]' +
                    style="border-top: 1px solid var(--links-blue); margin-top: 1em; padding-top: 1em;">
                            '|?Image' +
                    <div>
                            '|?Data Sources';
                        <input type="checkbox" id="used-by-practitioners" value="yes">
            const dctQueryUrl = '/api.php?action=ask&format=json&query=' + encodeURIComponent(dctQuery);
                        <label for="used-by-practitioners">Used by practitioners</label>
            const dctResponse = await fetch(dctQueryUrl).then(response => response.json());
                    </div>
            console.log('Response:', dctResponse)
                    <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>


             const list = Object.getOwnPropertyNames(dctResponse.query.results).map(dctKey => {
             </div>
                const dct = {};
        </div>
                dct.name = dctKey;
        <div id="dct-tabulator"></div>
                dct.url = dctResponse.query.results[dctKey].fullurl;
    </div>
                dct.dataSources = dctResponse.query.results[dctKey].printouts['Data Sources'].map(src => src.fulltext);
                return dct;
            })
            console.log('DCT:', list);
        }


        getSources();
        getDcts();
    </script>
</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"