diff --git a/app/Http/Controllers/Api/CardController.php b/app/Http/Controllers/Api/CardController.php index e5578d2..a336830 100644 --- a/app/Http/Controllers/Api/CardController.php +++ b/app/Http/Controllers/Api/CardController.php @@ -51,6 +51,8 @@ class CardController $metadata->tags()->sync($tagIds); } + $metadata->load('tags'); + $response = response($metadata); if (!config('app.debug')) { $response = $response->setCache(['public' => true, 'max_age' => 86400]); diff --git a/app/Metadata.php b/app/Metadata.php index d516b0b..2abd321 100644 --- a/app/Metadata.php +++ b/app/Metadata.php @@ -11,7 +11,7 @@ class Metadata extends Model protected $keyType = 'string'; protected $fillable = ['url', 'title', 'description', 'image', 'expires_at']; - protected $visible = ['url', 'title', 'description', 'image', 'expires_at']; + protected $visible = ['url', 'title', 'description', 'image', 'expires_at', 'tags']; protected $dates = ['created_at', 'updated_at', 'expires_at']; diff --git a/app/Tag.php b/app/Tag.php index 7d4cb9a..479d972 100644 --- a/app/Tag.php +++ b/app/Tag.php @@ -11,6 +11,9 @@ class Tag extends Model protected $fillable = [ 'name' ]; + protected $visible = [ + 'name' + ]; public function ejaculations() { diff --git a/resources/assets/js/checkin.ts b/resources/assets/js/checkin.ts index 7e54285..cb31293 100644 --- a/resources/assets/js/checkin.ts +++ b/resources/assets/js/checkin.ts @@ -1,9 +1,66 @@ import Vue from 'vue'; import TagInput from "./components/TagInput.vue"; +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, + metadataLoadState: MetadataLoadState.Inactive, + }, components: { - TagInput + TagInput, + MetadataPreview + }, + mounted() { + // オカズリンクにURLがセットされている場合は、すぐにメタデータを取得する + const linkInput = this.$el.querySelector("#link"); + if (linkInput && /^https?:\/\//.test(linkInput.value)) { + this.fetchMetadata(linkInput.value); + } + }, + methods: { + // オカズリンクの変更時 + onChangeLink(event: Event) { + if (event.target instanceof HTMLInputElement) { + const url = event.target.value; + + if (url.trim() === '' || !/^https?:\/\//.test(url)) { + this.metadata = null; + this.metadataLoadState = MetadataLoadState.Inactive; + return; + } + + this.fetchMetadata(url); + } + }, + // メタデータの取得 + fetchMetadata(url: string) { + this.metadataLoadState = MetadataLoadState.Loading; + + $.ajax({ + url: '/api/checkin/card', + method: 'get', + type: 'json', + data: { + url + } + }).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 new file mode 100644 index 0000000..eeada94 --- /dev/null +++ b/resources/assets/js/components/MetadataPreview.vue @@ -0,0 +1,119 @@ + + + + + diff --git a/resources/assets/js/components/TagInput.vue b/resources/assets/js/components/TagInput.vue index a2c1ff3..6c7908e 100644 --- a/resources/assets/js/components/TagInput.vue +++ b/resources/assets/js/components/TagInput.vue @@ -17,6 +17,7 @@ -@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..2e5984e 100644 --- a/resources/views/ejaculation/edit.blade.php +++ b/resources/views/ejaculation/edit.blade.php @@ -53,7 +53,9 @@
- + オカズのURLを貼り付けて登録することができます。 @@ -62,6 +64,7 @@ @endif
+
@@ -97,4 +100,4 @@ @push('script') -@endpush \ No newline at end of file +@endpush