{% extends sitebase.html %}
{% block head %}

<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="{% raw qiita_config.portal_dir %}/static/vendor/css/select2.min.css" type="text/css">

<script src="{% raw qiita_config.portal_dir %}/static/vendor/js/select2.min.js"></script>
<script src="{% raw qiita_config.portal_dir %}/static/js/sharing.js"></script>

<script type="text/javascript">

function fillAbstract(table, row) {
  $('#title-text-area').text($('#' + table).find('#study' + row + "-title").text());
  $('#abstract-text-area').text($('#'+table).dataTable().fnGetData(row, 3));
}

var admin_tags = [];
var user_tags = [];
var tag_selected = [];
$(document).ready(function() {
  var user_studies_ajaxURL = "{% raw qiita_config.portal_dir %}/study/list_studies/?&user={{current_user.id}}&visibility=user&sEcho=" + Math.floor(Math.random()*1001);
  var studies_ajaxURL = "{% raw qiita_config.portal_dir %}/study/list_studies/?&user={{current_user.id}}&visibility=public&sEcho=" + Math.floor(Math.random()*1001);

  init_sharing("{% raw qiita_config.portal_dir %}");

  // we need to generate the tags before the study list so we can populate the
  // tags within the study list
  $(".js-select2-multiple").select2({
    placeholder: "Select tags for filtering"
  });

  update_tags();

  $('.js-select2-multiple').on("change", function(e) {
    tag_selected = []
    var color_user = '#1E90FF';
    var color_admin = '#FFA500';
    $(".js-select2-multiple option:selected").each(function() {
      var value = $(this).text();
      tag_selected.push(value);
      $("[title='" + value + "']").each(function () {
        var color = color_user;
        if (jQuery.inArray(value, admin_tags) >= 0) {
          color = color_admin;
        }
        $(this).css('color', color);
      });
    });
    $('#user-studies-table').DataTable().draw();
    $('#studies-table').DataTable().draw();
  });

  $("#search-waiting").hide();
  qiita_websocket.init(window.location.host + '{% raw qiita_config.portal_dir %}/study/list/socket/', error, error);
  qiita_websocket.add_callback('sel', show_alert);

  $('#user-studies-table').dataTable({
      "processing": true,
      "lengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
      "deferRender": true,
      "sDom": 'l<"top">rti<"bottom"p>',
      "order": [[ 3, "desc" ], [ 1, "asc" ]],
      "columns": [
        { "orderable": false, "data": "artifact_biom_ids" },
        { "data": "study_title" },
        { "data": "study_abstract" },
        { "data": "study_id" },
        { "data": "number_samples_collected" },
        { "data": "preparation_data_types" },
        { "data": "shared" },
        { "data": "pi" },
        { "data": "pubs" },
        { "data": "ebi_info" },
        { "data": "study_alias" }],
      columnDefs: [
        {type:'natural', targets:[2,6,7]},
        {"targets": [ 2, 10 ], "visible": false},
        // render zero
        {"render": function ( data, type, row, meta ) {
          if (data !== null && data !== undefined && data.length != 0){
            return '<div class="container" style="max-width: 5em;">'+
                     '<div class="row justify-content-md-center">' +
                       '<div class="col-md-1 text-center details-control">&nbsp;</div>' +
                       '<div class="col-md-1 text-center">' + data.length + '</div>' +
                     '</div>' +
                   '</div>';
          } else {
            return 'No BIOMs';
          }
        }, targets: [0]},
        // render the title cell
        {"render": function ( data, type, row, meta ) {
            result = "<a href='#' data-toggle='modal' data-target='#study-abstract-modal' onclick=\"fillAbstract('studies-table', "+ meta.row +")\">" +
              "<span class='glyphicon glyphicon-file' aria-hidden='true'></span></a> | <a href='{% raw qiita_config.portal_dir %}/study/description/" +
              row.study_id +"' id='study"+ meta.row +"-title'>"+ data +"</a>";
            // adding tags
            for (var i in row['study_tags']) {
              var tag = row['study_tags'][i];
              var level = 'info';
              if (jQuery.inArray(tag, admin_tags) >= 0) {
                level = 'warning';
              }
              result += ' <span class="label label-' + level + '">' + tag + '</span>';
            }
            return result
        }, targets: [1]},
        {"render": function ( data, type, row, meta ) {
            var glyph = 'remove';
            if(data === true) { glyph = 'ok' }
            result = "<a class='btn btn-primary btn-xs' data-toggle='modal' data-target='#share-study-modal-view' onclick='modify_sharing("+ row.study_id +");'>Modify</a><br/>";
            result += "<b>Owner:</b> " + row.owner + "</br>";
            result += "<span id='shared_html_"+ row.study_id +"'>"+ data +"</span>";
            return result;
        }, targets: [6]},
        ],
      "language": {
          "loadingRecords": 'Please wait ...',
          "processing": "~~ Loading information ~~",
          "zeroRecords": "No studies found",
      },
      "ajax": {
          "url": user_studies_ajaxURL + "&query=",
          "deferRender": true,
          "error": function(jqXHR, textStatus, ex) {
              $("#submit-button").prop("disabled",false);
              if(jqXHR.status === 500) { $("#search-error").text("Internal Server Error, please try again later"); }
              else { $("#search-error").text(jqXHR.responseText); }
          }
      }
  });

  $('#studies-table').dataTable({
      "processing": true,
      "lengthMenu": [[5, 10, 50, -1], [5, 10, 50, "All"]],
      "deferRender": true,
      "sDom": '<"top">rti<"bottom"p><"clear">',
      "order": [[ 3, "desc" ], [ 1, "asc" ]],
      "bLengthChange": false,
      "columns": [
        { "orderable": false, "data": "artifact_biom_ids" },
        { "data": "study_title" },
        { "data": "study_abstract" },
        { "data": "study_id" },
        { "data": "number_samples_collected" },
        { "data": "preparation_data_types" },
        { "data": "pi" },
        { "data": "pubs" },
        { "data": "ebi_info" }
      ],
      columnDefs: [
        {type:'natural', targets:[2,6,7]},
        {"targets": [ 2 ], "visible": false},
        // render zero
        {"render": function ( data, type, row, meta ) {
          if (data !== null && data !== undefined && data.length != 0){
            return '<div class="container" style="max-width: 5em;">'+
                     '<div class="row justify-content-md-center">' +
                       '<div class="col-md-1 text-center details-control">&nbsp;</div>' +
                       '<div class="col-md-1 text-center">' + data.length + '</div>' +
                     '</div>' +
                   '</div>';
          } else {
            return 'No BIOMs';
          }
        }, targets: [0]},
        // render the title cell
        {"render": function ( data, type, row, meta ) {
              result = "<a href='#' data-toggle='modal' data-target='#study-abstract-modal' onclick=\"fillAbstract('studies-table', "+ meta.row +")\">" +
                "<span class='glyphicon glyphicon-file' aria-hidden='true'></span></a> | <a href='{% raw qiita_config.portal_dir %}/study/description/" +
                row.study_id +"' id='study"+ meta.row +"-title'>"+ data +"</a>";
              // adding tags
              for (var i in row['study_tags']) {
                var tag = row['study_tags'][i];
                var level = 'info';
                if (jQuery.inArray(tag, admin_tags) >= 0) {
                  level = 'warning';
                }
                result += ' <span class="label label-' + level + '">' + tag + '</span>';
              }
              return result
        }, targets: [1]},
        ],
      "language": {
          "loadingRecords": 'Please wait ...',
          "processing": "~~ Loading information ~~",
          "zeroRecords": "No studies found",
      },
      "ajax": {
          "url": studies_ajaxURL + "&query=",
          "deferRender": true,
          "error": function(jqXHR, textStatus, ex) {
              $("#submit-button").prop("disabled",false);
              if(jqXHR.status === 500) { $("#search-error").text("Internal Server Error, please try again later"); }
              else { $("#search-error").text(jqXHR.responseText); }
          }
      }
  });

  // Add event listener for opening and closing details
  $('#studies-table tbody').on('click', 'div.details-control', function () {
      var table = $('#studies-table').DataTable();
      var tr = $(this).closest('tr');
      var row = table.row( tr );

      if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        // modified from: https://jsfiddle.net/8rejaL88/2/
        tr.addClass('shown');
        row.child('<p><center><img src="{% raw qiita_config.portal_dir %}/static/img/waiting.gif" style="display:block;margin-left: auto;margin-right: auto"/></center></p>', 'no-padding' ).show();
        $.post('/artifact/info/', {ids: row.data().artifact_biom_ids})
          .done(function ( data ) {
            if (data['status']=='success') {
              $('td', row.child()).html(format_biom_rows(data.data, row.index())).show();
            } else {
              bootstrapAlert('ERROR: ' + data['msg'], "danger", 10000);
            }
          });
      }
  });
  $('#user-studies-table tbody').on('click', 'div.details-control', function () {
      var table = $('#user-studies-table').DataTable();
      var tr = $(this).closest('tr');
      var row = table.row( tr );
      if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        // Open this row
        // modified from: https://jsfiddle.net/8rejaL88/2/
        tr.addClass('shown');
        row.child('<p><center><img src="{% raw qiita_config.portal_dir %}/static/img/waiting.gif" style="display:block;margin-left: auto;margin-right: auto"/></center></p>', 'no-padding' ).show();
        $.post('/artifact/info/', {ids: row.data().artifact_biom_ids})
          .done(function ( data ) {
            if (data['status']=='success') {
              $('td', row.child()).html(format_biom_rows(data.data, row.index())).show();
            } else {
              bootstrapAlert('ERROR: ' + data['msg'], "danger", 10000);
            }
          });
      }
  });

  // connecting searches
  $('#study-search-input').keyup(function(){
    var search_text = $(this).val();
    $('#user-studies-table').DataTable().search(search_text).draw();
    $('#studies-table').DataTable().search(search_text).draw();
  });

  // adding tag search/filter
  $.fn.dataTable.ext.search.push(
    function( settings, data, data_idx, row ) {
      var tag_selected_len = tag_selected.length;
      for (var i = 0; i < tag_selected_len; i++) {
        if (row['study_tags'] === null || data === undefined || !row['study_tags'].includes(tag_selected[i])) {
          return false;
        }
      }
      return true;
    }
  );

  // connecting paging size
  $('#user-studies-table').on('length.dt', function (e, settings, len) {
    $('#studies-table').DataTable().page.len(len).draw();
  });

  $("#search-form").submit(function(event)  {
      event.preventDefault();
      $("#submit-button").prop("disabled",true);
      $("#search-error").text('');
      $("#search-msg").text('');
      $('.gray-msg').css('color','#F2F2F2');
      $("#search-waiting").show();
      var query = $("#searchbox").val();

      var studies_table = $('#studies-table').DataTable();
      studies_table.ajax.url(ajaxURL + "&query=" + query).on('load', function() {
        $("#submit-button").prop("disabled",false);
        $("#search-waiting").hide();
        $("#search-msg").html('Search Completed: <b>' + query + "</b>");
        setTimeout(function() { $('.gray-msg').css('color','black'); },400);
      },
      true);
      studies_table.search( '' ).columns().search( '' ).draw();

      var user_studies_table = $('#user_studies-table').DataTable();
      user_studies_table.ajax.url(ajaxURL + "&query=" + query).on('load', function() {
        $("#submit-button").prop("disabled",false);
        $("#search-waiting").hide();
        $("#search-msg").html('Search Completed: <b>' + query + "</b>");
        setTimeout(function() { $('.gray-msg').css('color','black'); },400);
      },
      true);
      user_studies_table.search( '' ).columns().search( '' ).draw();

      return false;
  });
});

