Closed suzy1031 closed 3 years ago
これだと、vue.js側の日付処理と曜日が合わず不整合があった
vue.js
→日曜日起算(日曜日になると今週が開始する)
rails
→end_of_weekメソッドは月曜日起算で今週末の曜日を取得するので日曜日を取得する
修正後
# study.rb
@this_day = Date.today
self.where(created_at: @this_day - (@this_day.wday)..@this_day - (@this_day.wday - 1)).sum(:time)
これだと、今日が11/23だと、11/22~11/23の間のデータしか取得できていない
# study.rb
+Date.today.beginning_of_week(:sunday)
+Date.today.end_of_week(:sunday)
@this_day = Date.today # 今日の日付
+@this_sunday = @this_day.beginning_of_week(:sunday) # 日曜日
+@this_saturday = @this_day.end_of_week(:sunday) # 土曜日
-self.where(created_at: @this_day - (@this_day.wday)..@this_day - (@this_day.wday - 1)).sum(:time)
+self.where(created_at: Date.today.beginning_of_week(:sunday)..Date.today.end_of_week(:sunday)).sum(:time)
modelメソッドの書き方
# study.rb
def self.変数名
self.メソッド
end
# studies_controller.rb
latestTotal = Study.変数名
この場合、self=Study(モデル名)
参考 wdayメソッドで日付を曜日分逆算する biginning_of_weekとend_of_weekに引数を渡して週の始まりと終わりを指定する 今週、月〜日曜日の日付を動的に取得する https://ginpen.com/2015/08/03/one-liner-weekday-js/
参考 beginning_of_week end_of_week end_of_week(Rails active_support) .sum(:カラム名) study-timer(自分のプロジェクト)
totalをlatestTotal + timeを計算した値をformで送りたい
vue.js
v-modelは初期値を送れない
→計算結果をvauleにセットしてフォームで送るjQuery的な書き方はできなさそう
v-modelとvalueは一緒に書けない
→:value=“”と@input=“”を省略して書けるのがv-modelの為
latestTotal(studiesに変数名を変更)に格納されているjsonデータは1週間のtimeの合計値しか入っていない modelで.sum(:time)するとjsonデータが日〜土の合計されたtimeしか渡されてない ※railsの1アクション内でrenderできるjsonは1つだけ。
@data1 = ~
@data2 = ~
みたくjsonではインスタンス作りまくってフロント(erb)で@data1.hoge``@data2.piyo
みたく受け取れない
rails
study.rb(モデル)
.sum(:time)をしないでjsonで配列データを送る
lengthが定義されていないエラー
原因
dataのstudiesが配列で用意されていない為?
response.data(配列)を受け取る配列の箱を準備
-studies: ‘’
+studies: []
computedプロパティを使ってループ処理
を追加する
計算した結果をtemplate内に{{ calculateTotal }}
と修正
# 配列データの一番最後を取得
this.userTotal = response.data.slice(-1)[0]
{"id" : "1", "time" : "1", "total" : "3"}
{"id" : "2", "time" : "2", "total" : "4"}
{"id" : "3", "time" : "3", "total" : "5"} ← このjsonデータを取得し配列に格納
# jsonはstring型なので、float型に変換する
parseFloat(this.userTotal.total)
# セレクトボックスに入力されたvalueをstring→floatに変換する
parseFloat(this.study.time)
# 計算する
var calcTotalValue = parseFloat(this.userTotal.total) + parseFloat(this.study.time)
# this.studyに3の計算結果とセレクトボックスで選択したvalueを格納
this.study.total = calcTotalValue;
this.study.time = this.time // これは書かなくてもv-modelディレクティブでバインドされている
# axios.postの第2引数にdataを渡す
axios.post('/api/v1/studies', this.study)
↓
DBを確認すると直前の最新レコードのtotal + 入力したthis.time
の合計値がtotalのvalueとしてinsertされている
次の課題 日曜日になると、jsonで受け取るデータは空になるはず calcTotalValueの計算ができないのではないか?
方針
例)11/29(日), 11/30(月), 12/1(火), 12/2(水), 12/3(木), 12/4(金), 12/5(土)
# calcThisWeekTotalメソッド
length = 0なので表示は0で問題無し
0 + this.time = 今日の学習時間がstudy.totalに登録されてしまう ↓ this.userTotal = response.data.slice(-1)[0] → 取得するデータは前日データ 例 今日が11/28(金)→取得するデータは11/27(木)→これは11/22~11/29までrails側で取得しているから問題無し 今日が11/30(日)→取得するデータは11/29(土)→これだとrails側で取得データするのは11/30~12/5なので駄目
***上記エラーケースを解消するには***
1. rails側で11/29~12/5のデータを取得できるように修正
2. calcTotalValueはそのまま使える
3. calcThisWeekTotalメソッドを修正→取得したデータ個数 - 11/29のデータを計算し出力
もし土曜日に入力した時間がなかった場合、取得できるデータが無い為、undefinedになる 曜日に関わらず最後に入力されたtotalを取得する必要がある
考え方
# 条件は3つ
今日が日曜 && データ1件件以上
→ Study.where(created_at: @this_sunday..@this_saturday)でデータを取得
今日が日曜日以外
→ Study.where(created_at: @this_sunday..@this_saturday)でデータを取得
それ以外(今日が日曜日 && データが0件)
→ Study.order(created_at: :desc).limit(1)でデータを取得
→ 更にtotalだけ取得にする
study.rb
+now = Time.current
+range = now.all_day
# rails c
@data = Study.where(created_at: range)
Study Load (1.1ms) SELECT `studies`.* FROM `studies` WHERE `studies`.`created_at` BETWEEN '2020-11-29 00:00:00' AND '2020-11-29 23:59:59' LIMIT 11
=> #<ActiveRecord::Relation [#<Study id: 41, time: 0.5, total: 9.0, user_id: nil, created_at: "2020-11-29 02:59:12", updated_at: "2020-11-29 02:59:12">,
#<Study id: 42, time: 0.5, total: 9.5, user_id: nil, created_at: "2020-11-29 02:59:45", updated_at: "2020-11-29 02:59:45">]>
rails activeRecordメソッド
@this_day = Date.today # 今日の日付
@this_sunday = @this_day.beginning_of_week(:sunday) # 日曜日
@this_saturday = @this_day.end_of_week(:sunday) # 土曜日
self.where(created_at: @this_sunday..@this_saturday)
+@this_day = Time.now
+range = @this_day.all_week(:sunday)
+self.where(created_at: range)
# すっきり書けた
条件変更
rails
考え方
vue.js
27日と1日だけで比較すると、27の方が大きくなっていて想定結果を取得できない 取得データをDate型にする 今週の日曜を取得する(thisWeekDate()と同じ処理) 2つを比較する
vue.js
jsonで取得したデータの日付チェック
最後の配列が今週の曜日の場合 → 今まで通り
最後の配列が先週の曜日の場合 → 0を出力
参考 .present?メソッド all_dayメソッド Time.now.all_dayメソッド getTime()メソッド 日付の比較
土曜日になると土曜日のデータを取得できていない
class Study < ApplicationRecord
def self.this_week_total
-@this_day = Date.dotay
+@this_day = Time.now # 今日の日付
@this_date = @this_day.wday # 今日の曜日取得
@range = @this_day.all_week(:sunday) # 日曜日始まりで今週の日〜土を取得
@data = Study.where(created_at: @range) # 今週の日〜土のデータを取得
# 今週チェック
if (@this_date && @data.present?) # 今週の日〜月または今週のデータが1件以上の場合
self.where(created_at: @range) # 今週の日〜土のデータ取得
else # 今週ではないかつ今週のデータが0件の場合
self.order(created_at: :desc).limit(1) # 最新レコードを1件取得
end
end
end
Time.now
を使って23:59:59までのデータを取得できるように修正
↓ 課題
考え方
studyTBL→inserttotalTBL→update実装方針
参考 railsのActiveRecordで最新のレコード1件取得する