Merge branch 'staging'

README.md

@@ -23,3 +23,8 @@ $ yarn start
 # generate static project
 $ yarn generate
 ```
+
+## ステージング環境
+stagingブランチは
+https://staging--higa-database.netlify.app/
+に自動デプロイされます。

components/CoffeeCard.vue

@@ -1,37 +1,32 @@
 <template>
  <div class="card" v-if="coffee">
  <div class="card-content">
- <p class="title">
- {{ coffee.bean.name }}
+ <p class="title is-4">
+ <nuxt-link :to="'/reviews?bean=' + coffee.bean.id">
+ {{ coffee.bean.name }}
+ </nuxt-link>
  </p>
- <p class="subtitle">ID: {{ coffee.id }}</p>
+ <p class="subtitle is-6">Coffee-ID : {{ coffee.id }}</p>
  <ul>
- <li>登録された時間 : <ConvertTime :time="coffee.createdAt" /></li>
- <li>蒸らし時間 : {{ coffee.extractionTime }}min</li>
- <li>粉の量 : {{ coffee.powderAmount }}g</li>
- <li>水の量 : {{ coffee.waterAmount }}ml</li>
- <li>メッシュ : {{ coffee.meshId }}</li>
- <li>
- 湯温 :
- {{ coffee.waterTemperature }}
+ <li>抽出日 : <ConvertTime :time="coffee.createdAt" /></li>
+ <li v-if="coffee.dripper">
+ <UsersName :users="[coffee.dripper]">Dripper : </UsersName>
  </li>
- <li>
- 抽出方法 :
- {{ coffee.extractionMethodId }}
+ <li v-if="coffee.drinkers">
+ <UsersName :users="coffee.drinkers">Drinkers : </UsersName>
  </li>
- <li>
+ <li v-if="coffee.memo">
  メモ:
  {{ coffee.memo }}
  </li>
+ <CoffeeDetails v-if="showDetails" :coffee="coffee" />
  </ul>
  </div>
  <slot>
  <footer class="card-footer">
  <p class="card-footer-item" v-show="createReview">
  <span>
- <nuxt-link
- :to="'/reviews/create/' + coffee.id"
- class="button"
+ <nuxt-link :to="'/reviews/create/' + coffee.id" class="button"
  >レビューを書く</nuxt-link
  >
  </span>
@@ -41,9 +36,7 @@
  v-show="showReview && coffee.reviewId.length > 0"
  >
  <span>
- <nuxt-link
- :to="'reviews?coffeeId=' + coffee.id"
- class="button"
+ <nuxt-link :to="'reviews?coffeeId=' + coffee.id" class="button"
  >レビューを見る</nuxt-link
  >
  </span>
@@ -61,14 +54,18 @@
 
 <script>
 export default {
- props: ["coffee", "showReview","createReview"],
+ props: {
+ coffee: Object,
+ showReview: Boolean,
+ createReview: Boolean,
+ showDetails: { type: Boolean, default: true },
+ },
 
  computed: {
- fullPath: function() {
+ fullPath: function () {
  return "/reviews/create/" + this.coffee.id;
- }
- }
+ },
+ },
 };
 </script>
 
-<style></style>

components/CoffeeCards.vue

@@ -1,16 +1,43 @@
 <template>
- <div v-if="coffees">
- <div v-for="coffee in coffees" v-bind:key="coffee.id">
- <CoffeeCard :coffee="coffee" :user="user" :showReview="showReview" :createReview="createReview"></CoffeeCard>
- </div>
- </div>
+ <ul v-if="coffees" class="horizonal-list">
+ <li v-for="coffee in coffees" v-bind:key="coffee.id" class="horizonal-item">
+ <CoffeeCard
+ :coffee="coffee"
+ :showReview="showReview"
+ :createReview="createReview"
+ :showDetails="showDetails"
+ ></CoffeeCard>
+ </li>
+ <a class="view-more"><i class="fas fa-angle-double-right"></i></a>
+ </ul>
 </template>
 
 <script>
 export default {
- props: ["coffees", "user","showReview","createReview"],
+ props: {
+ coffees: Array,
+ showReview: Boolean,
+ createReview: Boolean,
+ showDetails: Boolean,
+ },
 };
 </script>
-
-<style>
+<style scoped>
+.horizonal-list {
+ overflow-x: auto;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+}
+.horizonal-item {
+ display: inline-block;
+ width: 80%;
+ max-width: 25em;
+ margin:0em 2em 1em 0em;
+ vertical-align: top;
+}
+.view-more {
+ display: inline-block;
+ margin-top: 2%;
+ font-size: 3em;
+}
 </style>

components/CoffeeDetails.vue

@@ -0,0 +1,29 @@
+<template>
+ <div>
+ <li v-if="coffee.extractionTime">
+ 蒸らし時間 : {{ coffee.extractionTime }}min
+ </li>
+ <li v-if="coffee.powderAmount">粉の量 : {{ coffee.powderAmount }}g</li>
+ <li v-if="coffee.waterAmount">水の量 : {{ coffee.waterAmount }}ml</li>
+ <li v-if="coffee.meshId">メッシュ : {{ coffee.meshId }}</li>
+ <li v-if="coffee.waterTemperature">
+ 湯温 :
+ {{ coffee.waterTemperature }}
+ </li>
+ <li v-if="coffee.extractionMethod">
+ 抽出方法 :
+ {{ coffee.extractionMethod.name }}
+ </li>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ coffee: Object,
+ },
+};
+</script>
+
+<style>
+</style>

components/ConvertTime.vue

@@ -9,9 +9,9 @@ export default {
  convertJapaneseTime() {
  let date = new Date(this.time);
  date.setHours(date.getHours() - 9);
- return date.toLocaleString("ja");
- }
- }
+ return date.toLocaleString("ja").slice(0, -3);
+ },
+ },
 };
 </script>
 

components/GlobalMenu.vue

@@ -0,0 +1,183 @@
+<template>
+ <Slide :closeOnNavigation="true">
+ <nuxt-link to="/" :class="{ isSelected: isDataSelected }"
+ ><i class="fas fa-home"></i>　トップ</nuxt-link
+ >
+ <nuxt-link to="/data" :class="{ isSelected: isDataSelected }"
+ ><i class="far fa-chart-bar"></i>　みる</nuxt-link
+ >
+
+ <nuxt-link to="/reviews/" :class="{ isSelected: isReadReviewSelected }"
+ ><i class="fas fa-book"></i>　よむ</nuxt-link
+ >
+
+ <nuxt-link
+ to="/reviews/create"
+ :class="{ isSelected: isCreateReviewSelected, notActive: !isLogin }"
+ ><i class="fas fa-pen"></i>　かく</nuxt-link
+ >
+
+ <nuxt-link
+ to="/coffees/create"
+ :class="{ isSelected: isCreateCoffeeSelected, notActive: !isLogin }"
+ ><i class="fas fa-hourglass-half"></i>　いれる</nuxt-link
+ >
+
+ <nuxt-link
+ to="/mypage"
+ :class="{ isSelected: isMypageSelected, notActive: !isLogin }"
+ ><i class="fas fa-user"></i>　マイページ</nuxt-link
+ >
+ <LoginButton />
+ <div v-show="!isLogin">
+ <button @click="$router.push('/signup')" type="button" class="button">
+ サインアップ
+ </button>
+ </div>
+ </Slide>
+</template>
+
+<script>
+export default {
+ data: () => {
+ return {
+ isMenuActive: false,
+ isDataSelected: false,
+ isMypageSelected: false,
+ isCreateReviewSelected: false,
+ isCreateCoffeeSelected: false,
+ isReadReviewSelected: false,
+ isLogin: false,
+ };
+ },
+
+ created() {
+ this.changeSelectedPage();
+ this.isLogin = this.$store.state.currentUser !== null;
+ },
+ computed: {
+ user() {
+ return this.$store.state.currentUser;
+ },
+ },
+
+ methods: {
+ toggleMenu() {
+ this.isMenuActive = !this.isMenuActive;
+ },
+
+ changeSelectedPage() {
+ this.isDataSelected = false;
+ this.isMypageSelected = false;
+ this.isCreateReviewSelected = false;
+ this.isCreateCoffeeSelected = false;
+ this.isReadReviewSelected = false;
+ switch (this.$route.name) {
+ case "data":
+ this.isDataSelected = true;
+ break;
+ case "mypage":
+ this.isMypageSelected = true;
+ break;
+ case "reviews-create":
+ this.isCreateReviewSelected = true;
+ break;
+ case "coffees-create":
+ this.isCreateCoffeeSelected = true;
+ break;
+ case "reviews":
+ this.isReadReviewSelected = true;
+ break;
+ default:
+ break;
+ }
+ },
+ },
+
+ watch: {
+ $route() {
+ this.isMenuActive = false;
+ this.changeSelectedPage();
+ },
+ user(val) {
+ this.isLogin = val !== null;
+ },
+ },
+};
+</script>
+
+<style scoped lang="scss">
+
+.isSelected {
+ font-weight: bold;
+}
+
+.notActive {
+ opacity: 0.3;
+}
+// <Slide>にスタイル指定。
+::v-deep {
+ .bm-burger-button {
+ position: fixed;
+ width: 36px;
+ height: 30px;
+ left: 1.5em;
+ top: 25px;
+ cursor: pointer;
+ z-index: 100;
+ }
+ .bm-burger-bars {
+ background-color: #373a47;
+ }
+ .line-style {
+ position: absolute;
+ height: 20%;
+ left: 0;
+ right: 0;
+ }
+ .cross-style {
+ position: absolute;
+ top: 12px;
+ right: 2px;
+ cursor: pointer;
+ }
+ .bm-cross {
+ background: #bdc3c7;
+ }
+ .bm-cross-button {
+ height: 24px;
+ width: 24px;
+ }
+ .bm-menu {
+ height: 100%; /* 100% Full-height */
+ width: 0; /* 0 width - change this with JavaScript */
+ position: fixed; /* Stay in place */
+ z-index: 1000; /* Stay on top */
+ top: 0;
+ left: 0;
+ background-color: #eeeeee; /* Black*/
+ overflow-x: hidden; /* Disable horizontal scroll */
+ padding-top: 60px; /* Place content 60px from the top */
+ transition: 0.5s; /*0.5 second transition effect to slide in the sidenav*/
+ }
+
+ .bm-overlay {
+ background: rgba(0, 0, 0, 0.3);
+ }
+ .bm-item-list {
+ color: #b8b7ad;
+ margin-left: 10%;
+ font-size: 20px;
+ }
+ .bm-item-list > * {
+ display: flex;
+ text-decoration: none;
+ padding: 0.7em;
+ }
+ .bm-item-list > * > span {
+ margin-left: 10px;
+ font-weight: 700;
+ color: white;
+ }
+}
+</style>