日別アーカイブ: 2022年2月12日

chart.jsでグラフを作る

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に置き換えたほうが良いです