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に置き換えたほうが良いです
scripts/main.jsにこのように貼り付け
