Difference between revisions of "Widget:UseCaseList"

From LINKS Community Center
Jump to: navigation, search
m (Protected "Widget:UseCaseList" ([Edit=Allow only administrators] (indefinite) [Move=Allow only administrators] (indefinite)))
 
(33 intermediate revisions by 2 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>
 
     <style>
 
         #usecase-list-wrapper {
 
         #usecase-list-wrapper {
Line 11: Line 12:
 
         #usecase-list-wrapper h1,
 
         #usecase-list-wrapper h1,
 
         #usecase-list-wrapper h2,
 
         #usecase-list-wrapper h2,
         #usecase-list-wrapper h3 {
+
         #usecase-list-wrapper h3,
 +
        #usecase-list-wrapper h4 {
 
             font-family: 'Raleway';
 
             font-family: 'Raleway';
 
             font-weight: 300;
 
             font-weight: 300;
Line 116: Line 118:
 
         }
 
         }
  
        .filter-wrapper h4 {
+
         .filter-wrapper .filter-toggle {
            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;
 
             cursor: pointer;
 
         }
 
         }
  
         .filter-wrapper.open .filter-toggle {
+
         .filter-wrapper.open .plus.icon::after {
             transform: rotate(180deg);
+
             transform: rotate(0);
 
         }
 
         }
  
 
         .filter-content {
 
         .filter-content {
 
             font-size: 1.2em;
 
             font-size: 1.2em;
             margin-bottom: 4em;
+
             margin-bottom: 2em;
 
             display: grid;
 
             display: grid;
 
             grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
 
             grid-template-columns: repeat(auto-fit, minmax(14em, 1fr));
            gap: 1em 1em;
 
 
             align-items: start;
 
             align-items: start;
 +
        }
 +
 +
        .filter-content.loose {
 +
            gap: .5em .5em;
 
         }
 
         }
  
Line 163: Line 159:
 
             height: 2em;
 
             height: 2em;
 
             margin: 0 .5em 0 0;
 
             margin: 0 .5em 0 0;
 +
        }
 +
 +
        .filter-content label {
 +
            display: inline;
 
         }
 
         }
  
Line 234: Line 234:
 
         #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse td>strong {
 
         #usecase-tabulator.tabulator .tabulator-row .tabulator-responsive-collapse td>strong {
 
             font-weight: 300;
 
             font-weight: 300;
 +
        }
 +
 +
        #usecase-tabulator.tabulator .usecase-title {
 +
            white-space: normal !important;
 
         }
 
         }
  
Line 241: Line 245:
 
         }
 
         }
  
 +
        .uc-summary {
 +
            font-size: smaller;
 +
            padding-bottom: 1em;
 +
        }
 
     </style>
 
     </style>
 
     <script>
 
     <script>
Line 258: Line 266:
 
         const PHASES = ["Before", "During", "After"];
 
         const PHASES = ["Before", "During", "After"];
 
         const EX_LEVEL = ["Starter", "Intermediate", "Advanced"];
 
         const EX_LEVEL = ["Starter", "Intermediate", "Advanced"];
 +
        const SCALE = ["Country", "County", "City"];
  
 
         const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
 
         const getQueryUrl = query => '/api.php?action=ask&format=json&query=' + encodeURIComponent(query);
Line 268: Line 277:
 
         const SCALE_PROP = 'Scale';
 
         const SCALE_PROP = 'Scale';
 
         const CAT_PROP = 'Use Cases Category';
 
         const CAT_PROP = 'Use Cases Category';
         const EVENT_PROP = 'Event type'
+
         const EVENT_PROP = 'Event type';
 +
        const SUMMARY_PROP = 'Description';
 +
        const IMAGES_PROP = 'Other images';
 +
        const PUB_PROP = 'Publishing Organisation';
 +
        const INVOLVED_PROP = 'Involved Organisations';
  
 
         const useCaseQuery = '[[Category:Use Cases]]'
 
         const useCaseQuery = '[[Category:Use Cases]]'
