【バンドリ】【ガルパ】12/22のハロハピ放送局で発表された内容について

今回も新情報一杯でしたね。


カバー曲の追加

甲賀忍法帖

バジリスク 〜甲賀忍法帖〜 のOPテーマで2005年の曲でした。

予想、レベル25。

FULLバージョン楽曲

予想、レベル27。

フィルムライブMV追加

行く年来る年カバー楽曲キャンペーン

いやー、伝号ゲーム、見ていてヒヤヒヤしました。

GO!!!

『NARUTO -ナルト-』第4期オープニングテーマ で、2004年の楽曲です。

DJプレイの楽曲で必ず流れる名曲ですね。

予想レベル26

花ハ踊レヤいろはにほ

ハナヤマタのOPで、2014年の楽曲です。

予想レベル24

創聖のアクエリオン

創聖のアクエリオンのOPで、2005年の楽曲です。

公式のMVがYouTube無かった・・・

予想レベル25

他にも年末年始や24時間バンドリTVと連動してキャンペーンを開催する予定とのことですので、詳細はアプリ内のお知らせをご確認くださいまし。

【自作PC】メモリを増設してみた結果、その後。。。

前回は

見事にPCが動かない、メモリを新しい物に交換しても動かないという結果でした。

と言うことで、

買ってきました。

型番が、HX426C16FB2K2/16。今使用しているやるの完全に色違いの物です。

ちなみに、前回買って、動かなかったメモリの型番は HX426C16FB3K2/16でした。

2と3で何が違うんですかね?

知っている人教えて欲しい。

開封。

装着。

そして電源ON。

・・・画面に何も表示されませんでした。

まじか。

念のため、新しい方のメモリのみを挿して動かしてみました。

・・・動いた。

新しい方でも動いたと言うことはメモリ自体に不具合はないようです。

となると、電源の容量が足りない?

今使用しているヤツが、400Wの電源です。(低価格で購入しました。)

まぁ、少ない方です(安いので)。

確か、昨日ツクモに行ったら6000円ぐらいで650Wの電源あったような気がする。

それに交換してみよう。

ちなみに、動かないメモリはツクモで4200円で買い取って貰いました。

やっぱりメモリは一番相性云々が出てくるところなので、店頭で相性保証付けて貰うのが一番いいね。

【Laravel】【Vue.js】【ホテル予約管理】予約一覧を表示する

前回までの状況はこちら

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

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

さて、前回はフィルタの部分を作りましたが、今回は実際に予約一覧を取得して、表示させます。

まずは、予約一覧を取得するAPIを作ります。

ルーティング

Route::post('/api/registers', 'ApiController@registers');

コントローラー

    public function registers(Request $request)
    {
        return response()->json(['registerLists' => $this->registerManagement->getListByMonth(
            $request->year,
            $request->month,
            $request->room
        )]);
    }

コントローラで受け取るのは、前回作ったフィルタのパラメータをPOSTで受け取る、というやり方です。

そして、結果をJsonで返すという感じになります。

ではVueの実装です。

<template>
    <div>
        <table>
            <tbody>
                <tr>
                    <td>
                        <select v-model="selectYear" @click="getRegisters">
                            <option v-for="year in years" v-bind:value="year.value">{{ year.text }}</option>
                        </select>
                    </td>
                    <td>年</td>
                    <td>
                        <select v-model="selectMonth" @click="getRegisters">
                            <option v-for="month in months" v-bind:value="month.value">{{ month.text }}</option>
                        </select>
                    </td>
                    <td>月</td>
                        <select v-model="selectRoom" @click="getRegisters">
                            <option v-for="room in rooms" v-bind:value="room.id">{{ room.name }}</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="management">
            <tbody>
                <tr>
                    <th class="name">名前</th>
                    <th class="date">宿泊日</th>
                    <th class="checkout">チェックアウト</th>
                </tr>
                <tr v-for="register in registers">
                    <td class="name">{{ register.name }}</td>
                    <td class="date">{{ register.start_day }}</td>
                    <td class="checkout">{{ register.checkout }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

まず、フィルタの方は、コントロールを選択すると、予約一覧を取得する処理が走るようにしています。@click=”getRegisters”の部分です。

では、実際の処理。

<script>
    export default {
        data() {
            return {
                selectYear: 2019,
                years:[ 
                    {text:'2019',value:2019},
                    {text:'2020',value:2020},
                ],
                selectMonth: 1,
                months:[ 
                    {text:'1',value:1},
                    {text:'2',value:2},
                    {text:'3',value:3},
                    {text:'4',value:4},
                    {text:'5',value:5},
                    {text:'6',value:6},
                    {text:'7',value:7},
                    {text:'8',value:8},
                    {text:'9',value:9},
                    {text:'10',value:10},
                    {text:'11',value:11},
                    {text:'12',value:12},
                ],
                selectRoom: 0,
                rooms: [],
                result: [],
                param: {
                    year: 2019,
                    month: 1,
                    room: 1
                },
                registers: []
            }
        },
        created: function() {
            this.getRooms();
        },
        methods: {
            getRooms: function() {
                var self = this;
                axios.post('/api/rooms').then(function(response){
                    response.data.roomLists.forEach(element => {
                        self.rooms.push({id:element.id, name:element.name});
                    });
                }).catch(function(error){
                    console.log("失敗しました");
                });
            },
            getRegisters: function() {
                var self = this;
                this.param.year = this.selectYear;
                this.param.month = this.selectMonth;
                this.param.room = this.selectRoom;
                axios.post('/api/registers', this.param).then(function(response){
                    self.registers = [];
                    response.data.registerLists.forEach(element => {
                        self.registers.push(
                            {
                                id:element.id, 
                                name:element.name, 
                                start_day:element.start_day, 
                                checkout:element.checkout
                            }
                        );
                    });
                }).catch(function(error){
                    console.log("失敗しました");
                });
            }
        }
    }
</script>

getRegisters()が呼ばれると、フィルタの条件を取得し、POSTパラメータに設定して、POSTリクエストを投げます。

その結果をregistersに設定して、その結果をテンプレート側のtrタグのv-forでリスト表示させていく、という動きになります。

リンクを作って編集・削除もやりたかっかけど、なんかうまく行かないので、Ajaxゴリゴリの方法に作り変えます。