Difference between revisions of "Widget:UseCaseList"

From LINKS Community Center
Jump to: navigation, search
 
(29 intermediate revisions by the same user 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 132: Line 133:
 
             align-items: start;
 
             align-items: start;
 
         }
 
         }
−
       
+
 
 
         .filter-content.loose {
 
         .filter-content.loose {
 
             gap: .5em .5em;
 
             gap: .5em .5em;
Line 233: 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 240: Line 245:
 
         }
 
         }
  
 +
        .uc-summary {
 +
            font-size: smaller;
 +
            padding-bottom: 1em;
 +
        }
 
     </style>
 
     </style>
 
     <script>
 
     <script>
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 440: Line 463:
 
                 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="thematic-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 674: 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>
 
             <div>
 
             <div>
 
                 <div>Use Cases</div>
 
                 <div>Use Cases</div>
−
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .6em;">Social Media and Crowdsourcing
+
                 <div style="font-size:small; letter-spacing:.03em; margin-left: .35em;">Social Media and Crowdsourcing
 
                     Library</div>
 
                     Library</div>
 
             </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>
  
Line 702: Line 774:
 
                     <div id="filter-summary">No filter. Showing all results.</div>
 
                     <div id="filter-summary">No filter. Showing all results.</div>
 
                 </div>
 
                 </div>
−
                 <div style="flex: 0 0;">
+
                 <div>
−
                     <button class="large-button" type="button" onclick="toggleFilter()">Filters</button>
+
                     <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
  
−
             <h2 style="margin-top: 2.5rem; margin-bottom: 0;">Results: <span id="result-count"></span></h2>
+
             <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 id="uc-filters">
 
             <div id="uc-filters">
 
                 <h2 style="display: flex; justify-content: space-between;">
 
                 <h2 style="display: flex; justify-content: space-between;">
 
                     <div>
 
                     <div>
−
                         <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="b">
 
                                 <clipPath id="b">
Line 728: Line 804:
 
                 </h2>
 
                 </h2>
 
                 <div style="text-align: center;">
 
                 <div style="text-align: center;">
−
                     <button class="large-button" type="button" onclick="clearFilters()">Show All</button>
+
                     <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button>
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Type <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Theme <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 742: Line 817:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Event type <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Hazard <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 753: Line 827:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Category <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Category <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 764: Line 837:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Scale <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Scale <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 775: Line 847:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Thematic <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Thematic <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">
Line 786: Line 857:
 
                 </div>
 
                 </div>
 
                 <div class="filter-wrapper">
 
                 <div class="filter-wrapper">
−
                     <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div>
+
                     <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4>
−
                    </h4>
 
 
                     <div class="filter-container">
 
                     <div class="filter-container">
 
                         <div class="filter-button-wrapper">
 
                         <div class="filter-button-wrapper">

Latest revision as of 12:29, 13 October 2023

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=11885"