戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク8-8   フルカレンダー

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




yarnを使ってインストールします。


コマンド
一文です。
yarn add @fullcalendar/core@4.2.0 @fullcalendar/daygrid@4.2.0 @fullcalendar/list@4.2.0


「app\assets\stylesheets\application.scss」ファイルを編集します。


1.13行目と14行目の記述をひっくり返して次のようにします。
  *= require_self 
 *= require_tree . 



2.記述追加 app\assets\stylesheets\application.scss(29行目)
 
 @import '@fullcalendar/core/main.css'; 
 @import '@fullcalendar/daygrid/main.css'; 
 @import '@fullcalendar/list/main.css'; 



app\assets\stylesheets\application.scss
 
/* 
 * This is a manifest file that'll be compiled into application.css, which will include all the files 
 * listed below. 
 * 
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's 
 * vendor/assets/stylesheets directory can be referenced here using a relative path. 
 * 
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the 
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
 * files in this directory. Styles in this file should be added after the last require_* statement. 
 * It is generally better to create a new file per style scope. 
 * 
 *= require_self 
 *= require_tree . 
 */ 
 
 @import 'bulma'; 
 @import 'bulma-extensions'; 
 @import 'bulma-extensions/bulma-carousel/dist/css/bulma-carousel.min'; 
 @import 'noty/lib/noty'; 
 @import 'noty/lib/themes/sunset'; 
 @import 'dropzone/dist/basic.css'; 
 @import 'dropzone/dist/dropzone.css'; 
 @import 'raty-js/lib/jquery.raty'; 
 @import '@fullcalendar/core/main.css'; 
 @import '@fullcalendar/daygrid/main.css'; 
 @import '@fullcalendar/list/main.css'; 



「app\javascript\packs\application.js」ファイルを編集します。


記述追加 app\javascript\packs\application.js(16行目)
 
window.Calendar = require("@fullcalendar/core").Calendar; 
window.DayGridPlugin = require("@fullcalendar/daygrid").default; 
window.ListPlugin = require("@fullcalendar/list").default; 



app\javascript\packs\application.js
 
// This file is automatically compiled by Webpack, along with any other files 
// present in this directory. You're encouraged to place your actual application logic in 
// a relevant structure within app/javascript and only use these pack files to reference 
// that code so it'll be compiled. 

require("@rails/ujs").start() 
require("turbolinks").start() 
require("@rails/activestorage").start() 
require("channels") 
require("raty-js") 

window.Noty = require("noty") 
window.Dropzone = require("dropzone") 
window.BulmaCarousel = require("bulma-extensions/bulma-carousel/dist/js/bulma-carousel") 
window.Calendar = require("@fullcalendar/core").Calendar; 
window.DayGridPlugin = require("@fullcalendar/daygrid").default; 
window.ListPlugin = require("@fullcalendar/list").default; 

$(document).on('turbolinks:load', () => { 
    $('.toggle').on('click', (e) => { 
        e.stopPropagation(); 
        e.preventDefault(); 
        $('#' + e.target.getAttribute('aria-controls')).toggleClass('is-hidden'); 
    }) 
}) 

// Uncomment to copy all static images under ../images to the output folder and reference 
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 
// or the `imagePath` JavaScript helper below. 
// 
// const images = require.context('../images', true) 
// const imagePath = (name) => images(name, true) 

require("trix") 
require("@rails/actiontext") 



「app\controllers\pages_controller.rb」ファイルに記述を追加します。


記述追加 app\controllers\pages_controller.rb(56行目)
 
  def calendar 
    params[:start_date] ||= Date.current.to_s 
    start_date = Date.parse(params[:start_date]) 
    first_of_month = (start_date - 1.month).beginning_of_month 
    end_of_month = (start_date + 1.month).end_of_month 
    @orders = Order.where("seller_id = ? AND status = ? AND due_date BETWEEN ? AND ?", 
                          current_user.id, 
                          Order.statuses[:inprogress], 
                          first_of_month, 
                          end_of_month) 
  end 



app\controllers\pages_controller.rb
 
