Added changes to implement sorting and styling

tamu-edu-students · Sep 14, 2024 · 9885c31 · 9885c31
1 parent 5fb0dae
commit 9885c31
Show file tree

Hide file tree

Showing 8 changed files with 334 additions and 31 deletions.
diff --git a/app/controllers/movies_controller.rb b/app/controllers/movies_controller.rb
@@ -2,8 +2,12 @@ class MoviesController < ApplicationController
   before_action :set_movie, only: %i[ show edit update destroy ]
 
   # GET /movies or /movies.json
+
   def index
-    @movies = Movie.all
+    @attribute = params[:attribute] || 'title'
+    @order = params[:order] || 'asc'
+
+    @movies = Movie.sort_based(@attribute, @order)
   end
 
   # GET /movies/1 or /movies/1.json
@@ -17,15 +21,18 @@ def new
 
   # GET /movies/1/edit
   def edit
+    @movie = Movie.find(params[:id])
   end
 
+
   # POST /movies or /movies.json
+
+
   def create
     @movie = Movie.new(movie_params)
-
     respond_to do |format|
       if @movie.save
-        format.html { redirect_to movie_url(@movie), notice: "Movie was successfully created." }
+        format.html { redirect_to movies_path(attribute: params[:attribute], order: params[:order]), notice: "Movie was successfully created." }
         format.json { render :show, status: :created, location: @movie }
       else
         format.html { render :new, status: :unprocessable_entity }
@@ -34,6 +41,7 @@ def create
     end
   end
 
+
   # PATCH/PUT /movies/1 or /movies/1.json
   def update
     respond_to do |format|
@@ -49,10 +57,11 @@ def update
 
   # DELETE /movies/1 or /movies/1.json
   def destroy
+    @movie = Movie.find(params[:id])
     @movie.destroy!
 
     respond_to do |format|
-      format.html { redirect_to movies_url, notice: "Movie was successfully destroyed." }
+      format.html { redirect_to movies_path(attribute: @attribute, order: @order), notice: "Movie was successfully destroyed." }
       format.json { head :no_content }
     end
   end
@@ -67,4 +76,5 @@ def set_movie
     def movie_params
       params.require(:movie).permit(:title, :rating, :description, :release_date)
     end
+
 end
diff --git a/app/models/movie.rb b/app/models/movie.rb
@@ -1,2 +1,6 @@
 class Movie < ActiveRecord::Base
-end
+    def self.sort_based(attribute, order)                 
+      order("#{attribute} #{order}")
+    end
+  end
+
diff --git a/app/views/movies/_movie.html.erb b/app/views/movies/_movie.html.erb
@@ -1,11 +1,31 @@
+<% if local_assigns[:separate] %>
+  <div id="<%= dom_id movie %>">
+    <p>Title: <%= movie.title %></p>
+    <p>Rating: <%= movie.rating %></p>
+    <p>Release Date: <%= movie.release_date %></p>
+    <p>Description: <%= movie.description %></p>
+  </div>
+<% else %>
+
 
 <div id="<%= dom_id movie %>">
 
 <tr>
-    <td> <%= movie.title %> </td>
-    <td> <%= movie.rating %> </td>
-    <td> <%= movie.release_date %> </td>
-    <td> <%= link_to "Click here", movie %> </td>
+    <td class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'order-desc' : '' %>">
+        <%= movie.title %> 
+    </td> 
+
+    <td class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'order-desc' : '' %>">
+        <%= movie.rating %> 
+    </td> 
+
+    <td class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'order-desc' : '' %>">
+        <%= movie.release_date %> 
+    </td> 
+
+    <td> <%= link_to "Click here", movie %> </td> 
 </tr>
 
 </div>
+
+<% end %>
diff --git a/app/views/movies/edit.html.erb b/app/views/movies/edit.html.erb
@@ -1,12 +1,59 @@
-<% content_for :title, "Editing movie" %>
+<head>
+  <style>
+    body {
+      margin: 0;
+      color: #333;
+    }
 
-<h1>Editing movie</h1>
+    header {
+      background-color: #004D98;
+      color: white;
+      padding: 10px 20px;
+      text-align: center;
+      font-size : 20px
+    }
 
-<%= render "form", movie: @movie %>
+    .content {
+      padding: 20px;
+      background-color: #F5F5F5;
+      font-size : 20px
+    }
 
-<br>
+    footer {
+      background-color: #D97B9A;
+      color: white;
+      text-align: center;
+      padding: 10px;
+      width: 100%;
+      font-size : 20px
+    }
+  </style>
+</head>
 
