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

【Laravel】【ダイエット支援】【食事管理】入力ダイアログを作成する

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

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

詳細画面を作成していきます。

これも体重管理の画面を流用してさくっと作成していきます。

処理部分は後で実装します。

web.php

Route::get('/eating', 'Eating\EatingController@index')->name('eating');

EatingController.php

<?php

namespace App\Http\Controllers\Eating;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;

class EatingController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('eating');
    }
}

eating.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-list-component></eating-list-component>
            </div>
        </div>
    </div>
</div>
@endsection

app.js

Vue.component('eating-list-component', require('./components/Eating/EatingListComponent.vue'));

EatingDashboardComponent.vue

<template>
    <div>
        <div class="dashboard">
            <div class="chart">
                <canvas id="eating"></canvas>
            </div>
            <div class="command">
                <ul>
                    <li><a @click="onClickPrev">prev</a></li>
                    <li><a @click="onClickNext">next</a></li>
                </ul>
                <ul>
                    <li><a @click="onClickInput">クイック入力</a></li>
                    <li><a href="/eating">詳細</a></li>
                </ul>
            </div>
        </div>
        <eating-input-dialog-component :show="showInputDialogContent" @update="invokeUpdateList"></eating-input-dialog-component>
    </div>
</template>

EatingListComponent.vue

<template>
    <div>
        <div>
            <p id="navi">> <a href="/home">HOME</a></p>
            <p id="inputbutton">
                <button @click="onClickInput">データ入力</button>
            </p>
            <div id="pagenate">
                <ul>
                    <li>
                        <a href="#" v-if="prevShow" @click="prevPage()">&lt;</a>
                        <b v-else>&lt;</b>
                    </li>
                    <li v-for="page in pagenates">
                        <a href="#" v-if="currentPage != page" @click="changePage(page)">{{ page }}</a>
                        <b v-else>{{ page }}</b>
                    </li>
                    <li>
                        <a href="#" v-if="nextShow" @click="nextPage()">&gt;</a>
                        <b v-else>&gt;</b>
                    </li>
                </ul>
            </div>
            <table class="eatinglist">
                <tbody>
                    <tr>
                        <th class="date">日時</th>
                        <th class="protein">タンパク質</th>
                        <th class="liqid">脂質</th>
                        <th class="carbo">炭水化物</th>
                        <th class="calorie">カロリー</th>
                        <th class="edit"></th>
                        <th class="delele"></th>
                    </tr>
                    <tr v-for="data in datalists">
                        <td class="date">{{ data.date}}</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.id)">Edit</a></td>
                        <td class="delele"><a @click="onClickDelete(data.id)">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showInputDialogContent: false,
            showEditDialogContent: false,
            showDeleteDialogContent: false,
            datalists: [],
            pagenates: [],
            currentPage: 1,
            maxPage: 1,
            param: {},
            contents: {
                page: "",
            },
        };
    },
    computed: {
        prevShow: function() {
            return this.currentPage != 1;
        },
        nextShow: function() {
            return this.currentPage != this.maxPage;
        },
    },
    created: function() {
    },
    methods: {
        createPagenate: function() {
        },
        changePage: function(page) {
        },
        nextPage: function() {
        },
        prevPage: function() {
        },
        onClickInput: function() {
        },
        onClickEdit: function(id) {
        },
        onClickDelete: function(id) {
        },
        invokeUpdateList: function() {
        },
        updateList: function() {
        }
    }
}
</script>

app.scss

@import "eatinglist";

_eatinglist.scss

table.eatinglist {
    width: 100%;
    tbody tr {
        th {
            border: solid;
            border-width: thin;
        }
        .date {
            width: 20%;
        }
        .protein {
            width: 15%;
        }
        .liqid {
            width: 15%;
        }
        .carbo {
            width: 15%;
        }
        .calorie {
            width: 15%;
        }
        .edit {
            width: 10%;
        }
        .delete {
            width: 10%;
        }
        td {
            border: solid;
            border-width: thin;
            text-align: right;
        }
        .date {
            width: 20%;
        }
        .protein {
            width: 15%;
        }
        .liqid {
            width: 15%;
        }
        .carbo {
            width: 15%;
        }
        .calorie {
            width: 15%;
        }
        .edit {
            width: 10%;
        }
        .delete {
            width: 10%;
        }
    }
}
p#inputbutton {
    text-align: right;
    margin-right: 10px;
}
p#navi {
    margin-left: 10px;
}
div#pagenate {
    text-align: right;
    ul li {
        margin-left: 5px;
        margin-right: 5px;
        display: inline;
    }
}

まぁ、まだデータがないからね。