MediaWiki:PolicyOverview.js

ORGS_MAX_OPTIONS = 999
var highlightedTerm = null
var highlights = null
var hightlightIndex = 0

function prevMatch() {
    var searchword = $("#searchtxt").val();
    if(searchword != '') {
        $('#overview_actions').addClass('search')

        if( hightlightIndex > 0) {
            hightlightIndex--
        }
        replaceText()
    
    }
}
function nextMatch() {
    var searchword = $("#searchtxt").val();
    if(searchword != '') {

        $('#overview_actions').addClass('search')
        replaceText()
        if(hightlightIndex < highlights.length -1) {
            hightlightIndex++
        }
    }
}
function replaceText() {
    var searchword = $("#searchtxt").val();
    console.log(hightlightIndex)
    if(searchword != highlightedTerm) {
        highlightedTerm = searchword
        hightlightIndex = 0
        $(".card-body").find(".highlight").removeClass("highlight");
        var custfilter = new RegExp(searchword, "ig");
        var repstr = "<span class='highlight'>" + searchword + "</span>";
        if (searchword != "") {
            $('.card-body').each(function() {
                $(this).html($(this).html().replace(custfilter, repstr));
            })
        }
        highlights = $('.highlight')
        if(highlights.length >0) {
            highlights[hightlightIndex].scrollIntoView()
            $('html, body').animate({scrollTop: '-=70px'}, 0);
    
        }
    }
    else {        
        highlights[hightlightIndex].scrollIntoView()
        $('html, body').animate({scrollTop: '-=70px'}, 0);        
    }
    $('#numOfMatches').text((hightlightIndex + 1) + '/' + highlights.length)

}

function clearSearch() {
    $("#searchtxt").val('');
    $('#overview_actions').removeClass('search')
    $(".card-body").find(".highlight").removeClass("highlight");
    hightlightIndex = 0
    $('#numOfMatches').text('')
    window.scrollTo(0,0)
}

function updateActionView() {
    $('#overview_actions').text('')
    var domains = getSelectedOptions('#domains')
    var years = getSelectedOptions('#years')
    var actors = getSelectedOptions('#actors')
    var orgs = getSelectedOptions('#orgs')
    console.log(domains)
    console.log(years)
    console.log(orgs)
    console.log(actors)

    if(actors.size > 0) {
        $('#intro').hide()
    }
    else {
        $('#intro').show()
    }

    // filter actions based on selections 
    filtered_actions = filterActions(domains, years, actors)
    console.log(filtered_actions)
    // render 
    var column_grouping = 'none' //getSelectedOptions('#col_grouping').values().next().value
    var row_grouping = getSelectedOptions('#row_grouping').values().next().value
    console.log(row_grouping)

    console.log(column_grouping)

    grouped_actions = groupActions(filtered_actions, column_grouping, row_grouping)

    renderActions(grouped_actions, column_grouping, row_grouping, actors)
    document.querySelectorAll('.rowgroup-header').forEach(function(e) {        
        observer.observe(e)
    });

    
}

