color picker

app/controllers/account/calculators_controller.rb

@@ -81,7 +81,7 @@ def collect_fields_for_kind(kind)
 
   def calculator_params
     params.require(:calculator).permit(
-      :id, :en_name, :uk_name,
+      :id, :en_name, :uk_name, :color,
       formulas_attributes: [:id, :expression, :en_label, :uk_label, :calculator_id, :en_unit, :uk_unit, :_destroy],
       fields_attributes: [:id, :en_label, :uk_label, :var_name, :kind, :_destroy,
         categories_attributes: [:id, :en_name, :uk_name, :price, :_destroy]]

app/models/calculator.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null
@@ -35,6 +36,7 @@ class Calculator < ApplicationRecord
   validates :en_name, :uk_name, presence: true
   validates :en_name, :uk_name, length: { minimum: 3, maximum: 50 }
   validates :slug, presence: true, uniqueness: true
+  validates :color, format: { with: /\A#[0-9a-fA-F]{6}\z/}
 
   def self.ransackable_attributes(auth_object = nil)
     ["created_at", "id", "name", "preferable", "slug", "updated_at", "uuid"]

app/views/account/calculators/partials/_color_selector.html.erb

@@ -0,0 +1,3 @@
+<div class="nested-fields">
+  <%= f.input :color, as: :color, label: 'Choose a Color for Calculator Page', input_html: { class: 'form-control form-control-color p-2', style: 'width: 7rem; height: 3.5rem;' } %>
+</div>

app/views/account/calculators/partials/_form.html.erb

@@ -23,6 +23,12 @@
           <%= link_to_add_association "Add Field", f, :fields, partial: "account/calculators/partials/field_fields", class: "underline" %>
         </div>
       </div>
+
+      <div id="fields" class="space-y-4">
+        <%= f.simple_fields_for :color do |color_selector| %>
+          <%= render "account/calculators/partials/color_selector", f: f %>
+        <% end %>
+      </div>
     </div>
   </div>
 

app/views/calculators/show.html.erb

@@ -1,10 +1,7 @@
-<%# TODO: Delete this and use user provided value %>
-<% color = "#088F8F" %>
-
 <%# TODO: Delete this and use user provided value %>
 <% calculator_image = "scales.png" %>
 
-<div style="--calculator-color: <%= color %>">
+<div style="--calculator-color: <%= @calculator.color %>">
   <div class="rounded jumbotron jumbotron-fluid position-relative">
     <h1 class="pt-6 text-2xl font-semibold text-center font-sans dynamic-text-color">Calculator <%= @calculator.name %> <%= @text %></h1>
     <div class="flex-wrap d-flex justify-content-around calculator_wrap ms-5">
@@ -15,13 +12,13 @@
           <div class="pb-2 input_lable"><%= form.label field.var_name, field.label %></div>
           <% if field.kind == 'number' %>
             <div class="flex-row rounded flex-item w-100 age_wrapper form_fild">
-              <%= form.number_field "inputs[#{field.var_name}]", 
+              <%= form.number_field "inputs[#{field.var_name}]",
                                   placeholder: field.label,
                                   class: "required rounded w-100 calculator-field"
                                   %>
             </div>
           <% else %>
-            <%= form.select "inputs[#{field.var_name}]", 
+            <%= form.select "inputs[#{field.var_name}]",
                             options_from_collection_for_select(field.categories, :price, :name),
                             {},
                             class: "flex-row rounded flex-item w-100 form_fild calculator-field" %>

db/migrate/20241201141708_add_color_to_calculators.rb

@@ -0,0 +1,5 @@
+class AddColorToCalculators < ActiveRecord::Migration[7.2]
+  def change
+    add_column :calculators, :color, :string, default: "#000000"
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.2].define(version: 2024_11_19_192344) do
+ActiveRecord::Schema[7.2].define(version: 2024_12_01_141708) do
   # These are extensions that must be enabled in order to support this database
   enable_extension "pgcrypto"
   enable_extension "plpgsql"
@@ -49,6 +49,7 @@
     t.string "slug"
     t.string "uk_name", default: "", null: false
     t.string "en_name", default: "", null: false
+    t.string "color", default: "#000000"
     t.index ["slug"], name: "index_calculators_on_slug", unique: true
   end
 

spec/factories/calculators.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null

spec/models/calculator_spec.rb

@@ -5,6 +5,7 @@
 # Table name: calculators
 #
 #  id         :bigint           not null, primary key
+#  color      :string           default("#000000")
 #  en_name    :string           default(""), not null
 #  slug       :string
 #  uk_name    :string           default(""), not null