Is there a way that I can insert HTML tags with embedded Ruby?
I'm trying to loop over items in my database and need to put them in a bootstrap grid.
<% #div = "</div> <div class='row'> <div class='col-md-3'>" %>
<% #end = "</div>" %>
<div class="row">
<% #branches.each_with_index do |b, index| %>
<div class="col-md-3">
<div class="cardje transition">
<h2 class="transition"><%= b.description %></p>
<div class="cta-container transition">Import branch</div>
<div class="cardje_circle transition"></div>
</div>
</div>
<% if index+1%4 == 0 %>
<%= #div.html_safe %>
<% end %>
<% if index+1 == #branches.count %>
<% #end.html_safe %>
<% end %>
<% end %>
There must be a simpler way but I need this page to be done by tomorrow morning and I've been working way too long.
When I check the source code it's running only the loop and never implementing anything (so everything is on one row and overlapping).
Related
i'm doing a web app to manage my money with node Js.
Here is what it's look like :
I've done almost everything, but I still have one part to do, which is to display my last 30 transactions.
I can't display my transactions as I want. It is necessary that if the date of the current transaction is different from the transaction just before then it displays the date and the transaction otherwise just the transaction. I block at the condition level if the date is different
At first I tried to display the first transaction with the date and then use (for) or (for in) to display the others with the condition but i can't use the i variable in my array of objects.
like this :
<%= transaction30[0].DateT%>
<%= transaction30[0].Name%>
<%= transaction30[0].Montant%>
<% for var i in transactions30 %> or <% for var i=1; i<= transactions30.length;i++%> {
<% if(transactions30[i].DateT != transactions30[i-1].DateT) %>
then display date and infos
<% }else{ %>
juste display infos
<% } %>
Then I read somewhere that you shouldn't use (for) for arrays of objects. So I tried a forEach.
Here is my code :
<h1>
<%= transactions30[0].DateT %>
</h1>
<% let status=transactions30[0].DateT %>
<% transactions30.forEach(function(item){ %>
<% console.log(item.DateT," et ",status) %>
<% if(item.DateT!=status) {%>
<h1>
<%= item.DateT %>
</h1>
<div class=" activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% status=item.DateT %>
<% }else{ %>
<div class="activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% } %>
<% }); %>
The 'prevdate' variable is updating well, but it always display date of all transactions. The (if) condition work but only for the first transaction because i dont get the date of the first transaction two times ( i display the first date at start, out of the forEach condition)
Here is the array for better comprehension : array named transactions30
Can someone help me please ?
If found the solution. Instead of (if date != previsousdate) i had to do
if(date < previousdate || date > previousdate)
and now it's work
<h1>
<%= transactions30[0].DateT %>
</h1>
<% let status=transactions30[0].DateT %>
<% transactions30.forEach(function(item){ %>
<% console.log(item.DateT," et ",status) %>
<% if(item.DateT>status || item.DateT < status) {%>
<h1>
<%= item.DateT %>
</h1>
<div class=" activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% status=item.DateT %>
<% }else{ %>
<div class="activite">
<div class="transaction-image"></div>
<div class="transaction-info-container">
<p class="transaction-nom">
<%= item.Nom %>
</p>
<p class="transaction-categorie">
<%= item.Categorie %>
</p>
</div>
<p class="transaction-montant">
<%= item.Montant %>
</p>
</div>
<% } %>
<% }); %>
I have a rails blog that I am trying to display my posts in 3 different columns on. When using in_groups_of I am able to make the logic work by replacing #posts with a sample array like [0,1,2,3,4,5,6] and it will display the numbers in three items per row, but when I use my posts (which contain images - I don't know if that matters), it displays them one per row. Any ideas for how to solve this?
<div class='posts'>
<% #posts.in_groups_of(3, false).each do |group| %>
<div class="row">
<div class="three columns">
<% group.each do |post| %>
<div class='titleTxt'>
<%= link_to post.title, post_path(post.id) if post %>
</div>
<div class='bodyTxt'>
<%= raw post.body if post %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
I have a view where I make 2 loops to output the information. One as a menu and another as data:
<div class="base-form side-menu">
<ul class="food-groups">
<% #food_categories.each do |category| %>
<li class="<%= "#{Food::CATEGORIES[category]}"%>" data-content=".<%= "#{Food::CATEGORIES[category]}-content"%>"> <%="#{category}"%> </li>
<% end %>
</ul>
</div>
<div class="base-form main-form">
<% #food_categories.each do |cat| %>
<%= "#{Food::CATEGORIES[cat]}-content" %>
<div class="<%= "#{Food::CATEGORIES[cat]}-content"%>">
<% #foods.where(category: "#{Food::CATEGORIES[cat]}").find_each do |food| %>
<p>
<%= "Name: #{food.name}, portion: #{food.portion}, calories: #{food.calories}" %>
</p>
<% end %>
</div>
<% end %>
</div>
First loop works fine, each element gets its class correctly. Second loop(with |cat|) works, but the div's don't get any classes assigned. I even copied the class="<%=...%>" to the 't' from the first loop and it still doesn't work! Although just putting the string on the page that I'm also passing as a class works fine. I don't get it!
I am writing a basic Rails application to keep track of homework (Basically just a database interface). I am using the grid system from the Materialize CSS framework (the same as Bootstrap, 12 columns). When I collect records from the database (pieces of homework) I want to display them so that it will try to split each row into 3 divs of 4 columns, if there are only two records on the last row then it should split them into two divs of 6 columns and if there is only one record on the last row then it should show it as one div of 12 columns.
Here is my attempt:
<% count = 1 %>
<% #homeworks.each do |homework| %>
<% if #homeworks.length - count > 0 then %>
<div class="col s12 m4">
<% count = count + 1 %>
<% elsif #homeworks.length - count == 1 then %>
<div class="col s12 m6">
<% else %>
<div class="col s12 m12">
<% end %>
<a href="<%= homework_path(homework) %>">
<div class="card-panel hoverable">
<center><h5 class="cutoff"><%= homework.title %></h5></center><br>
<%= truncate(homework.content, :length => 17, :separator => ' ') %>
</div>
</a>
</div>
<% end %>
This worked fine for 5 records:
However, with 6 records I get this result:
Can anybody point me in the right direction? Thank you.
I don't entirely understand your logic with the count variable, but that's not how I'd approach the problem regardless - there's a much simpler and cleaner way: Use Enumberable#each_slice.
Your code will look something along the lines of:
<% #homeworks.each_slice(3) do |homeworks_row| %>
<% if homeworks_row.length == 3 %>
<% width_class = "m4" %>
<% elsif homeworks_row.length == 2 %>
<% width_class = "m6" %>
<% else %>
<% width_class = "m12" %>
<% end %>
<% homeworks_row.each do |homework| %>
<div class="col s12 <%= width_class %>">
<a href="<%= homework_path(homework) %>">
<div class="card-panel hoverable">
<center><h5 class="cutoff"><%= homework.title %></h5></center><br>
<%= truncate(homework.content, :length => 17, :separator => ' ') %>
</div>
</a>
</div>
<% end %>
<% end %>
Each homeworks_row will contain either 1, 2 or 3 homeworks - meaning you can simply choose the column width, based on the length of the row.
You may also want to improve this code by wrapping that if statement into a helper method, i.e. your template will include the line:
<div class="col s12 <%= width_class(homework_row.length) %>">
...but I'll leave this here as one block of code for simplicity.
I am building a panel with a partial, but I'd like to customise the inside of the panel with some html. Is there any way to write some HTML for a hash value?
I have a custom partial _panel_builder.html.erb that I takes as argument pclass, heading, body, etc., that I would like to use like this :
(The below syntax is bad, but I don't really understand how I could do something nice..)
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
# For the body param, I'd like to be able to use some HTML with occasional <%=...%> for variables, like :
body: (%>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<%).html_safe,
collapsable: true %>
<% end %>
EDIT : An idea of what my _panel_builder partial looks like :
<%
collapsable ||= false
pclass ||= "default"
footer ||= false
%>
<div class="panel panel-<%= pclass %> <%= if collapsable then "panel-collapsable " end %>">
<div class="panel-heading">
<%= heading %>
<% if collapsable %>
<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<% end %>
</div>
<div class="panel-body <%= if collapsable then "collapse" end %>">
<%= body %>
</div>
<% if footer %>
<div class="panel-footer <%= if collapsable then "collapse" end %>">
<%= footer %>
</div>
<% end %>
</div>
Okay so I was actually looking for the capture helper :
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
body: capture do %>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<% end %>,
collapsible: true %>
<% end %>
Note : in some cases, I also want to pass a complex HTML block as the header of footer, so I can't just have a helper that takes a block.
Note2 : My panel is a HTML template made for generic data. I cannot pass it a Ruby object