Line 277: Line 290:
 
             + '|?' + EVENT_PROP
 
             + '|?' + EVENT_PROP
 
             + '|?' + CAT_PROP
 
             + '|?' + CAT_PROP
 +
            + '|?' + SUMMARY_PROP
 +
            + '|?' + IMAGES_PROP
 +
            + '|?' + PUB_PROP
 +
            + '|?' + INVOLVED_PROP
 
             + '|?' + YEAR_PROP;
 
             + '|?' + YEAR_PROP;
  
 
         async function getUseCases() {
 
         async function getUseCases() {
 
             const useCasesResponse = await fetch(getQueryUrl(useCaseQuery)).then(response => response.json());
 
             const useCasesResponse = await fetch(getQueryUrl(useCaseQuery)).then(response => response.json());
 +
 +
            console.log(useCasesResponse)
  
 
             return Object.keys(useCasesResponse.query.results).map(title => {
 
             return Object.keys(useCasesResponse.query.results).map(title => {
Line 295: Line 314:
 
                 useCase[SCALE_PROP] = useCaseResult.printouts[SCALE_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[EVENT_PROP] = useCaseResult.printouts[EVENT_PROP].map(value => value.fulltext);
 +
                useCase[PUB_PROP] = useCaseResult.printouts[PUB_PROP].map(value => value.fulltext);
 +
                useCase[INVOLVED_PROP] = useCaseResult.printouts[INVOLVED_PROP].map(value => value.fulltext);
 +
                useCase[SUMMARY_PROP] = useCaseResult.printouts[SUMMARY_PROP][0];
 
                 useCase[YEAR_PROP] = useCaseResult.printouts[YEAR_PROP][0] && useCaseResult.printouts[YEAR_PROP][0].raw.slice(-4);
 
                 useCase[YEAR_PROP] = useCaseResult.printouts[YEAR_PROP][0] && useCaseResult.printouts[YEAR_PROP][0].raw.slice(-4);
 
                 return useCase;
 
                 return useCase;
Line 314: Line 336:
 
             const filterState = {};
 
             const filterState = {};
  
             const typeOptions = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]'));
+
             const selectedTypes = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]:checked'))
            const selectedtypes = typeOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.type = selectedtypes.length === typeOptions.length ? undefined : selectedtypes;
+
             if (selectedTypes.length > 0) filterState.type = selectedTypes;
  
             const eventTypeOptions = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]'));
+
             const selectedEvents = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]:checked'))
            const selectedeventType = eventTypeOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.eventType = selectedeventType.length === eventTypeOptions.length ? undefined : selectedeventType;
+
             if (selectedEvents.length > 0) filterState.eventType = selectedEvents;
  
             const categoryOptions = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]'));
+
             const selectedCats = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]:checked'))
            const selectedcategorys = categoryOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.category = selectedcategorys.length === categoryOptions.length ? undefined : selectedcategorys;
+
             if (selectedCats.length > 0) filterState.category = selectedCats;
  
             const scaleOptions = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]'));
+
             const selectedScales = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]:checked'))
            const selectedScaleOptions = scaleOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.scale = selectedScaleOptions.length === scaleOptions.length ? undefined : selectedScaleOptions;
+
             if (selectedScales.length > 0) filterState.scale = selectedScales;
  
             const thematicOptions = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]'));
+
             const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked'))
            const selectedthematics = thematicOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.thematics = selectedthematics.length === thematicOptions.length ? undefined : selectedthematics;
+
             if (selectedThematics.length > 0) filterState.thematics = selectedThematics;
  
             const phaseOptions = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]'));
+
             const selectedPhases = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]:checked'))
            const selectedPhases = phaseOptions.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
+
                .map(checkbox => checkbox.value);
             filterState.phases = selectedPhases.length === phaseOptions.length ? undefined : selectedPhases;
+
             if (selectedPhases.length > 0) filterState.phases = selectedPhases;
  
 
             table.setFilter(useCaseFilter, filterState);
 
             table.setFilter(useCaseFilter, filterState);
Line 351: Line 373:
  
 
             const typeCheck = filterState.type
 
             const typeCheck = filterState.type
                 ? useCase[TYPE_PROP].some(type => filterState.type.includes(type))
