前回までの状況はこちら。

最新ソースはこちら(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

これらは以下で紹介した本の中にあります。

フロントエンド側はこれで完成。

次はこの計算結果を保持するデータベース周りのバックエンド側を作成していきます。