Style calculators constructor show page (#984)

* Style show page

* Fix formatting

* Added calculation service helper test

* Added change color logic

* fix dynamic colors adding

* Change calculation_service logic

* Fix calculation_service_helper test

* Change constructor calculatior description partial

* Added space

* Change constructor calculator description partial

* Added comment

* Fix image and added alt I18n and change calculation result partial

* Code formatting

app/assets/stylesheets/pages/calculator.scss

@@ -16,6 +16,28 @@
   font-style: normal;
   transition: transform 0.5s ease-in-out;
   max-width: 300px;
+  @include transition(all 0.5s ease-in-out);
+
+  &:hover {
+    background-color: $matte_lime_green;
+  }
+}
+
+.btn-nonito {
+  font-size: 14px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  font-weight: 400;
+  font-family: "Nunito", sans-serif;
+  font-style: normal;
+}
+
+.dynamic-text-color {
+  color: var(--calculator-color);
+}
+
+.dynamic-background-color {
+  background-color: var(--calculator-color);
 }
 
 #calc {
@@ -61,6 +83,11 @@
   margin-right: 0px;
 }
 
+.calculator-field {
+  background-color: $light_gray !important;
+  border: 0;
+}
+
 .flex-item {
   display: flex;
   flex-wrap: wrap;

app/assets/stylesheets/pages/feature_flags.scss

@@ -41,19 +41,13 @@
 }
 
 input[type="submit"] {
-  background-color: $success;
   border: none;
   border-radius: 4px;
   color: #fff;
   cursor: pointer;
   font-size: 16px;
   padding: 10px;
   min-width: 110px;
-  @include transition(all 0.5s ease-in-out);
-
-  &:hover {
-    background-color: $matte_lime_green;
-  }
 }
 
 .btn-grey {

app/controllers/calculators_controller.rb

@@ -17,6 +17,8 @@ def index
 
   def show
     @calculator = resource
+    add_breadcrumb t("breadcrumbs.home"), root_path
+    add_breadcrumb @calculator.name
   end
 
   def calculate

app/models/formula.rb

@@ -22,11 +22,15 @@
 #  fk_rails_...  (calculator_id => calculators.id)
 #
 class Formula < ApplicationRecord
+  include Translatable
+
   belongs_to :calculator
 
   validates_with FormulaValidator
 
   validates :uk_label, :en_label, :uk_unit, :en_unit, :expression, presence: true
   validates :uk_label, :en_label, length: { minimum: 3, maximum: 50 }
   validates :en_unit, :uk_unit, length: { minimum: 1, maximum: 30 }
+
+  translates :label, :unit
 end

app/services/calculators/calculation_service.rb

@@ -10,7 +10,7 @@ def perform
     @calculator.formulas.map do |formula|
       result = @dentaku.evaluate(formula.expression, @inputs)
 
-      { label: formula.en_label, result: result }
+      { label: formula.label, result: result, unit: formula.unit }
     end
   end
 end

app/views/calculators/partials/_calculation_results.html.erb

@@ -1,14 +1,22 @@
-<h2 class="mt-4 text-2xl font-bold text-white underline">Calculation Results</h2>
-<div class="mt-2 space-y-2 text-white">
-  <% results.each do |result| %>
-    <div class="flex gap-2 text-lg font-medium">
-      <h3>
-        <%= result[:label] %>
-      </h3>
-      =
-      <p>
-        <%= result[:result] %>
-      </p>
-    </div>
-  <% end %>
+<%# TODO: Delete this and use user provided value%>
+<% formula_image = "money_to_spent_2.png" %>
+
+<div class="calculation-results rounded jumbotron jumbotron-fluid position-relative">
+  <h2 class="pt-6 text-2xl font-semibold text-center dynamic-text-color">Calculation Results</h2>
+  <div class="jumbotron calculation-results result main-result-container result-container">
+    <% results.each do |result| %>
+      <div>
+          <%= image_tag "#{formula_image}", class: "img-margin", alt: "icon" %>
+          <p class="dynamic-text-color">
+            <%= result[:result] %>
+          </p>
+          <p class="text-2xl dynamic-text-color">
+            <%= result[:unit] %>
+          </p>
+          <p class="diapers-font-text">
+            <%= result[:label] %>
+          </p>
+      </div>
+    <% end %>
+  </div>
 </div>

app/views/calculators/partials/show/_constructor_calculator_description.erb

@@ -0,0 +1,8 @@
+<%# TODO: Delete this if %>
+<% if false %>
+  <section class="description-section">
+    <div class="description-block">
+      <%# TODO: ADD text here %>
+    </div>
+  </section>
+<% end %>

app/views/calculators/show.html.erb

@@ -1,21 +1,40 @@
-<div class="container place-items-center">
-  <h1 class="text-4xl font-bold">Calculator <%= @calculator.name %></h1><br>
+<%# TODO: Delete this and use user provided value %>
+<% color = "#088F8F" %>
 
-  <%= form_with url: calculate_calculator_path(@calculator) do |form| %>
-    <% @calculator.fields.each do |field| %>
-      <div class="space-y-4 form-inputs">
-        <h1><%= form.label field.var_name, field.label %></h1>
-        <% if field.kind == 'number' %>
-          <%= form.number_field "inputs[#{field.var_name}]", placeholder: field.label %>
-        <% else %>
-          <%= form.select "inputs[#{field.var_name}]", options_from_collection_for_select(field.categories, :price, :name) %>
-        <% end %>
-      </div><br>
+<%# TODO: Delete this and use user provided value %>
+<% calculator_image = "scales.png" %>
+
+<div style="--calculator-color: <%= 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">
+
+    <%= form_with html: { class: "simple_form_calculator"}, url: calculate_calculator_path(@calculator) do |form| %>
+      <div class="flex-item flex-column">
+      <% @calculator.fields.each do |field| %>
+          <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}]", 
+                                  placeholder: field.label,
+                                  class: "required rounded w-100 calculator-field"
+                                  %>
+            </div>
+          <% else %>
+            <%= 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" %>
+          <% end %>
+      <% end %>
+      <%= form.submit "Calculate", class: "btn-nonito result-btn dynamic-background-color" %>
+      </div>
     <% end %>
