前回までの状況はこちら。
最新ソースはこちら(gitHub)。
https://github.com/takishita2nd/diet-mng
やっぱり、前回書いたとおり、きちんと目標となるカロリーを計算しないと、正しいグラフ書けない、ということで、ダイアログを追加します。
<template>
<div>
<div id="overlay" v-show="show">
<div id="content">
<p v-if="error_flg == true" class="error">
<ui>
<li v-for="error in errors">{{ error }}</li>
</ui>
</p>
<table class="edit">
<tbody>
<tr>
<td>身長</td>
<td><input type="number" v-model="inputParameter.height" /></td>
</tr>
<tr>
<td>体重</td>
<td><input type="number" v-model="inputParameter.weight" /></td>
</tr>
<tr>
<td>年齢</td>
<td><input type="number" v-model="inputParameter.age" /></td>
</tr>
<tr>
<td>アクティブ度</td>
<td>
<select name="active" v-model="inputParameter.active">
<option value="1" selected>低</option>
<option value="2">中</option>
<option value="3">高</option>
</select>
</td>
</tr>
<tr>
<td>目的</td>
<td>
<select name="target" v-model="inputParameter.target">
<option value="1" selected>維持</option>
<option value="2">減量</option>
<option value="3">増量</option>
</select>
</td>
</tr>
</tbody>
</table>
<p />
<table class="edit">
<tbody>
<tr>
<td>目標カロリー</td>
<td>{{calorie}} cal</td>
</tr>
<tr>
<td>タンパク質</td>
<td>{{protein}} g</td>
</tr>
<tr>
<td>脂質</td>
<td>{{liquid}} g</td>
</tr>
<tr>
<td>炭水化物</td>
<td>{{carbo}} g</td>
</tr>
</tbody>
</table>
<p id="command">
<button @click="clickAdd">入力</button>
<button @click="closeModal">閉じる</button>
</p>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['show'],
data() {
return {
errors: [],
error_flg: [],
param: {},
inputParameter: {
height: 0,
weight: 0,
age: 0,
active: 1,
target: 1,
},
contents: {
calorie: 0,
protein: 0,
liquid: 0,
carbo: 0,
},
};
},
created: function() {
this.clear();
},
methods: {
clickAdd: function() {
var self = this;
this.param.contents = this.contents;
axios.post('/api/eating/settarget', this.param).then(function(response){
}).catch(function(error){
self.error_flg = true;
self.errors = error.response.data.errors;
});
},
closeModal: function() {
this.$parent.showCalcCalorieContent = false;
},
clear: function() {
this.inputParameter.height = 0;
this.inputParameter.weight = 0;
this.inputParameter.age = 0;
this.inputParameter.active = "1";
this.inputParameter.target = "1";
this.contents.calorie = 0;
this.contents.protein = 0;
this.contents.liquid = 0;
this.contents.carbo = 0;
this.error_flg = false;
this.errors = [];
}
}
}
</script>
ボタンはここに配置ました。
身長、体重、年齢と、アクティブ度と目標を入力してもらって、目標となるカロリーと摂取栄養素の量を計算します。
計算式はそんなに難しくないので、フロントエンド側で計算して表示させちゃいます。
computed: {
calorie: function() {
var cal = 10 * this.inputParameter.weight + 6.25 * this.inputParameter.height - 5 * this.inputParameter.age + 5;
var k = 1;
// アクティブ度の計算
switch(this.inputParameter.active){
case "1": k = 1.2; break;
case "2": k = 1.55; break;
case "3": k = 1.725; break;
}
cal = cal * k;
// 目標の計算
switch(this.inputParameter.target){
case "1": k = 1; break;
case "2": k = 0.8; break;
case "3": k = 1.2; break;
}
this.contents.calorie = Math.ceil(cal * k);
return this.contents.calorie;
},
protein: function() {
this.contents.protein = this.inputParameter.weight * 2;
return this.contents.protein;
},
liquid: function() {
this.contents.liquid = Math.ceil(this.contents.calorie * 0.25 / 9);
return this.contents.liquid;
},
carbo: function() {
this.contents.carbo = Math.ceil((this.contents.calorie - this.contents.protein * 4 - this.contents.liquid * 9) / 4);
return this.contents.carbo;
},
},
まず、computedに記載することで、入力パラメータからすぐさま計算処理を行い、結果を反映してくれます。
カロリーの計算式は、
10×体重(g)+6.25×身長(cm)-5×年齢(歳)+5
これにアクティブ度と目的に合わせて係数を掛けます。
アクティブ度
- 低 カロリー×1.2
- 中 カロリー×1.55
- 高 カロリー×1.725
目的
- 減量 カロリー×0.8
- 維持 カロリー×1
- 増量 カロリー×1.2
これらは以下で紹介した本の中にあります。
フロントエンド側はこれで完成。
次はこの計算結果を保持するデータベース周りのバックエンド側を作成していきます。
