Difference between revisions of "Widget:UseCaseList"
From LINKS Community Center
| (16 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;"> | + | <noinclude>Current version of the List of Use Cases.<br><strong style="color:red;">Currently in use – do not modify!</strong> |
</noinclude> | </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 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 239: | Line 243: | ||
#usecase-tabulator.tabulator .tabulator-responsive-collapse table a { | #usecase-tabulator.tabulator .tabulator-responsive-collapse table a { | ||
color: var(--links-cyan); | color: var(--links-cyan); | ||
| + | } | ||
| + | |||
| + | .uc-summary { | ||
| + | font-size: smaller; | ||
| + | padding-bottom: 1em; | ||
} | } | ||
</style> | </style> | ||
| 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 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 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 481: | Line 508: | ||
field: YEAR_PROP, | field: YEAR_PROP, | ||
minWidth: '200px' | minWidth: '200px' | ||
| + | }, | ||
| + | { | ||
| + | title: 'Publisher', | ||
| + | field: PUB_PROP, | ||
| + | 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 706: | Line 781: | ||
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem;"> | <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> | <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">Add new use case</a></div> | + | <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> | ||
Latest revision as of 12:29, 13 October 2023
Current version of the List of Use Cases.
Currently in use – do not modify!