Ruby on Rails и Bootstrap. Часть 3. Bootstrap и выполнение задач.

Ruby on Rails и Bootstrap, что это такое и как их подружить вы узнаете из этой статьи. Bootstrap — это HTML, CSS, JS фреймворк, который очень ускоряет разработку сайтов. Очень часто применяется различными студиями и отдельными верстальщиками, для создания адаптивных сайтов. Адаптивные сайты всегда правильно отображаются на различных устройствах с разным разрешением экрана. Этот фреймворк экономит очень много времени, так как нам не нужно писать стили для всех блоков на странице, это уже сделано в bootstrap’e, нам остается только добавлять классы нашим элементам. Сегодня я расскажу вам, как подключить Bootstrap к Ruby on Rails и еще мы сегодня добавим функцию подтверждения выполнения задач.

Первым делом, зайдем в папку нашего проекта Ruby on Rails и откроем файл гемов: Gemfile. Добавляем в этот файл 2 строчки:

gem 'bootstrap-sass'
gem 'sass-rails'

Обратите внимание на sass-rails, он уже может присутствовать в списке, поэтому, добавляйте только bootstrap-sass.

Теперь в файл app/assets/stylesheets/application.scss, в конец файла добавим 2 строчки:

@import "bootstrap-sprockets";
@import "bootstrap";

Сохраняем и перезапускаем сервер. Все, теперь Bootstrap подключен. Верстать мы в этом уроке не будем, в этой статье мы добавим функцию выполнения задач.

Как мы помним, у нас есть специальное поле с именем status, в котором мы храним булевое значение(true / false), которое указывает нам, выполнена задача или нет.

Для обновления одного свойства мы создадим новый метод в файле tasks_controller.rb:

def done
    @task = Task.find(params[:id])
    
    if(@task)
        @task.status = "true";

        redirect_to root_path if @task.save
    else
        redirect_to root_path
    end
end

Логика работы этого метода очень проста. Метод передаются данные об идентификаторе записи, модель ищет запись в базе, если запись найдена, обновляем поле status и возвращаемся на главную страницу.

В самом начале мы не будем выводить красивые сообщения на страницу, пока обойдемся без них. В будущем мы это исправим и стилизируем все, в итоге получим отличные сообщения при каждом нашем действии, а сейчас продолжим. Теперь в этот метод нужно каким-то образом передать данные. Добавим строчку в файл routes.rb:

patch '/done/:id', to: 'tasks#done', as: :done_task

Используем метод PATCH для передачи значений. Теперь у нас в таблице маршрутов будет новый маршрут с именем done_task и к нему мы будем обращаться.

Все почти готово, осталось только сделать ссылку или кнопку, с помощью который мы будем передавать данные в метод. Я выложу сразу код всего блока отображения задач.

<% @tasks.each do |t| %>
	<div class="row">
		<div class="panel panel-success">
		  <div class="panel-body">
			<div class="col-md-8">
				<b><%= t.title %></b><br>
				<p><%= t.text %></p>
				<% if t.status %>
					<p class="text-success">
						<strong>Задание выполнено.</strong>
					</p>
				<% end %>
			</div>
			<div class="col-md-4">
				<p class="text-right">
					<% unless t.status %>
						<%= link_to done_task_path(t.id), method: :patch  do %>
							<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
						<% end %>
					<% end %>
					<%= link_to edit_task_path(t) do %>
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
					<% end %>
					<%= link_to task_path(t), method: :delete, data: { confirm: 'Вы уверены?' } do %>
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
					<% end %>
				</p>
			</div>
		  </div>
		</div>
	</div>
<% end %>

В данном блоке кода мы имеем метод link_to который отправляет данные по нашему маршруту done_task методом patch. Используем условные операторы if / unless для отображения ссылки и сообщения о выполнении

Все довольно просто, задание выполнено — вывели сообщение, что оно выполнено. Задание не выполнено — ссылку.

Как видим, все довольно просто и не сложно. Думаю, вам будет легко разобраться. Если у вас возникнут вопросы или замечания, пожалуйста пишите комментарии.

Также не забываем, что файлы проекта есть на GitHub.