Docker環境下でグラフを作りたい
1:新しくモデルを追加する
docker-compose run web bundle exec rails g model hiit user:references training_day:date training_time:integer
2:マイグレートする
docker-compose exec web bundle exec rake db:migrate
3:user.rbに以下の記述を追加する
4:コントローラーの追加をする
docker-compose exec web rails g controller hiits new edit show index
5:ルーティングを追加するroutes.rbに以下の記述を追加
6:ビューを追加する
new.html.erbの中身
<section class="hiit-form"> <div class="log-form"> <div class="form-title tween-animate-title center-position">運動記録</div> <%= form_with model: @hiit, local: true do |f| %> <%= f.date_field :training_day, id: "date-form", type: "text", readonly: "", placeholder: 'クリックして運動した日をカレンダーで選択', class: "form-field btn" %> <% if @hiit.errors.include?(:training_day) %> <div class="alert alert-danger "> <%= @hiit.errors.messages[:training_day][0] %> </div> <% end %> <%= f.number_field :training_time, required: true, placeholder: '運動時間を分単位で選択' %> <% if @hiit.errors.include?(:training_time) %> <div class="alert alert-danger "> <%= @hiit.errors.messages[:training_time][0] %> <% end %> <%= f.label '運動メモ', class: "box center-position" %> <%= f.text_area :content, class: "form-area center-position", placeholder: '例: スクワットを〇〇分、腹筋を〇〇分、プランクを〇〇分など' %> </div> <%= f.submit yield(:button_text), class: "btn slide-wine center-position" %> <% end %> </section> <%= render 'shared/datetime' %>
<%= render ‘shared/datetime’ %>の中身
<script> const today = new Date(new Date().setHours(0, 0, 0, 0)) const a_month_ago = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate()) // ● カレンダー // 選択できない日付データ(自由に変更できます。) const disable_dates = [''] // カレンダーの日本語化 flatpickr.localize(flatpickr.l10ns.ja); // カレンダーの表示 flatpickr('#date-form', { // スマートフォンでもカレンダーに「flatpickr」を使用 disableMobile: true, // 1ヶ月前から本日まで選択可 minDate: a_month_ago, // 選択できない日付 disable: disable_dates }); </script>
なおflatpicker(カレンダー機能)を使わないときは無視していいです。できればjsに置き換えたほうが良いです