From b8482e0e3c1a01ea72b0c7b8decefd901d5ccb4e Mon Sep 17 00:00:00 2001
From: shibafu <shibafu528@gmail.com>
Date: Tue, 11 Jun 2019 22:16:40 +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=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=81=A8=E3=82=BF?=
 =?UTF-8?q?=E3=82=B0=E5=80=99=E8=A3=9C=E9=81=B8=E6=8A=9E=E3=81=AE=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/checkin.ts                | 38 ++++++++++-
 .../assets/js/components/MetadataPreview.vue  | 66 +++++++++++++++++++
 resources/assets/js/components/TagInput.vue   |  5 ++
 .../assets/sass/components/_link-card.scss    | 23 ++++++-
 resources/views/ejaculation/checkin.blade.php |  7 +-
 resources/views/ejaculation/edit.blade.php    |  7 +-
 6 files changed, 140 insertions(+), 6 deletions(-)
 create mode 100644 resources/assets/js/components/MetadataPreview.vue

diff --git a/resources/assets/js/checkin.ts b/resources/assets/js/checkin.ts
index 7e54285..fb79cc7 100644
--- a/resources/assets/js/checkin.ts
+++ b/resources/assets/js/checkin.ts
@@ -1,9 +1,45 @@
 import Vue from 'vue';
 import TagInput from "./components/TagInput.vue";
+import MetadataPreview from './components/MetadataPreview.vue';
+
+export const bus = new Vue({name: "EventBus"});
 
 new Vue({
     el: '#app',
+    data: {
+        metadata: null
+    },
     components: {
-        TagInput
+        TagInput,
+        MetadataPreview
+    },
+    mounted() {
+        // TODO: 編集モード時はすぐにメタデータを取得する
+    },
+    methods: {
+        // オカズリンクの変更時
+        onChangeLink(event: Event) {
+            if (event.target instanceof HTMLInputElement) {
+                const url = event.target.value;
+
+                if (url.trim() === '' || !/^https?:\/\//.test(url)) {
+                    this.metadata = null;
+                    return;
+                }
+
+                $.ajax({
+                    url: '/api/checkin/card',
+                    method: 'get',
+                    type: 'json',
+                    data: {
+                        url
+                    }
+                }).then(data => {
+                    this.metadata = data;
+                }).catch(e => {
+                    this.metadata = null;
+                });
+            }
+        }
     }
 });