function update_tags(){
  $.ajax({
    type: "GET",
    url: "{% raw qiita_config.portal_dir %}/study/get_tags/",
    dataType: "json",
    async: false,
    success: function( data ) {
      admin_tags = data.tags.admin;
      user_tags = data.tags.user;
    }
  });

  var optgroup = $('<optgroup>');
  optgroup.attr('label', 'User Tags');
  $.each(user_tags, function (index, value) {
    var option = $("<option></option>");
    option.val(index);
    option.text(value);
    optgroup.append(option);
  });
  $("#study_tags_multiple").append(optgroup);

  var optgroup = $('<optgroup>');
  optgroup.attr('label', 'Admin Tags');
  $.each(admin_tags, function (index, value) {
    var option = $("<option></option>");
    option.val(index);
    option.text(value);
    optgroup.append(option);
  });
  $("#study_tags_multiple").append(optgroup);
}

function add_metacat(metacat) {
  document.getElementById('searchbox').value += (" " + metacat);
}
</script>

{% end %}
{% block content %}

<!--User Studies-->
<div class="row">
  <div class="col-sm-12" id="user-studies-div">
    <div class="row">
      <div class="col-md-8">
        <h5 class="gray-msg">Filter by column data (Title, abstract, PI, etc):</h5>
        <input type="text" class="form-control" id="study-search-input" style="width: 100%">
      </div>
      <div class="col-md-4">
        <h5 class="gray-msg">
          Filter studies by tags:
          <small>(
            <span style="color: #FFA500">Admin</span>,
            <span style="color: #1E90FF">User</span>
          )</small>
        </h5>
        <select class="js-select2-multiple form-control" id="study_tags_multiple" multiple="multiple" style="width: 100%"></select>
      </div>
    </div>

    <h3 class="gray-msg">Your Studies</h3>
    <table id="user-studies-table" class="table table-bordered gray-msg">
      <thead>
        <tr>
          <th>Expand for analysis (artifact count)</th>
          <th>Title</th>
          <th>Abstract</th>
          <th>Study ID</th>
          <th>Samples</th>
          <th>Preparation Data Types</th>
          <th>Shared With These Users</th>
          <th>Principal Investigator</th>
          <th>Publications</th>
          <th>Qiita EBI submission</th>
          <th>Study Alias</th>
        </tr>
      </thead>
    </table>
    <h3 class="gray-msg">Public Studies</h3>
    <table id="studies-table" class="table table-bordered gray-msg">
      <thead>
        <tr>
          <th>Expand for analysis (artifact count)</th>
          <th>Title</th>
          <th>Abstract</th>
          <th>Study ID</th>
          <th>Samples</th>
          <th>Preparation Data Types</th>
          <th>Principal Investigator</th>
          <th>Publications</th>
          <th>Qiita EBI submission</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

