Difference between revisions of "Widget:DevGuidelines"

From LINKS Community Center
Jump to: navigation, search
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 17: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"