あと○日とカウントダウンを表示したいです。(gemを使用せず）

詳細

新規投稿画面から達成日を選択して、達成日まであと〇日。と投稿一覧画面に表示させたいです。

環境

Windows10
cloud9
rails6.1.5
ruby2.6.3

やった事

https://qiita.com/satopin/items/04157574e976517c5d9b
こちらの記事を参考に実装しました。
フォーム画面は表示出来たものの、データを入れて投稿ボタンを押すと一覧画面に遷移せずフォーム画面に留まったままになります。

こちらの記事は時間まで表示していますが、年、月のみフォーム画面から入力して「あと〇日」と日付だけ表示させたいです。

実装コード

ER図
イメージ説明
新規投稿フォーム画面

schema.rb

 create_table "dream_lists", force: :cascade do |t|
    t.string "dream", null: false
    t.string "period", null: false
    t.text "detail"
    t.string "category", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "user_id"
    t.datetime "countdown"
  end

routes.rb

Rails.application.routes.draw do
  get '/login' => 'sessions#new'
  post '/login' => 'sessions#create'
  delete '/logout' => 'sessions#destroy'
  resources :users
  root to: 'homes#top'
  resources :dream_lists
  resources :plans
  get '/search_dream_list' => 'dream_lists#search_dream_list' # カテゴリー検索
end

dream_lists_controller.rb

class DreamListsController < ApplicationController
  def new
    @dream_list = DreamList.new
  end

  def create
    @dream_list = current_user.dream_lists.new(dream_list_params)
    if @dream_list.save
      redirect_to dream_lists_path
      flash[:notice] = "１つ夢が追加されました。"
    else
      render :new
    end
  end

  def index
    @dream_lists = current_user.dream_lists
  end

  def show
    @dream_list = current_user.dream_lists.find(params[:id])
  end

<!--edit,upsate,destroy省略-->

  private

  def dream_list_params
    params.require(:dream_list).permit(:dream, :period, :detail, :image, :category, :countdown)
  end
end

new.html.erb

<div class="container mt-4 mb-4">
    <div class="card mx-auto col-lg-8 shadow p-3 bg-white">
      <h2>New Dream</h2>
        <%= form_with model: @dream_list,local: true do |form| %>
          <div class="ml-3 mt-3">
            <%= render "dream_lists/form", form: form %>
            <div class="mt-3 text-center">
              <%= form.submit "投稿", class: "btn btn-sm btn-secondary" %>
            </div>
          </div>
        <% end %>
    </div>
  </div>

パーシャルファイル
dream_lists/_form.html.erb

<!--省略-->
<div class="row mt-3">
  <div class="col-md-4">
    <%= form.label :countdown , "達成日 :", class: "form_label" %>
  </div>
  <div class="col-md-4">
    <%= form.hidden_field :countdown, :id => "countdown.id" %>
      <input type="text" id="userYear" >年
      <input type="text" id="userMonth">月
      <input type="text" id="userDate" >日
  </div>
<!--省略-->
</div>

表示場所コード
dream_lists/index.html.erb

<div class="container mt-4 mb-4">
  <div class="text-right">
    <%= link_to "+dream", new_dream_list_path, class: "btn btn-secondary btn-sm" %>
  </div>
  <h2>Many Dreams</h2>
    <div class="row">
      <div class="col-md-9">
        <table class="table table-striped text-white">
          <!--省略-->
          <tbody>
            <% @dream_lists.each do |dream_list| %>
            <tr>
              <td><%= check_box_tag '', '' %></td>
              <td><%= link_to dream_list.dream, dream_list_path(dream_list.id) %></td>
              <td>
                <p id="CountDownTime" ></p>
                <script>
                function showCountdown() {
                 // 現在日時を数値に変換
                 var nowDate = new Date();
                 var dnumNow = nowDate.getTime();

                 // 指定日時を数値に変換
                 var inputYear = document.getElementById("userYear").value;
                 var inputMonth = document.getElementById("userMonth").value - 1;
                 var inputDate = document.getElementById("userDate").value;
                 var dnumTarget = targetDate.getTime();

                 // 引き算して残日数を計算
                 var diffMSec = dnumTarget - dnumNow;
                 var diffDays = diffMSec / ( 1000 * 60 * 60 * 24 );
                 var showDays = Math.ceil( diffDays ); // 小数点以下を切り上げる

                 // 表示
                 var Msg;
                 if( showDays >= 0 ) {
                    Msg = "あと " + showDays + "日";
                 }
                 else {
                    Msg = "達成日は " + (showDays * -1) + "日前に過ぎました。";
                 }

                 document.getElementById("CountDownTime").innerHTML = Msg;
                 document.getElementById("countdown.id").value = targetDate;
                }
                </script>
              </td>
              <td>
          <!--省略-->
</div>

変更後のcord

schema.rb

  create_table "dream_lists", force: :cascade do |t|
    t.string "dream", null: false
    t.date "period", null: false  　←こちらをdata型periodに変更しました。
    t.text "detail"
    t.string "category", null: false
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.integer "user_id"
  end

dream_lists_controller

class DreamListsController < ApplicationController
  require 'date'

  def new
    @dream_list = DreamList.new
  end

  def create
    @dream_list = current_user.dream_lists.new(dream_list_params)
    if @dream_list.save
        @dream_list.update(period: period_get)
      redirect_to dream_lists_path
      flash[:notice] = "１つ夢が追加されました。"
    else
      render :new
    end
  end

  def index
    @dream_lists = current_user.dream_lists.page(params[:page])
  end

  def show
    @dream_list = current_user.dream_lists.find(params[:id])
  end

  def edit
    @dream_list = current_user.dream_lists.find(params[:id])
  end

  def update
    @dream_list = current_user.dream_lists.find(params[:id])
    if @dream_list.update(dream_list_params)
      redirect_to dream_list_path(@dream_list.id)
      flash[:notice] = "更新に成功しました。"
    else
      render :edit
    end
  end

  def destroy
    @dream_list = current_user.dream_lists.find(params[:id])
    @dream_list.destroy
    redirect_to dream_lists_path
    flash[:notice] = "１つ夢を削除しました。"
  end

  def search_dream_list
    @dream_list = DreamList.new
    @dream_lists = DreamList.search(params[:keyword])
  end

  private

  def dream_list_params
    params.require(:dream_list).permit(:dream, :period, :detail, :image, :category)
  end


  def period_get
    date = params[:dream_list][:period]
    Date.new date["period(1i)"].to_i,date["period(2i)"].to_i,date["period(3i)"].to_i
  end  ↑62行目はこちらになります。
end

new.html.erb

 <div class="container mt-4 mb-4">
    <div class="card mx-auto col-lg-8 shadow p-3 bg-white">
      <h2>New Dream</h2>
      <%= render "dream_lists/error_message", dream_list: @dream_list %>
        <%= form_with model: @dream_list do |form| %> ←form_withはこちらです
          <div class="ml-3 mt-3">
            <%= render "dream_lists/form", form: form %>
            <div class="mt-3 text-center">
              <%= form.submit "投稿", class: "btn btn-sm btn-secondary" %>
            </div>
          </div>
        <% end %>
    </div>
  </div>

_form.html.erb

  <div class="col-md-4">
    <%= form.label :period , "達成日 :", class: "form_label" %>
  </div>
  <div class="col-md-4">
    <%= form.date_select(:period, start_year: 2022, date_separator: '/') %>　←こちらをdate_selectに変更しました。
      <!--<input type="text" id="userYear" >年
      <input type="text" id="userMonth">月
      <input type="text" id="userDate" >日-->
  </div>

index.html.erb

<% @dream_lists.each do |dream_list| %>
            <tr>
              <td><%= check_box_tag '', '' %></td>
              <td><%= link_to dream_list.dream, dream_list_path(dream_list.id) %></td>
              <td>
                <%= dream_list.period %>　←編集済みのcodeです
              <td>
                <%= link_to edit_dream_list_path(dream_list) do %>
                  <i class="fas fa-edit"></i>
                <% end %>
                <%= link_to dream_list_path(dream_list), method: :delete, data: { confirm: '削除しますか？' } do %>
                  <i class="fas fa-eraser"></i>
                <% end %>
              </td>
            </tr>
            <% end %>

変更点の詳細

・カラムをdate型periodに変更しました。
・form_withからdate_selectタグを使用して日付をindex.html.erbに表示することに変更しました。
・dream_lists_controllerにcordを追加しました。
※一旦Javascript での動的な実装は中断し、form_with画面から投稿したデータをindex.html.erbに表示させたいです。

状況

form_withからデータを追加して送信すると、以下のエラーが表示されます。
イメージ説明
値がnilになっていますが、送信後のdbには格納されているみたです。

Parameters: {"authenticity_token"=>"[FILTERED]", "dream_list"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007f324c19c190 @tempfile=#<Tempfile:/tmp/RackMultipart20220504-11279-1he4vwi.jpg>, @original_filename="dummy_image.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"dream_list[image]\"; filename=\"dummy_image.jpg\"\r\nContent-Type: image/jpeg\r\n">, "dream"=>"aaa", "period(1i)"=>"2022", "period(2i)"=>"5", "period(3i)"=>"4", "detail"=>"ああああ", "category"=>"仕事"}, "commit"=>"投稿"}

Date.new date["period(1i)"].to_i,date["period(2i)"].to_i,date["period(3i)"].to_i

の記述の仕方が間違っているのでしょうか？

winterboum

2022/05/01 23:37

質問も下手です。どのようなcodeを書いたのかがないと回答しようがないです

退会済みユーザー

2022/05/02 02:52

できれば該当のcontrollerや解決したい問題を明確にして欲しいです

回答1件

    <%= form.hidden_field :countdown, :id => "countdown.id" %>
      <input type="text" id="userYear" >年
      <input type="text" id="userMonth">月
      <input type="text" id="userDate" >日

となっているので countdown には値が入りません。
この view で進める場合は、controller で params[:useryear] などから countdown を作ってください。

なお、countdown という命名は違和感大きいです。
達成日が 2022/5/30 で今日が 5/2 だからあと 28日、明日になると 27日というのがcountdownでは？
day_dream_comes とか、target_day とか、、、

投稿2022/05/02 07:22

winterboum

総合スコア22817

回答へのコメント

mame

2022/05/02 12:09

ご対応頂きありがとうございます。「controller で params[:useryear] などから countdown を作ってください。」こちらについて分からず、色々調べてみたところ、f.datetime_fieldやf.date_selectでフォーム画面を表示できるみたいで試したみたところ、dbの中には値が格納されますが、一覧画面には遷移せず、フォーム画面に留まってしまいます。

winterboum

2022/05/02 13:04

Date.new( params[:useryear] , params[:usermonth] , params[:userdate] )

mame

2022/05/04 12:35

ご返信遅くなり大変申し訳ございません。改めて整理したところ、detatime型でcountdown を作成していましたが、投稿フォームから時間は選択しなくても良いので、data型periodカラムを作成し直しました。そこで、f.date_selectを用いて実装しているのですが、controller側で値が渡せていないみたいで、viewに指定した日にちが反映されないです。始めに質問していたことと、内容がずれているようなので、こちらに関しての質問は改めて質問場所を変更しなおした方がよろしいでしょうか？

winterboum

2022/05/04 22:25

このままで良いですどう直したのかcodeを

mame

2022/05/04 23:44

ありがとうございます。変更したcordを更新し直しました。宜しくお願い致します。

winterboum

2022/05/05 02:25

codeを下手に編集するとわかりません。 60行目でエラーが出てますがcode省略されてるので、60行目がどこかわかりません。全部出てても60行数えるのは厄介なので、`# <= ここが60` と記ししてほしい。

mame

2022/05/05 04:52

何度も大変申し訳ございません。編集し直しました。変更点・dream_lists_controller　に　「 ↑60行目はこちらになります。」を追加しました。・new.html.erb　に　「←form_withはこちらです」を追加しました。・_form.html.erb　に「←こちらをdate_selectに変更しました。」を追加しました。・index.html.erb　に　「　←編集済みのcodeです」を追加しました。お手数をお掛け宜しくお願い致します。何かありましたら、ご指摘宜しくお願い致します。

winterboum

2022/05/05 07:21

60行目付近画像とcodeが違うようですが。エラーが起きたときのcodeでないと意味ないです。

mame

2022/05/05 08:00

確認不足で何度も申し訳ございません。画像の変更とdream_lists_controller　に　「 ↑6２行目はこちらになります。」を追加しました。お手数をお掛けしますが、宜しくお願い致します。

winterboum

2022/05/05 09:18

date = params[:dream_list][:period] Date.new date["period(1i)"].to_i,date["period(2i)"].to_i,date["period(3i)"].to_i が date = Date.new(params[:dream_list][:period]) じゃないかな。ただ、 date = params[:dream_list][:period] が nil だと言われているのが？？？データ入れてます？これで動かなかったら、log で Paramaters を確認してください

mame

2022/05/06 11:10

お疲れ様です。 date = Date.new(params[:dream_list][:period]) に記述を変更したところ、undefined method `<' for nil:NilClass　エラーになり、Paramatersを確認したところ、"period(1i)"=>"2022", "period(2i)"=>"5", "period(3i)"=>"10"とデータは格納されているみたいです。 Date.newのDateが定義されていないのでしょうか？

mame

2022/05/06 12:09 編集

一旦アプリケーションをログアウトをして再度立ち上げると、dream_listsの一覧ページには日付がしっかり表示されていますが、新規投稿をしようとすると、上記のようなエラーが表示されます。

winterboum

2022/05/06 13:11

エラーメッセージは省略されると状況がわからなくなります。全文載せてください。

mame

2022/05/06 13:16

大変失礼いたしました。【エラー内容】 NoMethodError in DreamListsController#create undefined method `<' for nil:NilClass Extracted source (around line #60): def period_get date = Date.new(params[:dream_list][:period])　←こちらの行でエラーが出ています。 end end

winterboum

2022/05/07 00:25

あ！ params[:dream_list][:period] を Date.new に使うのがまずいか。Date.new が想定する引数でなくて、newのなかで発生してるのでしょう。 date_select って戻りが普通の paramsの構造していないのでうっかりする。未確認ですが、["period(1i)"] などから ["period"] を合成する時点で Date型にしてくれてるのかも。 strong parameter 通すとNGとか読んだことあるけど、通ってるみたいですね。 @dream_list.update(period: period_get) 抜きでためしてください

mame

2022/05/07 01:19

ご返信ありがとうございます。 @dream_list.update(period: period_get)抜きで試したところ、変わらず上記と同じエラーが発生します。【エラー内容】 NoMethodError in DreamListsController#create undefined method `<' for nil:NilClass Extracted source (around line #9): def create date = Date.new(params[:dream_list][:period])　←こちらの行でエラーが出ています @dream_list = current_user.dream_lists.new(dream_list_params) if @dream_list.save redirect_to dream_lists_path parameterには値格納されています。 "period(1i)"=>"2022", "period(2i)"=>"5", "period(3i)"=>"19" エラー内容からDateが定義されていないのでしょうか？

mame

2022/05/07 14:35 編集

teratailの中で、data_selectについて質問されている方のを参考にコントローラーを記述したところ、エラー解決して、indexページに反映されました。しかし、反映されたものの、なぜそのような記述になるのかが理解できていないです。もし宜しければ、説明頂けますと幸いです。【エラー解決したコード】 createは変更ないです。 def create @dream_list = current_user.dream_lists.new(dream_list_params) if @dream_list.save redirect_to dream_lists_path flash[:notice] = "１つ夢が追加されました。" else render :new end end updateにコードを追加しました。 def update @dream_list = current_user.dream_lists.find(params[:id]) @dream_list.period = Period.new(　　　　　　　←ここから params[:dream_list]["period(1i)"].to_i, params[:dream_list]["period(2i)"].to_i, params[:dream_list]["period(3i)"].to_i )　　　　　　　　　　　　　　　　　　　　←ここまで追加しました。 if @dream_list.update(dream_list_params) redirect_to dream_list_path(@dream_list.id) flash[:notice] = "更新に成功しました。" else render :edit end end

winterboum

2022/05/07 23:16

ここからここまでがないと period 更新されませんか？ create がうまく行くならupdateもうまく行くと思うのですが

mame

2022/05/08 01:20 編集

先程createとupdateを確認したところ、新規投稿ではindexページに遷移出来たのですが、編集しようとするとエラーが発生します。【エラー内容】 NameError in DreamListsController#update uninitialized constant DreamListsController::Period Extracted source (around line #36): def update @dream_list = current_user.dream_lists.find(params[:id]) @dream_list.period = Period.new(　　　←ここでエラーが出ています。 params[:dream_list]["period(1i)"].to_i, params[:dream_list]["period(2i)"].to_i, params[:dream_list]["period(3i)"].to_i もう一度コードを確認します。

mame

2022/05/08 01:59 編集

上記のコードを全て削除して、実行したところ、新規投稿と編集が㏈に格納されて画面遷移出来たのですが、何が原因かまでは理解していないです。 GitHubで管理している際に、branchを分けている為、最新の情報が現在のbranchに反映されていなかった事が考えられます。コードを足すことしか考えていませんでした。お時間お取りして大変申し訳ございません。

winterboum

2022/05/08 02:41

Period.new でうまく行ったと言うのを見て？？？でした。ここに載せていないどこかでclass Period を定義してるのかな？と解釈してましたがやはりエラーでましたね、やるなら Date.new です。 period(1i) 2,3 は年月日の数字がはいってますから Dateに食わせれば通ります。 params[:dream_list]["period" で Date にしてくれてあるようですね。私はこれ使ったこと無いのですが、「strong parameter 通すとエラーになる」という記述をちらほらみていたのですが、最近のVersionでは良くなったのでしょうか。ので最初の頃のcodeで Date に params[:dream_list]["period" ]食わせると、数値が来るべきところDateが来たのでおかしくなったのでしょう

mame

2022/05/08 04:26

Versionに関しては、参考にさせて頂いたサイトをもう一度見返したところ、form_withではなくform_forで実装していたり、Railsのバージョンが５版だったりしたので、こちらも関係あるのかと思いました。そもそも参考にするサイトが間違っていました。本題とは別の件で相談に乗って頂き本当にありがとうございます。本題の件に付きまして実装していきます。もし宜しければ、自分で実装して、躓いたときにはお聞きしても宜しいでしょうか？

winterboum

2022/05/08 05:38

また質問たててください

mame

2022/05/08 10:43

承知致しました。本当にありがとうございました。