Vuetifyを使ってデザインをつけてみた

15538 ワード
GraphQL Vuetify DynamoDB Vue.js nuxt.js DynamoDB テキストリンク

今回の記事は前回の記事の続編で、Vuetifyを使って、デザインを整えていきたいと思います。

前回の記事ではGraphQLでDynamoDBに保存されたデータを実際に画面上に出力する方法を記載しているので、興味のある方は是非見てみてください
GraphQL+DynamoDBを使って画面にデータを出力して見た

環境

  • Pug を使用
  • VuetifyのコンポーネントをUIで使用
  • コーディング規約は Nuxt.js に則って StandardJS
  • Visual Studio Code

現状

部屋番号はsortされているが、デザインがない状態

データ構造

現在以下のようなデータ構造です

v-iconを使ってみよう

v-iconコンポーネントを使って好きなアイコンを使ってみます。アイコンの一覧は公式のMaterial Iconsにページにまとめられてあります。

部屋のタイプに合わせてアイコンを以下のように表示させていこうと思います。
※アイコンの種類には特に拘っていないのでご了承ください。

Type Icon
single person
double wc
triple people
family home

実際にv-iconを表示させてみる

switch文を使い、部屋のデータに合わせて、v-icon名を返すgetRoomTypeIconメソッドを用意しました

methods

getRoomTypeIcon (room) {
      if (room.guestInfo) {
        switch (room.type) {
          case 'single':
            return 'person'
          case 'double':
            return 'wc'
          case 'triple':
            return 'people'
          case 'family':
            return 'home'
        }
      }
      return 'no_meeting_room'
    }

Vue上でgetRoomTypeIconメソッドを呼び出してあげましょう

home.vue
<template lang="pug">
v-container
   v-layout(
        row
        wrap
      )
        v-flex(
          xs12
          sm6
          md4
          lg4
          v-for="room in rooms"
          :key="room.name"
        )
          v-card.ma-3(
            flat
          )
            v-card-title
              | {{ room.number }}
              v-spacer
              span.mr-1(
               ) {{ room.status }}
            v-card-text(
               style="text-align:center; font-size:24px;"
            )
              v-icon(
                large
              ) {{ getRoomTypeIcon(room) }}
              v-spacer
               span(
                v-if="room.guestInfo"
               ) {{ room.guestInfo.name }}
</template>

以下のようにデザインが変わります。いい感じですね。

２つの日付の差を求めてみる

宿泊者のデータには宿泊開始日(startedAt)とチェックアウトをする日(leavesAt)のデータを持っています。
何日間宿泊するか、各部屋ごとに表示させていきたいと思います。

あらかじめjavascriptが用意してくれている組み込み関数new Dateオブジェクトを使って日数の差を計算していきます。

methods

getRoomDate (room) {
      if (room.guestInfo) {
        const day1 = new Date(room.guestInfo.startedAt)
        const day2 = new Date(room.guestInfo.leavesAt)
        const termDay = (day2 - day1) / 8640000 //24 * 60 * 60 * 1000

        return termDay
      } else {
        return 0
      }
    }

termDayでday2からday1の差を求めた後、 86400000で割っているのは、
DateオブジェクトからDateオブジェクトを引くとミリ単位で値が返ってくるからです。
そのため、値を１日分のミリ秒（24時間ｘ60分ｘ60秒ｘ1,000ミリ秒＝86,400,000ミリ秒)である事で日数を求めます。
※参考：DateオブジェクトMDN

Vue上でgetRoomDateメソッドを呼び出してあげましょう

home.vue
<template lang="pug">
v-container
  v-layout(
        row
        wrap
      )
        v-flex(
          xs12
          sm6
          md4
          lg4
          v-for="room in rooms"
          :key="room.name"
        )
          v-card.ma-3(
            flat
          )
            v-card-title
              | {{ room.number }}
              v-spacer
              span.mr-1(
               ) {{ room.status }}
            v-card-text(
               style="text-align:center; font-size:24px;"
            )
              v-icon(
                large
              ) {{ getRoomTypeIcon(room) }}
              v-spacer
               span(
                v-if="room.guestInfo"
               ) {{ room.guestInfo.name }}
             v-card-actions
                div.mr-2
                  v-icon.mr-1(
                    small
                  ) event
                  | {{ getRoomDate(room) }} {{ "days" }}

</template>

以下のようにデザインが変わりました。

vuetifyのアイコンを中心に紹介していきました。最近ライブラリが新調され他にもデザインを豊かにするコンポーネントがたくさん用意されています。是非試してみてください！