Widget: UseCaseList: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Cschwentker (talk | contribs)
(Created page with "<noinclude>current version of the List of Use Cases.<br><strong style="color:red;">Currently in use</strong></noinclude> <includeonly> <link href="/resources/assets/tabula...")
 
Marterer (talk | contribs)
No edit summary
 
(39 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<noinclude>current version of the List of Use Cases.<br><strong style="color:red;">Currently in use</strong></noinclude>
<noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">Currently in use &ndash; do not modify!</strong>
</noinclude>
<includeonly>
<includeonly>
     <link href="/resources/assets/tabulator.min.css" rel="stylesheet">
     <link href="/resources/assets/tabulator/dist/css/tabulator.min.css" rel="stylesheet">
     <script type="text/javascript" src="/resources/assets/tabulator.min.js"></script>
     <script type="text/javascript" src="/resources/assets/tabulator/dist/js/tabulator.min.js"></script>
    <style>
        #usecase-list-wrapper {
            font-family: 'Open Sans';
            margin-top: 4em;
        }


        #usecase-list-wrapper h1,
    <!-- STYLES BEGIN -->
        #usecase-list-wrapper h2,
    <link rel="stylesheet" href="https://assets.links.communitycenter.eu/v2/links/lib?q=uc_list.css">
        #usecase-list-wrapper h3 {
    <!-- STYLES END -->
            font-family: 'Raleway';
            font-weight: 300;
            letter-spacing: .06em;
        }


        #usecase-list-wrapper h1,
    <!-- SCRIPT BEGIN -->
        #usecase-filters h2 {
     <script type="text/javascript" src="https://assets.links.communitycenter.eu/v2/links/lib?q=uc_list.js"></script>
            color: var(--links-cyan);
     <!-- SCRIPT END -->
            display: flex;
            align-items: center;
        }
 
        #usecase-list-wrapper h1 svg {
            height: 2.5em;
            width: 2.5em;
            fill: var(--links-cyan);
            margin-right: .5em;
        }
 
        #filter-bar {
            position: relative;
            margin: 1em 0 2em 0;
        }
 
        #uc-filters {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 100;
            padding: 2em;
            width: 45vw;
            background: #fff;
            border: 1px solid var(--links-cyan);
            clip-path: inset(0 0 100% 100%);
            box-shadow: -10px 10px 10px 5px rgb(0 0 0 / 10%);
            transition: all 400ms ease-in-out;
        }
 
        #uc-filters.open {
            clip-path: inset(0 0 -50px -50px);
        }
 
        #close-filter-button {
            display: block;
            cursor: pointer;
            font-size: 2.5em;
            line-height: .7em;
            margin-top: -.2em;
            font-weight: 100;
            color: var(--links-cyan);
        }
 
        #uc-filters h2 svg {
            height: 1.5em;
            width: 1.5em;
            margin-right: .5em;
            margin-left: -.2em;
        }
 
        .large-button {
            border: 1px solid var(--links-cyan);
            font-size: 1.5em;
            font-family: 'Open Sans';
            font-weight: 100;
            margin-bottom: 2em;
            padding: 0.3em 0.8em;
            color: var(--links-cyan);
            background: transparent;
            font-variant: small-caps;
            display: inline-block;
            transition: all 200ms ease-in-out;
        }
 
        .large-button:hover {
            background-color: var(--links-cyan);
            color: #fff;
        }
 
        #usecases-list-wrapper h2 {
            margin-bottom: 1em;
        }
 
        .filter-button-wrapper {
            margin-bottom: 1em;
        }
 
        .filter-wrapper button {
            border: 0 none;
            color: var(--links-cyan);
            background-color: transparent;
            font-variant: small-caps;
            font-size: 1.2em;
            text-decoration: underline;
            padding: 0;
        }
 
        .filter-wrapper .filter-container {
            display: none;
        }
 
        .filter-wrapper.open .filter-container {
            display: block;
        }
 
        .filter-wrapper h4 {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
 
        .filter-wrapper .filter-toggle svg {
            width: 1.5em;
            height: 1.5em;
            fill: var(--links-cyan);
            cursor: pointer;
        }
 
        .filter-wrapper.open .filter-toggle {
            transform: rotate(180deg);
        }
 
        .filter-content {
            font-size: 1.2em;
            margin-bottom: 4em;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
            gap: 1em 1em;
            align-items: start;
        }
 
        .filter-group-header {
            grid-column: 1/-1;
            margin-bottom: -.5em;
            margin-top: 1em;
            font-family: 'Raleway';
            font-weight: 200;
            letter-spacing: .06em;
        }
 
        .filter-group-start {
            grid-column-start: 1;
        }
 
        .filter-content input[type="checkbox"] {
            margin-right: .5em;
        }
 
        .filter-content img {
            width: 2em;
            height: 2em;
            margin: 0 .5em 0 0;
        }
 
        #usecase-intro {
            font-size: larger;
            margin-bottom: 4em;
        }
 
        #usecase-intro ul {
            font-size: initial;
        }
 
        #usecase-tabulator.tabulator {
            border: 0 none;
            background-color: transparent;
            font-size: 1.2em;
        }
 
        #usecase-tabulator.tabulator .tabulator-header {
            background-color: transparent;
            border: 0 none;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col {
            border-bottom: 4px double var(--links-cyan);
            border-right: 0 none;
            background: transparent;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-content {
            padding: .5em 0;
        }
 
        #usecase-tabulator.tabulator .tabulator-header .tabulator-col-sorter {
            right: .5em;
        }
 
        #usecase-tabulator.tabulator .tabulator-row {
            background-color: transparent;
        }
 
        #usecase-tabulator.tabulator .tabulator-cell {
            border-right: 0 none;
            border-top: 1px solid var(--links-cyan);
            padding: .5em .5em .5em 0;
        }
 
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse {
            border: 0 none;
            padding: 0 .5em 2em 0;
        }
 
        #filter-summary {
            margin-right: 1em;
        }
 
        #filter-summary table tr td {
            vertical-align: top;
        }
 
        #filter-summary table tr td:first-of-type {
            padding-right: 10px;
        }
 
 
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse table {
            font-size: smaller;
        }
 
        #filter-summary table tr td strong,
        #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse td>strong {
            font-weight: 300;
        }
 
        #usecase-tabulator.tabulator .usecase-title a,
        #usecase-tabulator.tabulator .tabulator-responsive-collapse table a {
            color: var(--links-cyan);
        }
 
    </style>
     <script>
        'use strict';
 
        /**
        * @typedef {Object} FilterState
        * @property {string[]} type
        * @property {string[]} eventType
        * @property {string[]} category
        * @property {string[]} scale
        * @property {string[]} thematics
        * @property {string[]} phases
        */
        let table;  // Tabulator instance
 
        const PHASES = ["Before", "During", "After"];
        const EX_LEVEL = ["Starter", "Intermediate", "Advanced"];
 
        const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
        const escapeAttr = text => text ? text.replace(/\W/g, '-') : text;
 
        const PHASE_PROP = 'Disaster Management Phase';
        const THEME_PROP = 'Use cases thematic';
        const TYPE_PROP = 'Type';
        const YEAR_PROP = 'Year';
        const SCALE_PROP = 'Scale';
        const CAT_PROP = 'Use Cases Category';
        const EVENT_PROP = 'Event type'
 
        const useCaseQuery = '[[Category:Use Cases]]'
            + '|?' + PHASE_PROP
            + '|?' + THEME_PROP
            + '|?' + TYPE_PROP
            + '|?' + SCALE_PROP
            + '|?' + EVENT_PROP
            + '|?' + CAT_PROP
            + '|?' + YEAR_PROP;
 
        async function getUseCases() {
            const useCasesResponse = await fetch(getQueryUrl(useCaseQuery)).then(response => response.json());
 
            return Object.keys(useCasesResponse.query.results).map(title => {
                const useCaseResult = useCasesResponse.query.results[title];
 
                /** @type {UseCase} **/
                const useCase = {};
                useCase.title = title;
                useCase.url = useCaseResult.fullurl;
                useCase[PHASE_PROP] = useCaseResult.printouts[PHASE_PROP].map(value => value.fulltext);
                useCase[THEME_PROP] = useCaseResult.printouts[THEME_PROP].map(value => value.fulltext);
                useCase[TYPE_PROP] = useCaseResult.printouts[TYPE_PROP].map(value => value.fulltext);
                useCase[CAT_PROP] = useCaseResult.printouts[CAT_PROP].map(value => value.fulltext);
                useCase[SCALE_PROP] = useCaseResult.printouts[SCALE_PROP].map(value => value.fulltext);
                useCase[EVENT_PROP] = useCaseResult.printouts[EVENT_PROP].map(value => value.fulltext);
                useCase[YEAR_PROP] = useCaseResult.printouts[YEAR_PROP][0] && useCaseResult.printouts[YEAR_PROP][0].raw.slice(-4);
                return useCase;
            });
        }
 
        function applyFilters(clear) {
            // TODO: apply Filters
            if (!table) return;
 
            // If clear=true, pass empty object to the filter to disable it.
            if (clear) {
                table.setFilter(useCaseFilter, {});
                return;
            }
 
 
            /** @type {FilterState} **/
            const filterState = {};
 
            const typeOptions = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]'));
            const selectedtypes = typeOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.type = selectedtypes.length === typeOptions.length ? undefined : selectedtypes;
 
            const eventTypeOptions = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]'));
            const selectedeventType = eventTypeOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.eventType = selectedeventType.length === eventTypeOptions.length ? undefined : selectedeventType;
 
            const categoryOptions = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]'));
            const selectedcategorys = categoryOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.category = selectedcategorys.length === categoryOptions.length ? undefined : selectedcategorys;
 
            const scaleOptions = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]'));
            const selectedScaleOptions = scaleOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.scale = selectedScaleOptions.length === scaleOptions.length ? undefined : selectedScaleOptions;
 
            const thematicOptions = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]'));
            const selectedthematics = thematicOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.thematics = selectedthematics.length === thematicOptions.length ? undefined : selectedthematics;
 
            const phaseOptions = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]'));
            const selectedPhases = phaseOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
            filterState.phases = selectedPhases.length === phaseOptions.length ? undefined : selectedPhases;
 
            table.setFilter(useCaseFilter, filterState);
        }
 
 
        /**
        * @param {Guideline} useCase
        * @param {FilterState} filterState
        */
        function useCaseFilter(useCase, filterState) {
            // If filtering property is empty, don't apply the filter (set the check to true).
            // Passing an empty object (as with applyFilters(true)) should result in an unfiltered table.
 
            const typeCheck = filterState.type
                ? useCase[TYPE_PROP].some(type => filterState.type.includes(type))
                : true;
            const eventTypeCheck = filterState.eventType
                ? useCase[EVENT_PROP].some(event => filterState.eventType.includes(event))
                : true;
            const categoryCheck = filterState.category
                ? useCase[CAT_PROP].some(target => filterState.category.includes(target))
                : true;
            const scaleCheck = filterState.scale
                ? useCase[SCALE_PROP].some(ex => filterState.scale.includes(ex))
                : true;
            const thematicCheck = filterState.thematics
                ? useCase[THEME_PROP].some(theme => filterState.thematics.includes(theme))
                : true;
            const phaseCheck = filterState.phases
                ? useCase[PHASE_PROP].some(phase => filterState.phases.includes(phase))
                : true;
            return typeCheck && eventTypeCheck && categoryCheck && scaleCheck && thematicCheck && phaseCheck;
        }
 
        Promise.all([getUseCases()]).then(data => {
            const useCases = data[0];
 
            let THEME_VALUES = []
            let TYPE_VALUES = [];
            let EVENT_VALUES = []
            let CAT_PROP_VALUES = [];
            let SCALE_VALUES = [];
            let YEAR_VALUES = [];
            let PHASE_VALUES = [];
 
            for (const useCase of useCases) {
 
                TYPE_VALUES = TYPE_VALUES.concat(useCase[TYPE_PROP]);
                THEME_VALUES = THEME_VALUES.concat(useCase[THEME_PROP]);
                EVENT_VALUES = EVENT_VALUES.concat(useCase[EVENT_PROP]);
                SCALE_VALUES = SCALE_VALUES.concat(useCase[SCALE_PROP]);
                CAT_PROP_VALUES = CAT_PROP_VALUES.concat(useCase[CAT_PROP]);
                YEAR_VALUES = YEAR_VALUES.concat(useCase[YEAR_PROP]);
            }
 
            TYPE_VALUES = TYPE_VALUES.sort();
            THEME_VALUES = THEME_VALUES.sort();
            EVENT_VALUES = EVENT_VALUES.sort();
            SCALE_VALUES = SCALE_VALUES.sort();
            CAT_PROP_VALUES = CAT_PROP_VALUES.sort();
 
            TYPE_VALUES = new Set(TYPE_VALUES);
            THEME_VALUES = new Set(THEME_VALUES);
 
 
            console.log("Theme values", THEME_VALUES);
 
            EVENT_VALUES = new Set(EVENT_VALUES);
            CAT_PROP_VALUES = new Set(CAT_PROP_VALUES);
            YEAR_VALUES = new Set(YEAR_VALUES);
            SCALE_VALUES = new Set(SCALE_VALUES);
            PHASE_VALUES = PHASES;
 
            let typeHtml = Array.from(TYPE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('type-filter').innerHTML = typeHtml;
 
            let eventTypeHtml = Array.from(EVENT_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="event-type-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="event-type-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('event-type-filter').innerHTML = eventTypeHtml;
 
            let categoryHtml = Array.from(CAT_PROP_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="category-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="category-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('category-filter').innerHTML = categoryHtml;
 
            let scaleHtml = Array.from(SCALE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="scale-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="scale-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('scale-filter').innerHTML = scaleHtml;
 
            let phaseHtml = Array.from(PHASE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="phases-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="phases-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('phases-filter').innerHTML = phaseHtml;
 
            let thematicHtml = Array.from(THEME_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="phases-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('thematic-filter').innerHTML = thematicHtml;
 
 
            const tabulator = new Tabulator('#usecase-tabulator', {
                data: useCases,
                layout: 'fitDataFill',
                responsiveLayout: 'collapse',
                columns: [
                    {
                        title: 'Title',
                        field: 'title',
                        cssClass: 'usecase-title',
                        formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>',
                        minWidth: '1000px'
                    },
                    {
                        title: 'Year',
                        field: YEAR_PROP,
                        minWidth: '200px'
                    },
                    {
                        title: 'Type',
                        field: TYPE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Event type',
                        field: EVENT_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Category',
                        field: CAT_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Scale',
                        field: SCALE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    },
                    {
                        title: 'Thematic',
                        field: THEME_PROP,
                        formatter: function (cell) {
                            const val = cell.getValue();
                            if (val.length > 1) {
                                return cell.getValue().join("<br>")
                            }
                            return cell.getValue().join(', ')
 
                        }
                    },
                    {
                        title: 'Disaster Management Phase',
                        field: PHASE_PROP,
                        formatter: cell => cell.getValue().join(', ')
                    }
 
                ],
                initialSort: [
                    { column: 'title', dir: 'asc' }
                ]
            });
 
            tabulator.on('tableBuilt', () => {
                tabulator.redraw(true);
                console.log('done')
                table = tabulator;
 
            });
            tabulator.on('dataFiltered', (filters, rows) => {
                const summary = document.getElementById('filter-summary');
                const filter = filters[0];
 
                // Set result counter
                document.getElementById('result-count').textContent = rows.length;
 
                // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
                if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
 
                console.log(filter)
 
 
                // Update filter text.
                if (
                    !filter.type.type &&
                    !filter.type.eventType &&
                    !filter.type.category &&
                    !filter.type.scale &&
                    !filter.type.thematics &&
                    !filter.type.phases
                ) { summary.textContent = 'No filter. Showing all results.'; }
                else {
                    let summaryHtml = '<table>';
                    if (filter.type.type) {
                        summaryHtml += '<tr><td><strong>Type</strong></td><td>'
                            + (filter.type.type.length > 0 ? filter.type.type.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.eventType) {
                        summaryHtml += '<tr><td><strong>Event type</strong></td><td>'
                            + (filter.type.eventType.length > 0 ? filter.type.eventType.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.category) {
                        summaryHtml += '<tr><td><strong>Category</strong></td><td>'
                            + (filter.type.category.length > 0 ? filter.type.category.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.scale) {
                        summaryHtml += '<tr><td><strong>Scale</strong></td><td>'
                            + (filter.type.scale.length > 0 ? filter.type.scale.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.thematics) {
                        summaryHtml += '<tr><td><strong>Thematics</strong></td><td>'
                            + (filter.type.thematics.length > 0 ? filter.type.thematics.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    if (filter.type.phases) {
                        summaryHtml += '<tr><td><strong>Phases</strong></td><td>'
                            + (filter.type.phases > 0 ? filter.type.phases.join(', ') : 'none')
                            + '</td></tr>';
                    }
                    summaryHtml += '</table>';
                    summary.innerHTML = summaryHtml;
                }
 
            });
 
            // Listen for changes in filter checkbox state.
 
            document.getElementById('type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('event-type-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('category-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('scale-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('thematic-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('phases-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
 
 
            // Listen for clicks on filter toggles
            document.querySelectorAll('.filter-wrapper .filter-toggle').forEach(el => {
                const wrapper = el.closest('.filter-wrapper');
                el.addEventListener('click', event => void wrapper.classList.toggle('open'));
            });
 
            // Close filter pane when clicked outside of it.
            document.body.addEventListener('click', event => {
                const filterPane = document.getElementById('uc-filters');
                if (
                    filterPane.classList.contains('open') &&
                    !filterPane.contains(event.target) &&
                    event.target !== document.querySelector('#filter-bar .large-button')
                ) { filterPane.classList.remove('open'); }
            }, { passive: true });
 
            // Fix bug where the table is truncated to zero height despite having visible rows.
            tabulator.on('renderComplete', function () {
                // TODO: Check the bugfix for a possible infinite event loop.
                // This will help detect it, in case it happens.
                console.log('Table height bugfix: render complete.');
 
                try {
                    const holderHeight = tabulator.rowManager.element.offsetHeight;
                    const tableHeight = tabulator.rowManager.tableElement.offsetHeight;
                    if (
                        holderHeight < tableHeight ||                          // table is truncated vertically (including zero-height)
                        holderHeight - tableHeight > window.screen.availHeight  // table is more than a screen longer than content
                    ) {
                        tabulator.redraw();
                    }
                } catch (ignore) { }
            });
            // End bugfix
        });
 
        function selectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = true);
            applyFilters();
        }
 
        function deselectAll(context) {
            document.querySelectorAll(context + ' input[type="checkbox"]').forEach(checkbox => checkbox.checked = false);
            applyFilters();
        }
 
        function clearFilters() {
            document.querySelectorAll('#uc-filters input[type="checkbox"]').forEach(checkbox => checkbox.checked = checkbox.defaultChecked);
            applyFilters(true);
        }
 
        function toggleFilter() {
            document.getElementById('uc-filters').classList.toggle('open');
        }
    </script>
     <!-- Icon definitons -->
    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" style="display:none;">
        <defs>
            <symbol id="chevron-down" viewBox="0 0 96 96">
                <clipPath id="chev">
                    <path d="M592 312h96v96h-96z" />
                </clipPath>
                <g clip-path="url(#chev)" transform="translate(-592 -312)">
                    <path
                        d="m640 370.586-25.293-25.293-1.414 1.414L640 373.414l26.707-26.707-1.414-1.414L640 370.586Z" />
                </g>
            </symbol>
        </defs>
    </svg>


     <div id="usecase-list-wrapper">
     <div id="usecase-list-wrapper">
         <h1>
         <h1>
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
             <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=3-uc_list.svg">
                <defs>
            <div>
                    <clipPath id="a">
                <div>Use Cases</div>
                        <path d="M592 372h96v96h-96z" />
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing Library</div>
                    </clipPath>
             </div>
                 </defs>
                <g clip-path="url(#a)" transform="translate(-592 -372)">
                    <path
                        d="M638 386h4v12h-4ZM669.909 392.97l-7.99 7.99-2.829-2.828 7.991-7.991ZM620.859 398.081l-2.828 2.829-7.99-7.991 2.828-2.828ZM664 414h10v4h-10ZM606 414h10v4h-10ZM624 442l3.4-34h25.1l3.5 34h-32Zm44 0h-6l-3.6-36.4c-.2-2-1.9-3.6-4-3.6h-28.8c-2.1 0-3.8 1.6-4 3.6L618 442h-6v6h-6v6h68v-6h-6v-6Z" />
                    <path d="m644.8 412 2.5 26h4.1l-2.6-26Z" />
                </g>
             </svg>
            <span>Use Cases</span>
         </h1>
         </h1>
         <div id="usecase-intro">
         <div id="usecase-intro">
             <p>This page provides an overview of different Use Cases</p>
             <p>The overall goal of the Social Media and Crowdsourcing (SMCS) Use Cases Library is to collect experiences
                and use cases of how SMCS have been used or can be used in real world. This enables the opportunity to
                give disaster management organisations a concrete indication of how they can use SMCS in practice.</p>
         </div>
         </div>
    </div>


    <!-- FILTERS -->
        <!-- FILTERS -->


    <div id="filter-bar">
        <div id="filter-bar">
        <div style="display: flex; justify-content: space-between;">
            <div style="display: flex; justify-content: space-between;">
            <div style="flex: 1 1;">
                <div style="flex: 1 1;">
                <h2 style="margin-bottom: 1rem;">Applied Filters</h2>
                    <h2 style="margin-bottom: 1rem;">Selected Filters</h2>
                <div id="filter-summary">No filter. Showing all results.</div>
                    <div id="filter-summary">No filter. Showing all results.</div>
                </div>
                <div>
                    <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button>
                </div>
             </div>
             </div>
             <div style="flex: 0 0;">
 
                 <button class="large-button" type="button" onclick="toggleFilter()">Filters</button>
             <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:Use_Cases" style="font-size: 1.5em; font-variant:small-caps; color: var(--links-cyan)">Add new use case</a></div>
             </div>
             </div>
        </div>


        <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
            <div id="uc-filters">
 
                <h2 style="display: flex; justify-content: space-between;">
        <div id="uc-filters">
                    <div>
            <h2 style="display: flex; justify-content: space-between;">
                        <img src="https://assets.links.communitycenter.eu/v2/links/lib?q=filters.svg">
                <div>
                         <span>Filters</span>
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
                    </div>
                         <defs>
                    <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                            <clipPath id="b">
                </h2>
                                <path d="M592 312h96v96h-96z" />
                <div style="text-align: center;">
                            </clipPath>
                     <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                        </defs>
                        <g clip-path="url(#b)" transform="translate(-592 -312)">
                            <path
                                d="M636 356.012v38.011l8-8v-30.011L674 326h-68Zm6.588-1.412-.588.584v30.008l-4 4v-34.008l-.585-.586L610.828 328h58.348Z" />
                        </g>
                    </svg>
                     <span>Filters</span>
                 </div>
                 </div>
                 <a onclick="toggleFilter()" id="close-filter-button">&times;</a>
                 <div class="filter-wrapper">
            </h2>
                    <h4 class="filter-toggle">Theme <div class="plus icon"></div></h4>
            <div style="text-align: center;">
                    <div class="filter-container">
                <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
                        <div class="filter-button-wrapper">
            </div>
                            <button type="button" onclick="selectAll('#type-filter')">Select all</button> |
            <div class="filter-wrapper">
                            <button type="button" onclick="deselectAll('#type-filter')">Clear all</button>
                <h4>Type<span class="filter-toggle"><svg>
                        </div>
                            <use href="#chevron-down" />
                        <div class="filter-content" id="type-filter"></div>
                        </svg></span></h4>
                <div class="filter-container">
                    <div class="filter-button-wrapper">
                        <button type="button" onclick="selectAll('#type-filter')">Select all</button> |
                        <button type="button" onclick="deselectAll('#type-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="type-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Hazard <div class="plus icon"></div></h4>
                <h4>Event type<span class="filter-toggle"><svg>
                    <div class="filter-container">
                            <use href="#chevron-down" />
                        <div class="filter-button-wrapper">
                        </svg></span></h4>
                            <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> |
                <div class="filter-container">
                            <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button>
                    <div class="filter-button-wrapper">
                        </div>
                        <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> |
                        <div class="filter-content" id="event-type-filter"></div>
                        <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="event-type-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Category <div class="plus icon"></div></h4>
                <h4>Category<span class="filter-toggle"><svg>
                    <div class="filter-container">
                            <use href="#chevron-down" />
                        <div class="filter-button-wrapper">
                        </svg></span></h4>
                            <button type="button" onclick="selectAll('#category-filter')">Select all</button> |
                <div class="filter-container">
                            <button type="button" onclick="deselectAll('#category-filter')">Clear all</button>
                    <div class="filter-button-wrapper">
                        </div>
                        <button type="button" onclick="selectAll('#category-filter')">Select all</button> |
                        <div class="filter-content" id="category-filter"></div>
                        <button type="button" onclick="deselectAll('#category-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="category-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Scale <div class="plus icon"></div></h4>
                <h4>Scale<span class="filter-toggle"><svg>
                    <div class="filter-container">
                            <use href="#chevron-down" />
                        <div class="filter-button-wrapper">
                        </svg></span></h4>
                            <button type="button" onclick="selectAll('#scale-filter')">Select all</button> |
                <div class="filter-container">
                            <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button>
                    <div class="filter-button-wrapper">
                        </div>
                        <button type="button" onclick="selectAll('#scale-filter')">Select all</button> |
                        <div class="filter-content" id="scale-filter"></div>
                        <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="scale-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Thematic <div class="plus icon"></div></h4>
                <h4>Thematic<span class="filter-toggle"><svg>
                    <div class="filter-container">
                            <use href="#chevron-down" />
                        <div class="filter-button-wrapper">
                        </svg></span></h4>
                            <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
                <div class="filter-container">
                            <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
                    <div class="filter-button-wrapper">
                        </div>
                        <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> |
                        <div class="filter-content" id="thematic-filter"></div>
                        <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="thematic-filter"></div>
                 </div>
                 </div>
            </div>
                <div class="filter-wrapper">
            <div class="filter-wrapper">
                    <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
                <h4>Disaster Management Phase<span class="filter-toggle"><svg>
                    <div class="filter-container">
                            <use href="#chevron-down" />
                        <div class="filter-button-wrapper">
                        </svg></span></h4>
                            <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                <div class="filter-container">
                            <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                    <div class="filter-button-wrapper">
                        </div>
                        <button type="button" onclick="selectAll('#phases-filter')">Select all</button> |
                        <div class="filter-content" id="phases-filter"></div>
                        <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button>
                     </div>
                     </div>
                    <div class="filter-content" id="phases-filter"></div>
                 </div>
                 </div>
             </div>
             </div>
         </div>
         </div>
        <div id="usecase-tabulator"></div>
     </div>
     </div>
    <div id="usecase-tabulator"></div>


</includeonly>
</includeonly>

Latest revision as of 09:49, 2 October 2024

Current version of the List of Use Cases.
Currently in use – do not modify!


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