chapter_3_4_5

22026536truongducquang · 22026536truongducquang · commit b8fbd48d8c8e · 2025-07-20T20:57:47.000+07:00
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -1,40 +1,66 @@
+// Import bootstrap
 @import 'bootstrap-sprockets';
 @import 'bootstrap';
 
-/* universal */
+// ===== Universal Styles =====
 body {
-    padding-top: 60px;
+  padding-top: 60px;
 }
 
 section {
-    overflow: auto;
+  overflow: auto;
 }
 
 textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 .center {
-    text-align: center;
-}
+  text-align: center;
 
-.center h1 {
+  h1 {
     margin-bottom: 10px;
+  }
 }
 
-/* header */
-#logo {
-    color: #fff;
-    float: left;
-    font-size: 1.7em;
-    font-weight: bold;
-    letter-spacing: -1px;
-    margin-right: 10px;
-    padding-top: 9px;
-    text-transform: uppercase;
+.notice {
+  color: green;
 }
 
-#logo:hover {
+// ===== Header / Logo =====
+#logo {
+  float: left;
+  padding-top: 9px;
+  margin-right: 10px;
+  font-size: 1.7em;
+  font-weight: bold;
+  letter-spacing: -1px;
+  text-transform: uppercase;
+  color: #fff;
+
+  &:hover {
     color: #fff;
     text-decoration: none;
+  }
+}
+
+// ===== Locale Switcher =====
+.locale-switcher {
+  margin: 20px 0;
+  text-align: right;
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: inline-block;
+
+      a {
+        font-weight: bold;
+        margin: 0 5px;
+      }
+    }
+  }
 }
diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -1,3 +1,4 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "@hotwired/turbo-rails"
-import "controllers"
+import '@hotwired/turbo-rails'
+import 'controllers'
+
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
@@ -1,4 +1,4 @@
-import { Application } from "@hotwired/stimulus"
+import { Application } from '@hotwired/stimulus'
 
 const application = Application.start()
 
diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
@@ -1,7 +1,7 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   connect() {
-    this.element.textContent = "Hello World!"
+    this.element.textContent = 'Hello World!'
   }
 }
diff --git a/app/javascript/controllers/index.js b/app/javascript/controllers/index.js
@@ -1,11 +1,11 @@
 // Import and register all your controllers from the importmap under controllers/*
 
-import { application } from "controllers/application"
+import { application } from 'controllers/application'
 
 // Eager load all controllers defined in the import map under controllers/**/*_controller
-import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-eagerLoadControllersFrom("controllers", application)
+import { eagerLoadControllersFrom } from '@hotwired/stimulus-loading'
+eagerLoadControllersFrom('controllers', application)
 
 // Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
-// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
-// lazyLoadControllersFrom("controllers", application)
+// import { lazyLoadControllersFrom } from '@hotwired/stimulus-loading'
+// lazyLoadControllersFrom('controllers', application)
diff --git a/app/views/demo_partials/_form.html.erb b/app/views/demo_partials/_form.html.erb
@@ -1,2 +1,2 @@
-<p> Zone: <%= zone %>
-<p> Date: <%= date %>
+<p><%= t("zones.zone_label") %>: <%= zone %></p>
+<p><%= t("zones.date_label") %>: <%= date %></p>
diff --git a/app/views/demo_partials/edit.html.erb b/app/views/demo_partials/edit.html.erb
@@ -1,2 +1,2 @@
-<h1>Editing zone</h1>
-<%= render partial: "form", locals: {zone: @zone, date: @date} %>
+<h1><%= t("zones.edit_zone") %></h1>
+<%= render partial: "form", locals: {zone: @zone, date: @date} %>
diff --git a/app/views/demo_partials/new.html.erb b/app/views/demo_partials/new.html.erb
@@ -1,2 +1,2 @@
-<h1>New zone</h1>
-<%= render partial: "form", locals: {zone: @zone, date: @date} %>
+<h1><%= t("zones.new_zone") %></h1>
+<%= render partial: "form", locals: {zone: @zone, date: @date} %>
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -6,9 +6,14 @@
                 <li><%= link_to t("navbar.home"), root_path %></li>
                 <li><%= link_to t("navbar.help"), help_path %></li>
                 <li><%= link_to t("navbar.login"), "#"%></li>
-                <%= link_to "English", url_for(locale: :en) %> |
-                <%= link_to "Tiếng Việt", url_for(locale: :vi) %>
             </ul>
         </nav>
     </div>
-</header>
+</header>
+
+<div class="locale-switcher">
+  <ul class="nav navbar-nav navbar-right">
+    <li><%= link_to t("languages.en") , request.params.merge(locale: :en) %></li>
+    <li><%= link_to t("languages.vi"), request.params.merge(locale: :vi) %></li>
+  </ul>
+</div>
diff --git a/app/views/products/_form.html.erb b/app/views/products/_form.html.erb
@@ -2,7 +2,7 @@
   <% if product.errors.any? %>
     <div style="color: red">
       <h2>
-        <%= t('errors.template.header', count: product.errors.count, model: product.class.model_name.human) %>
+        <%= t("errors.template.header", count: product.errors.count, model: product.class.model_name.human) %>
       </h2>
       <ul>
         <% product.errors.each do |error| %>
diff --git a/app/views/products/_product.html.erb b/app/views/products/_product.html.erb
@@ -1,6 +1,6 @@
 <div id="<%= dom_id product %>">
   <p>
-    <strong>Name:</strong>
+      <strong><%= t("products.attributes.name") %>:</strong>
     <%= product.name %>
   </p>
   <p>
