appdev-projects · JihuiTanUchicago · Jun 1, 2022
diff --git a/app/controllers/movies_controller.rb b/app/controllers/movies_controller.rb
@@ -27,6 +27,7 @@ def create
       if @movie.save
         format.html { redirect_to @movie, notice: "Movie was successfully created." }
         format.json { render :show, status: :created, location: @movie }
+        format.js
       else
         format.html { render :new, status: :unprocessable_entity }
         format.json { render json: @movie.errors, status: :unprocessable_entity }

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -3,7 +3,7 @@
 // a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 
-import Rails from "@rails/ujs"
+import Rails, { $ } from "@rails/ujs"; global.Rails = Rails;
 import * as ActiveStorage from "@rails/activestorage"
 import "channels"
 

diff --git a/app/models/actor.rb b/app/models/actor.rb
@@ -1,2 +1,4 @@
 class Actor < ApplicationRecord
+  has_many :characters
+
 end
diff --git a/app/models/director.rb b/app/models/director.rb
@@ -1,2 +1,3 @@
 class Director < ApplicationRecord
+  has_many :movies
 end
diff --git a/app/models/movie.rb b/app/models/movie.rb
@@ -1,3 +1,4 @@
 class Movie < ApplicationRecord
   belongs_to :director
+  has_many :characters
 end
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -8,6 +8,11 @@
 
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= javascript_pack_tag 'application' %>
+    <script
+      src="https://code.jquery.com/jquery-3.6.0.js"
+      integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
+      crossorigin="anonymous">
+    </script>
   </head>
 
   <body>

diff --git a/app/views/movies/create.js.erb b/app/views/movies/create.js.erb
@@ -0,0 +1,18 @@
+var body = $("#movie_body");
+
+var added_movie = '<tr>' + 
+                  '<td>' + <%=@movie.title%> + '</td>' +
+                  '<td>' + <%=@movie.description%> + '</td>' +
+                  '<td>' + <%=@movie.duration%> + '</td>' +
+                  '<td>' + <%=@movie.year%> + '</td>' +
+                  '<td>' + <%=@movie.director_id%> + '</td>' +
+                  '<td>' + <%=@movie.title%> + '</td>' +
+                  '<td>' + '<%= j(link_to 'Show', @movie) %>' + '</td>' +
+                  '<td>' + '<%= j(link_to 'Edit', edit_movie_path(@movie)) %>' + '</td>' +
+                  '<td>' + '<%= j(link_to 'Destroy', @movie, method: :delete, data: { confirm: 'Are you sure?' }) %>' + '</td>' +
+                  '</tr>';
+
+var movie = $(added_movie);
+movie.hide();
+body.after(movie);
+movie.fadeIn(5000);
diff --git a/app/views/movies/index.html.erb b/app/views/movies/index.html.erb
@@ -12,9 +12,20 @@
       <th>Director</th>
       <th colspan="3"></th>
     </tr>
+
+    <tr id="new_movie_form">
+      <%=form_with(model: Movie.new, local: false) do |form|%>
+        <th id="new_movie_title"><%= form.text_field :title %></th>
+        <th id="new_movie_description"><%= form.text_area :description %></th>
+        <th id="new_movie_duration"><%= form.number_field :duration %></th>
+        <th id="new_movie_year"><%= form.number_field :year %></th>
+        <th id="new_movie_director_id"><%= form.text_field :director_id %></th>
+        <th class="actions"><%=form.submit%></th>
+      <%end%>
+    </tr>
   </thead>
 
-  <tbody>
+  <tbody id="movie_body">
     <% @movies.each do |movie| %>
       <tr>
         <td><%= movie.title %></td>

diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
     "@rails/actioncable": "^6.0.0",
     "@rails/activestorage": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "5.2.1"
+    "@rails/webpacker": "5.2.1",
+    "jquery": "^3.6.0"
   },
   "version": "0.1.0",
   "devDependencies": {

diff --git a/yarn.lock b/yarn.lock