-    <div class="mt-6 form-actions">
-      <%= form.submit "Calculate", class: "bg-blue-500 text-white font-semibold px-4 py-2 rounded hover:bg-blue-700" %>
+    <%= image_tag calculator_image, class: "scales_img", alt: t(".image_alt") %>
     </div>
-  <% end %>
+  </div>
 
   <%= turbo_frame_tag "calc-results" %>
 </div>
+
+<%= render "calculators/partials/show/constructor_calculator_description" %>

config/locales/en/en.yml

@@ -102,6 +102,7 @@ en:
       presence_error_msg: "%{field} is missing"
     show:
       welcome_header: "Welcome to ZeroWaste"
+      image_alt: "Scales"
     buttons:
       to_main: "To main"
       calculate: "Calculate"

config/locales/uk/uk.yml

@@ -84,6 +84,7 @@ uk:
       will_buy_diapers: "Кількість підгузків, які ще будуть використані до моменту, коли дитина перейде на звичайну білизну"
       money_spent: "Вартість використаних підгузків"
       money_will_be_spent: "Вартість підгузків, які ще будуть використані до моменту, коли дитина перейде на звичайну білизну"
+      image_alt: "Ваги"
     buttons:
       to_main: "На головну"
       calculate: "Розрахувати"

spec/helpers/calculators/calculation_service_helper_spec.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe Calculators::CalculationService, type: :helper do
+  let(:calculator) { instance_double("Calculator", formulas: formulas) }
+  let(:formulas) do
+    [
+      Formula.new(en_label: "Addition", en_unit: "units", uk_label: "Додавання", uk_unit: "одиниці", expression: "x + y"),
+      Formula.new(en_label: "Multiplication", en_unit: "units", uk_label: "Множення", uk_unit: "одиниці", expression: "x * y")
+    ]
+  end
+  let(:inputs) { ActionController::Parameters.new({ x: 5, y: 3 }) }
+
+  before do
+    allow_any_instance_of(ApplicationHelper).to receive(:current_locale?).with(:en).and_return(locale_en)
+  end
+
+  describe "#perform" do
+    subject do
+      I18n.with_locale(locale_en ? :en : :uk) do
+        described_class.new(calculator, inputs).perform
+      end
+    end
+
+    context "when locale is English" do
+      let(:locale_en) { true }
+
+      it "returns results with English labels and units" do
+        expect(subject).to eq([
+          { label: "Addition", result: 8, unit: "units" },
+          { label: "Multiplication", result: 15, unit: "units" }
+        ])
+      end
+    end
+
+    context "when locale is Ukrainian" do
+      let(:locale_en) { false }
+
+      it "returns results with Ukrainian labels and units" do
+        expect(subject).to eq([
+          { label: "Додавання", result: 8, unit: "одиниці" },
+          { label: "Множення", result: 15, unit: "одиниці" }
+        ])
+      end
+    end
+  end
+end