<commit_before>{% extends sitebase.html %}

{% block head %}
<link rel="stylesheet" href="/static/vendor/css/bootstrap-select.min.css" type="text/css"/>
<script src="/static/vendor/js/bootstrap-select.min.js" type="text/javascript"></script>

<script type='text/javascript'>
  function prepareRun() {
    // Post input form.
    var poolIds = [];
    for (var item of $('#pool-list').children()) {
      poolIds.push(item.getAttribute('pm-data-pool-id'));
    }
    var contacts = [];
    for (var item of $('#contact-list').children()) {
      console.log(item.getAttribute('pm-data-contact'));
      contacts.push(item.getAttribute('pm-data-contact'));
    }
    var postParams = {'pools': JSON.stringify(poolIds),
                      'run_name': $('#run-name').val(),
                      'experiment': $('#experiment').val(),
                      'sequencer': $('#seq-select').val(),
                      'fwd_cycles': $('#fwd-input').val(),
                      'rev_cycles': $('#rev-input').val(),
                      'principal_investigator': $('#pi-select').val(),
                      'additional_contacts': JSON.stringify(contacts)}
    $.post('/process/sequencing/{% raw allowed_pools_type %}/', postParams, function(data) {
      bootstrapAlert('Information saved', 'success');
      $("html, body").animate({scrollTop: 0}, 500);
      disableAll();
      $('#run-name-title').html(
        "<a href='/process/sequencing/" + data.process + "/sample_sheet' class='btn btn-success'>" +
        "<span class='glyphicon glyphicon-download'></span> " +
        "Download Sample Sheet</a>")
    })
      .fail(function (jqXHR, textStatus, errorThrown) {
        bootstrapAlert(jqXHR.responseText, 'danger');
      });
  };

  function submitChecks() {
    // Check input form validity.
    $('#submit-btn').prop('disabled', !(($('#run-name').val() !== '') &&
                                        ($('#experiment').val() !== '') &&
                                        ($('#pool-list').children().length > 0) &&
                                        ($('#seq-select').val() !== '') &&
                                        ($('#fwd-input').val() !== '') &&
                                        ($('#rev-input').val() !== '') &&
                                        ($('#pi-select').val() !== '')));
  };

  function toggleAddPool() {
    // Prohibit adding more pools when all lanes are filled.
    $('#add-pool-btn').prop('disabled', $('#pool-list').children().length >= $('#seq-select option:selected').attr('data-lanes'));
  };

  function addPool(poolId, poolName) {
    var $aElem = $("<a>");
    $aElem.addClass('list-group-item');
    $aElem.attr('id', 'pool-' + poolId);
    $aElem.attr('pm-data-pool-id', poolId);
    $aElem.append('<label><h4>' + poolName + '</h4></label>');
    var $buttonElem = $("<button class='btn btn-danger btn-circle pull-right' onclick='removePool(" + poolId + ");'>");
    $buttonElem.append("<span class='glyphicon glyphicon-remove'></span>")
    $aElem.append($buttonElem);
    $('#pool-list').append($aElem);
    $('#addPoolModal').modal('hide');
    toggleAddPool();
    submitChecks();
  };

  function removePool(poolId) {
    // Remove pool from pool list.
    $('#pool-' + poolId).remove();
    toggleAddPool();
    submitChecks();
  };

  function addContact(email, name) {
    // Add contact to additional contact list.
    var $aElem = $("<a>");
    $aElem.addClass('list-group-item');
    $aElem.attr('id', 'contact-' + email);
    $aElem.attr('pm-data-contact', email);
    $aElem.append('<label><h4>' + name + '</h4></label>');
    var $buttonElem = $("<button class='btn btn-danger btn-circle pull-right' onclick='removeContact(\"" + email + "\");'>");
    $buttonElem.append("<span class='glyphicon glyphicon-remove'></span>");
    $aElem.append($buttonElem);
    $('#contact-list').append($aElem);
    $('[id="addBtnContact' + name + '"]').prop('disabled', true);
    $('#addContactModal').modal('hide');
  };

  function removeContact(email) {
    // Remove contact from additional contact list.
    $('[id="contact-' + email + '"]').remove();
    $('[id="addBtnContact' + email + '"]').prop('disabled', false);
  };

  $(document).ready(function() {
    $('.labcontrol-input').on('change', submitChecks);
    $('#add-pool-btn').prop('disabled', true);

    var table = $('#searchPoolTable').DataTable(
      {'ajax': {'url': '/pool_list/{% raw allowed_pools_type %}/'},
       'columnDefs': [{'targets': -1,
                       'data': null,
                       'render': function(data, type, row, meta) {
                         var poolId = data[0];
                         return "<button id='addBtnPool" + poolId + "' class='btn btn-success btn-circle-small'><span class='glyphicon glyphicon-plus'></span></button>";
                       }
                      }],
       'order': [[0, "desc"]]
      }
    );

    $('#searchPoolTable tbody').on('click', 'button', function() {
      var pool = table.row($(this).parents('tr')).data();
      addPool(pool[0], pool[1]);
    });

    $('#searchContactTable').DataTable();

    $('#searchContactTable tbody').on('click', 'button', function() {
      var email = $(this).parents('tr').find('td:first').attr('data');
      var name = $(this).parents('tr').find('td:first').text();
      addContact(email, name);
    });

    $('#seq-select').on('change', function() {
      $('#add-pool-btn').prop('disabled', false);
      $("[id^=addBtnPool]").prop('disabled', false);
      $('#pool-list').empty();
      $('#submit-btn').prop('disabled', true);
    });

    $('#pi-select').selectpicker({'size': 20});
  });
