ImagePost.vue

<template>
  <div class="flex flex-row">
    <section class="flex flex-col flex-initial w-72 ml-4">
      <div>
        <div>
          <strong>Tags</strong>
          <ul class="pl-2">
            <li v-for="(imageTag, index) in imageTags" :key="index">
              {{ imageTag }}
            </li>
          </ul>
        </div>
        <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>
      <div>
        <strong>Options</strong>
        <ul class="pl-2">
          <li><button @click="removeImage">Remove</button></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">
          {{
            imageInfo.commentary && originalComment
              ? imageInfo.commentary
              : imageInfo.commentary_translation
          }}
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from "vuex";
import paths from "@/assets/js/paths.js";

export default {
  data: function () {
    return {
      imageTags: Array,
      originalComment: true,
      imageInfo: Object,
      flake: this.$route.params.flake,
    };
  },
  computed: {
    ...mapState(["stateUser"]),
  },
  methods: {
    async getImageTags() {
      const response = await fetch(`/api/image/${this.flake}/tag`);
      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 removeImage() {
      if (confirm("Remove image?")) {
        const options = {
          method: "DELETE",
          headers: { secret: this.stateUser.secret },
        };
        await fetch(paths.ImageField(this.flake), options);
        // Redirect back to home page after removing image
        this.$router.push({ name: "Home" });
      }
    },
  },
  async created() {
    this.imageTags = await this.getImageTags();
    this.imageInfo = await this.getImageInfo();
  },
};
</script>