Add form fields to set the colours and the sections for the banner

Add migrations to store the information in the database

app/assets/javascripts/banners.js.coffee

@@ -7,6 +7,14 @@ App.Banners =
     $(selector).removeClass($(selector).attr("class"), true)
       .addClass(style, true)
 
+  update_background_color: (selector, text_selector, background_color) ->
+    $(selector).css('background-color', background_color);
+    $(text_selector).val(background_color);
+
+  update_font_color: (selector, text_selector, font_color) ->
+    $(selector).css('color', font_color);
+    $(text_selector).val(font_color);
+
   initialize: ->
     $('[data-js-banner-title]').on
       change: ->
@@ -23,3 +31,12 @@ App.Banners =
     $("#banner_image").on
       change: ->
         App.Banners.update_style("#js-banner-image", $(this).val())
+
+    $("#banner_background_color_picker").on
+      change: ->
+        App.Banners.update_background_color("#js-banner-style", "#banner_background_color", $(this).val());
+
+    $("#banner_font_color_picker").on
+      change: ->
+        App.Banners.update_font_color("#js-banner-title", "#banner_font_color", $(this).val());
+        App.Banners.update_font_color("#js-banner-description", "#banner_font_color", $(this).val());

app/controllers/admin/banners_controller.rb

@@ -4,6 +4,7 @@ class Admin::BannersController < Admin::BaseController
 
   before_action :banner_styles, only: [:edit, :new, :create, :update]
   before_action :banner_imgs, only: [:edit, :new, :create, :update]
+  before_action :banner_sections, only: [:edit, :new, :create, :update]
 
   respond_to :html, :js
 
@@ -39,7 +40,8 @@ class Admin::BannersController < Admin::BaseController
 
     def banner_params
       attributes = [:title, :description, :target_url, :style, :image,
-                    :post_started_at, :post_ended_at]
+                    :post_started_at, :post_ended_at, :sections,
+                    :background_color, :font_color]
       params.require(:banner).permit(*attributes)
     end
 
@@ -55,4 +57,7 @@ class Admin::BannersController < Admin::BaseController
                      end
     end
 
+    def banner_sections
+      @banner_sections = Banner::Section.sections.map {|banner_section| [banner_section[1], banner_section[0]]} # name, value
+    end
 end

app/models/banner.rb

@@ -12,6 +12,8 @@ class Banner < ActiveRecord::Base
   validates :post_started_at, presence: true
   validates :post_ended_at, presence: true
 
+  has_many :sections
+
   scope :with_active,   -> { where("post_started_at <= ?", Time.current).where("post_ended_at >= ?", Time.current) }
 
   scope :with_inactive, -> { where("post_started_at > ? or post_ended_at < ?", Time.current, Time.current) }

app/models/banner/section.rb

@@ -0,0 +1,5 @@
+class Banner::Section < ActiveRecord::Base
+  enum sections: { homepage: 0, debates: 1, proposals: 2, budgets: 3, more_info: 4 }
+
+  belongs_to :banner
+end

app/views/admin/banners/_form.html.erb

@@ -60,16 +60,39 @@
     </div>
   </div>
 
+  <div class="row">
+    <div class="small-12 column">
+      <%= f.label :sections, t("admin.banners.banner.sections_label") %>
+      <% @banner_sections.each do |section| %>
+        <%= f.check_box :sections, {multiple: true, label: false}, section[0], nil %>
+        <%= t("admin.banners.banner.sections.#{section[1]}") %><br>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="small-6 column">
+      <%= f.label :sections, t("admin.banners.banner.background_color") %>
+      <%= color_field(:banner, :background_color, id: 'banner_background_color_picker') %>
+      <%= f.text_field :background_color, label: false %>
+    </div>
+    <div class="small-6 column">
+      <%= f.label :sections, t("admin.banners.banner.font_color") %>
+      <%= color_field(:banner, :font_color, id: 'banner_font_color_picker') %>
+      <%= f.text_field :font_color, label: false %>
+    </div>
+  </div>
+
   <div class="row">
     <div class="actions small-12 medium-3 column">
       <%= f.submit(class: "button expanded", value: t("admin.banners.edit.form.submit_button")) %>
     </div>
   </div>