</script>

{% end %}

{% block content %}
<label><h3>{% raw allowed_pools_name %} Sequencing run</h3></label>
<span id="run-name-title"></span>

<!-- Run name -->
<div class='form-group'>
  <label class='control-label'><h4>Run name:</h4></label>
  <input type='text' id='run-name' class='form-control labcontrol-input' />
</div>

<!-- Run experiment -->
<div class='form-group'>
  <label class='control-label'><h4>Run experiment:</h4></label>
  <input type='text' id='experiment' class='form-control labcontrol-input' />
</div>

<!-- Sequencer -->
<div class='form-group'>
  <label class='control-label'><h4>Sequencer:</h4></label>
  <select id='seq-select' class='form-control selectpicker labcontrol-input' data-live-search='true' title='Choose sequencer...'>
    {% for sequencer in sequencers %}
      <option value='{{sequencer['equipment_id']}}' data-lanes={{sequencer['lanes']}}>{{sequencer['external_id']}} ({{sequencer['lanes']}} lanes)</option>
    {% end %}
  </select>
</div>

<!-- Pools -->
<div id='pools-div' class='form-group'>
  <label class='control-label'><h4>Sequencing pools:</h4></label>
  <button id='add-pool-btn' class='btn btn-success' data-toggle='modal' data-target='#addPoolModal'><span class='glyphicon glyphicon-plus'></span> Add pool</button>
  <div id='pool-list'>
  </div>
</div>

<!-- Modal to add pool -->
<div class='modal fade' tabindex='-1' role='dialog' id='addPoolModal'>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3>Add pool to lane</h3><commit_msg>Change 'Run Experiment' to 'Experiment Name' in dialog.<commit_after>{% extends sitebase.html %}

{% block head %}
<link rel="stylesheet" href="/static/vendor/css/bootstrap-select.min.css" type="text/css"/>
<script src="/static/vendor/js/bootstrap-select.min.js" type="text/javascript"></script>

