Add column selection

index.html

@@ -12,7 +12,6 @@
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
     <link rel="stylesheet" type="text/css" media="screen" href="css/dropdown.css" />
     <script src="js/table.js"></script>
-    <script src="js/checkbox.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns"
         crossorigin="anonymous">
@@ -66,12 +65,14 @@
             At solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. <a href="index.html">jony_ipsum</a>
         </p>
 
-        <div id="list1" class="dropdown-check-list" tabindex="100"> </div>
+        <!-- <div id="list1" class="dropdown-check-list" tabindex="100"> </div> -->
+        <ul id="list1"></ul>
+        <p id="debug"></p>
         <table id="t01"></table>
 
         <script>
             // create table
-            handleFile()            
+            handleFile("resources/world_data_v1.csv")            
         </script>
 
     </div>

js/table.js

@@ -4,24 +4,40 @@
 // Source: https://www.w3schools.com/howto/howto_js_sort_table.asp
 // Source: https://stackoverflow.com/questions/19105009/how-to-insert-variables-in-javascript-strings
 
-function handleFile() {
+function handleFile(path) {
     // Check for the various File API support.
     if (window.FileReader) {
         // FileReader are supported.
         var xmlhttp = new XMLHttpRequest();
         xmlhttp.onreadystatechange = function () {
             if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
-                processData(xmlhttp.responseText);
+                processData(xmlhttp.responseText, path);
             }
         };
-        xmlhttp.open("GET", "resources/world_data_v1.csv", true);
+        xmlhttp.open("GET", path, true);
         xmlhttp.send();
     } else {
         alert('FileReader are not supported in this browser.');
     }
 }
 
-function processData(csv) {
+function rerequestFile(path, columns) {
+    if (window.FileReader) {
+        // FileReader are supported.
+        var xmlhttp = new XMLHttpRequest();
+        xmlhttp.onreadystatechange = function () {
+            if (xmlhttp.status == 200 && xmlhttp.readyState == 4) {
+                updateTable(xmlhttp.responseText, columns);
+            }
+        };
+        xmlhttp.open("GET", path, true);
+        xmlhttp.send();
+    } else {
+        alert('FileReader are not supported in this browser.');
+    }
+}
+
+function processData(csv, path) {
     var table = "";
     var checkbox = "";
 
@@ -31,10 +47,6 @@ function processData(csv) {
     // create table header
     table += "<tr>";
 
-    // create checkbox content
-    checkbox += "<span class='anchor'>Select Columns</span>";
-    checkbox += "<ul class='items'>";
-
     var data = allTextLines[0].split(",");
 
     for (var j = 0; j < data.length; j++) {
@@ -45,12 +57,12 @@ function processData(csv) {
 
         // create dropdown elements
         checkbox += "<li>";
-        checkbox += "<input id=checkbox_" + data[j] + " type='checkbox' checked='checked' />";
+        checkbox += "<input id='" + data[j] + "' type='checkbox' checked='checked' onclick=\"toggleColumn('" + path + "')\"/>";
         checkbox += data[j];
         checkbox += "</li>";
     }
 
-    checkbox += "</ul>";
+    // checkbox += "</ul>";
     table += "</tr>";
 
     // create table content
@@ -70,19 +82,68 @@ function processData(csv) {
 
     document.getElementById('t01').innerHTML = table;
     document.getElementById('list1').innerHTML = checkbox;
+}
 
-    // create callbacks for checkboxes
+function toggleColumn(file) {
-    var checkList = document.getElementById('list1');
+    var iterator = document.getElementById('list1').childNodes;
-    checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
+    var activated_columns = [];
-        if (!checkList.classList.contains('visible'))
+
-            checkList.classList.remove('visible');
+    for (i = 0; i < iterator.length; i++) {
-        else
+        var checkbox = iterator[i].children[0];
-            checkList.classList.add('visible');
+
+        if (checkbox.checked) {
+            activated_columns.push(checkbox.id);
+        }
     }
 
-    checkList.onblur = function (evt) {
+    rerequestFile(file, activated_columns);
-        checkList.classList.remove('visible');
+}
+
+
+function updateTable(csv, columns) {
+    var table = "";
+
+    // split rows
+    var allTextLines = csv.split(/\r\n|\n/);
+
+    // create table header
+    table += "<tr>";
+
+    var data = allTextLines[0].split(",");
+    var discarded_indices = [];
+
+    for (var j = 0; j < data.length; j++) {
+        // create table column header
+        if (columns.includes(data[j])) {
+            table += "<th onclick=\"sortTable(" + j + ")\" >";
+            table += data[j];
+            table += "</th>";
+        } else {
+            discarded_indices.push(j);
+        }
     }
+
+    // checkbox += "</ul>";
+    table += "</tr>";
+
+    // create table content
+    for (var i = 1; i < allTextLines.length; i++) {
+        var data = allTextLines[i].split(',');
+
+        table += "<tr>";
+
+        for (var j = 0; j < data.length; j++) {
+            if (!discarded_indices.includes(j)) {
+                table += "<td>";
+                table += data[j];
+                table += "</td>";
+            }
+        }
+
+        table += "</tr>";
+    }
+
+    document.getElementById('t01').innerHTML = table;
 }
 
 function sortTable(n) {