[Rails] Introduce a simple calendar and insert a "confirmation screen" in additional events

Introduction

Introduced a calendar to the reservation management application under personal development. We also implemented a screen to check once when adding an event.

Click here for how to make a simple calendar and how to make a "confirmation screen". Please refer to it.

[Rails] I tried to make a mini app of Simple Calendar with customized specifications. https://qiita.com/AKI3/items/109d54a35c98328d9155

[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8

table of contents

1. Introduction of simple calendar (creation of CRUD and MVC)
2. Event addition screen
3. Confirmation screen
4. Save and view
5. Reflect the reservation details on the calendar

Development environment

ruby 2.6.5 rails 6.0.0 simple_calendar 2.0

Implementation

Let's implement it ~

1. Introduction of simple calendar (creation of CRUD and MVC)

Terminal.

gem 'simple_calendar', '~> 2.0'

Terminal.

bundle install

Terminal.

rails g controller events index new create show edit update destroy

All CRUD actions are automatically described in the controller, and the view is also automatically generated.

It was automatically generated.

config/routes.rb

Rails.application.routes.draw do
  get 'events/index'
  get 'events/new'
  get 'events/create'
  get 'events/show'
  get 'events/edit'
  get 'events/update'
  get 'events/destroy'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

app/contorollers/events_controller.rb

class EventsController < ApplicationController
  def index
  end

  def new
  end

  def create
  end

  def show
  end

  def edit
  end

  def update
  end

  def destroy
  end
end

Start the server for the time being and check it.

Terminal.

rails s

http://localhost:3000/events/index

Create a model

Terminal.

rails g model event

Edit migration file

2020XXXXXXX_create_events.rb

class CreateEvents < ActiveRecord::Migration[6.0]
  def change
    create_table :events do |t|
      t.string  :plan
      t.integer :number
      t.string  :option
      t.date    :plan_day
      t.string  :name
      t.string  :tel
      t.integer :price

      t.timestamps
    end
  end
end

Terminal.

rails db:migrate

You now have an events table.

Routing settings

config/routes.rb

  root to: 'events#index'
  resources :events

Edit contour trailer and view

app/contorollers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end

#abridgement

html:app/views/users/index.html.erb

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
<% end %>

Check once if the calendar is displayed.

http://localhost:3000/

Finally, adjust the appearance.

Terminal.

rails g simple_calendar:views

app/assets/stylesheets/application.css

#abridgement
 *= require simple_calendar #← Addendum
 *= require_tree .
 *= require_self

The basic calendar screen creation is complete.

2. Event addition screen

Create an application form (event addition form).

Controller editing

app/contorollers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end

  def new
    @event = Event.new
  end

#abridgement

View edit

html:app/views/users/new.html.erb

<h1>Application form</h1>

<%= form_with(model: @event, url:confirm_events_path, local: true) do |form| %>

  <div class="plan">
    <%= form.label :course%>
    <%= form.text_field :plan %>
  </div>

  <div class="number">
    <%= form.label :The number of participants%>
    <%= form.text_field :number %>
  </div>

    <div class="plan_day">
    <%= form.label :Desired date%>
    <%= form.date_select :start_time %>
  </div>

  <div class="name">
    <%= form.label :Representative's name%>
    <%= form.text_field :name %>
  </div>

  <div class="tel">
    <%= form.label :phone number%>
    <%= form.text_field :tel %>
  </div>

  <div class="submit">
    <%= form.submit "To confirmation screen", class:"#" %>
  </div>

<% end %>

The application form (event addition form) has been created.

3. Confirmation screen

Details are explained here, so if you are interested, please refer to it.

[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8

Routing settings

config/routes.rb

Rails.application.routes.draw do
  root to: 'events#index'
  resources :events do
    collection do
      post :confirm
    end
  end
end

Controller editing

app/contorollers/events_controller.rb

class EventsController < ApplicationController
  def index
    @events = Event.all
  end

  def new
    @event = Event.new
  end

  def confirm
    @event = Event.new(event_params)
    render :new if @event.invalid?
  end

#abridgement

View edit

html:app/views/users/confirm.html.erb

<h1>confirmation screen</h1>

  <div class="#">
    <p>course: <%= @event.plan.name %></p>
  </div>
  <div class="#">
    <p>The number of participants: <%= @event.num.name %></p>
  </div>
  <div class="#">
    <p>Desired date: <%= @event.start_time %></p>
  </div>
  <div class="#">
    <p>Representative's name: <%= @event.name %></p>
  </div>
  <div class="#">
    <p>phone number: <%= @event.tel %></p>
  </div>
  <div class="#">
    <p>Fee: <%= @event.price %></p>
  </div>


<%= form_with(model: @event, id: 'charge-form', local: true) do |f| %>
  <%= f.hidden_field :plan_id %>
  <%= f.hidden_field :num_id %>
  <%= f.hidden_field :start_time %>
  <%= f.hidden_field :name %>
  <%= f.hidden_field :tel %>
  <%= f.hidden_field :price %>

  <%= f.submit "make a reservation" %>
  <%= f.submit "Return", name: :back %>
<% end %>

Confirmation screen creation is complete.

4. Save and view

After saving, the reservation details will be displayed.

Controller postscript

app/contorollers/events_controller.rb

#abridgement
  def create
    @event = Event.new(event_params)
     if params[:back]
       render :new
     else @event.save!
       redirect_to @event
     end
  end

  def show
    @event = Event.find_by(id: params[:id])
  end

#abridgement

  private
  
  def event_params
    params.require(:event).permit(:plan_id, :num_id, :start_time, :name, :tel, :price)
  end

View edit

html:app/views/users/show.html.erb

<h1>Your reservation is complete.</h1>

<p>course: <%= @event.plan.name %></p>
<p>The number of participants: <%= @event.number %></p>
<p>Desired date: <%= @event.start_time %></p>
<p>Representative's name: <%= @event.name %></p>
<p>phone number: <%= @event.tel %></p>
<p>Fee: <%= @event.price %></p>

<%= link_to "Return to calendar page" root_path  %>

Saving / display implementation is complete.

5. Reflect the reservation details on the calendar

Finally, the saved contents are displayed on the calendar.

Add to view

html:app/views/users/index.html.erb

<%= month_calendar events: @events do |date, events| %>
  <%= date.day %>
  
#Addition from here
  <ul class="event-list">
    <% events.each do |event| %>
    <li class="list">
      <%= link_to edit_event_path(event.id) do %>
        <%= event.plan %>
        <%= event.name %>
      <% end %>
    </li>
  </ul>
      
  <% end %>
<% end %>

The added event is now reflected in the calendar.

done! !!

Summary

The above is to insert the confirmation screen in the additional event of the simple calendar (Simple calendar).

We will also implement a payment function, so if you are interested, please refer to it. [JavaScript] Implemented a function to display prices asynchronously and settle Will be posted at a later date

Finally

I am a beginner in programming, but I am posting an article in the hope that it will help people who are similarly troubled. See you next time ~

reference

・ Simple Calendar Official https://github.com/excid3/simple_calendar/blob/master/README.md

[Rails] I tried to make a mini app of Simple Calendar with customized specifications. https://qiita.com/AKI3/items/109d54a35c98328d9155

[Rails] "Input"-> "Confirmation screen"-> "Save"-> "View" https://qiita.com/AKI3/items/cbdd77d604fe6aeb47d8