class PagesController < ApplicationController 

  def home 
  end 

  def search 
    @categories = Category.all 
    @category = Category.find(params[:category]) if params[:category].present? 
    @q = params[:q] 
    @min = params[:min] 
    @max = params[:max] 
    @delivery = params[:delivery].present? ? params[:delivery] : "0" 
    @sort = params[:sort].present? ? params[:sort] : "price asc" 
    query_condition = [] 
    query_condition[0] = "gigs.active = true" 
    query_condition[0] += " AND ((gigs.has_single_pricing = true AND pricings.pricing_type = 0) OR (gigs.has_single_pricing = false))" 
    if !@q.blank? 
      query_condition[0] += " AND gigs.title ILIKE ?" 
      query_condition.push "%#{@q}%" 
    end 
    if !params[:category].blank? 
      query_condition[0] += " AND category_id = ?" 
      query_condition.push params[:category] 
    end 
    if !params[:min].blank? 
      query_condition[0] += " AND pricings.price >= ?" 
      query_condition.push @min 
    end 
    if !params[:max].blank? 
      query_condition[0] += " AND pricings.price <= ?" 
      query_condition.push @max 
    end 
    if !params[:delivery].blank? && params[:delivery] != "0" 
      query_condition[0] += " AND pricings.delivery_time <= ?" 
      query_condition.push @delivery 
    end 
    @gigs = Gig 
                .select("gigs.id, gigs.title, gigs.user_id, MIN(pricings.price) AS price") 
                .joins(:pricings) 
                .where(query_condition) 
                .group("gigs.id") 
                .order(@sort) 
                .page(params[:page]) 
                .per(6) 
  end 

  def calendar 
    params[:start_date] ||= Date.current.to_s 
    start_date = Date.parse(params[:start_date]) 
    first_of_month = (start_date - 1.month).beginning_of_month 
    end_of_month = (start_date + 1.month).end_of_month 
    @orders = Order.where("seller_id = ? AND status = ? AND due_date BETWEEN ? AND ?", 
                          current_user.id, 
                          Order.statuses[:inprogress], 
                          first_of_month, 
                          end_of_month) 
  end 

end 



ルートの設定をします。


記述追加 config\routes.rb
26行目に「get '/calendar', to: 'pages#calendar'」の記述を追加します。
 
Rails.application.routes.draw do 
  # ルートを app\views\pages\home.html.erb に設定 
  root 'pages#home' 
  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, 
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} 

  get 'pages/home' 
  get '/dashboard', to: 'users#dashboard' 
  get '/users/:id', to: 'users#show', as: 'users' 
  get '/selling_orders', to: 'orders#selling_orders' 
  get '/buying_orders', to: 'orders#buying_orders' 
  get '/all_requests', to: 'requests#list' 
  get '/request_offers/:id', to: 'requests#offers', as: 'request_offers' 
  get '/my_offers', to: 'requests#my_offers' 
  get '/search', to: 'pages#search' 
  get 'settings/payment', to: 'users#payment', as: 'settings_payment' 
  get 'settings/payout', to: 'users#payout', as: 'settings_payout' 
  get '/gigs/:id/checkout/:pricing_type', to: 'gigs#checkout', as: 'checkout' 
  get '/conversations', to: 'conversations#list', as: "conversations" 
  get '/conversations/:id', to: 'conversations#show', as: "conversation_detail" 
  get '/orders/:id', to: 'orders#show', as: "order_detail" 
  get '/calendar', to: 'pages#calendar' 

  post '/users/edit', to: 'users#update' 
  post '/offers', to: 'offers#create' 
  post '/reviews', to: 'reviews#create' 
  post '/settings/payment', to: 'users#update_payment', as: "update_payment" 
  post 'messages', to: 'messages#create' 
  post '/comments', to: 'comments#create' 

  put '/orders/:id/complete', to: 'orders#complete', as: 'complete_order' 
  put '/offers/:id/accept', to: 'offers#accept', as: 'accept_offer' 
  put '/offers/:id/reject', to: 'offers#reject', as: 'reject_offer' 

  mount ActionCable.server => '/cable' 

  resources :gigs do 
    member do 
      delete :delete_photo 
      post :upload_photo 
    end 
    resources :orders, only: [:create] 
  end 

  resources :requests 

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html 
end 



「app\views\pages」フォルダに「calendar.html.erb」ファイルを新規作成して下さい。


app\views\pages\calendar.html.erb(新規作成したファイル)
 
<section class="section"> 
    <div class="container m-t-20"> 
        <div id="calendar"></div> 
    </div> 
</section> 
<script> 
    orders = <%= raw @orders.to_json %> 
    function showOrders(orders) { 
        return orders.map(function(o) { 
            let code = '#ffdd57'; 
            if (new Date(o.due_date) < new Date()) { 
                code = '#ff3860'; 
            } else if (new Date(o.due_date) > new Date(new Date().getTime() + (2*24*60*60*1000))) { 
                code = '#23d160'; 
            } 
            return { 
                id: o.id, 
                title: o.buyer_name, 
                start: o.due_date, 
                end: o.due_date, 
                backgroundColor: code 
            } 
        }) 
    } 
    var getQueryParam = function(param) { 
        var found, 
            item = window.location.search.substr(1).split("="); 
        if (param == item[0]) { 
            found = item[1] 
        } 
        return found; 
    } 
    $(function() { 
        var start_date = getQueryParam('start_date') ? new Date(getQueryParam('start_date')) : new Date() 
        var calendarEl = document.getElementById('calendar'); 
        var calendar = new Calendar(calendarEl, { 
            header: { 
                left: 'prev,next', 
                center: 'title', 
                right: 'dayGridMonth,listMonth' 
            }, 
            // ボタン文字列 
            buttonText: { 
                month:    '月', 
                list:     '申し込みリスト', 
            }, 
            locale: 'ja', 
            defaultDate: start_date, 
            plugins: [DayGridPlugin, ListPlugin], 
            events: showOrders(orders), 
            eventClick: function(info) { 
                window.location.href = "/orders/" + info.event.id 
            }, 
            defaultView: 'dayGridMonth' 
        }); 
        calendar.render(); 
        $('.fc-prev-button').on('click', function() { 
            window.location.search = 'start_date=' + calendar.state.currentDate.toISOString().split("T")[0] 
        }); 
        $('.fc-next-button').on('click', function() { 
            window.location.search = 'start_date=' + calendar.state.currentDate.toISOString().split("T")[0] 
        }); 
    }) 