function renderActions(actions, column_grouping, row_grouping, actors)  {
    for(var year = 2020; year < 2026; year++)  {
        if((''+year in actions)) {
            var group = actions[year]
            var year_container = $('<div>', {id: 'year' + year, class: 'year-container'})
            var year_header_container = $('<div>', {class: 'sticky-top', style:'z-index: 5; background-color: #00426b'})

            var year_header = $('<div>', {class: 'year-header '}).html('<h1 class="year">'+year+'</h1>')
            year_container.append(year_header_container)
            year_header_container.append(year_header)
    
            $('#nav-item-year' + year).show()
            var group = actions[year]
            if(Array.isArray(group)) {
                var header_count = $('<span>', {class: 'action_count'}).text(group.length + ' toimenpidettä')
                year_header.append(header_count)
                group.forEach(obj => {
                    action_card = renderAction(obj)
                    year_container.append(action_card)                
                })    
            }
            else {
                if (row_grouping != 'none') {
                    var rowKeys = getSortedKeys(group)
                    var rowZ = 10;
                    rowKeys.forEach(rowTitle => {
                        if(row_grouping === 'action_responsible_actor' &&  !actors.has(rowTitle)) {
                            // skip
                        }  
                        else {
                            var rowgroup_header = $('<div>', {id: 'year-title-' + year, class: 'rowgroup-header sticky-top', style:'z-index:' + rowZ}).html('<h2 style="padding-bottom: 0;">'+rowTitle+'</h2>')
                            rowZ = rowZ + 1
                            year_container.append(rowgroup_header)
                            if(column_grouping != 'none') {
                                var colKeys = getSortedKeys(group[rowTitle])
                                var colContainer = $('<div>', {class:'container-fluid'})
                                var colRow = $('<div>', {class: 'row'})
                                colKeys.forEach(colTitle => {
                                    if(column_grouping === 'action_responsible_actor' &&  !actors.has(colTitle)) {
                                        // skip
                                    }else {
                                        var colCol = $('<div>', {class: 'col'})
                                        if(Array.isArray(group[rowTitle][colTitle])) {
                                            var colgroup_header = $('<div>', {class: 'colgroup-header'}).html('<h2>'+colTitle+'</h2>')
                                            colCol.append(colgroup_header)
                                            group[rowTitle][colTitle].forEach(obj => {
                                                action_card = renderAction(obj)
                                                colCol.append(action_card)                
                                            })    
                                        }
                                        colRow.append(colCol)
    
                                    }                                    
                                })
                                
                                colContainer.append(colRow)
                                year_container.append(colContainer)                            
                            }   
                            else {
                                var header_count = $('<span>', {class: 'action_count'}).text(group[rowTitle].length + ' toimenpidettä')
                                rowgroup_header.append(header_count)
                                group[rowTitle].forEach(obj => {
                                    action_card = renderAction(obj)
                                    year_container.append(action_card)                            
                                })
                            }    
                        }       
                        
                 
    
                    })
                }
                else {
                    var colKeys = getSortedKeys(group)
                    var colContainer = $('<div>', {class:'container-fluid'})
                    var colRow = $('<div>', {class: 'row'})
                    colKeys.forEach(colTitle => {
                        if(column_grouping === 'action_responsible_actor' &&  !actors.has(colTitle)) {
                            // skip
                        }          
                        else {
                            var colCol = $('<div>', {class: 'col'})
                            if(Array.isArray(group[colTitle])) {
                                var colgroup_header = $('<div>', {class: 'colgroup-header'}).html('<h2>'+colTitle+'</h2>')
                                colCol.append(colgroup_header)
                                group[colTitle].forEach(obj => {
                                    action_card = renderAction(obj)
                                    colCol.append(action_card)                
                                })    
                            }
                            colRow.append(colCol)
    
                        }              
                    })
                    
                    colContainer.append(colRow)
                    year_container.append(colContainer)
                }
            }
        }
        else {
            $('#nav-item-year' + year).hide()
        }
        $('#overview_actions').append(year_container)
    }
}


function groupActions(actions, column_grouping, row_grouping) {
    // group first by year
    groups = group_actions_by_year(actions)
    // then by row if selected
    if(row_grouping != 'none') {
        var nestedProp = null
        if (row_grouping != 'action_field') {
            nestedProp = 'fulltext'
        }
        second_level_grouping(groups, row_grouping, nestedProp)
        nestedProp = null
        if(column_grouping != 'none') {
            if (column_grouping != 'action_field') {
                nestedProp = 'fulltext'
            }
            console.log(nestedProp)
            third_level_grouping(groups, column_grouping, nestedProp)
        }
    }

    // and last by col if selected
    if(column_grouping != 'none' && row_grouping == 'none') {
        var nestedProp = null
        if (column_grouping != 'action_field') {
            nestedProp = 'fulltext'
        }
        second_level_grouping(groups, column_grouping, nestedProp)
    
    }
    console.log(groups)
    return groups

}

function second_level_grouping(groups, prop, nestedProp = null) {
    console.log(nestedProp)
    Object.keys(groups).forEach(function(key) {
        var data = groups[key]
        const parents = data.reduce((parents, item) => {
            if (nestedProp != null) {
                for (const _item of item[prop]) {
                    var value = _item[nestedProp]                    
                    const c = parents[value] || []
                    c.push(item)
                    parents[value] = c                    
                } 
            }
            else {
                const parent = (parents[item[prop]] || []);
                parent.push(item);
                parents[item[prop]] = parent;
            }
            return parents               

        }, {});
        groups[key] = parents
    })
    return groups
}

function third_level_grouping(groups, prop, nestedProp = null) {
    console.log(nestedProp)
    Object.keys(groups).forEach(function(_key) {
        var second_group = groups[_key]
        Object.keys(second_group).forEach(function(key) {
            data = second_group[key]
            const parents = data.reduce((parents, item) => {
                if (nestedProp != null) {

                    for (const _item of item[prop]) {
                        var value = _item[nestedProp]                    
                        const c = parents[value] || []
                        c.push(item)
                        parents[value] = c                    
                    } 
                }
                else {
                    const parent = (parents[item[prop]] || []);
                    parent.push(item);
                    parents[item[prop]] = parent;
                }
                return parents               
    
            }, {});
            second_group[key] = parents
    
        })
    })
    return groups
}

function filterActions(domains, years, actors) {

    // actors   
    result = actions.filter(action => {
        return intersection(
            new Set(action.action_responsible_actor.map(a=>a.fulltext)), 
            actors).size > 0
    })    
    // years
    result = result.filter(action => {        
        return years.has(getActionYear(action))
    })
    // domains
    result = result.filter(action => {
        return domains.has(action.action_domain)
    })
    return result
}