-<div>
+
+
+<body>
+  <header>
+  <% content_for :title, "EDIT MOVIE" %>
+
+  <h1>Editing movie</h1>
+
+  </header>
+
+  <div class="content">
+  <%= render "form", movie: @movie %>
+
+  <br>
+
+  </div>
+
+  <footer>
+  <div>
   <%= link_to "Show this movie", @movie %> |
   <%= link_to "Back to movies", movies_path %>
 </div>
+
+
+  </footer>
+</body>
+</html>
diff --git a/app/views/movies/index.html.erb b/app/views/movies/index.html.erb
@@ -2,37 +2,130 @@
 
 <% content_for :title, "Movies" %>
 
-<h1>Movies</h1>
+<h1>MOVIES</h1>
+
 <head>
 
   <style>
+
     table {
-      width: 75% ;
+      width: 100% ;
+      border-collapse: collapse
+
     }
     th {
-      border: 2px solid #333;
+      border: 2px solid #15D4F8;
       text-align: center
       padding: 20px
       font-weight: bold;
     }
     td {
-      border: 1px solid #ddd;
+      border: 1px solid #15D4F8;
       text-align: center
     }
     tfoot { 
     font-weight: bold; 
 }
 
+.sort-button {
+  display: inline-block;
+  background-color: #f39c12;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 20px;
+  text-align: center;
+  padding: 10px 20px
+
+}
+
+button {
+  text-align: center;
+}
+
+
+.hidden-text {
+  display: none;
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #f39c12;
+  color: white;
+  border-radius: 5px;
+  font-size : 16px
+  text-align: center;
+
+
+}
+
+.order-asc {
+  background-color: #7BAFD4; 
+}
+
+.order-desc {
+  background-color: #D97B9A; 
+}
+
+body {
+  background: linear-gradient(to right, #7BAFD4, #D97B9A); 
+  color: #333; 
+  margin: 0;
+  padding: 0;
+  font-size : 20px
+
+
+}
+h1 {
+  text-align: center;
+}
+
+.content {
+      position: relative;
+      padding: 20px;
+      background: #FFE5E5; 
+}
+
 
   </style
 </head>
+
+
+
+<div class="content">
+
+<% if params[:attribute].present? && params[:order].present? %>
+  <div id="sort-message">
+    Items are sorted by <%= params[:attribute].humanize %> in <%= params[:order].humanize %> order.
+  </div>
+<% end %>
+
+
 <table>
   <thead>
     <tr>
-        <th> Title </th>
-        <th> Rating </th>
-        <th> Release date </th>
-        <th> Show this movie </th>
+
+      <th id="column-header" class="<%= params[:attribute] == 'title' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'title' && params[:order] == 'desc' ? 'order-desc' : '' %>">
+
+        <%= link_to 'Title', movies_path(attribute: 'title', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
+        <% if params[:attribute] == 'title' %>
+          <%= params[:order] == 'asc' ? '▲' : '▼' %>
+        <% end %>
+      </th>
+      <th id="column-header" class="<%= params[:attribute] == 'rating' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'rating' && params[:order] == 'desc' ? 'order-desc' : '' %>" >
+        <%= link_to 'Rating', movies_path(attribute: 'rating', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
+        <% if params[:attribute] == 'rating' %>
+          <%= params[:order] == 'asc' ? '▲' : '▼' %>
+        <% end %>
+      </th>
+      <th id="column-header" class="<%= params[:attribute] == 'release_date' && params[:order] == 'asc' ? 'order-asc' : params[:attribute] == 'release_date' && params[:order] == 'desc' ? 'order-desc' : '' %>" >
+        <%= link_to 'Release Date', movies_path(attribute: 'release_date', order: params[:order] == 'asc' ? 'desc' : 'asc') %>
+        <% if params[:attribute] == 'release_date' %>
+          <%= params[:order] == 'asc' ? '▲' : '▼' %>
+        <% end %>
+      </th>
+
+
+      <th> Show this movie </th>
     </tr>
   </thead>
 
@@ -46,11 +139,38 @@
 
   <tfoot>
     <tr> 
-        <td colspan="4"> <%= link_to "New movie", new_movie_path %> </td>
+        <td colspan="4"> <%= link_to "New movie", new_movie_path(attribute: params[:attribute], order: params[:order]) %> </td>
     </tr>
   </tfoot>
 </table>
 
 
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const button = document.getElementById('toggle-button');
+  const text = document.getElementById('toggle-text');
+
+  button.addEventListener('click', () => {
+    if (text.style.display === 'none' || text.style.display === '') {
+      text.style.display = 'block'; 
+    } else {
+      text.style.display = 'none'; 
+    }
+  });
+});
+</script>
+
+
+<button id="toggle-button" class="sort-button">Sort</button>
+<div id="toggle-text" class="hidden-text">
+  Click on the attribute based on which you would like the data to be sorted, click on it again to change the sorting order.
+</div>
+
+
+
+
+