How to implement a check box in the index page - ruby-on-rails

I have a index page that lists all the homes.I have a Boolean field called active for the homes.We want have a check box on the index page so that a user can check the homes he want to activate.How can this be done??
<div style="margin-top:25px; margin-bottom:150px;">
<div class="container">
<div class="row">
<div class="col-md-2">
<ul class="sidebar-list">
<li class="sidebar-item"><%= link_to "Homes", homes_path, class:"sidebar-link active"%></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#6dae4e;">
Homes(<%= #homes.length %>)
</div>
<div class="panel-body">
<% #homes.each do |home| %>
<div class="row">
<div class="col-md-2">
<%= image_tag home.home_photos[0].image.url if home.home_photos.length > 0 %>
</div>
<div class="col-md-2">
<h4><%= link_to home.name, home %></h4>
</div>
<div class="col-md-3 right">
<%= link_to "Edit", edit_home_path(home), class: "btn btn-green"%>
</div>
</div>
<hr/>
<% end %>
</div>
</div>
</div>
</div>
</div>

Use a check_box_tag
http://apidock.com/rails/ActionView/Helpers/FormTagHelper/check_box_tag
<%= check_box_tag 'active' %>

Related

How to iterate through a bootstrap card with rails

I'm not sure where put the start and end of my iteration
Im using bootstrap frame work and its supposed to look like this
what bootstrap looks like
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
This is what mine looks like
what mine loos like
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col mb-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>
Not sure what I'm doing wrong
Since you want each 3 boxes per-row, you can change line 3 to col-md-4, total each column is 12, so 12/4 = 3 it will automatically moving to next row
<div class="row row-cols-1 row-cols-md-3">
<% #apparels.each do |apparel| %>
<div class="col-md-4">
<div class="card h-100">
<%= image_tag apparel.picture, class: 'card-img-top', width: 300 if apparel.picture.attached?%>
<div class="card-body">
<h5 class="card-title"> <%= apparel.brand %> <%= apparel.model %></h5>
<p class="card-text">Size: <%= apparel.size %><br>$<%= apparel.price %></p>
</div>
</div>
</div>
<% end %>
</div>

How to display items (icons) dynamically only if the user introduce a number? Rails 5.2

I'm building a Real Estate app where users can add amenities like bathrooms, garage, kitchen, etc etc.
The thing is, I want that if the user introduces a number, say 1 bathroom and 1 kitchen and if he leaves in blank the other amenities, it will only display the one he filled. Im using nested attributes:
property.rb model
class Property < ApplicationRecord
belongs_to :owner
has_many :amenities
accepts_nested_attributes_for :amenities
end
amenity.rb model
class Amenity < ApplicationRecord
belongs_to :property
end
show.html.erb
<div class="section">
<div class="row">
<div class="container">
<div class="col l6">
<h5>Description</h5>
<p class="text-justify"><%= #property.description %></p>
</div>
<div class="col l6">
<h5>Amenities</h5>
<!--Nested icons-->
<% #property.amenities.each do |amenity|%>
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">gym</p>
<p class="no-margin-top-bottom"><%= amenity.gym %></p>
</div>
</div>
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">kitchen</p>
<p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
</div>
</div>
<% end %>
</div>
</div>
</div>
Property web form
<%= form_with(model: property, local: true) do |form| %>
<% if property.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(property.errors.count, "error") %> prohibited this property from being saved:</h2>
<ul>
<% property.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="section">
<div class="row">
<div class="container">
<div class="col l9">
<div class="col l5">
<div class="input-field">
<i class="material-icons-two-tone prefix">edit</i>
<label for="icon_prefix"><%= form.label :name %></label><br />
<%= form.text_field :name, class:"form-control" %>
</div>
</div>
<div class="col l6">
<div class="input-field">
<i class="material-icons-two-tone prefix">edit</i>
<label for="icon_prefix"><%= form.label :description %></label><br />
<%= form.text_area :description, class:"form-control materialize-textarea" %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone"></i>
<label for="icon_prefix"><%= form.label :price %></label>
<%= form.number_field :price, class:"form-control" %>
</div>
</div>
</div>
<div class="col l12">
<div class="section">
<h5>Amenidades</h5>
<%= form.fields_for :amenities do |amenities_form| %>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">fitness_center</i>
<label for="icon_prefix"><%= amenities_form.label :gym %></label><br>
<%= amenities_form.number_field :gym %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">kitchen</i>
<label for="icon_prefix"><%= amenities_form.label :kitchen %></label><br>
<%= amenities_form.number_field :kitchen %>
</div>
</div>
<div class="col l2">
<div class="input-field">
<i class="material-icons-two-tone prefix">garage</i>
<label for="icon_prefix"><%= amenities_form.label :garage %></label><br>
<%= amenities_form.number_field :garage %>
</div>
</div>
<% end %>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<div class="actions center-align">
<%= form.submit class:"waves-effect waves-light btn" %>
</div>
</div>
<% end %>
As you can see I have to duplicate the icons but the problem is that if the user leaves blank the number will not show but the icon will, so I just want to display the icon and the amenity number dynamically.
I will appreciate your help!! :D
In your show.html.erb you can add conditions - I have added for amenity.gym
<div class="section">
<div class="row">
<div class="container">
<div class="col l6">
<h5>Description</h5>
<p class="text-justify"><%= #property.description %></p>
</div>
<div class="col l6">
<h5>Amenities</h5>
<!--Nested icons-->
<% #property.amenities.each do |amenity|%>
<% if amenity.gym.present? %> ----> From Here
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">gym</p>
<p class="no-margin-top-bottom"><%= amenity.gym %></p>
</div>
</div>
<% end %> -- Till Here
<div class="col l2">
<div class="center-align">
<i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
<p class="no-margin-top-bottom">kitchen</p>
<p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
</div>
</div>
<% end %>
</div>
</div>
</div>

How to display items across single row

I want to display categories across a single row in my home page but they stack on top of each other instead.
<div class= "container">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-3">
<% Category.take(6).each do |category| %>
<%=link_to category.name, categories_show_path(category: category.name)%>
<% end %>
</div>
</div>
</div>
</div>
why don't you create a row and col according to your requirement, also provide more information so someone can help you solve your problem, you're trying to display 6 categories name in col-md-3, I have updated your code you can check out
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<div class='row'>
<% Category.all.take(6).each do |category| %>
<div class="col-md-2">
<%= link_to category.name, categories_show_path(category: category.name) %>
</div>
<% end %>
</div>
</div>
</div>
</div>

How to use bootstrap grid-layouts in rails loop, using different grid classes

I need to make a grid, using rails loop. It should look like this:
Usually, without rails loop, I would do it like this:
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12"></div>
<div class="col-lg-12"></div>
</div>
</div>
</div>
But I need to show in that grid my tips objects:
<% #tips.limit(3).each do |tip| %>
<%= tip.title %>
<% end %>
as an example.
So, what is the best way to do it? Thanks in advance.
EDIT:
Just did like this, but I don't know, whether it is a right decision:
<div class="row">
<div class="col-lg-6">
<div class="tip-big">
<p><%= #tips[0].title %></p>
</div>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-lg-12">
<div class="tip-medium">
<p><%= #tips[1].title %></p>
</div>
</div>
<div class="col-lg-12">
<div class="tip-medium">
<p><%= #tips[2].title %></p>
</div>
</div>
</div>
</div>
</div>

rails - undefined method `upletter' for nil:NilClass

I want to iterate that cards I create in show
Here is the code in index :
<div class="container-page">
<div class="padding-page">
<div class="container-fluid" id="start-cards">
<div class="row">
<h1 class="text-center">Let's</h1>
<ul class="list-inline text-center">
<% #hiraganas.each do |hiragana| %>
<li>
<div class="col-sm-3 col-xs-4 col-md-3 container-cards">
<div class="card-details">
<span class="card-question img-popover" data-content="<h4 class='text-center letter-uppercase'><%= #hiragana.upletter %></h4><p class='text-center'><%= #hiragana.transcription %></p>"><i class="fa fa-eye fa-lg"></i></span>
<div class="prononciation"><i class="fa fa-comment"></i></div>
<div class="audioclick">
<p><i class="fa fa-volume-off fa-lg"><%= #hiragana.audioclick %></i></p>
</div>
<div class="card-hiragana hiragana-<%=#hiragana.upletter.downcase.last%>">
<p><%= #hiragana.ideoone %></p>
</div>
<div class="card-katakana">
<p><%= #hiragana.ideotwo %></p>
</div>
</div>
</div>
</li>
<% end %>
</ul>
</div>
</div>
</div>
</div>
I have a problem : better errors tells me [![enter image description here][2]][2] undefined method with 'upletter' which is the method I use to generate letter(s) in popover.
<% #hiraganas.each do |hiragana| %>
<li>
<div class="col-sm-3 col-xs-4 col-md-3 container-cards">
<div class="card-details">
<span class="card-question img-popover" data-content="<h4 class='text-center letter-uppercase'><%= #hiragana.upletter %></h4><p class='text-center'><%= #hiragana.transcription %></p>"><i class="fa fa-eye fa-lg"></i></span>
<div class="prononciation"><i class="fa fa-comment"></i></div>
<div class="audioclick">
<p><i class="fa fa-volume-off fa-lg"><%= #hiragana.audioclick %></i></p>
</div>
Bonjour!
You need:
<%= hiragana.upletter %>
<%= hiragana.transcription %>
In your loop.
-
When using a loop, you need to use the locally scoped variable:
<% #hiraganas.each do |hiragana| %>
<%= hirgana.upletter %>
<% end %>
Any Ruby error with undefined method "..." for "NilClass" basically means you're trying to call methods on a non-declared variable.
In this case, the variable you're trying to use is #hiragana, which doesn't exist. It's local equivalent (hirgana) does.

Resources