start to implement project overview page

app/assets/javascripts/experiments/index.js

@@ -27,13 +27,15 @@
 
   // Initialize edit experiment form
   function initializeEditExperimentModal(){
+    console.log($("#edit-experiment").data('id'));
+    var id = '#edit-experiment-modal-' + $("#edit-experiment").data('id');
     $("#edit-experiment")
     .on("ajax:beforeSend", function(){
       animateSpinner();
     })
     .on("ajax:success", function(e, data){
       $('body').append($.parseHTML(data.html));
-      $('#edit-experiment-modal').modal('show',{
+      $(id).modal('show',{
         backdrop: true,
         keyboard: false,
       });

app/assets/javascripts/projects/show.js

@@ -0,0 +1,57 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.
+
+(function(){
+
+  // Initialize new experiment form
+  function initializeNewExperimentModal(){
+    $("#new-experiment")
+    .on("ajax:beforeSend", function(){
+      animateSpinner();
+    })
+    .on("ajax:success", function(e, data){
+      $('body').append($.parseHTML(data.html));
+      $('#new-experiment-modal').modal('show',{
+        backdrop: true,
+        keyboard: false,
+      });
+    })
+    .on("ajax:error", function() {
+      animateSpinner(null, false);
+      // TODO
+    })
+    .on("ajax:complete", function(){
+      animateSpinner(null, false);
+    });
+  }
+
+  // Initialize edit experiment form
+  function initializeEditExperimentsModal(){
+    $.each($(".experiment-panel"), function(){
+      var id = '#edit-experiment-modal-' + $(this).data('id');
+      $(this)
+      .on("ajax:beforeSend", function(){
+        animateSpinner();
+      })
+      .on("ajax:success", function(e, data){
+        console.log("request success");
+        $('body').append($.parseHTML(data.html));
+        $(id).modal('show',{
+          backdrop: true,
+          keyboard: false,
+        });
+      })
+      .on("ajax:error", function() {
+        animateSpinner(null, false);
+        // TODO
+      })
+      .on("ajax:complete", function(){
+        animateSpinner(null, false);
+      });
+    });
+  }
+
+  // init modals
+  initializeNewExperimentModal();
+  initializeEditExperimentsModal();
+})();

app/assets/stylesheets/projects.scss

@@ -405,4 +405,21 @@ li.module-hover {
   .create-new-tag-btn {
     margin-right: 15px;
   }
-}
+}
+
+// EXPERIMENT PANEL
+
+.experiment-panel{
+  max-width: 650px;
+  margin: 0 auto;
+  margin-top: 25px;
+  @include box-shadow(0px 4px 8px 0px $color-dove-gray);
+
+}
+
+// SHOW
+.center-btn{
+  margin: 0 auto;
+  display: block;
+  max-width: 200px;
+}

app/controllers/experiments_controller.rb

@@ -57,7 +57,7 @@ class ExperimentsController < ApplicationController
     if @experiment.save
       flash[:success] = t('experiments.update.success_flash',
                           experiment: @experiment.name)
-      redirect_to canvas_experiment_path(@experiment)
+      redirect_to project_path(@experiment.project)
     else
       flash[:alert] = t('experiments.update.error_flash')
       redirect_to :back

app/views/experiments/_edit_modal.html.erb

@@ -1,5 +1,9 @@
 <!-- Edit experiment modal -->
-<div class="modal" id="edit-experiment-modal" tabindex="-1" role="dialog" aria-labelledby="edit-experiment-modal-label">
+<div class="modal"
+     id="edit-experiment-modal-<%= @experiment.id %>"
+     tabindex="-1"
+     role="dialog"
+     aria-labelledby="edit-experiment-modal-label">
   <%= bootstrap_form_for [@project, @experiment] do |f| %>
     <div class="modal-dialog" role="document">
       <div class="modal-content">

app/views/experiments/canvas.html.erb

@@ -33,6 +33,7 @@
                     edit_project_experiment_url(@project, @experiment),
                     remote: true,
                     type: 'button',
+                    data: { id: @experiment.id },
                     id: 'edit-experiment' %></li>
       <% end %>
       <% if can_archive_experiment(@experiment) %>

app/views/projects/show.html.erb

@@ -2,4 +2,24 @@
 <%= render partial: "shared/sidebar" %>
 <%= render partial: "shared/secondary_navigation" %>
 
-<!-- TODO -->
+<div class="row">
+  <div class="col-md-12">
+    <h2 class="pull-left"><%= t'projects.show.page_title' %></h2>
+    <% if can_create_experiment(@project) %>
+        <%= link_to t('experiments.new.create'),
+                      new_project_experiment_url(@project),
+                      remote: true,
+                      type: "button",
+                      id: 'new-experiment',
+                      class: "btn btn-primary center-btn" %>
+
+    <% end %>
+  </div>
+</div>
+<% @project.active_experiments.each do |experiment| %>
+  <%= render partial: 'projects/show/experiment',
+             locals: { experiment: experiment } %>
+
+<% end %>
+
+<%= javascript_include_tag("projects/show") %>

app/views/projects/show/_experiment.html.erb

@@ -0,0 +1,42 @@
+<div class="col-md-6">
+  <div class="panel panel-default experiment-panel"
+       data-id="<%= experiment.id %>">
+    <div class="panel-heading">
+      <h3 class="panel-title"><%= link_to experiment.name, canvas_experiment_path(experiment) %></h3>
+
+      <span class="dropdown pull-right">
+        <button class="btn btn-default dropdown-toggle"
+                type="button"
+                id="exActionsMenu-<%= experiment.id %>"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="true">
+          <span class="visible-xs-inline"><i class="glyphicon glyphicon-sort"></i></span>
+          <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu"
+            aria-labelledby="exActionsMenu-<%= experiment.id %>">
+          <% if can_create_experiment(@project) %>
+          <li><%= link_to t('experiments.edit.panel_label'),
+                        edit_project_experiment_url(@project, experiment),
+                        remote: true,
+                        type: 'button' %></li>
+          <% end %>
+          <% if can_archive_experiment(experiment) %>
+          <li><%= link_to t('experiments.archive.label_title'),
+                        archive_experiment_url(experiment),
+                        type: 'button',
+                        data: { confirm: t('experiments.canvas.archive_confirm') } %></li>
+          <% end %>
+        </ul>
+      </span>
+    </div>
+    <div class="panel-body">
+      <span>
+        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
+        <%= localize(experiment.created_at, format: t('time.formats.full_date')) %>
+      </span>
+      <p><%= experiment.description %></p>
+    </div>
+  </div>
+</div>

config/initializers/assets.rb

@@ -56,3 +56,4 @@ Rails.application.config.assets.precompile += %w( Sortable.min.js )
 Rails.application.config.assets.precompile += %w( reports_pdf.css )
 Rails.application.config.assets.precompile += %w( jszip.min.js )
 Rails.application.config.assets.precompile += %w( assets.js )
+Rails.application.config.assets.precompile += %w( projects/show.js )

config/locales/en.yml

@@ -223,6 +223,7 @@ en:
       error_flash: "Project <strong>%{name}</strong> not restored."
     show:
       head_title: "%{project}"
+      page_title: "Project's experiments"
     samples:
       head_title: "%{project} | Sample library"
     activities:
@@ -586,6 +587,7 @@ en:
       modal_title: 'Edit experiment %{experiment}'
       modal_create: 'Update experiment'
       label_title: "Edit details"
+      panel_label: 'Change details'
     create:
       success_flash: "Successfully created experiment %{experiment}"
       error_flash: 'Could not create a new experiment.'