+
                 ? filterState.type.every(type => useCase[TYPE_PROP].includes(type))
 
                 : true;
 
                 : true;
 
             const eventTypeCheck = filterState.eventType
 
             const eventTypeCheck = filterState.eventType
                 ? useCase[EVENT_PROP].some(event => filterState.eventType.includes(event))
+
                 ? filterState.eventType.every(event => useCase[EVENT_PROP].includes(event))
 
                 : true;
 
                 : true;
 
             const categoryCheck = filterState.category
 
             const categoryCheck = filterState.category
                 ? useCase[CAT_PROP].some(target => filterState.category.includes(target))
+
                 ? filterState.category.every(cat => useCase[CAT_PROP].includes(cat))
 
                 : true;
 
                 : true;
 
             const scaleCheck = filterState.scale
 
             const scaleCheck = filterState.scale
                 ? useCase[SCALE_PROP].some(ex => filterState.scale.includes(ex))
+
                 ? filterState.scale.every(scale => useCase[SCALE_PROP].includes(scale))
 
                 : true;
 
                 : true;
 
             const thematicCheck = filterState.thematics
 
             const thematicCheck = filterState.thematics
                 ? useCase[THEME_PROP].some(theme => filterState.thematics.includes(theme))
+
                 ? filterState.thematics.every(thematic => useCase[THEME_PROP].includes(thematic))
 
                 : true;
 
                 : true;
 
             const phaseCheck = filterState.phases
 
             const phaseCheck = filterState.phases
                 ? useCase[PHASE_PROP].some(phase => filterState.phases.includes(phase))
+
                 ? filterState.phases.every(phase => useCase[PHASE_PROP].includes(phase))
 
                 : true;
 
                 : true;
 
             return typeCheck && eventTypeCheck && categoryCheck && scaleCheck && thematicCheck && phaseCheck;
 
             return typeCheck && eventTypeCheck && categoryCheck && scaleCheck && thematicCheck && phaseCheck;
