paperfilter.js

var state2020 = 0
var state2021 = 0
var state2022 = 0
var state2023 = 0
var state2019 = 0   
var state = 0
var count = 0
function filter(year){
    var new_row = document.getElementById("cont_paper")
    new_row.innerHTML = "";
   document.getElementById("nextblock").style.display = "none"

    if (year == "2020") {
        state = state2020 
    } else if (year == "2021"){
        state = state2021
    } else if (year == "2019"){
        state = state2019
    }else if (year == "2022"){
        state = state2022
    }else if (year == "2023"){
        state = state2023
    }
    if (state == 0){
        console.log("filter")
        // Start loading/adding the paper content to the page here .....
        if (year == "2020"){
            for (var j = 0; j < jsonContent.length; j++) {
                        var filterString = jsonContent[j].item.conference.date.toString()
                        if ( filterString.includes('2020') || jsonContent[j].item.journal.year == 2020) {
                            addpaper(jsonContent[j]);
                            count += 1
                        }
                        state = 1
                       
                        //Do something
                    }
                        document.getElementById("filter2020").style.backgroundColor = "grey"
                        document.getElementById("filter2021").style.backgroundColor = "lightgrey"
                        document.getElementById("filter2019").style.backgroundColor = "lightgrey"
						document.getElementById("filter2022").style.backgroundColor = "lightgrey"
						document.getElementById("filter2023").style.backgroundColor = "lightgrey"
						document.getElementById("filter2022").innerHTML = "2022"
						document.getElementById("filter2023").innerHTML = "2023"
                        document.getElementById("filter2020").innerHTML = "2020 (" + count +")"
                        document.getElementById("filter2021").innerHTML = "2021" 
                        document.getElementById("filter2019").innerHTML = "2019" 
                        count = 0
        } else if (year == "2021"){
            for (var j = 0; j < jsonContent.length; j++) {
                var filterString = jsonContent[j].item.conference.date.toString()
                if ( filterString.includes('2021') || jsonContent[j].item.journal.year == 2021) {
                    addpaper(jsonContent[j]);
                    count += 1
                }
                state = 1

                
                //Do something
            }                
                document.getElementById("filter2021").style.backgroundColor = "grey"
                document.getElementById("filter2020").style.backgroundColor = "lightgrey"
                document.getElementById("filter2019").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").style.backgroundColor = "lightgrey"
				document.getElementById("filter2023").style.backgroundColor = "lightgrey"
				document.getElementById("filter2023").innerHTML = "2023"
				document.getElementById("filter2022").innerHTML = "2022"
                document.getElementById("filter2021").innerHTML = "2021 (" + count  +")"
                document.getElementById("filter2020").innerHTML = "2020" 
                document.getElementById("filter2019").innerHTML = "2019" 
                count = 0
        } else if (year == "2019"){
            for (var j = 0; j < jsonContent.length; j++) {
                var filterString = jsonContent[j].item.conference.date.toString()
                if ( filterString.includes('2019') || jsonContent[j].item.journal.year == 2019) {
                    addpaper(jsonContent[j]);
                    count += 1
                }
                state = 1

                
                //Do something
            }                
                document.getElementById("filter2019").style.backgroundColor = "grey"
                document.getElementById("filter2021").style.backgroundColor = "lightgrey"
                document.getElementById("filter2020").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").style.backgroundColor = "lightgrey"
				document.getElementById("filter2023").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").innerHTML = "2022"
				document.getElementById("filter2023").innerHTML = "2023"
                document.getElementById("filter2019").innerHTML = "2019 (" + count +")"
                document.getElementById("filter2021").innerHTML = "2021" 
                document.getElementById("filter2020").innerHTML = "2020" 
                count = 0
        } else if (year == "2023"){
            for (var j = 0; j < jsonContent.length; j++) {
                var filterString = jsonContent[j].item.conference.date.toString()
                if ( filterString.includes('2023') || jsonContent[j].item.journal.year == 2023) {
                    addpaper(jsonContent[j]);
                    count += 1
                }
                state = 1

                
                //Do something
            }                
                document.getElementById("filter2023").style.backgroundColor = "grey"
                document.getElementById("filter2021").style.backgroundColor = "lightgrey"
                document.getElementById("filter2019").style.backgroundColor = "lightgrey"
                document.getElementById("filter2020").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").style.backgroundColor = "lightgrey"
				document.getElementById("filter2023").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").innerHTML = "2022"
				document.getElementById("filter2019").innerHTML = "2019"
                document.getElementById("filter2023").innerHTML = "2023 (" + count +")"
                document.getElementById("filter2021").innerHTML = "2021" 
                document.getElementById("filter2020").innerHTML = "2020" 
                count = 0
        } else if (year == "2022"){
            for (var j = 0; j < jsonContent.length; j++) {
                var filterString = jsonContent[j].item.conference.date.toString()
                if ( filterString.includes('2022') || jsonContent[j].item.journal.year == 2022) {
                    addpaper(jsonContent[j]);
                    count += 1
                }
                state = 1

                
                //Do something
            }                
                document.getElementById("filter2019").style.backgroundColor = "lightgrey"
                document.getElementById("filter2021").style.backgroundColor = "lightgrey"
                document.getElementById("filter2020").style.backgroundColor = "lightgrey"
                document.getElementById("filter2023").style.backgroundColor = "lightgrey"
				document.getElementById("filter2022").style.backgroundColor = "grey"
                document.getElementById("filter2019").innerHTML = "2019"
                document.getElementById("filter2021").innerHTML = "2021" 
                document.getElementById("filter2023").innerHTML = "2023" 
                document.getElementById("filter2020").innerHTML = "2020"
				document.getElementById("filter2022").innerHTML = "2022 (" + count +")"				
                count = 0
        }
        if (year == "2020") {
            state2020 = 1
            state2021 = 0
            state2019 = 0
			state2022 = 0
            state2023 = 0

        } else if (year == "2021"){
            state2021 = 1
            state2019 = 0
            state2020 = 0
			state2022 = 0
            state2023 = 0

        } else if (year == "2019"){
            state2019 = 1
            state2020 = 0
            state2021 = 0
			state2022 = 0
            state2023 = 0

        }else if (year == "2022"){
            state2019 = 0
            state2020 = 0
            state2021 = 0
			state2022 = 1
            state2023 = 0
        } else if (year == "2023"){
            state2019 = 0
            state2020 = 0
            state2021 = 0
			state2022 = 0
			state2023 = 1
        } 
        
    } else if (state == 1) {
        if (year == "2020") {
            state2020 = 0
        } else if (year == "2021"){
            state2021 = 0
        } else if (year == "2019"){
            state2019 = 0
        }
		else if (year == "2022"){
            state2022 = 0
        }
        else if (year == "2023"){
            state2023 = 0
        }
        document.getElementById("filter2020").style.backgroundColor = "lightgrey"
        document.getElementById("nextblock").style.display = "block"
        for (var j = 0; j < 6; j++) {
            addpaper(jsonContent[j]);
            //Do something
        }
        state = 0
        document.getElementById("filter2019").style.backgroundColor = "lightgrey"
        document.getElementById("filter2021").style.backgroundColor = "lightgrey"
        document.getElementById("filter2020").style.backgroundColor = "lightgrey"
		document.getElementById("filter2022").style.backgroundColor = "lightgrey"
		document.getElementById("filter2023").style.backgroundColor = "lightgrey"
        document.getElementById("filter2019").innerHTML = "2019"
        document.getElementById("filter2021").innerHTML = "2021" 
        document.getElementById("filter2020").innerHTML = "2020"
		document.getElementById("filter2022").innerHTML = "2022" 
		document.getElementById("filter2023").innerHTML = "2023" 
    }
}