fluentd-ui/app/views/plugins/recommended.html.haml

- page_title t('.page_title')

%table{class: "table table-striped table-hover", id: "plugins-table"}
  %thead
    %tr
      %th{scope: "col", width: "24"}
      %th{scope: "col"}= t('plugins.common.name')
      %th{scope: "col"}= t('plugins.common.category')
      %th{scope: "col"}= t('plugins.common.status')
      %th{scope: "col"}
  %tbody
    - @plugins.each do |plugin|
      %tr
        %td
          - unless plugin.installed? || plugin.processing?
            = link_to t("terms.install"), install_plugins_path, class: "js-install btn btn-primary", data: { url: install_plugins_path, name: plugin.gem_name}
        %td
          %label{for: "plugin_#{plugin.gem_name}"}
            = plugin.gem_name
        %td
          = plugin.category
        %td
          = plugin.status
        %td
          = link_to t('plugins.view_on_rubygems_org'), plugin.rubygems_org_page, target: "_blank"


:javascript
  $(document).ready(function() {
    $('#plugins-table').dataTable({
      "autoWidth": false,
      "ordering": true,
      "paging": false,
      "info": false,
      "searching": true,
      "language": {
        "search": "#{t("terms.search")} "
      }
    });
    $('#plugins-table').on('click', '.js-install', function(ev){
      ev.preventDefault();
      var $anchor = $(ev.target);
      var url = $anchor.attr('href');
      $anchor.removeClass('js-install');
      $anchor.attr("href", "#");
      $anchor.css({color: "green"});
      var name = $anchor.attr('data-name');
      $.ajax({
        url: url,
        data: {"plugins[]": name, "_method": "PATCH"},
        method: "POST"
      }).done(function(){
        $anchor.fadeOut();
        var status = $anchor.parent().closest('tr').children()[3];
        $(status).text("#{t("terms.processing")}");
      });;
    });
  });