diff options
| -rw-r--r-- | wqflask/wqflask/templates/show_trait.html | 27 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait_edit_data.html | 30 |
2 files changed, 57 insertions, 0 deletions
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index 7b74a3f6..3923ad2f 100644 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -221,6 +221,33 @@ primary_table.search($(this).val()).draw(); } ); + $('.toggle-vis').on('click', function (e) { + e.preventDefault(); + + function toggle_column(column) { + //ZS: Toggle column visibility + column.visible( ! column.visible() ); + if (column.visible()){ + $(this).removeClass("active"); + } else { + $(this).addClass("active"); + } + } + + // Get the column API object + var target_cols = $(this).attr('data-column').split(",") + for (let i = 0; i < target_cols.length; i++){ + console.log("THE COL:", target_cols[i]) + var column = primary_table.column( target_cols[i] ); + toggle_column(column); + + {% if sample_groups|length != 1 %} + var column2 = other_table.column( target_cols[i] ); + toggle_column(column2); + {% endif %} + } + } ); + {% if sample_groups|length != 1 %} $('#other_searchbox').on( 'keyup', function () { other_table.search($(this).val()).draw(); diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html index 2e730248..4ad11a5e 100644 --- a/wqflask/wqflask/templates/show_trait_edit_data.html +++ b/wqflask/wqflask/templates/show_trait_edit_data.html @@ -1,6 +1,36 @@ <div> {% for sample_type in sample_groups %} <div class="sample-table-container"> + {% if loop.index == 1 %} + <b>Show/Hide Columns:</b> + <br> + <button class="toggle-vis" data-column="1">ID</button> + <button class="toggle-vis" data-column="2">Sample</button> + <button class="toggle-vis" data-column="3">Value</button> + {% if sample_groups[0].se_exists %} + <button class="toggle-vis" data-column="4,5">SE</button> + {% if has_num_cases %} + <button class="toggle-vis" data-column="6">N</button> + {% set attr_start_pos = 7 %} + {% else %} + {% set attr_start_pos = 6 %} + {% endif %} + {% else %} + {% if has_num_cases %} + <button class="toggle-vis" data-column="4">N</button> + {% set attr_start_pos = 5 %} + {% else %} + {% set attr_start_pos = 4 %} + {% endif %} + {% endif %} + {% if sample_groups[0].attributes %} + {% for attribute in sample_groups[0].attributes %} + <button class="toggle-vis" data-column="{{ loop.index + attr_start_pos - 1 }}">{{ sample_groups[0].attributes[attribute].name }}</button> + {% endfor %} + {% endif %} + <br> + <br> + {% endif %} <div class="sample-table-search-container"> <input type="text" id="{{ sample_type.sample_group_type }}_searchbox" class="form-control sample-table-search" placeholder="Search This Table For ..."> </div> |