Line 373: Line 395:
 
         Promise.all([getUseCases()]).then(data => {
 
         Promise.all([getUseCases()]).then(data => {
 
             const useCases = data[0];
 
             const useCases = data[0];
 +
            console.log(useCases)
  
 
             let THEME_VALUES = []
 
             let THEME_VALUES = []
Line 413: Line 436:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="type-filter-' + identifier
+
                     + '<div><input type="checkbox" id="type-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="type-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="type-filter-' + identifier + '">' + curr + '</label></div>'
Line 422: Line 445:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="event-type-filter-' + identifier
+
                     + '<div><input type="checkbox" id="event-type-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="event-type-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="event-type-filter-' + identifier + '">' + curr + '</label></div>'
Line 431: Line 454:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="category-filter-' + identifier
+
                     + '<div><input type="checkbox" id="category-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="category-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="category-filter-' + identifier + '">' + curr + '</label></div>'
Line 437: Line 460:
 
             document.getElementById('category-filter').innerHTML = categoryHtml;
 
             document.getElementById('category-filter').innerHTML = categoryHtml;
  
             let scaleHtml = Array.from(SCALE_VALUES.values()).reduce((acc, curr) => {
+
             let scaleHtml = SCALE.reduce((acc, curr) => {
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="scale-filter-' + identifier
+
                     + '<div><input type="checkbox" id="scale-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="scale-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="scale-filter-' + identifier + '">' + curr + '</label></div>'
Line 449: Line 472:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="phases-filter-' + identifier
+
                     + '<div><input type="checkbox" id="phases-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="phases-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="phases-filter-' + identifier + '">' + curr + '</label></div>'
Line 458: Line 481:
 
                 const identifier = escapeAttr(curr);
 
                 const identifier = escapeAttr(curr);
 
                 return acc
 
                 return acc
                     + '<div><input type="checkbox" checked id="phases-filter-' + identifier
+
                     + '<div><input type="checkbox" id="thematic-filter-' + identifier
 
                     + '" value="' + curr + '">'
 
                     + '" value="' + curr + '">'
 
                     + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
 
                     + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
Line 474: Line 497:
 
                         field: 'title',
 
                         field: 'title',
 
                         cssClass: 'usecase-title',
 
                         cssClass: 'usecase-title',
                         formatter: cell => '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>',
+
                         formatter: function (cell) {
                         minWidth: '1000px'
+
                            let out = '<a href="' + cell.getData().url + '">' + cell.getValue() + '</a>';
 +
                            out += '<div class="uc-summary">' + cell.getData()[SUMMARY_PROP] + '</div>';
 +
                            return out;
 +
                        },
 +
                         maxWidth: '850px'
 
                     },
 
                     },
 
                     {
 
                     {
Line 483: Line 510:
 
                     },
 
                     },
 
                     {
 
                     {
                         title: 'Type',
+
                         title: 'Publisher',
 +
                        field: PUB_PROP,
 +
                        formatter: cell => cell.getValue().join(', ')
 +
                    },
 +
                    {
 +
                        title: 'Theme',
 
                         field: TYPE_PROP,
 
                         field: TYPE_PROP,
 
                         formatter: cell => cell.getValue().join(', ')
 
                         formatter: cell => cell.getValue().join(', ')
 
                     },
 
                     },
 
                     {
 
                     {
                         title: 'Event type',
+
                         title: 'Hazard',
 
                         field: EVENT_PROP,
 
                         field: EVENT_PROP,
                         formatter: cell => cell.getValue().join(', ')
+
                         formatter: cell => cell.getValue().join(', ') || '&mdash;'
 
                     },
 
                     },
 
                     {
 
                     {
Line 517: Line 549:
 
                         title: 'Disaster Management Phase',
 
                         title: 'Disaster Management Phase',
 
                         field: PHASE_PROP,
 
                         field: PHASE_PROP,
 +
                        formatter: cell => cell.getValue().join(', ')
 +
                    },
 +
                    {
 +
                        title: 'Involved Organisations',
 +
                        field: INVOLVED_PROP,
 
                         formatter: cell => cell.getValue().join(', ')
 
                         formatter: cell => cell.getValue().join(', ')
 
                     }
 
                     }
Line 528: Line 565:
 
             tabulator.on('tableBuilt', () => {
 
             tabulator.on('tableBuilt', () => {
 
                 tabulator.redraw(true);
 
                 tabulator.redraw(true);
                console.log('done')
 
 
                 table = tabulator;
 
                 table = tabulator;
 +
 +
                // Set up the table if parameter was passed.
 +
                const params = new URLSearchParams(window.location.search);
 +
                const encoded = params.get('do');
 +
 +
                if (encoded) {
 +
                    const actions = JSON.parse(decodeURIComponent(atob(encoded)));
 +
                    const filter = actions.filter;
 +
 +
                    if (filter) {
 +
                        const thematic = filter[THEME_PROP];
 +
                        if (thematic) {
 +
                            Object.keys(thematic).forEach(theme => {
 +
                                const box = document.getElementById('thematic-filter-' + escapeAttr(theme));
 +
                                box.checked = !!thematic[theme];
 +
                                box.dispatchEvent(new Event('change', { bubbles: true }));
 +
                            });
 +
 +
                            document.getElementById('thematic-filter').closest('.filter-wrapper').classList.toggle('open');
 +
                        }
 +
                       
 +
                        const type = filter[TYPE_PROP];
 +
                        if (type) {
 +
                            Object.keys(type).forEach(tp => {
 +
                                const box = document.getElementById('type-filter-' + escapeAttr(tp));
 +
                                box.checked = !!type[tp];
 +
                                box.dispatchEvent(new Event('change', { bubbles: true }));
 +
                            });
 +
 +
                            document.getElementById('type-filter').closest('.filter-wrapper').classList.toggle('open');
 +
                        }
 +
 +
                        applyFilters();
 +
                        toggleFilter();
 +
                    }
 +
 +
                    // Further actions (e.g. open filter panel, etc.)
 +
                    // ...
 +
                }
  
 
             });
 
             });
Line 541: Line 616:
 
                 // Exit if filter object/type doesn't exist (happens after Tabulator's own filter reset).
 
                 // 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; }
 
                 if (!(filter && filter.type)) { summary.textContent = 'No filter. Showing all results.'; return; }
 
                console.log(filter)
 
 
  
 
                 // Update filter text.
 
                 // Update filter text.
Line 557: Line 629:
 
                     let summaryHtml = '<table>';
 
                     let summaryHtml = '<table>';
 
                     if (filter.type.type) {
 
                     if (filter.type.type) {
                         summaryHtml += '<tr><td><strong>Type</strong></td><td>'
+
                         summaryHtml += '<tr><td><strong>Theme</strong></td><td>'
 
                             + (filter.type.type.length > 0 ? filter.type.type.join(', ') : 'none')
 
                             + (filter.type.type.length > 0 ? filter.type.type.join(', ') : 'none')
 
                             + '</td></tr>';
 
                             + '</td></tr>';
 
                     }
 
                     }
 
                     if (filter.type.eventType) {
 
                     if (filter.type.eventType) {
                         summaryHtml += '<tr><td><strong>Event type</strong></td><td>'
+
                         summaryHtml += '<tr><td><strong>Hazard</strong></td><td>'
 
                             + (filter.type.eventType.length > 0 ? filter.type.eventType.join(', ') : 'none')
 
                             + (filter.type.eventType.length > 0 ? filter.type.eventType.join(', ') : 'none')
 
                             + '</td></tr>';
 
                             + '</td></tr>';
Line 633: Line 705:
 
             tabulator.on('renderComplete', function () {
 
             tabulator.on('renderComplete', function () {
 
                 // TODO: Check the bugfix for a possible infinite event loop.
 
                 // 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 {
 
                 try {
Line 669: Line 739:
 
         }
 
         }
 
     </script>
 
     </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">
Line 688: Line 744:
 
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
 
             <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
 
                 <defs>
 
                 <defs>
                     <clipPath id="a">
+
                     <clipPath id="uc">
                         <path d="M592 372h96v96h-96z" />
+
                         <path d="M592 312h96v96h-96z" />
 
                     </clipPath>
 
                     </clipPath>
 
                 </defs>
 
                 </defs>
                 <g clip-path="url(#a)" transform="translate(-592 -372)">
+
                 <g clip-path="url(#uc)" transform="translate(-592 -312)">
 +
                    <path d="m648.783 351.102 1.99-.204 2.359 23.001-1.989.204Z" />
 
                     <path
 
                     <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" />
+
                         d="M674 387h-6v-5h-8.093l-3.531-36.291A2.99 2.99 0 0 0 653.39 343h-26.658a2.991 2.991 0 0 0-2.985 2.7L620.1 382H612v5h-6v7h68Zm-48.263-41.1a1 1 0 0 1 .995-.9h26.658a.999.999 0 0 1 1 .9l3.51 36.1h-35.795ZM672 392h-64v-3h6v-5h52v5h6ZM639 326h2v12h-2ZM606 355h10v2h-10ZM664 355h10v2h-10ZM611.293 332.707l1.414-1.414 8 8-1.414 1.414ZM659.293 339.293l8-8 1.414 1.414-8 8Z" />
                    <path d="m644.8 412 2.5 26h4.1l-2.6-26Z" />
 
 
                 </g>
 
                 </g>
 
             </svg>
 
             </svg>
             <span>Use Cases</span>
+
             <div>
 +
                <div>Use Cases</div>
 +
                <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
 +
                    Library</div>
 +
            </div>
 
         </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;">
+
                        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden"
                <div>
+
                            viewBox="0 0 96 96">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" viewBox="0 0 96 96">
+
                            <defs>
                        <defs>
+
                                <clipPath id="b">
                            <clipPath id="b">
+
                                    <path d="M592 312h96v96h-96z" />
                                <path d="M592 312h96v96h-96z" />
+
                                </clipPath>
                            </clipPath>
+
                            </defs>
                        </defs>
+
                            <g clip-path="url(#b)" transform="translate(-592 -312)">
                        <g clip-path="url(#b)" transform="translate(-592 -312)">
+
                                <path
                            <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" />
                                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>
                        </g>
+
                        </svg>
                    </svg>
+
                        <span>Filters</span>
                    <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>
                 <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 12:29, 13 October 2023

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