-  <div id="js-banner-style" class="<%= @banner.style %>">
+  <div id="js-banner-style" class="<%= @banner.style %>" style="background-color:<%= @banner.background_color %>">
     <div id="js-banner-image" class="<%= @banner.image %>">
       <%= link_to @banner.target_url do %>
-        <h2 id="js-banner-title"><%= @banner.title %></h2>
+        <h2 id="js-banner-title" style="color:<%= @banner.font_color %>"><%= @banner.title %></h2>
-        <h3 id="js-banner-description"><%= @banner.description %></h3>
+        <h3 id="js-banner-description" style="color:<%= @banner.font_color %>"><%= @banner.description %></h3>
       <% end %>
     </div>
   </div>

app/views/admin/banners/index.html.erb

@@ -37,11 +37,11 @@
       </tr>
       <tr>
         <td colspan="3">
-          <div class="<%= banner.style %>">
+          <div class="<%= banner.style %>" style="background-color:<%= banner.background_color %>">
             <div class="<%= banner.image %>">
               <%= link_to banner.target_url do %>
-                <h2><%= banner.title %></h2>
+                <h2 style="color:<%= banner.font_color %>"><%= banner.title %></h2>
-                <h3><%= banner.description %></h3>
+                <h3 style="color:<%= banner.font_color %>"><%= banner.description %></h3>
               <% end %>
             </div>
           </div>

config/locales/en/admin.yml

@@ -33,6 +33,15 @@ en:
         image: Image
         post_started_at: Post started at
         post_ended_at: Post ended at
+        sections_label: Seccions where it will appear
+        sections:
+          homepage: Homepage
+          debates: Debates
+          proposals: Proposals
+          budgets: Participatory budgeting
+          more_info: More info page
+        background_color: Background colour
+        font_color: Font colour
       edit:
         editing: Edit banner
         form:

config/locales/es/admin.yml

@@ -33,6 +33,15 @@ es:
         image: Imagen
         post_started_at: Inicio de publicación
         post_ended_at: Fin de publicación
+        sections_label: Secciones en las que aparece
+        sections:
+          homepage: Homepage
+          debates: Debates
+          proposals: Propuestas
+          budgets: Presupuestos participativos
+          more_info: Página de más información
+        background_color: Color de fondo
+        font_color: Color del texto
       edit:
         editing: Editar el banner
         form:

db/migrate/20180109081115_add_settings_to_banners.rb

@@ -0,0 +1,6 @@
+class AddSettingsToBanners < ActiveRecord::Migration
+  def change
+    add_column :banners, :background_color, :text
+    add_column :banners, :font_color, :text
+  end
+end

db/migrate/20180109101656_create_banner_sections.rb

@@ -0,0 +1,9 @@
+class CreateBannerSections < ActiveRecord::Migration
+  def change
+    create_table :banner_sections do |t|
+      t.integer :banner_id
+      t.integer :section
+      t.timestamps null: false
+    end
+  end
+end

db/schema.rb

@@ -63,8 +63,15 @@ ActiveRecord::Schema.define(version: 20180519132610) do
   add_index "annotations", ["legacy_legislation_id"], name: "index_annotations_on_legacy_legislation_id", using: :btree
   add_index "annotations", ["user_id"], name: "index_annotations_on_user_id", using: :btree
 
+  create_table "banner_sections", force: :cascade do |t|
+    t.integer  "banner_id"
+    t.integer  "section"
+    t.datetime "created_at", null: false
+    t.datetime "updated_at", null: false
+  end
+
   create_table "banners", force: :cascade do |t|
-    t.string   "title",           limit: 80
+    t.string   "title",            limit: 80
     t.string   "description"
     t.string   "target_url"
     t.string   "style"
@@ -72,8 +79,10 @@ ActiveRecord::Schema.define(version: 20180519132610) do
     t.date     "post_started_at"
     t.date     "post_ended_at"
     t.datetime "hidden_at"
-    t.datetime "created_at",                 null: false
+    t.datetime "created_at",                  null: false
-    t.datetime "updated_at",                 null: false
+    t.datetime "updated_at",                  null: false
+    t.text     "background_color"
+    t.text     "font_color"
   end
 
   add_index "banners", ["hidden_at"], name: "index_banners_on_hidden_at", using: :btree