Difference between revisions of "Widget:UseCaseList"
From LINKS Community Center
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> | + | <noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">Currently in use – 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 .filter-toggle { | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | .filter-wrapper .filter-toggle | ||
− | |||
− | |||
− | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
− | .filter-wrapper.open . | + | .filter-wrapper.open .plus.icon::after { |
− | transform: rotate( | + | transform: rotate(0); |
} | } | ||
.filter-content { | .filter-content { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
− | margin-bottom: | + | 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)); | ||
− | |||
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 | + | const selectedTypes = Array.from(document.querySelectorAll('#type-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.type = | + | if (selectedTypes.length > 0) filterState.type = selectedTypes; |
− | const | + | const selectedEvents = Array.from(document.querySelectorAll('#event-type-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.eventType = | + | if (selectedEvents.length > 0) filterState.eventType = selectedEvents; |
− | const | + | const selectedCats = Array.from(document.querySelectorAll('#category-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.category = | + | if (selectedCats.length > 0) filterState.category = selectedCats; |
− | const | + | const selectedScales = Array.from(document.querySelectorAll('#scale-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.scale = | + | if (selectedScales.length > 0) filterState.scale = selectedScales; |
− | const | + | const selectedThematics = Array.from(document.querySelectorAll('#thematic-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.thematics = | + | if (selectedThematics.length > 0) filterState.thematics = selectedThematics; |
− | const | + | const selectedPhases = Array.from(document.querySelectorAll('#phases-filter input[type="checkbox"]:checked')) |
− | + | .map(checkbox => checkbox.value); | |
− | filterState.phases = | + | 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 | ||
− | ? | + | ? filterState.type.every(type => useCase[TYPE_PROP].includes(type)) |
: true; | : true; | ||
const eventTypeCheck = filterState.eventType | const eventTypeCheck = filterState.eventType | ||
− | ? | + | ? filterState.eventType.every(event => useCase[EVENT_PROP].includes(event)) |
: true; | : true; | ||
const categoryCheck = filterState.category | const categoryCheck = filterState.category | ||
− | ? useCase[CAT_PROP] | + | ? filterState.category.every(cat => useCase[CAT_PROP].includes(cat)) |
: true; | : true; | ||
const scaleCheck = filterState.scale | const scaleCheck = filterState.scale | ||
− | ? useCase[SCALE_PROP]. | + | ? filterState.scale.every(scale => useCase[SCALE_PROP].includes(scale)) |
: true; | : true; | ||
const thematicCheck = filterState.thematics | const thematicCheck = filterState.thematics | ||
− | ? useCase[THEME_PROP] | + | ? filterState.thematics.every(thematic => useCase[THEME_PROP].includes(thematic)) |
: true; | : true; | ||
const phaseCheck = filterState.phases | const phaseCheck = filterState.phases | ||
− | ? | + | ? 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" | + | + '<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" | + | + '<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" | + | + '<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 = | + | let scaleHtml = SCALE.reduce((acc, curr) => { |
const identifier = escapeAttr(curr); | const identifier = escapeAttr(curr); | ||
return acc | return acc | ||
− | + '<div><input type="checkbox" | + | + '<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" | + | + '<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" | + | + '<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 = | + | formatter: function (cell) { |
− | + | 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: ' | + | 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: ' | + | title: 'Hazard', |
field: EVENT_PROP, | field: EVENT_PROP, | ||
− | formatter: cell => cell.getValue().join(', ') | + | formatter: cell => cell.getValue().join(', ') || '—' |
}, | }, | ||
{ | { | ||
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); | ||
− | |||
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; } | ||
− | |||
− | |||
− | |||
// 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> | + | 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> | + | 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. | ||
− | |||
− | |||
try { | try { | ||
Line 669: | Line 739: | ||
} | } | ||
</script> | </script> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<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=" | + | <clipPath id="uc"> |
− | <path d="M592 | + | <path d="M592 312h96v96h-96z" /> |
</clipPath> | </clipPath> | ||
</defs> | </defs> | ||
− | <g clip-path="url(# | + | <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=" | + | 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" /> |
− | |||
</g> | </g> | ||
</svg> | </svg> | ||
− | < | + | <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> | + | <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> | ||
− | |||
− | + | <!-- FILTERS --> | |
− | + | <div id="filter-bar"> | |
− | + | <div style="display: flex; justify-content: space-between;"> | |
− | + | <div style="flex: 1 1;"> | |
− | + | <h2 style="margin-bottom: 1rem;">Selected Filters</h2> | |
− | + | <div id="filter-summary">No filter. Showing all results.</div> | |
+ | </div> | ||
+ | <div> | ||
+ | <button class="large-button" type="button" onclick="toggleFilter()">Open Filters</button> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div style="flex: | + | |
− | < | + | <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 id="uc-filters"> | |
− | + | <h2 style="display: flex; justify-content: space-between;"> | |
− | + | <div> | |
− | + | <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" overflow="hidden" | |
− | + | viewBox="0 0 96 96"> | |
− | + | <defs> | |
− | + | <clipPath id="b"> | |
− | + | <path d="M592 312h96v96h-96z" /> | |
− | + | </clipPath> | |
− | + | </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> | |
+ | <a onclick="toggleFilter()" id="close-filter-button">×</a> | ||
+ | </h2> | ||
+ | <div style="text-align: center;"> | ||
+ | <button class="large-button" type="button" onclick="clearFilters()">Clear Filters</button> | ||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Theme <div class="plus icon"></div></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 class="filter-content" id="type-filter"></div> | |
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Hazard <div class="plus icon"></div></h4> | |
− | + | <div class="filter-container"> | |
− | + | <div class="filter-button-wrapper"> | |
− | + | <button type="button" onclick="selectAll('#event-type-filter')">Select all</button> | | |
− | + | <button type="button" onclick="deselectAll('#event-type-filter')">Clear all</button> | |
− | + | </div> | |
− | + | <div class="filter-content" id="event-type-filter"></div> | |
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Category <div class="plus icon"></div></h4> | |
− | + | <div class="filter-container"> | |
− | + | <div class="filter-button-wrapper"> | |
− | + | <button type="button" onclick="selectAll('#category-filter')">Select all</button> | | |
− | + | <button type="button" onclick="deselectAll('#category-filter')">Clear all</button> | |
− | + | </div> | |
− | + | <div class="filter-content" id="category-filter"></div> | |
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Scale <div class="plus icon"></div></h4> | |
− | + | <div class="filter-container"> | |
− | + | <div class="filter-button-wrapper"> | |
− | + | <button type="button" onclick="selectAll('#scale-filter')">Select all</button> | | |
− | + | <button type="button" onclick="deselectAll('#scale-filter')">Clear all</button> | |
− | + | </div> | |
− | + | <div class="filter-content" id="scale-filter"></div> | |
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Thematic <div class="plus icon"></div></h4> | |
− | + | <div class="filter-container"> | |
− | + | <div class="filter-button-wrapper"> | |
− | + | <button type="button" onclick="selectAll('#thematic-filter')">Select all</button> | | |
− | + | <button type="button" onclick="deselectAll('#thematic-filter')">Clear all</button> | |
− | + | </div> | |
− | + | <div class="filter-content" id="thematic-filter"></div> | |
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
− | + | <div class="filter-wrapper"> | |
− | + | <h4 class="filter-toggle">Disaster Management Phase <div class="plus icon"></div></h4> | |
− | + | <div class="filter-container"> | |
− | + | <div class="filter-button-wrapper"> | |
− | + | <button type="button" onclick="selectAll('#phases-filter')">Select all</button> | | |
− | + | <button type="button" onclick="deselectAll('#phases-filter')">Clear all</button> | |
− | + | </div> | |
− | + | <div class="filter-content" id="phases-filter"></div> | |
− | |||
</div> | </div> | ||
− | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | <div id="usecase-tabulator"></div> | ||
+ | |||
</div> | </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!