Create a filter by year for papers

public/index.html

@@ -188,6 +188,12 @@
         <span class="close" onclick="searchToggle_paper(this, event);"></span>
       </div>
     </div>
+    <div class="container" style="height:70px;">
+      <p>Filter:</p>
+      <button class="btn" style="background-color: lightgray;" id="filter2019" onclick="filter(2019)">2019</button>
+      <button class="btn" style="background-color: lightgray;" id="filter2020" onclick="filter(2020)">2020</button>
+      <button class="btn" style="background-color: lightgray;" id="filter2021" onclick="filter(2021)">2021</button>
+    </div>
     <div class="container" id="cont_paper">
       <!-- <div class="card" style="max-width: 1080px;">
         <div class="row">
@@ -412,7 +418,7 @@
   <script src="js/paper_nextpage.js"></script>
 
   <script src="js/citationSheetParse.js"></script>
-
+  <script src="js/paperfilter.js"></script>
 
 </body>
 

public/js/paperfilter.js

+var state2020 = 0
+var state2021 = 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
+    }
+    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("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("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("filter2019").innerHTML = "2019 (" + count +")"
+                document.getElementById("filter2021").innerHTML = "2021" 
+                document.getElementById("filter2020").innerHTML = "2020" 
+                count = 0
+        }
+        if (year == "2020") {
+            state2020 = 1
+            state2021 = 0
+            state2019 = 0
+        } else if (year == "2021"){
+            state2021 = 1
+            state2019 = 0
+            state2020 = 0
+        } else if (year == "2019"){
+            state2019 = 1
+            state2020 = 0
+            state2021 = 0
+        }
+        
+    } else if (state == 1) {
+        if (year == "2020") {
+            state2020 = 0
+        } else if (year == "2021"){
+            state2021 = 0
+        } else if (year == "2019"){
+            state2019 = 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("filter2019").innerHTML = "2019"
+        document.getElementById("filter2021").innerHTML = "2021" 
+        document.getElementById("filter2020").innerHTML = "2020" 
+    }
+}
\ No newline at end of file

public/js/search.js

@@ -71,6 +71,7 @@ var stuff_paper = []
 
 
 $(document).ready(function () {
+    console.log("document ready")
     $.getJSON("./content/content.json", function (result) {
         console.log("content.json ==> HTML")
         stuff = result;