Big update

Added new buttons such as: - Edit the article - Delete the article - Create an article - View the article Added a new design of the main page Added the design of the page for Adding a new article Added work with the database. all Articles are now edited in the user Database at any operation with them
Dilray · Nov 19, 2024 · dccabf5 · dccabf5
1 parent 7514cc8
commit dccabf5
Show file tree

Hide file tree

Showing 8 changed files with 233 additions and 97 deletions.
diff --git a/app/controllers/articles_controller.rb b/app/controllers/articles_controller.rb
@@ -1,49 +1,47 @@
 class ArticlesController < ApplicationController
   before_action :set_article, only: [:show, :edit, :update, :destroy]
-
-  def index
-    @articles = Article.all
-  end
-
+     def index
+      @articles = Article.all
+     end
   def show
   end
-
   def new
     @article = Article.new
   end
 
-  def create
-    @article = Article.new(article_params)
-    if @article.save
-      redirect_to @article, notice: 'Article was successfully created.'
-    else
-      render :new
+    def edit
     end
-  end
-
-  def edit
-  end
 
-  def update
-    if @article.update(article_params)
-      redirect_to @article, notice: 'Article was successfully updated.'
-    else
-      render :edit
+    def update
+      if @article.update(article_params)
+        redirect_to @article, notice: 'Article was successfully updated.'
+      else
+        render :edit
+      end
     end
-  end
 
   def destroy
+    @article = Article.find(params[:id]) # Ищем статью по ID
     @article.destroy
     redirect_to articles_url, notice: 'Article was successfully destroyed.'
   end
 
-  private
+    def set_article
+      @article = Article.find(params[:id])
+    end
 
-  def set_article
-    @article = Article.find(params[:id])
+  def create
+    @article = Article.new(article_params)
+    if @article.save
+      redirect_to articles_path, notice: 'Article was successfully created.'
+    else
+      render :new
+    end
   end
 
+  private
+
   def article_params
-    params.require(:article).permit(:title, :body)
+    params.require(:article).permit(:title, :author, :content)
   end
-end
+end
diff --git a/app/views/articles/edit.html.erb b/app/views/articles/edit.html.erb
@@ -19,14 +19,18 @@
   </div>
 
   <div class="field">
-    <%= form.label :body %>
-    <%= form.text_area :body %>
+    <%= form.label :author %>
+    <%= form.text_field :author %>
+  </div>
+
+  <div class="field">
+    <%= form.label :content %>
+    <%= form.text_area :content %>
   </div>
 
   <div class="actions">
-    <%= form.submit %>
+    <%= form.submit "Update Article" %>
   </div>
 <% end %>
 
-<%= link_to 'Show', @article %> |
-<%= link_to 'Back', '/' %>
+<%= link_to 'Back', articles_path %>
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
@@ -91,34 +91,65 @@
         justify-content: center;
     }*/
 