diff --git a/app/views/products/edit.html.erb b/app/views/products/edit.html.erb
@@ -1,4 +1,4 @@
-<h1>Editing product</h1>
+<h1><%= t("products.editing_product") %></h1>
 
 <%= render "form", product: @product %>
 
diff --git a/app/views/products/index.html.erb b/app/views/products/index.html.erb
@@ -1,6 +1,8 @@
-<p style="color: green"><%= notice %></p>
+<% if notice %>
+  <p class="notice"><%= notice %></p>
+<% end %>
 
-<h1>Products</h1>
+<h1><%= t("products.index.title") %></h1>
 
 <div id="products">
   <%= render partial: "product", collection: @products %>
diff --git a/app/views/products/new.html.erb b/app/views/products/new.html.erb
@@ -1,4 +1,4 @@
-<h1>New product</h1>
+<h1><%= t("products.new_product") %></h1>
 
 <%= render "form", product: @product %>
 
diff --git a/app/views/products/show.html.erb b/app/views/products/show.html.erb
@@ -1,4 +1,6 @@
-<p style="color: green"><%= notice %></p>
+<% if notice %>
+  <p class="notice"><%= notice %></p>
+<% end %>
 
 <%= render @product %>
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1,35 +1,7 @@
-# Files in the config/locales directory are used for internationalization
-# and are automatically loaded by Rails. If you want to use locales other
-# than English, add the necessary files in this directory.
-#
-# To use the locales, use `I18n.t`:
-#
-#     I18n.t "hello"
-#
-# In views, this is aliased to just `t`:
-#
-#     <%= t("hello") %>
-#
-# To use a different locale, set it with `I18n.locale`:
-#
-#     I18n.locale = :es
-#
-# This would use the information in config/locales/es.yml.
-#
-# The following keys must be escaped otherwise they will not be retrieved by
-# the default I18n backend:
-#
-# true, false, on, off, yes, no
-#
-# Instead, surround them with single quotes.
-#
-# en:
-#   "true": "foo"
-#
-# To learn more, please read the Rails Internationalization guide
-# available at https://guides.rubyonrails.org/i18n.html.
-
 en:
+  languages:
+    en: "English"
+    vi: "Vietnamese"
   errors:
     template:
       header:
@@ -47,11 +19,17 @@ en:
     login: "Log in"
 
   products:
-    back_to_products: "Back to products"
+    index:
+      title: "Products"
+    attributes:
+      name: "Name"
     create:
       success: "Product was successfully created."
     destroy:
       success: "Product was successfully deleted."
+    new_product: "New product"
+    editing_product: "Editing product"
+    back_to_products: "Back to products"
     destroy_product: "Destroy this product"
     edit_product: "Edit this product"
     new_product: "New product"
@@ -83,59 +61,9 @@ en:
       link: "Ruby on Rails Tutorial"
       link_url: "http://www.railstutorial.org/"
       title: "Home"
-      
-vi:
-  errors:
-    template:
-      header:
-        one: "1 lỗi khiến %{model} không thể được lưu"
-        other: "%{count} lỗi khiến %{model} không thể được lưu"
-
-  layouts:
-    application:
-      base_title: "Ứng dụng mẫu Ruby on Rails Tutorial"
-
-  navbar:
-    app_name: "Ứng dụng mẫu"
-    home: "Trang chủ"
-    help: "Trợ giúp"
-    login: "Đăng nhập"
-
-  products:
-    back_to_products: "Quay lại danh sách sản phẩm"
-    create:
-      success: "Tạo sản phẩm thành công."
-    destroy:
-      success: "Xóa sản phẩm thành công."
-    destroy_product: "Xóa sản phẩm này"
-    edit_product: "Chỉnh sửa sản phẩm này"
-    new_product: "Thêm sản phẩm mới"
-    not_found: "Không tìm thấy sản phẩm."
-    show_product: "Xem sản phẩm này"
-    update:
-      success: "Cập nhật sản phẩm thành công."
-
-  static_pages:
-    help:
-      description_html: >
-        Nhận trợ giúp về Ruby on Rails Tutorial tại
-        %{link1}.
-        Để nhận trợ giúp về ứng dụng mẫu này, xem
-        %{link2}
-        cuốn sách.
-      heading: "Trợ giúp"
-      link1: "Trang trợ giúp Ruby on Rails Tutorial"
-      link1_url: "http://www.railstutorial.org/help"
-      link2: "Ruby on Rails Tutorial"
-      link2_url: "http://www.railstutorial.org/book"
-      title: "Trợ giúp"
-
-    home:
-      description_html: >
-        Đây là trang chủ của
-        %{link}
-        ứng dụng mẫu.
-      heading: "Ứng dụng mẫu"
-      link: "Ruby on Rails Tutorial"
-      link_url: "http://www.railstutorial.org/"
-      title: "Trang chủ"
+  
+  zones:
+    new_zone: "New zone"
+    edit_zone: "Editing zone"
+    zone_label: "Zone"
+    date_label: "Date"
diff --git a/config/locales/vi.yml b/config/locales/vi.yml
diff --git a/config/routes.rb b/config/routes.rb
diff --git a/db/schema.rb b/db/schema.rb

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Application } from "@hotwired/stimulus"`
	`1`	`+import { Application } from '@hotwired/stimulus'`
`2`	`2`
`3`	`3`	`const application = Application.start()`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`		`-import { Controller } from "@hotwired/stimulus"`
	`1`	`+import { Controller } from '@hotwired/stimulus'`
`2`	`2`
`3`	`3`	`export default class extends Controller {`
`4`	`4`	`connect() {`
`5`		`- this.element.textContent = "Hello World!"`
	`5`	`+ this.element.textContent = 'Hello World!'`
`6`	`6`	`}`
`7`	`7`	`}`