diff --git a/resources/assets/js/components/MetadataPreview.vue b/resources/assets/js/components/MetadataPreview.vue
new file mode 100644
index 0000000..aa3a542
--- /dev/null
+++ b/resources/assets/js/components/MetadataPreview.vue
@@ -0,0 +1,66 @@
+<template>
+    <div class="form-row" v-if="metadata !== null">
+        <div class="form-group col-sm-12">
+            <div class="card link-card-mini mb-2 px-0">
+                <div class="row no-gutters">
+                    <div class="col-4 justify-content-center align-items-center">
+                        <img :src="metadata.image" alt="Thumbnail" class="card-img-top-to-left bg-secondary">
+                    </div>
+                    <div class="col-8">
+                        <div class="card-body">
+                            <h6 class="card-title font-weight-bold" style="font-size: small;">{{ metadata.title }}</h6>
+                            <template v-if="suggestions.length > 0">
+                                <p class="card-text mb-2" style="font-size: small;">タグ候補<br><span class="text-secondary">(クリックするとタグ入力欄にコピーできます)</span></p>
+                                <ul class="list-inline d-inline">
+                                    <li v-for="tag in suggestions"
+                                        class="list-inline-item badge badge-primary metadata-tag-item"
+                                        @click="addTag(tag)"><span class="oi oi-tag"></span> {{ tag }}</li>
+                                </ul>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+    import {Vue, Component, Prop} from "vue-property-decorator";
+    import {bus} from "../checkin";
+
+    type Metadata = {
+        url: string,
+        title: string | null,
+        description: string | null,
+        image: string | null,
+        expires_at: string | null,
+        tags: {
+            name: string
+        }[],
+    };
+
+    @Component
+    export default class MetadataPreview extends Vue {
+        @Prop() readonly metadata!: Metadata | null;
+
+        addTag(tag: string) {
+            bus.$emit("add-tag", tag);
+        }
+
+        get suggestions() {
+            if (this.metadata === null) {
+                return [];
+            }
+
+            return this.metadata.tags.map(t => t.name);
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .metadata-tag-item {
+        cursor: pointer;
+        user-select: none;
+    }
+</style>
diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue
index a2c1ff3..5da6bfb 100644
--- a/resources/assets/js/components/TagInput.vue
+++ b/resources/assets/js/components/TagInput.vue
@@ -17,6 +17,7 @@
 
 <script lang="ts">
     import {Vue, Component, Prop} from "vue-property-decorator";
+    import {bus} from "../checkin";
 
     @Component
     export default class TagInput extends Vue {
@@ -28,6 +29,10 @@
         tags: string[] = this.value.trim() !== "" ? this.value.trim().split(" ") : [];
         buffer: string = "";
 
+        created() {
+            bus.$on("add-tag", (tag: string) => this.tags.push(tag));
+        }
+
         onKeyDown(event: KeyboardEvent) {
             if (this.buffer.trim() !== "") {
                 switch (event.key) {
diff --git a/resources/assets/sass/components/_link-card.scss b/resources/assets/sass/components/_link-card.scss
index 476bbda..5d1e358 100644
--- a/resources/assets/sass/components/_link-card.scss
+++ b/resources/assets/sass/components/_link-card.scss
@@ -28,4 +28,25 @@
   .card-text {
     white-space: pre-line;
   }
-}
\ No newline at end of file
+}
+
+// チェックイン画面用
+.link-card-mini {
+    $height: 150px;
+
+    .row > div {
+        overflow: hidden;
+    }
+
+    .row > div:first-child {
+        display: flex;
+
+        &:not([display=none]) {
+            height: $height;
+        }
+    }
+
+    .card-text {
+        white-space: pre-line;
+    }
+}
diff --git a/resources/views/ejaculation/checkin.blade.php b/resources/views/ejaculation/checkin.blade.php
index 6355014..63df756 100644
--- a/resources/views/ejaculation/checkin.blade.php
+++ b/resources/views/ejaculation/checkin.blade.php
@@ -52,7 +52,9 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="link"><span class="oi oi-link-intact"></span> オカズリンク</label>
-                        <input id="link" name="link" type="text" autocomplete="off" class="form-control {{ $errors->has('link') ? ' is-invalid' : '' }}" placeholder="http://..." value="{{ old('link') ?? $defaults['link'] }}">
+                        <input id="link" name="link" type="text" autocomplete="off" class="form-control {{ $errors->has('link') ? ' is-invalid' : '' }}"
+                               placeholder="http://..." value="{{ old('link') ?? $defaults['link'] }}"
+                               @change="onChangeLink">
                         <small class="form-text text-muted">
                             オカズのURLを貼り付けて登録することができます。
                         </small>
@@ -61,6 +63,7 @@
                         @endif
                     </div>
                 </div>
+                <metadata-preview :metadata="metadata"></metadata-preview>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
@@ -96,4 +99,4 @@
 
 @push('script')
     <script src="{{ mix('js/checkin.js') }}"></script>
-@endpush
\ No newline at end of file
+@endpush
diff --git a/resources/views/ejaculation/edit.blade.php b/resources/views/ejaculation/edit.blade.php
index 73b16d4..25f2215 100644
--- a/resources/views/ejaculation/edit.blade.php
+++ b/resources/views/ejaculation/edit.blade.php
@@ -53,7 +53,9 @@
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="link"><span class="oi oi-link-intact"></span> オカズリンク</label>
-                        <input id="link" name="link" type="text" autocomplete="off" class="form-control {{ $errors->has('link') ? ' is-invalid' : '' }}" placeholder="http://..." value="{{ old('link') ?? $ejaculation->link }}">
+                        <input id="link" name="link" type="text" autocomplete="off" class="form-control {{ $errors->has('link') ? ' is-invalid' : '' }}"
+                               placeholder="http://..." value="{{ old('link') ?? $ejaculation->link }}"
+                               @change="onChangeLink">
                         <small class="form-text text-muted">
                             オカズのURLを貼り付けて登録することができます。
                         </small>
@@ -62,6 +64,7 @@
                         @endif
                     </div>
                 </div>
+                <metadata-preview :metadata="metadata"></metadata-preview>
                 <div class="form-row">
                     <div class="form-group col-sm-12">
                         <label for="note"><span class="oi oi-comment-square"></span> ノート</label>
@@ -97,4 +100,4 @@
 
 @push('script')
     <script src="{{ mix('js/checkin.js') }}"></script>
-@endpush
\ No newline at end of file
+@endpush