sanger/sequencescape

<% if target_action =="update" %>
  <% html_options = {method: :put} %>
<% else %>
  <% html_options = {method: :post} %>
<% end %>
<%= form_for :plate_templates, url: {action: "#{target_action}"}, html: html_options  do |f| -%>
  <label>Template name:</label>
  <% if pattern.nil? -%>
    <%= text_field_tag "name" %>
  <% else -%>
    <%= text_field_tag "name", pattern.name %>
  <% end -%>
  <br />

  <p>Click to leave positions empty.</p>
  <table class="plate" width="100%">
    <thead>
      <% (plate_cols+1).times do |i| %>
        <th><%= i %></th>
      <% end %>
    </thead>
    <% plate_rows.times do |row| %>
      <tr>
        <% (plate_cols+1).times do |col| %>
          <% rowchar = (65+row).chr %>
          <% if col==0 %>
            <td class='border' width='2%'><%= rowchar  %></td>
          <% else %>
            <% well_position = "#{rowchar}#{col}" %>
            <% unless pattern.nil?%>
              <% if pattern.find_well_by_name(well_position).nil? %>
                <td id="<%= "well_#{well_position}" %>"  data-well-position='<%= "#{well_position}" %>' data-row='<%= row %>' data-col='<%= col %>' data-plate_cols='<%= plate_cols %>' class="well">
                <%= "#{well_position}" %>
                </td>
              <% else %>
                <td id="<%= "well_#{well_position}" %>" data-well-position='<%= "#{well_position}" %>' data-row='<%= row %>' data-col='<%= col %>' data-plate_cols='<%= plate_cols %>' class="well empty">
                Empty<input type="hidden" value="<%= (row*plate_cols) + col %>" name="empty_well[<%= well_position %>]"/>
                </td>
              <% end -%>
            <% else -%>
              <td id="<%= "well_#{well_position}" %>"  data-well-position='<%= "#{well_position}" %>' data-row='<%= row %>' data-col='<%= col %>' data-plate_cols='<%= plate_cols %>' class="well">
              <%= "#{well_position}" %>
              </td>
            <% end -%>

          <% end %>
        <% end %>
      </tr>
    <% end %>
  </table>

  <%= hidden_field_tag 'rows', plate_rows %>
  <%= hidden_field_tag 'cols', plate_cols %>
  <%= submit_tag "Save" %>
<% end %>

<%= legacy_javascript_tag do %>
  const wells = document.querySelectorAll('.well');
  for (let well of wells) {
    well.addEventListener('click', toggleEmptyWell);
  }

  function toggleEmptyWell(event) {
    const well = event.target;
    const wellPosition = well.dataset.wellPosition;
    const row = parseInt(well.dataset.row, 10);
    const col = parseInt(well.dataset.col, 10);
    const plateCols = parseInt(well.dataset.plate_cols, 10);

    if(well.classList.contains('empty')) {
      well.classList.remove('empty');
      well.innerHTML=wellPosition;
    } else {
      well.classList.add('empty');
      well.innerHTML = `Empty<input type="hidden" name="empty_well[${wellPosition}]" value="${(row * plateCols) + col}">`;
    }
  }
<% end %>