【LARAVEL】【ダイエット支援】データ一覧画面からデータ更新

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

最新ソースはこちら(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="contents.weight" /></td>
                        </tr>
                        <tr>
                            <td>体脂肪</td>
                            <td><input type="number" v-model="contents.fat_rate" /></td>
                        </tr>
                        <tr>
                            <td>BMI</td>
                            <td><input type="number" v-model="contents.bmi" /></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: {},
            contents: {
                id: "",
                weight: "",
                fat_rate: "",
                bmi: "",
            },
        };
    },
    created: function() {
    },
    methods: {
        dataSet: function(data) {
            this.contents = data;
        },
        clickAdd: function() {
            var self = this;
            this.param.contents = this.contents;
            axios.post('api/weight/edit', this.param).then(function(response){
                self.clear();
                self.closeModal();
                self.$emit('update');
            }).catch(function(error){
                self.error_flg = true;
                self.errors = error.response.data.errors;
            });
        },
        closeModal: function() {
            this.$parent.showEditDialogContent = false;
        },
        clear: function() {
            this.contents.weight = "";
            this.contents.fat_rate = "";
            this.contents.bmi = "";
            this.error_flg = false;
            this.errors = [];
        }
    }
}
</script>

そして、それを使用する側の親コンポーネント。

        <div>
            <weight-input-dialog-component :show="showInputDialogContent" @update="invokeUpdateList"></weight-input-dialog-component>
            <weight-edit-dialog-component ref="editDialog" :show="showEditDialogContent" @update="invokeUpdateList"></weight-edit-dialog-component>
        </div>
        onClickEdit: function(id) {
            var editData = {};
            this.datalists.forEach(element => {
                if(element.id == id){
                    editData.id = id;
                    editData.weight = element.weight;
                    editData.fat_rate = element.fat_rate;
                    editData.bmi = element.bmi;
                    return true;
                }
            });
            this.$refs.editDialog.dataSet(editData);
            this.showEditDialogContent = true;

ポイントは、編集ダイアログにデータを渡すとき。

親コンポーネントから子コンポーネントのメソッドをコールしています。

これは、子コンポーネントを定義するときに、

ref="editDialog"

と書くことで、

            this.$refs.editDialog.dataSet(editData);

と、子コンポーネントのメソッドを実行できます。

その引数でパラメータを渡して、表示させています。

あとは、今までどおり。

Repository

    public function edit($id, $weight, $fat_rate, $bmi)
    {
        $model = $this->getItemById($id);
        $model->weight = $weight;
        $model->fat_rate = $fat_rate;
        $model->bmi = $bmi;
        $model->save();
    }

    public function getItemById($id)
    {
        return WeightManagement::where(['id' => $id])->first();
    }

controller

    /**
     * データを1件更新する
     */
    public function edit(Request $request)
    {
        $param = $this->weightManagement->getParam();
        $this->weightManagement->edit( $request->contents["id"], 
            $request->contents["weight"],
            $request->contents["fat_rate"],
            $request->contents["bmi"]
        );
        
        return response()->json();
    }
Route::post('api/weight/edit', 'Weight\ApiController@edit');

【ラズパイ】【GLCD】ディスプレイのいろんなところに表示させてみる。

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

http://taki-lab.site/bocci/?p=3125

前回でLCDディスプレイの初期化も終わってますし、データを書き込む関数も一通り揃っています。

なので、いろいろ書いてみましょうか。

とはいっても、今の状態では、ドット単位で表示する/しないの設定しかできませんが。

def __main():
    PinsInit(20, 7, 8, 9, 18, 19, 10, 11, 12, 13, 14, 15, 16, 17)
    GLCDInit()
    GLCDDisplayClear()
    SelectIC(1)
    SetPage(0)
    SetAddress(0)
    WriteData(0xFF)
    try:
        while True:
            time.sleep(1.0)
    except KeyboardInterrupt:
        GPIO.cleanup()

ICチップ1番、ページ0、アドレス0に0xFF(全点灯)を設定します。

左上一列が点灯しました。(分かるかな・・・)

ICチップ1番、ページ1、アドレス1に書き込みました。

ICチップ1番、ページ7、アドレス63に書き込みました。

ICチップ2番、ページ0、アドレス0に書き込みました。

ICチップ2番、ページ7、アドレス63に書き込みました。

右下の4ドットは右上に表示するアイコンに対応しています。

なので、LCDを全点灯した場合、右下4ドット分は欠けて見えます。

まぁ、ここまでをまとめると、

こういうことですな。

ここまで分かれば、後はデータさえ用意できれば、いろいろ表示できそうだ。