<% if flash[:plant_notice] %>
  <span style="color:green"><%= flash[:plant_notice] %></span><br/>
<% end %>
<% if flash[:plant_error] %>
  <span style="color:red"><%= flash[:plant_error] %></span><br/>
<% end %>

<% if plants.length >= 1 %>
  <ul class="plain">
    <% plants.each do |p| %>
      <li id='ap_<%= p['id'] %>'>
        <a href="<%= url_for :controller => 'plants', :action => 'edit', :id => p['id'] %>"><%= p['title'] %></a>
        (erhält
        <span id="change-percent" data-percent="<%= p['percent'] %>"><%= ("%.2f" % p['percent']).sub!(".", ",") rescue "k.A." %></span>%<small><a id="edit-percent" href=""><i class="fa fa-pencil"></i></a></small>
        des Abwassers)
        <% if p['invalid'] == 't' %>
          <span style="color:red">(Die Anlage ist inaktiv oder wird nicht berichtet)</span>
        <% end %>


        <% if locked == 'false' %>
          <%= link_to('#',
                      { :onclick => makeOnClick('plant-view', 'delete_agg_plant', 'agglomerations', { 'agglomeration_id' => id, 'plant_id' => p['id'], :confirm => "Sind Sie sicher, dass Sie die Zuordnung der Anlage \"#{p['title']}\" zu dieser Agglomeration aufheben möchten?" }), :remote => true }) do %>

            <span style="color: #ec1b5a;" title='Zuordnung der Anlage aufheben'><i class="fa fa-minus-circle force-color-inheritance" aria-hidden="true"></i></span>
          <% end %>
        <% end %>

      </li>
    <% end %>
  </ul>

<% end %>

<script>
    $(document).on('click', '#edit-percent', function (event) {
        event.preventDefault();
        $('#change-percent').attr('contenteditable', 'true');
        $('#change-percent').focus();
    });

    $(document).on('keydown', '#change-percent', function (event) {
        let elem = $(this);
        if (event.keyCode == 27) {
            let value = parseFloat(elem.attr('data-percent'));
            elem.html(value.toLocaleString('de', {minimumFractionDigits: 2}));
            elem.blur();
        } else if (event.keyCode == 13) {
            elem.blur();
        } else if (event.key == 'ArrowRight') {
            elem.focus();
        }
    });

    $(document).on('blur', '#change-percent', function () {
        let elem = $(this);
        elem.removeAttr('contenteditable');
        let valueString = $(this).html();

        // validate value
        let oldValue = parseFloat(elem.attr('data-percent'));
        if (!(/^[0-9]{1,3},[0-9]{1,2}$/.test(valueString)) &&
            !(/^[0-9]{1,3}$/.test(valueString))) {
            elem.html(oldValue.toLocaleString('de', {minimumFractionDigits: 2}));
            return false;
        }
        let value = parseFloat(valueString.replace(',', '.'));
        if (value <= 0.0 || value > 100.0) {
            elem.html(oldValue.toLocaleString('de', {minimumFractionDigits: 2}));
            return false;
        }

        if (value != oldValue) {
            let plant_id = parseInt(elem.closest('ul').find('li').first().attr('id').substring(3));

            $.ajax({
                url: '<%= url_for({:action => 'update_plant_agg_percent', :id => id, :controller => 'agglomerations'}) %>',
                method: 'POST',
                dataType: 'json',
                data: {plant_id: plant_id, percent: value}
            }).done(function (data) {
                console.log();
                if (data.status == 'OK') {
                    elem.html(value.toLocaleString('de', {minimumFractionDigits: 2}));
                    elem.attr('data-percent', value);
                } else {
                    elem.html(oldValue.toLocaleString('de', {minimumFractionDigits: 2}));
                }
            }).fail(function () {
                elem.html(oldValue.toLocaleString('de', {minimumFractionDigits: 2}));
            });
        }

    });

</script>