前回までの状況はこちら
最新ソースはこちら(gitHub)。
https://github.com/takishita2nd/diet-mng
前回計算した内容をデータベースに保存・読み出しを行う機能を実装します。
まずはデータベースのマイグレーションを作成。
class CreateEatingTarget extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('eating_targets', function (Blueprint $table) {
$table->bigIncrements('id');
$table->double('protein');
$table->double('liqid');
$table->double('carbo');
$table->double('calorie');
$table->timestamps();
$table->engine = 'InnoDB';
$table->charset = 'utf8mb4';
$table->collation = 'utf8mb4_unicode_ci';
});
Schema::create('eating_target_user', function (Blueprint $table) {
$table->integer('user_id')
->foreign('user_id')
->references('id')->on('users')
->onDelete('cascade');
$table->integer('eating_target_id')
->foreign('eating_target_id')
->references('id')->on('eating_targets')
->onDelete('cascade');
$table->engine = 'InnoDB';
$table->charset = 'utf8mb4';
$table->collation = 'utf8mb4_unicode_ci';
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('eating_target_user');
Schema::dropIfExists('eating_targets');
}
}
$ php artisan migrateこのテーブルのモデルを作成。
class EatingTarget extends Model
{
protected $table = 'eating_targets';
public function users()
{
return $this->belongsToMany('App\User');
}
}
Userテーブルからのリレーションも作成します。
class User extends Authenticatable
{
public function EatingTargets()
{
return $this->belongsToMany('App\Model\EatingTarget');
}
このデータベースにアクセスするためのAPIを作成します。
セット処理。
Route::post('api/eating/settarget', 'Eating\ApiController@setTarget');
class ApiController extends Controller
{
/**
* 目標栄養素を設定する
*/
public function setTarget(Request $request)
{
$paramNames = $this->eatingManagement->getTargetParam();
$param = [];
foreach($paramNames as $name) {
$param[$name] = $request->contents[$name];
}
$this->eatingManagement->setTarget($param, Auth::user());
return response()->json();
}
use App\Model\EatingTarget;
class EatingManagementRepository
{
private $targetParamNames = ['protein', 'liqid', 'carbo', 'calorie'];
public function setTarget($param, $user)
{
$model = $user->EatingTargets()->first();
if(is_null($model)) {
$model = new EatingTarget();
}
foreach($this->targetParamNames as $name)
{
$model->$name = $param[$name];
}
$model->save();
$this->attachToUser($model, $user);
}
public function getTargetParam()
{
return $this->targetParamNames;
}
これをVue.jsの処理に組み込みます。
methods: {
clickAdd: function() {
var self = this;
this.param.contents = this.contents;
axios.post('/api/eating/settarget', this.param).then(function(response){
self.closeModal();
self.$emit('update');
}).catch(function(error){
self.error_flg = true;
self.errors = error.response.data.errors;
});
},
次は、このデータを読み出す処理を実装します。
グラフデータを読み出すAPIがすでにありますので、これにデータを追加します。
class ApiController extends Controller
{
/**
* グラフ用データを取得する
*/
public function graph(Request $request)
{
return response()->json([
'data' => $this->eatingManagement->getDaily(Auth::user(), $request->contents['date']),
'target' => $this->eatingManagement->getTarget(Auth::user())
]);
}
class EatingManagementRepository
{
public function getTarget($user)
{
return $user->EatingTargets()->first();
}
graphUpdate: function() {
var ctx = document.getElementById("eating");
var self = this;
this.contents.date = this.todayDate;
this.param.contents = this.contents;
this.datasets = [];
axios.post('api/eating/graph', this.param).then(function(response){
if(response.data.data != null) {
self.datasets.push(Math.ceil(response.data.data.protein / response.data.target.protein * 100));
self.datasets.push(Math.ceil(response.data.data.liqid / response.data.target.liqid * 100));
self.datasets.push(Math.ceil(response.data.data.carbo / response.data.target.carbo * 100));
self.datasets.push(Math.ceil(response.data.data.calorie / response.data.target.calorie * 100));
var myChart = new Chart(ctx, {
なかなかいい感じなので、これで行きましょう。