-    .destroy-button {
-        background-color: red;
-        color: white;
+    .btn {
+        padding: 10px 15px;
         border: none;
         border-radius: 5px;
-        padding: 5px;
         cursor: pointer;
+        font-size: 16px;
+        transition: background-color 0.3s, transform 0.2s;
     }
 
-    .destroy-button:hover {
-        background-color: darkred;
+    .btn-show {
+        background-color: #8b4513; /* Коричневый */
+        color: white;
     }
 
-    /* Кнопка добавления статей */
-    .add-button {
+    .btn-edit {
+        background-color: #8b4513; /* Коричневый */
         color: white;
-        background-color: red;
-        padding: 10px 15px;
-        border: none;
-        border-radius: 5px;
-        cursor: pointer;
-        font-family: Arial, sans-serif;
-        font-weight: bold;
-        transition: background-color 0.3s;
     }
 
-    .add-button:hover {
-        background-color: darkred; 
+    .btn-delete {
+        background-color: #f8173e; /* Красный */
+        color: white;
+    }
+
+    .btn:hover {
+        transform: scale(1.05);
+    }
+
+    .btn-show:hover {
+        background-color: #45a049; /* Темно-зеленый при наведении */
+    }
+
+    .btn-edit:hover {
+        background-color: #1e88e5; /* Темно-синий при наведении */
+    }
+
+    .btn-delete:hover {
+        background-color: #d32f2f; /* Темно-красный при наведении */
+    }
+
+    td {
+        padding: 10px; /* Отступы внутри ячеек */
+        text-align: left; /* Выравнивание текста по левому краю */
+    }
+
+    .article-title {
+        font-weight: bold; /* Жирный шрифт для заголовка статьи */
+        font-size: 18px; /* Размер шрифта для заголовка */
+        color: #333; /* Цвет текста */
+    }
+
+    .article-author {
+        font-style: italic; /* Курсив для имени автора */
+        color: #555; /* Цвет текста для автора */
+    }
+
+    /* Добавление эффекта при наведении на строку таблицы */
+    tr:hover td {
+        background-color: #f0f0f0; /* Цвет фона при наведении */
     }
 
 </style>
@@ -169,7 +200,28 @@
   </div>
 </div> -->
 
-<!-- Кнопка для добавления новой статьи -->
-<form action="articles/new" method="get">
-  <button type="submit" class="add-button">Добавить статью</button>
-</form>
+<%= button_to 'Новая статья', new_article_path, method: :get, class: 'btn btn-primary' %>
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Автор</th>
+<!--    <th>Content</th>-->
+    <th colspan="2"></th>
+  </tr>
+  </thead>
+
+  <tbody>
+  <% @articles.each do |article| %>
+    <tr>
+      <td class="article-title"><%= article.title %></td>
+      <td class="article-author"><%= article.author %></td>
+<!--      <td><%#= article.content %></td>-->
+      <td><%= button_to 'Показать', article_path(article), method: :get, class: 'btn btn-show' %></td>
+      <td><%= button_to 'Изменить', edit_article_path(article), method: :get, class: 'btn btn-edit' %></td>
+      <td><%= button_to 'Удалить', article_path(article), method: :delete, data: { confirm: 'Вы уверены?' }, class: 'btn btn-delete' %></td>  <!-- "вы уверены?" пока не работает хз почему -->
+    </tr>
+  <% end %>
+  </tbody>
+</table>
diff --git a/app/views/articles/new.html.erb b/app/views/articles/new.html.erb
@@ -1,42 +1,110 @@
-<h1>New Article</h1>
+<style>
 
-<%= form_with(model: @article, local: true) do |form| %>
+  body {
+      background-color: #eaceb6;
+  }
+
+    .page-title {
+        text-align: center;
+        font-size: 2.5em;
+        margin-bottom: 20px;
+    }
+
+  .article-form {
+      background-color: #8b4513;
+      max-width: 600px;
+      margin: 0 auto; /* Центрирование формы */
+      padding: 20px;
+      border: 1px solid #ccc;
+      border-radius: 8px;
+  }
+
+  .field {
+      margin-bottom: 15px;
+      background-color: #8b4513;
+  }
+
+  .label {
+      display: block;
+      font-weight: bold;
+      margin-bottom: 5px;
+  }
+
+  .input, .textarea {
+      width: 100%; /* Ширина на 100% */
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+  }
+
+  .textarea {
+      height: 150px; /* Высота текстовой области */
+  }
+
+  /* Если у вас есть отдельный контейнер для текстовой области, добавьте его */
+  .textarea-container {
+      display: flex; /* Используем Flexbox для центрирования */
+      justify-content: center; /* Центрируем содержимое по горизонтали */
+  }
+
+  /* Убедитесь, что элементы ввода и текстовые области имеют одинаковую ширину */
+  .input, .textarea {
+      max-width: 100%; /* Ограничение ширины на 100% */
+  }
+
+  .error-explanation {
+      background-color: #f8d7da;
+      color: #721c24;
+      padding: 15px;
+      border-radius: 5px;
+      margin-bottom: 20px;
+  }
+
+  .submit-button {
+      background-color: #007bff;
+      color: white;
+      padding: 10px 15px;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+  }
+
+  .submit-button:hover {
+      background-color: #0056b3;
+  }
+
+</style>
+
+<h1 class="page-title">Новая статья</h1>
+
+<%= form_with(model: @article, local: true, html: { class: 'article-form' }) do |form| %>
   <% if @article.errors.any? %>
-    <div id="error_explanation">
+    <div id="error_explanation" class="error-explanation">
       <h2><%= pluralize(@article.errors.count, "error") %> prohibited this article from being saved:</h2>
-      <div class="error-messages">
-        <ul>
-          <% @article.errors.full_messages.each do |message| %>
-            <li><%= message %></li>
-          <% end %>
-        </ul>
-      </div>
+      <ul>
+        <% @article.errors.full_messages.each do |message| %>
+          <li><%= message %></li>
+        <% end %>
+      </ul>
     </div>
   <% end %>
 
   <div class="field">
-    <div class="label">
-      <%= form.label :title %>
-    </div>
-    <div class="input">
-      <%= form.text_field :title %>
-    </div>
+    <%= form.label "Название", class: 'label' %>
+    <%= form.text_field :title, class: 'input' %>
   </div>
 
   <div class="field">
-    <div class="label">
-      <%= form.label :body %>
-    </div>
-    <div class="input">
-      <%= form.text_area :body %>
-    </div>
+    <%= form.label "Автор", class: 'label' %>
+    <%= form.text_field :author, class: 'input' %>
+  </div>
+
+  <div class="field">
+    <%= form.label "Текст вашей статьи", class: 'label' %>
+    <%= form.text_area :content, class: 'textarea' %>
   </div>
 
   <div class="actions">
-    <%= form.submit %>
+    <%= form.submit 'Опубликовать статью', class: 'submit-button' %>
   </div>
 <% end %>
-
-<div class="back-link">
-  <%= link_to 'Back', '/' %>
-</div>
diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
@@ -1,6 +1,6 @@
 <h1><%= @article.title %></h1>
 
-<p><%= @article.body %></p>
+<p><%= @article.content %></p>
 
 <%= link_to 'Edit', edit_article_path(@article) %> |
 <%= link_to 'Back', '/' %>
diff --git a/config/routes.rb b/config/routes.rb
@@ -1,19 +1,12 @@
 Rails.application.routes.draw do
-  #root 'pages#home'
-  #devise_for :users, controllers: {
-  #  sessions: 'users/sessions',
-  #  registrations: 'users/registrations',
-  #omniauth_callbacks: 'users/omniauth_callbacks'
-  #}
   resources :articles
   root "articles#index"
-  get 'articles/index' => 'articles#index'
-  get 'articles/show' => 'articles#show'
-  get 'articles/new' => 'articles#new'
-  get 'articles/create' => 'articles#create'
-  get 'articles/edit' => 'articles#edit'
-  get 'articles/update' => 'articles#update'
-  get 'articles/destroy' => 'articles#destroy'
+  # get 'articles/index' => 'articles#index'
+  # get 'articles/show' => 'articles#show'
+  # get 'articles/new' => 'articles#new'
+  # get 'articles/create' => 'articles#create'
+  # get 'articles/edit' => 'articles#edit'
+  # get 'articles/update' => 'articles#update'
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
 
   # Defines the root path route ("/")
@@ -27,5 +20,4 @@
     sessions: 'users/sessions',
     registrations: 'users/registrations'
   }
-
 end