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

【ダイエット支援】【食事管理】データ一覧処理を作成する。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

今回はこの画面を作成していきます。

前回作成した画面の、

Editをクリックしたときの、遷移先の画面です。

まずは、画面遷移のところを作成する。

EatingListComponent.vue

                        <td class="edit"><a @click="onClickEdit(data.date)">Edit</a></td>


export default {
    data() {
        return {
            url: "eating/detail"
        };
    },
    methods: {
        onClickEdit: function(date) {
            window.location = this.url + "/" + date;
        },

Editをクリックすると、onClickEdit()が実行され、window.locationにURLを設定することで、そのURLに遷移します。

で、遷移先の画面。

web.php

Route::get('/eating/detail/{date}', 'Eating\EatingController@detail')->name('eating/detail');

EatingController.php

class EatingController extends Controller
{
    public function detail($date)
    {
        return view('eatingdetail', ['date' => $date]);
    }

eatingdetail.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">食事管理</div>

                <div class="panel-body">
                    @if (session('status'))
                        <div class="alert alert-success">
                            {{ session('status') }}
                        </div>
                    @endif
                </div>
                <eating-detail-component date={{$date}}></eating-detail-component>
            </div>
        </div>
    </div>
</div>
@endsection

詳細画面のURLはeating/detail/(日付)となります。

この(日付)の部分が巡り巡って、eating-detail-componentに渡ります。

<eating-detail-component date={{$date}}></eating-detail-component>

ここで一度詰まった。

:date={{$date}}と書いてはダメみたい。

で、表示するデータの取得。

class EatingManagementRepository
{
    private $paramNames = ['date', 'item', 'protein', 'liqid', 'carbo', 'calorie'];

    public function getDetails($user, $date)
    {
        $eatings = $user->EatingManagements()
            ->where(DB::raw('date_format(date, "%Y-%m-%d")'), $date)
            ->get();
        
        $retDatas = [];
        $index = [0, 0, 0, 0];
        foreach($eatings as $eating) {
            $timezone = $eating->timezones()->first();
            for($j = 1; $j < count($this->paramNames); $j++) {
                $retDatas[$timezone->id - 1][$index[$timezone->id - 1]][$this->paramNames[$j]] = $eating->{$this->paramNames[$j]};
            }
            $index[$timezone->id - 1]++;
        }
        return $retDatas;
    }

今回もかなりカオスな処理。

時間帯によってデータを分けたかったので、

retData[時間帯番号][index][詳細データ]

という形にデータを作成しています。

詳細データの連想配列の名前は、定義済みの$paramNamesの値を使用します。

これをAPIで呼び出します。

class ApiController extends Controller
{
    /**
     * 一日分のデータを取得する
     */
    public function detail(Request $request)
    {
        return response()->json(['dataLists' => $this->eatingManagement->getDetails(Auth::user(), $request->contents['date'])]);
    }

web.php

Route::post('api/eating/detail', 'Eating\ApiController@detail');

<template>
    <div>
        <div>
            <p id="navi">> <a href="/home">HOME</a> / <a href="/eating">食事管理</a></p>
            <p>{{date}}</p>
            <table class="eatingdetail">
                <caption>朝</caption>
                <tbody>
                    <tr>
                        <th class="item">品名</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                        <th class="edit"></th>
                    </tr>
                    <tr v-for="data in datalists[0]">
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                        <td class="edit"><a @click="onClickEdit(data.date)">Edit</a></td>
                    </tr>
                </tbody>
            </table>
            <table class="eatingdetail">
                <caption>昼</caption>
                <tbody>
                    <tr>
                        <th class="item">品名</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                        <th class="edit"></th>
                    </tr>
                    <tr v-for="data in datalists[1]">
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                        <td class="edit"><a @click="onClickEdit(data.date)">Edit</a></td>
                    </tr>
                </tbody>
            </table>
            <table class="eatingdetail">
                <caption>夜</caption>
                <tbody>
                    <tr>
                        <th class="item">品名</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                        <th class="edit"></th>
                    </tr>
                    <tr v-for="data in datalists[2]">
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                        <td class="edit"><a @click="onClickEdit(data.date)">Edit</a></td>
                    </tr>
                </tbody>
            </table>
            <table class="eatingdetail">
                <caption>間食</caption>
                <tbody>
                    <tr>
                        <th class="item">品名</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                        <th class="edit"></th>
                    </tr>
                    <tr v-for="data in datalists[3]">
                        <td class="item">{{ data.item}}</td>
                        <td class="protein">{{ data.protein}}</td>
                        <td class="liqid">{{ data.liqid}}</td>
                        <td class="carbo">{{ data.carbo}}</td>
                        <td class="calorie">{{ data.calorie}}</td>
                        <td class="edit"><a @click="onClickEdit(data.date)">Edit</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        date: String
    },
    data() {
        return {
            showInputDialogContent: false,
            showEditDialogContent: false,
            showDeleteDialogContent: false,
            datalists: [],
            param: {},
            contents: {
                date: "",
            },
        };
    },
    created: function() {
        this.updateList();
    },
    methods: {
        onClickEdit: function(date) {
        },
        invokeUpdateList: function() {
        },
        updateList: function() {
            this.datalists = [];
            this.contents.date = this.date;
            this.param.contents = this.contents;
            var self = this;
            axios.post('/api/eating/detail', this.param).then(function(response){
                response.data.dataLists.forEach(element => {
                    var data = [];
                    element.forEach(element2 => {
                        data.push({
                            item: element2.item,
                            protein: element2.protein,
                            liqid: element2.liqid,
                            carbo: element2.carbo,
                            calorie: element2.calorie
                        })
                    })
                    self.datalists.push(data);
                });
            }).catch(function(error){
            });
        }
    }
}
</script>

responseの処理がネストになるという、またまたカオスな処理。

でもこれでJS側でもdatalists[時間帯ID][index].詳細データという形になります。

これをテンプレートに表示させれば良い。

• 

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

【ダイエット支援】【食事管理】データ入力処理を作成する。

最新ソースはこちら(gitHub)

https://github.com/takishita2nd/diet-mng

今回はデータ一覧画面を作成していきます。

この画面は日付ごとにタンパク質、脂質、炭水化物、カロリーを集計して一覧表示にします。

今回の一番の肝、データを処理するリポジトリの処理。

class EatingManagementRepository
{
    private $paramNames = ['date', 'item', 'protein', 'liqid', 'carbo', 'calorie'];

    /**
     * データを取得して日毎にまとめる
     */
    public function getDailyList($user, $page = 1, $days = 10)
    {
        $dates = [];
        for($i = ($page - 1); $i < ($days * $page) ; $i++) {
            $dates[] = date('Y-m-d', strtotime('today - '.$i.' day'));
        }

        $eatings = $user->EatingManagements()
             ->whereIn(DB::raw('date_format(date, "%Y-%m-%d")'), $dates)
             ->get();

        // 日毎に集計
        $dailyDatas = [];
        foreach($eatings as $eating) {
            for($j = 2; $j < count($this->paramNames); $j++) {
                if(!array_key_exists($eating->date, $dailyDatas)) {
                    $dailyDatas[$eating->date] = [];
                }
                if(!array_key_exists($this->paramNames[$j], $dailyDatas[$eating->date])) {
                    $dailyDatas[$eating->date][$this->paramNames[$j]] = 0;
                }
                $dailyDatas[$eating->date][$this->paramNames[$j]] += $eating->{$this->paramNames[$j]};
            }
        }

        // 戻り値に変換
        $retDatas = [];
        $index = 0;
        foreach($dailyDatas as $dailykey => $dailyData) {
            $retDatas[$index][$this->paramNames[0]] = $dailykey;
            for($k = 2; $k < count($this->paramNames); $k++) {
                $retDatas[$index][$this->paramNames[$k]] = $dailyDatas[$dailykey][$this->paramNames[$k]];
            }
        }

        return $retDatas;
    }

まずはwhere inで日付指定でデータを取得するために、今日から(デフォルト)10日前までの日付を配列$datesに作成します。

>>> $dates
=> [
     "2020-07-30",
     "2020-07-29",
     "2020-07-28",
     "2020-07-27",
     "2020-07-26",
     "2020-07-25",
     "2020-07-24",
     "2020-07-23",
     "2020-07-22",
     "2020-07-21",
   ]

そして、DBにアクセスして、データを取得、結果が$eatingsに入ります。

>>> $eatings = $user->EatingManagements()->whereIn(DB::raw('date_format(date, "%Y-%m-%d")'), $dates)->get();=> Illuminate\Database\Eloquent\Collection {#3920     all: [
       App\Model\EatingManagement {#3917
         id: 1,
         date: "2020-07-30",
         item: "item1",
         protein: 10,
         liqid: 10,
         carbo: 10,
         calorie: 10,
         created_at: "2020-07-30 10:38:50",
         updated_at: "2020-07-30 10:38:50",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3916
           user_id: 1,
           eating_management_id: 1,
         },
       },
       App\Model\EatingManagement {#3652
         id: 2,
         date: "2020-07-30",
         item: "item2",
         protein: 20,
         liqid: 20,
         carbo: 20,
         calorie: 20,
         created_at: "2020-07-30 10:39:00",
         updated_at: "2020-07-30 10:39:00",
         pivot: Illuminate\Database\Eloquent\Relations\Pivot {#3915
           user_id: 1,
           eating_management_id: 2,
         },
       },
     ],
   }

このデータを日付毎に集計します。

$dailyDatasは二次元の連想配列になっていて、$dailyDatas[日付][栄養素]という感じで格納されます。

栄養素の連想配列名は定義済みの$paramNamesの値をそのまま使用します。

こうすることで、今後何かDBに修正が入ったとしても、$paramNamesのみを修正すれば良いことになります。

>>> $dailyDatas
=> [
     "2020-07-30" => [
       "protein" => 30,
       "riqid" => 0,
       "carbo" => 30,
       "calorie" => 30,
     ],
   ]

ただ、このままだと、Json化してJavascript側で処理するのに、ものすごい面倒なことになるので、扱いやすいようにデータを変換します。

具体的には、$retDatas[データ番号][項目]という形にします。

>>> $retDatas
=> [
     [
       "date" => "2020-07-30",
       "protein" => 30,
       "riqid" => 0,
       "carbo" => 30,
       "calorie" => 30,
     ],
   ]

この状態でJson化してフロントエンド側に送信します。

この処理書くの大変だったわ。

namespace App\Http\Controllers\Eating;

class ApiController extends Controller
{
    /**
     * データ一覧を取得する
     */
    public function list(Request $request)
    {
        return response()->json(['dataLists' => $this->eatingManagement->getDailyList(Auth::user(), $request->contents["page"])]);
    }

Route::post('api/eating/list', 'Eating\ApiController@list');

<script>
export default {
    created: function() {
        this.updateList();
        //this.createPagenate();
    },
    methods: {
        updateList: function() {
            this.datalists = [];
            this.contents.page = this.currentPage;
            this.param.contents = this.contents;
            var self = this;
            axios.post('api/eating/list', this.param).then(function(response){
                response.data.dataLists.forEach(element => {
                    self.datalists.push({
                        date: element.date,
                        protein: element.protein,
                        liqid: element.liqid,
                        carbo: element.carbo,
                        calorie: element.calorie
                    })
                });
            }).catch(function(error){
            });
        }

いやー未だにPHP慣れないわー。