Difference between revisions of "Widget:UseCaseList"
From LINKS Community Center
| (14 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 475: | 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 482: | Line 508: | ||
field: YEAR_PROP, | field: YEAR_PROP, | ||
minWidth: '200px' | minWidth: '200px' | ||
| + | }, | ||
| + | { | ||
| + | title: 'Publisher', | ||
| + | field: PUB_PROP, | ||
| + | formatter: cell => cell.getValue().join(', ') | ||
}, | }, | ||
{ | { | ||
| Line 518: | 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 549: | Line 585: | ||
document.getElementById('thematic-filter').closest('.filter-wrapper').classList.toggle('open'); | 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'); | ||
} | } | ||
Latest revision as of 12:29, 13 October 2023
Current version of the List of Use Cases.
Currently in use – do not modify!