From e1dd2b1c8fe55cf491c55e63a34c682e3dcaf0ba Mon Sep 17 00:00:00 2001
From: shibafu <shibafu528@gmail.com>
Date: Fri, 28 Jun 2019 00:27:31 +0900
Subject: [PATCH] =?UTF-8?q?=E3=83=A1=E3=82=BF=E3=83=87=E3=83=BC=E3=82=BF?=
 =?UTF-8?q?=E3=81=AE=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E4=B8=AD=E3=83=BB?=
 =?UTF-8?q?=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BF=E5=A4=B1=E6=95=97=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/checkin.ts                | 15 +++++++++++-
 .../assets/js/components/MetadataPreview.vue  | 24 ++++++++++++++++---
 resources/views/ejaculation/checkin.blade.php |  2 +-
 resources/views/ejaculation/edit.blade.php    |  2 +-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/resources/assets/js/checkin.ts b/resources/assets/js/checkin.ts
index abd4beb..cb31293 100644
--- a/resources/assets/js/checkin.ts
+++ b/resources/assets/js/checkin.ts
@@ -4,10 +4,18 @@ import MetadataPreview from './components/MetadataPreview.vue';
 
 export const bus = new Vue({name: "EventBus"});
 
+export enum MetadataLoadState {
+    Inactive,
+    Loading,
+    Success,
+    Failed,
+}
+
 new Vue({
     el: '#app',
     data: {
-        metadata: null
+        metadata: null,
+        metadataLoadState: MetadataLoadState.Inactive,
     },
     components: {
         TagInput,
@@ -28,6 +36,7 @@ new Vue({
 
                 if (url.trim() === '' || !/^https?:\/\//.test(url)) {
                     this.metadata = null;
+                    this.metadataLoadState = MetadataLoadState.Inactive;
                     return;
                 }
 
@@ -36,6 +45,8 @@ new Vue({
         },
         // メタデータの取得
         fetchMetadata(url: string) {
+            this.metadataLoadState = MetadataLoadState.Loading;
+
             $.ajax({
                 url: '/api/checkin/card',
                 method: 'get',
@@ -45,8 +56,10 @@ new Vue({
                 }
             }).then(data => {
                 this.metadata = data;
+                this.metadataLoadState = MetadataLoadState.Success;
             }).catch(e => {
                 this.metadata = null;
+                this.metadataLoadState = MetadataLoadState.Failed;
             });
         }
     }
diff --git a/resources/assets/js/components/MetadataPreview.vue b/resources/assets/js/components/MetadataPreview.vue
index 90ed278..eeada94 100644
--- a/resources/assets/js/components/MetadataPreview.vue
+++ b/resources/assets/js/components/MetadataPreview.vue
@@ -1,8 +1,15 @@
 <template>
-    <div class="form-row" v-if="metadata !== null">
+    <div class="form-row" v-if="state !== MetadataLoadState.Inactive">
         <div class="form-group col-sm-12">
             <div class="card link-card-mini mb-2 px-0">
-                <div class="row no-gutters">
+                <div v-if="state === MetadataLoadState.Loading" class="row no-gutters">
+                    <div class="col-12">
+                        <div class="card-body">
+                            <h6 class="card-title text-center font-weight-bold text-info" style="font-size: small;"><span class="oi oi-loop-circular"></span> オカズの情報を読み込んでいます…</h6>
+                        </div>
+                    </div>
+                </div>
+                <div v-else-if="state === MetadataLoadState.Success" class="row no-gutters">
                     <div v-if="hasImage" class="col-4 justify-content-center align-items-center">
                         <img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
                     </div>
@@ -20,6 +27,13 @@
                         </div>
                     </div>
                 </div>
+                <div v-else class="row no-gutters">
+                    <div class="col-12">
+                        <div class="card-body">
+                            <h6 class="card-title text-center font-weight-bold text-danger" style="font-size: small;"><span class="oi oi-circle-x"></span> オカズの情報を読み込めませんでした</h6>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -27,7 +41,7 @@
 
 <script lang="ts">
     import {Vue, Component, Prop} from "vue-property-decorator";
-    import {bus} from "../checkin";
+    import {bus, MetadataLoadState} from "../checkin";
 
     type Metadata = {
         url: string,
@@ -42,8 +56,12 @@
 
     @Component
     export default class MetadataPreview extends Vue {
+        @Prop() readonly state!: MetadataLoadState;
         @Prop() readonly metadata!: Metadata | null;
 
+        // for use in v-if
+        private readonly MetadataLoadState = MetadataLoadState;
+
         addTag(tag: string) {
             bus.$emit("add-tag", tag);
         }
diff --git a/resources/views/ejaculation/checkin.blade.php b/resources/views/ejaculation/checkin.blade.php
index 63df756..e238440 100644
--- a/resources/views/ejaculation/checkin.blade.php
+++ b/resources/views/ejaculation/checkin.blade.php
@@ -63,7 +63,7 @@
                         @endif
                     </div>
                 </div>
-                <metadata-preview :metadata="metadata"></metadata-preview>
+                <metadata-preview :metadata="metadata" :state="metadataLoadState"></metadata-preview>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
diff --git a/resources/views/ejaculation/edit.blade.php b/resources/views/ejaculation/edit.blade.php
index 25f2215..2e5984e 100644
--- a/resources/views/ejaculation/edit.blade.php
+++ b/resources/views/ejaculation/edit.blade.php
@@ -64,7 +64,7 @@
                         @endif
                     </div>
                 </div>
-                <metadata-preview :metadata="metadata"></metadata-preview>
+                <metadata-preview :metadata="metadata" :state="metadataLoadState"></metadata-preview>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>