Error handling

client/src/components/Card/MealVerticalCard.vue

@@ -4,11 +4,15 @@
     href="#"
   >
     <div class="card-img-top-container">
-      <img
-        :src="order.meal.image"
-        alt="photo of the restaurant"
-        class="card-img-top"
-      >
+      <transition name="fade">
+        <img
+          v-show="imgLoaded"
+          :src="order.meal.image"
+          alt="photo of the restaurant"
+          class="card-img-top"
+          @load="imgLoaded = true"
+        >
+      </transition>
     </div>
     <div class="card-body">
       <h5 class="card-title m-0">
@@ -31,24 +35,27 @@
 </template>
 
 <script>
-import SkelentonBox from '../Placeholder/SkeletonBox'
 import { padEndFilter, textTruncateFilter } from '../../utils/mixins'
 
 export default {
-  components: {
-    SkelentonBox
-  },
   mixins: [padEndFilter, textTruncateFilter],
   props: {
     order: {
       type: Object,
       required: true
     }
+  },
+  data () {
+    return {
+      imgLoaded: false
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@include fadeAnimation;
+
 .card {
   border: none;
   transition: opacity .2s linear;

client/src/components/Card/RestaurantCard.vue

@@ -9,12 +9,15 @@
         :width="'100%'"
         :height="'200px'"
       />
-      <img
-        v-if="!isLoading"
-        :src="restaurant.image || '@/assets/placeholder-image/logo/1260x750.png'"
-        alt="photo of the restaurant"
-        class="card-img-top"
-      >
+      <transition name="fade">
+        <img
+          v-show="!isLoading && imgLoaded"
+          :src="restaurant.image || '@/assets/placeholder-image/logo/1260x750.png'"
+          alt="photo of the restaurant"
+          class="card-img-top"
+          @load="imgLoaded = true"
+        >
+      </transition>
     </div>
     <div class="card-body">
       <h5 class="card-title m-0">
@@ -74,11 +77,18 @@ export default {
       type: Boolean,
       default: false
     }
+  },
+  data () {
+    return {
+      imgLoaded: false
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+@include fadeAnimation;
+
 .card {
   transition: opacity .2s linear;
 

client/src/views/Login.vue

@@ -159,7 +159,7 @@ export default {
         // fire error messages
         Toast.fire({
           type: 'error',
-          title: '目前無法登入，請稍後再試'
+          title: '帳號密碼有誤'
         })
       }
     }

client/src/views/OwnerDishEdit.vue

@@ -111,8 +111,10 @@ export default {
         // fire error messages
         Toast.fire({
           type: 'error',
-          title: '無法更新資料，請稍後再試'
+          title: '無法取得餐點資料，請稍後再試'
         })
+        // back to last page
+        this.$router.go(-1)
       }
     },
     async handleAfterSubmit (formData) {

server/location/district.json

@@ -3,15 +3,15 @@
     "chinese_name": "大安區",
     "eng_name": "Da'an",
     "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Taipei_Daan_Park_-_Ecological_Pool_-_20180805_-_02.jpg/1821px-Taipei_Daan_Park_-_Ecological_Pool_-_20180805_-_02.jpg",
-    "lng": 121.5434446,
-    "lat": 25.02677012
+    "lng": 121.543601,
+    "lat": 25.033331
   },
   {
     "chinese_name": "信義區",
     "eng_name": "Xinyi",
     "image": "https://images.unsplash.com/photo-1571566988511-67a346198378?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=8107&q=80",
-    "lng": 121.5716697,
-    "lat": 25.03062083
+    "lng": 121.566550,
+    "lat": 25.037971
   },
   {
     "chinese_name": "中山區",
@@ -24,7 +24,7 @@
     "chinese_name": "松山區",
     "eng_name": "Songshan",
     "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/TransGlobe_Life_headquarters_at_Ruentex_Songshan_Station_Complex_B_20170812.jpg/768px-TransGlobe_Life_headquarters_at_Ruentex_Songshan_Station_Complex_B_20170812.jpg",
-    "lng": 121.5575876,
-    "lat": 25.05999101
+    "lng": 121.554291,
+    "lat": 25.054676
   }
 ]