Wednesday, October 02, 2013

Generowanie tabelki lub Kalendarza w RoR

środa, październik 02, 2013 Dodany przez Miłosz Osiński #RUBY ON RAILS ##
Tym razem wyjaśnie działanie gemu "watu_table_builder" który ułatwi nam tworzenie kalendarza z artykułami

Załóżmy że mamy listę artykułów i chcemy utworzyć kalendarz z zaznaczonymi dniami kiedy powstał dany artykuł kiedy klikniemy zostaniemy przeierowani prosto do artykułu

Na początek do Gemfile dodajemy:
gem "watu_table_builder", :require => "table_builder"

Aktualizujemy:
bundle install

Później w kontrollerze w którym chcemy wyświetlać kalendarz
#app/controllers/articles_controller.rb
@articles = Article.all
@date = params[:month] ? Date.parse(params[:month].gsub('-', '/')) : Date.today

Następnie w widoku wystarczy dopisać następującą rzecz:
<div id="calendar">
    <h2 id="month">
        <%= link_to "<", :month => (@date.beginning_of_month-1).strftime("%Y-%m") %>
        <%=I18n.l @date , :format => "%B %Y" %>
        <%= link_to ">", :month => (@date.end_of_month+1).strftime("%Y-%m") %>
    </h2>
<%= calendar_for @articles,:first_day_of_week => 1, :year => @date.year, :month => @date.month do |t| %>
    <%= t.head('Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd') %>
        <%= t.day(:day_method => :created_at) do |date, article| %>
             <% licznik = 0 %>

             <% for article in @articles %>
                <% if (date.to_s == article.created_at.to_s) %>
                   <% licznik += 1 %>
                   <% if licznik == 1 %>
                    <div class="dropdown calendar_pelne">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><%= date.day %></a>
                   <% end %>
                <% end %>
            <% end %>

            <% if licznik == 0 %>
                <div class="calendar_puste">
                <%= date.day %>
            <% end %>

            <ul class="dropdown-menu">
                <% for article in @articles %>
                     <% if (date.to_s == article.created_at.to_s) %>
                        <li><%= link_to h(article.tytul), article, :title => article.tytul %></li>
                     <% end %>
                <% end %>
            </ul>
           </div>
        <% end %>
<% end %>
</div>
Ten przykład wykorzystuje bootstrap dropdown-menu wymagane są następujące pliki w folderze app/assets/javascripts/


teraz trzeba dodać trochę wyglądu naszego kalendarza o to css:
#calendar table {
    border-collapse: collapse;
    width: 90%;
    margin-left:15px;
    margin-bottom:15px;
    border: 1px solid rgb(14, 16, 19);
    border-collapse: collapse;
    border-radius: 4px 4px 3px 3px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

#calendar th {
    border-left: 0px none!important;
    line-height: 8px;
    font-size: 10px;
    color: rgb(105, 105, 105);
    text-transform: uppercase;
    background: none repeat scroll 0% 0% rgb(243, 243, 243);
    text-align: center;
    width: 14.2857142857143%;
    padding: 6px;
    font-family: "Lucida Grande",arial,helvetica,sans-serif;
}

#calendar td {
    font-family: "Lucida Grande",arial,helvetica,sans-serif;
    color: #777;
    height: 20px;
    vertical-align: top;
    font-size: 16px;
    font-weight:bold;
    text-shadow: 0px 1px rgba(255, 255, 255, 0.8);
    text-align: center;
    background-image: linear-gradient(to bottom, rgb(234, 234, 234), rgb(229, 229, 229) 60%, rgb(217, 217, 217));
    background-color: rgb(229, 229, 229);
    border: 1px solid #999;
    padding:0px;
}

#calendar .notmonth {
    color: #CCC;
    background: none repeat scroll 0% 0% rgb(243, 243, 243);
}

#calendar #month {
    display: block;
    line-height: 32px;
    font-weight: bold;
    font-size:15px;
    width: 90%;
    margin-left: 15px;
    margin-bottom:-2px;
    color: rgb(226, 226, 226);
    text-align: center;
    text-shadow: 0px -1px black;
    background: none repeat scroll 0% 0% rgba(10, 15, 15, 0.35);
    border-top: 1px solid rgb(51, 51, 51);
    border-bottom: 1px solid rgb(49, 49, 49);
    box-shadow: 0px 1px rgba(255, 255, 255, 0.04) inset;
}

#calendar #month a, #calendar #month a:hover {
    text-decoration: none;
    padding: 0 10px;
    color: #999;
}

#calendar .today {
    margin: -1px;
    color: rgb(243, 243, 243);
    text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
    background: none repeat scroll 0% 0% rgb(109, 175, 191);
    border: 1px solid rgb(89, 139, 148);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05) inset;
}

#calendar .future > .calendar_pelne {
    background-image: linear-gradient(to bottom, rgb(98, 196, 98), rgb(81, 163, 81))!important;
}

#calendar ul {
    margin: 0;
    margin-top: 5px;
    padding: 0;
    list-style: none;
}

#calendar li {
    margin: 0;
    padding: 0;
    font-size: 11px;
    text-align: center;        
}

#calendar li > a {
    color:black!important;
    margin-left:0;
    margin-right:0px;
}

#calendar li > a:hover {
    color:white!important;
    margin-left:0;
    margin-right:0px;
}

.calendar_puste {
    padding: 6px;
}

.calendar_pelne {
    padding: 6px;
    background: linear-gradient(to bottom, rgb(229, 102, 102) 0%, rgb(215, 93, 93) 100%) repeat scroll 0% 0% transparent;
    background-color: rgb(215, 93, 93);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.125) inset;
}

.calendar_pelne a {
    color: rgb(243, 243, 243)!important;
    text-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}