Widget: DevGuidelines: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Cschwentker (talk | contribs)
No edit summary
Cschwentker (talk | contribs)
No edit summary
Line 274: Line 274:
             let EXPERIENCE_LEVEL_VALUES = [];
             let EXPERIENCE_LEVEL_VALUES = [];
             let YEAR_LEVEL_VALUES = [];
             let YEAR_LEVEL_VALUES = [];
 
            let PHASE_VALUES = [];


             for(const guideline of guidelines){
             for(const guideline of guidelines){
Line 283: Line 283:
                 EXPERIENCE_LEVEL_VALUES = EXPERIENCE_LEVEL_VALUES.concat(guideline[EX_PROP])  
                 EXPERIENCE_LEVEL_VALUES = EXPERIENCE_LEVEL_VALUES.concat(guideline[EX_PROP])  
                 YEAR_LEVEL_VALUES =  YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP])
                 YEAR_LEVEL_VALUES =  YEAR_LEVEL_VALUES.concat(guideline[YEAR_PROP])
                PHASE_VALUES = PHASE_VALUES.concat(guideline[PHASE_PROP])
            }


            }
             LANGUAGES_VALUES = new Set(LANGUAGES_VALUES);
             LANGUAGES_VALUES = new Set(LANGUAGES_VALUES);
             COVERS_THEMATIC_VALUES = new Set(COVERS_THEMATIC_VALUES);
             COVERS_THEMATIC_VALUES = new Set(COVERS_THEMATIC_VALUES);
             TARGET_AUDIENCE_VALUES = new Set(TARGET_AUDIENCE_VALUES);
             TARGET_AUDIENCE_VALUES = new Set(TARGET_AUDIENCE_VALUES);
            EXPERIENCE_LEVEL_VALUES = new Set(EXPERIENCE_LEVEL_VALUES);
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
             YEAR_LEVEL_VALUES = new Set(YEAR_LEVEL_VALUES);
 
             PHASE_VALUES = new Set(PHASE_VALUES);
             console.log(LANGUAGES_VALUES);


             let languageFilterHtml = Array.from(LANGUAGES_VALUES.values()).reduce((acc, curr) => {
             let languageFilterHtml = Array.from(LANGUAGES_VALUES.values()).reduce((acc, curr) => {
Line 299: Line 300:
                     + '<label for="language-filter-' + identifier + '">' + curr + '</label></div>'
                     + '<label for="language-filter-' + identifier + '">' + curr + '</label></div>'
             }, '');
             }, '');
            document.getElementById('language-filter').innerHTML = languageFilterHtml;


            console.log(languageFilterHtml);
            let coversThematicHtml = Array.from(COVERS_THEMATIC_VALUES.values()).reduce((acc, curr) => {
             document.getElementById('language-filter').innerHTML = languageFilterHtml;
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="thematic-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="thematic-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('thematic-filter').innerHTML = coversThematicHtml;
           
            let phaseHtml = Array.from(PHASE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="phase-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="phase-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('phase-filter').innerHTML = phaseHtml;
       
            let targetAudienceHtml = Array.from(TARGET_AUDIENCE_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="target-audience-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="target-audience-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
             document.getElementById('target-audience-filter').innerHTML = targetAudienceHtml;


            let targetAudienceExperienceHtml = Array.from(EXPERIENCE_LEVEL_VALUES.values()).reduce((acc, curr) => {
                const identifier = escapeAttr(curr);
                return acc
                    + '<div><input type="checkbox" checked id="audience-experience-filter-' + identifier
                    + '" value="' + curr + '">'
                    + '<label for="audience-experience-filter-' + identifier + '">' + curr + '</label></div>'
            }, '');
            document.getElementById('target-audience-filter').innerHTML = targetAudienceExperienceHtml;
           
             const table = new Tabulator('#guideline-tabulator', {
             const table = new Tabulator('#guideline-tabulator', {
                 data: guidelines,
                 data: guidelines,
Line 362: Line 397:
             }, { passive: true });
             }, { passive: true });
             document.getElementById('language-filter').addEventListener('change', event => {
             document.getElementById('language-filter').addEventListener('change', event => {
                applyFilters();
            }, { passive: true });
            document.getElementById('phase-filter').addEventListener('change', event => {
                 applyFilters();
                 applyFilters();
             }, { passive: true });
             }, { passive: true });
Line 384: Line 422:
             }, { passive: true });
             }, { passive: true });
         });
         });


         function selectAll(context) {
         function selectAll(context) {
Line 518: Line 554:
                     </div>
                     </div>
                     <div class="filter-content" id="language-filter"></div>
                     <div class="filter-content" id="language-filter"></div>
                </div>
            </div>
            <div clss="filter-wrapper">
                <h4>Disaster Management Phase<span class="filter-toggle"><svg><use href="#chevron-down"/></svg></span></h4>
                <div class="filter-container">
                    <div class="filter-button-wrapper">
                        <button type="button" onclick="selectAll('#phase-filter')">Select all</button> |
                        <button type="button" onclick="deselectAll('#phase-filter')">Clear all</button>
                    </div>
                    <div class="filter-content" id="phase-filter"></div>
                 </div>
                 </div>
             </div>
             </div>

Revision as of 16:30, 22 November 2022

Development version of the List of Guidelines.
Not ready for production!

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:DevGuidelines&oldid=8568"