Upload the calculator logo

app/assets/stylesheets/pages/calculator.scss

@@ -155,6 +155,17 @@
   max-width: 428px;
 }
 
+.constructor-calculator-scales {
+  align-self: center;
+  width: 50%;
+  max-width: 428px;
+  padding: 10px 0;
+}
+
+.calcualtor-margin-left {
+  margin-left: 1.25rem;
+}
+
 .simple_form_calculator {
   width: 40%;
   margin-top: 32px;
@@ -292,11 +303,10 @@ select.custom-select {
     .right {
       padding-left: 30px;
       padding-top: 85px;
-      transform: translateX(-40px);
     }
     .left {
       padding-bottom: 85px;
-      transform: rotate(180deg) translateX(40px);
+      transform: rotate(180deg);
     }
   }
 }
@@ -466,4 +476,12 @@ select.custom-select {
   .scales_img {
     width: 100%;
   }
+
+  .constructor-calculator-scales {
+    width: 100%;
+  }
+
+  .calcualtor-margin-left {
+    margin-left: 0;
+  }
 }

app/controllers/account/calculators_controller.rb

@@ -11,6 +11,7 @@ def index
 
   def show
     @calculator = resource
+    @calculator = resource
   end
 
   def new
@@ -81,7 +82,7 @@ def collect_fields_for_kind(kind)
 
   def calculator_params
     params.require(:calculator).permit(
-      :id, :en_name, :uk_name, :color,
+      :id, :en_name, :uk_name, :color, :logo_picture,
       formulas_attributes: [:id, :expression, :en_label, :uk_label, :calculator_id, :en_unit, :uk_unit, :priority, :formula_image, :relation, :_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

@@ -23,8 +23,10 @@ class Calculator < ApplicationRecord
 
   friendly_id :en_name, use: :sequentially_slugged
 
+  attribute :logo_placeholder, :string, default: "https://via.placeholder.com/428x307?text=Logo"
   translates :name, :notes
 
+  has_one_attached :logo_picture
   has_many :fields, dependent: :destroy
   has_many :formulas, -> { ordered_by_priority }, dependent: :destroy, inverse_of: :calculator
 
@@ -52,4 +54,13 @@ def self.ransackable_attributes(auth_object = nil)
   def strip_tags_and_tokenize(string)
     ActionController::Base.helpers.strip_tags(string).chars
   end
+
+  def logo_url
+    if logo_picture.attached?
+      Rails.application.routes.url_helpers.rails_blob_url(logo_picture, only_path: true)
+    else
+      # Default image
+      "scales.png"
+    end
+  end
 end

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

@@ -8,6 +8,8 @@
         <div id="fields" class="space-y-4">
           <%= render "account/calculators/partials/color_selector", f: f %>
         </div>
+        <%= f.label :logo_picture, "Upload logo:", class: "form-label d-block" %>
+        <%= f.file_field :logo_picture, accept: "image/jpeg, image/png", class: "file-input mb-3" %>
         <%= render "account/calculators/partials/tinymce_form", f: f %>
       </fieldset>
 

app/views/account/calculators/show.html.erb

@@ -42,6 +42,8 @@
     <% end %>
   </div>
 
+  <%= render "calculators/partials/logo_picture", calculator: @calculator %>
+
   <div class="showpage-buttons">
     <%= link_to t('.edit'),
                 edit_account_calculator_path(@calculator.slug, locale: I18n.locale),

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

@@ -7,7 +7,7 @@
           <%= render "calculators/partials/show/relation_arrow", locals: {rotate_direction: "left"} %>
         <% end %>
 
-        <div>
+        <div class="justify-self-center">
         <%= image_tag result[:formula_image], class: "formula-image", alt: "icon" %>
         <%= turbo_frame_tag "calc-result-#{result[:id]}" do %>
           <%= render partial: "calculators/partials/show/calculation_result",

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

@@ -0,0 +1,5 @@
+<% if @calculator.logo_picture.attached? %>
+  <%= image_tag @calculator.logo_picture, class: "w-64 h-40 rounded shadow" %>
+<% else %>
+  <%= image_tag(@calculator.logo_placeholder) %>
+<% end %>

app/views/calculators/show.html.erb

@@ -1,10 +1,7 @@
-<%# TODO: Delete this and use user provided value %>
-<% calculator_image = "scales.png" %>
-
 <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">
+    <div class="flex-wrap d-flex justify-content-around calculator_wrap calcualtor-margin-left">
 
     <%= form_with html: { class: "simple_form_calculator"}, url: calculate_calculator_path(@calculator) do |form| %>
       <div class="flex-item flex-column">
@@ -27,7 +24,8 @@
       <%= form.submit "Calculate", class: "btn-nonito result-btn dynamic-background-color" %>
       </div>
     <% end %>
-    <%= image_tag calculator_image, class: "scales_img", alt: t(".image_alt") %>
+
+    <%= image_tag @calculator.logo_url, class: "constructor-calculator-scales", alt: t(".image_alt") %>
     </div>
   </div>
 

spec/models/calculator_spec.rb

@@ -20,8 +20,7 @@
 
 RSpec.describe Calculator, type: :model do
   let(:local_prefix_calculator) { "activerecord.errors.models.calculator.attributes" }
-
-  subject { build(:calculator) }
+  let(:calculator) { build(:calculator) }
 
   describe "validations" do
     it { is_expected.to validate_presence_of(:en_name) }
@@ -40,10 +39,17 @@
   end
 
   describe "associations" do
+    it { is_expected.to have_one_attached(:logo_picture) }
     it { is_expected.to have_many(:fields).dependent(:destroy) }
     it { is_expected.to have_many(:formulas).dependent(:destroy) }
   end
 
+  describe "logo_placeholder attribute" do
+    it "has a default value" do
+      expect(calculator.logo_placeholder).to eq("https://via.placeholder.com/428x307?text=Logo")
+    end
+  end
+
   describe "#strip_tags_and_tokenize" do
     let(:stripped_content) { Calculator.new.strip_tags_and_tokenize(content) }
 
@@ -55,4 +61,27 @@
       end
     end
   end
+
+  describe "#logo_url" do
+    context "when logo_picture is attached" do
+      before do
+        logo_image = fixture_file_upload(Rails.root.join("spec", "fixtures", "icons", "favicon-181x182.png"), "image/png")
+        calculator.logo_picture.attach(logo_image)
+
+        allow(Rails.application.routes.url_helpers).to receive(:rails_blob_url)
+          .with(calculator.logo_picture, only_path: true)
+          .and_return("/rails/active_storage/blobs/favicon-181x182.png")
+      end
+
+      it "returns the attached logo URL" do
+        expect(calculator.logo_url).to eq("/rails/active_storage/blobs/favicon-181x182.png")
+      end
+    end
+
+    context "when logo_picture is not attached" do
+      it "returns the default image path" do
+        expect(calculator.logo_url).to eq("scales.png")
+      end
+    end
+  end
 end

spec/requests/account/calculators_spec.rb

@@ -43,6 +43,17 @@
     end
   end
 
+  describe "GET #show" do
+    include_context :in_local_environment
+
+    it "renders the calculator template" do
+      get account_calculator_path(slug: calculator.slug)
+
+      expect(response).to be_successful
+      expect(response).to render_template(:show)
+    end
+  end
+
   describe "GET #new" do
     subject { get new_path }