前回はメガネを新調した！と書きましたが、
あれからまた老眼が進行したみたいで、
新しいメガネを使用していると再び耳鳴りがするようになってしまいました。
まだ１ヶ月もたってねーよ！
今はお金が無いので、来月、障害年金が入ったら眼科を受診しようと思っているけど、
また短期間に体に異常が出てきたら、もうメガネ諦めようかななんて思ってみたり。
メガネがないと何が困るかというと、
パソコン作業しているとき姿勢が悪くなるし、
ガルパの譜面を見えないし（ここ重要！）
老眼はなってしまうと回復することはないので、
辛い。
身体的にも、お財布的にも。
前回までの状況はこちら。
最新ソースはこちら(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
これにアクティブ度と目的に合わせて係数を掛けます。
アクティブ度
目的
これらは以下で紹介した本の中にあります。
フロントエンド側はこれで完成。
次はこの計算結果を保持するデータベース周りのバックエンド側を作成していきます。