<!--Abstract Modal-->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="study-abstract-modal">
  <div class="modal-dialog modal-med">
    <div class="modal-content">
    <div class="modal-header">
       <h3 id="title-text-area"></h3>
    </div>
    <div class="modal-body" id="abstract-text-area">
      </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    </div>
  </div>
</div>
</form>
<!--Search help modal-->
<div class="modal fade search-example-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="searchexample">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header"><h2>Search help<h2></div>
      <div class="modal-body">
        <p>A basic search argument consists of three parts: The metadata category to search over, the operator to use, and the value to use in the search. For example, to retrieve all soil samples in the database, the search argument would be:</p>
        <p><b>env_matter includes soil</b></p>
        <p>Valid operators for searches are:</p>
        <table class="table table-hover" style="width:60%">
        <tr><th>Operator</th><th>Function</th></tr>
        <tr><td><</td><td> Less than (for numeric values)</td></tr>
        <tr><td>></td><td> Greater than (for numeric values)</td></tr>
        <tr><td><=</td><td> Less than or equal (for numeric values)</td></tr>
        <tr><td>>=</td><td> Greater than or equal (for numeric values)</td></tr>
        <tr><td>=</td><td> Equals (matches exact numberic value or string)</td></tr>
        <tr><td>includes</td><td>Partial string matching</td></tr>
        </table>
        <p>Complex queries can also be created by using AND, OR, and NOT logic words words. These connect search arguments into larger search queries.</p>
        <table class="table table-hover" style="width:60%">
        <tr><th>Logic</th><th>Function</th></tr>
        <tr><td>AND</td><td>Find samples that fit both search arguments</td></tr>
        <tr><td>OR</td><td>Find samples that fit either search argument</td></tr>
        <tr><td>NOT</td><td>Find samples that don't include the value of the next search argument</td></tr>
        </table>

        <p>As an example, if we want all soil samples that are low or extremely high pH, we can use the following search:</p>
        <p><b>env_matter includes soil AND (ph < 4 OR ph > 8)</b></p>
        <p>You can search for multi-word phrases using quotes. For example, to search for any study with "chicken pox" in the title, the query would be:</p>
        <p><b>study_title includes "chicken pox"</b></p>
        <p>Note that you can not use wild cards in any string searches. Only alphanumeric characters and colons are supported.</p>
      </div>
    </div>
  </div>
</div>
<!-- modal view to enter sharing settings -->
<div class="modal fade" id="share-study-modal-view" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modify Sharing Settings</h4>
      </div>
      <form role="form" action="{% raw qiita_config.portal_dir %}/study/sharing/" method="post">
        <div class="modal-body">
          <div>
            <div class="form-group">
              <label for="shares-select">Add/Remove Users</label>
              <select multiple class="study" id="shares-select" data-share-url="{% raw qiita_config.portal_dir %}/study/sharing/" style="width:50%"></select>
              <br>
              <br>
              Adding or removing email addresses automatically updates who the study is shared with.
            </div>
          </div>
        </div>
        <div class="modal-footer">
        </div>
    </div>
  </div>
</div>
{% end %}