</script> 



ナビゲーションバーにリンクを追加します。


記述追加 app\views\shared\_navbar.html.erb
90行目に「<%= link_to 'カレンダー', calendar_path, class: "navbar-item" %>」の記述を追加しています。
 
<nav class="navbar is-danger" role="navigation" aria-label="main navigation"> 
    <div class="navbar-brand"> 
        <a class="navbar-item" href="/"> 
            <h1>テストサイトOshigoto</h1> 
        </a> 
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
            <span aria-hidden="true"></span> 
        </a> 
    </div> 
    <div id="navbarBasicExample" class="navbar-menu"> 
        <div class="navbar-start"> 
            <div class="navbar-item"> 
                <%= form_tag search_path, method: :get do %> 
                    <div class="field has-addons <%= 'is-hidden' if current_page?(root_path) %>"> 
                        <div class="control has-icons-left"> 
                            <span class="icon is-small is-left"> 
                                <i class="fa fa-search"></i> 
                            </span> 
                            <%= text_field_tag 'q', '', class: "input", placeholder: "どんなお仕事を?" %> 
                        </div> 
                        <div class="control"> 
                            <button class="button is-success" type="submit">検索</button> 
                        </div> 
                    </div> 
                <% end %> 
            </div> 
        </div> 
        <div class="navbar-end"> 
            <a class="navbar-item"></a> 
            <a class="navbar-item"></a> 
            <!-- もしログインしていなかったら--> 
            <% if (!user_signed_in?) %> 
                <div class="navbar-item"> 
                    <div class="buttons"> 
                        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "button is-primary" %> 
                        <%= link_to  "ログイン", new_user_session_path, class: "button is-light" %> 
                    </div> 
                </div> 
            <!-- ログインしていたら --> 
            <% else %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                     <a class="navbar-link"> 
                        <figure class="image is-48x48 m-r-5 avatar <%= current_user.status ? "online" : "offline" %>"> 
                            <div style="margin-top: 0.6rem;"> 
                                <%= image_tag avatar_url(current_user), class: "is-rounded" %> 
                            </div> 
                        </figure> 
                        <%= current_user.full_name %> 
                    </a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                        <%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> 
                        <hr class="navbar-divider"> 
                        <%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> 
                    </div> 
                </div> 
            <% end %> 
        </div> 
    </div> 
</nav> 
<% if (user_signed_in?) && !current_page?(root_path) && !current_page?(search_path) && !current_page?("/gigs/#{params[:id]}") && !current_page?("/users/#{params[:id]}") %> 
    <nav class="navbar has-shadow" style="z-index: 5;"> 
        <div class="container"> 
            <div class="navbar"> 
                <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> 
                <%= link_to 'メッセージの確認', conversations_path, class: "navbar-item", data: { turbolinks: false} %> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を売る人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to 'お仕事を登録する', new_gig_path, class: "navbar-item" %> 
                        <%= link_to '売れた注文の確認', selling_orders_path, class: "navbar-item" %> 
                         <%= link_to 'リクエストを見る', all_requests_path, class: "navbar-item" %> 
                         <%= link_to '申込みの確認', my_offers_path, class: "navbar-item" %> 
                         <%= link_to '振込口座の登録', settings_payout_path, class: "navbar-item" %> 
                         <%= link_to 'カレンダー', calendar_path, class: "navbar-item" %> 
                    </div> 
                </div> 
                <div class="navbar-item has-dropdown is-hoverable"> 
                    <a class="navbar-link">お仕事を買う人</a> 
                    <div class="navbar-dropdown"> 
                        <%= link_to '買った注文の確認', buying_orders_path, class: "navbar-item" %> 
                        <%= link_to 'お仕事をリクエストする', new_request_path, class: "navbar-item" %> 
                        <%= link_to 'リクエストの確認', requests_path, class: "navbar-item" %> 
                        <%= link_to 'クレジットカード登録', settings_payment_path, class: "navbar-item", data: { turbolinks: false} %> 
                    </div> 
                </div> 
            </div> 
        </div> 
    </nav> 
<% end %> 
<script> 
$(document).ready(function() { 
  // navbar burgerアイコンでクリックイベントを確認する 
  $(".navbar-burger").click(function() { 
      // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える 
      $(".navbar-burger").toggleClass("is-active"); 
      $(".navbar-menu").toggleClass("is-active"); 
  }); 
}); 
</script> 



この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146