<script type='text/javascript'>
  function prepareRun() {
    // Post input form.
    var poolIds = [];
    for (var item of $('#pool-list').children()) {
      poolIds.push(item.getAttribute('pm-data-pool-id'));
    }
    var contacts = [];
    for (var item of $('#contact-list').children()) {
      console.log(item.getAttribute('pm-data-contact'));
      contacts.push(item.getAttribute('pm-data-contact'));
    }
    var postParams = {'pools': JSON.stringify(poolIds),
                      'run_name': $('#run-name').val(),
                      'experiment': $('#experiment').val(),
                      'sequencer': $('#seq-select').val(),
                      'fwd_cycles': $('#fwd-input').val(),
                      'rev_cycles': $('#rev-input').val(),
                      'principal_investigator': $('#pi-select').val(),
                      'additional_contacts': JSON.stringify(contacts)}
    $.post('/process/sequencing/{% raw allowed_pools_type %}/', postParams, function(data) {
      bootstrapAlert('Information saved', 'success');
      $("html, body").animate({scrollTop: 0}, 500);
      disableAll();
      $('#run-name-title').html(
        "<a href='/process/sequencing/" + data.process + "/sample_sheet' class='btn btn-success'>" +
        "<span class='glyphicon glyphicon-download'></span> " +
        "Download Sample Sheet</a>")
    })
      .fail(function (jqXHR, textStatus, errorThrown) {
        bootstrapAlert(jqXHR.responseText, 'danger');
      });
  };

  function submitChecks() {
    // Check input form validity.
    $('#submit-btn').prop('disabled', !(($('#run-name').val() !== '') &&
                                        ($('#experiment').val() !== '') &&
                                        ($('#pool-list').children().length > 0) &&
                                        ($('#seq-select').val() !== '') &&
                                        ($('#fwd-input').val() !== '') &&
                                        ($('#rev-input').val() !== '') &&
                                        ($('#pi-select').val() !== '')));
  };

  function toggleAddPool() {
    // Prohibit adding more pools when all lanes are filled.
    $('#add-pool-btn').prop('disabled', $('#pool-list').children().length >= $('#seq-select option:selected').attr('data-lanes'));
  };

  function addPool(poolId, poolName) {
    var $aElem = $("<a>");
    $aElem.addClass('list-group-item');
    $aElem.attr('id', 'pool-' + poolId);
    $aElem.attr('pm-data-pool-id', poolId);
    $aElem.append('<label><h4>' + poolName + '</h4></label>');
    var $buttonElem = $("<button class='btn btn-danger btn-circle pull-right' onclick='removePool(" + poolId + ");'>");
    $buttonElem.append("<span class='glyphicon glyphicon-remove'></span>")
    $aElem.append($buttonElem);
    $('#pool-list').append($aElem);
    $('#addPoolModal').modal('hide');
    toggleAddPool();
    submitChecks();
  };

  function removePool(poolId) {
    // Remove pool from pool list.
    $('#pool-' + poolId).remove();
    toggleAddPool();
    submitChecks();
  };

  function addContact(email, name) {
    // Add contact to additional contact list.
    var $aElem = $("<a>");
    $aElem.addClass('list-group-item');
    $aElem.attr('id', 'contact-' + email);
    $aElem.attr('pm-data-contact', email);
    $aElem.append('<label><h4>' + name + '</h4></label>');
    var $buttonElem = $("<button class='btn btn-danger btn-circle pull-right' onclick='removeContact(\"" + email + "\");'>");
    $buttonElem.append("<span class='glyphicon glyphicon-remove'></span>");
    $aElem.append($buttonElem);
    $('#contact-list').append($aElem);
    $('[id="addBtnContact' + name + '"]').prop('disabled', true);
    $('#addContactModal').modal('hide');
  };

  function removeContact(email) {
    // Remove contact from additional contact list.
    $('[id="contact-' + email + '"]').remove();
    $('[id="addBtnContact' + email + '"]').prop('disabled', false);
  };

  $(document).ready(function() {
    $('.labcontrol-input').on('change', submitChecks);
    $('#add-pool-btn').prop('disabled', true);

    var table = $('#searchPoolTable').DataTable(
      {'ajax': {'url': '/pool_list/{% raw allowed_pools_type %}/'},
       'columnDefs': [{'targets': -1,
                       'data': null,
                       'render': function(data, type, row, meta) {
                         var poolId = data[0];
                         return "<button id='addBtnPool" + poolId + "' class='btn btn-success btn-circle-small'><span class='glyphicon glyphicon-plus'></span></button>";
                       }
                      }],
       'order': [[0, "desc"]]
      }
    );

    $('#searchPoolTable tbody').on('click', 'button', function() {
      var pool = table.row($(this).parents('tr')).data();
      addPool(pool[0], pool[1]);
    });

    $('#searchContactTable').DataTable();

    $('#searchContactTable tbody').on('click', 'button', function() {
      var email = $(this).parents('tr').find('td:first').attr('data');
      var name = $(this).parents('tr').find('td:first').text();
      addContact(email, name);
    });

    $('#seq-select').on('change', function() {
      $('#add-pool-btn').prop('disabled', false);
      $("[id^=addBtnPool]").prop('disabled', false);
      $('#pool-list').empty();
      $('#submit-btn').prop('disabled', true);
    });

    $('#pi-select').selectpicker({'size': 20});
  });
</script>

{% end %}

{% block content %}
<label><h3>{% raw allowed_pools_name %} Sequencing run</h3></label>
<span id="run-name-title"></span>

<!-- Run name -->
<div class='form-group'>
  <label class='control-label'><h4>Run name:</h4></label>
  <input type='text' id='run-name' class='form-control labcontrol-input' />
</div>

<!-- Experiment name -->
<div class='form-group'>
  <label class='control-label'><h4>Experiment name:</h4></label>
  <input type='text' id='experiment' class='form-control labcontrol-input' />
</div>

<!-- Sequencer -->
<div class='form-group'>
  <label class='control-label'><h4>Sequencer:</h4></label>
  <select id='seq-select' class='form-control selectpicker labcontrol-input' data-live-search='true' title='Choose sequencer...'>
    {% for sequencer in sequencers %}
      <option value='{{sequencer['equipment_id']}}' data-lanes={{sequencer['lanes']}}>{{sequencer['external_id']}} ({{sequencer['lanes']}} lanes)</option>
    {% end %}
  </select>
</div>

<!-- Pools -->
<div id='pools-div' class='form-group'>
  <label class='control-label'><h4>Sequencing pools:</h4></label>
  <button id='add-pool-btn' class='btn btn-success' data-toggle='modal' data-target='#addPoolModal'><span class='glyphicon glyphicon-plus'></span> Add pool</button>
  <div id='pool-list'>
  </div>
</div>

<!-- Modal to add pool -->
<div class='modal fade' tabindex='-1' role='dialog' id='addPoolModal'>
  <div class='modal-dialog modal-lg'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h3>Add pool to lane</h3>
{'fraction_non_alphanumeric': 0.22670934350313265, 'fraction_numerical': 0.003949877417597385, 'mean_word_length': 2.942281879194631, 'pattern_counts': {'":': 0, '<': 171, '<?xml version=': 0, '>': 175, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3734670', 'n_tokens_mistral': 4545, 'n_tokens_neox': 4434, 'n_words': 794}