diff --git a/src/views/ImageView.vue b/src/views/ImageView.vue index ce80aee520afb063798badd6b3d54ba252570439..4d4e18344309e3ade8cffd371e1a76e1ed9de356 100644 --- a/src/views/ImageView.vue +++ b/src/views/ImageView.vue @@ -6,18 +6,50 @@ <strong>Tags</strong> <ul class="pl-2"> <li v-for="(imageTag, index) in imageTags" :key="index"> - {{ imageTag }} + {{ imageTag }} </li> </ul> </div> - </span> + <strong>Information</strong> + <ul class="pl-2"> + <li>ID: {{ imageInfo.snowflake }}</li> + <li>Uploader: {{ imageInfo.user }}</li> + <li v-if="imageInfo.source"> + Source: <a :href="imageInfo.source">{{ imageInfo.source }}</a> + </li> + </ul> + </div> + </section> + <section class="flex-auto ml-12"> + <img :src="`/api/image/${flake}/file`" alt="" class="max-w-4xl" /> + <div + v-if="imageInfo.commentary || imageInfo.commentary_translation" + class="bg-gray-200 bg-opacity-60 p-4 m-2" + > + <div><strong>Artist's commentary</strong></div> + <div> + <button @click="originalComment = true" v-if="imageInfo.commentary"> + <strong>Original</strong> + </button> + <span v-if="imageInfo.commentary && imageInfo.commentary_translation"> + | + </span> + <button + @click="originalComment = false" + v-if="imageInfo.commentary_translation" + > + <strong>Translation</strong> + </button> + </div> + <div class="break-words max-h-80 overflow-y-auto"> + {{ + originalComment + ? imageInfo.commentary + : imageInfo.commentary_translation + }} + </div> </div> </section> - <img - :src="`/api/image/${this.$route.params.flake}/file`" - alt="" - class="max-w-4xl ml-16" - /> </div> </template> @@ -26,6 +58,9 @@ export default { data: function () { return { imageTags: Array, + originalComment: true, + imageInfo: Object, + flake: this.$route.params.flake, }; }, methods: { @@ -34,9 +69,21 @@ export default { const imageTags = await response.json(); return imageTags; }, + async getImageInfo() { + const response = await fetch(`/api/image/${this.flake}`); + const imageInfo = await response.json(); + return { + commentary: imageInfo.commentary, + commentary_translation: imageInfo.commentary_translation, + snowflake: imageInfo.snowflake, + source: imageInfo.source, + user: imageInfo.user, + }; + }, }, async created() { this.imageTags = await this.getImageTags(); + this.imageInfo = await this.getImageInfo(); }, }; </script> \ No newline at end of file