flox/client/app/components/Content/Item.vue

<template>
  <transition mode="out-in" name="fade">
    <div class="item-wrap">
      <div class="item-image-wrap">
        <span v-if="localItem.rating" :class="'item-rating rating-' + localItem.rating" @click="changeRating()">
          <i class="icon-rating"></i>
        </span>
        <span v-if=" ! localItem.rating" class="item-rating item-new" :class="{disabled: disabled}" @click="addNewItem()">
          <span class="loader smallsize-loader" v-if="rated"><i></i></span>
          <i class="icon-add" v-if=" ! rated"></i>
        </span>
        <router-link :to="'/suggestions?for=' + localItem.tmdb_id" class="recommend-item">{{ lang('suggestions') }}</router-link>
        <span class="remove-item" v-if="localItem.rating && auth" @click="removeItem()">{{ lang('delete movie') }}</span>
        <img v-if="localItem.poster" :src="poster" class="item-image" width="185" height="278">
        <img v-if=" ! localItem.poster" :src="noImage" class="item-image" width="185" height="278">
      </div>

      <div class="item-content">
        <span v-if="date == 1" class="item-year">{{ released }}</span>
        <a :href="`https://www.youtube.com/results?search_query=${localItem.title} ${released} Trailer`" target="_blank" :title="localItem.title" class="item-title">{{ localItem.title }}</a>
        <span v-if="genre == 1" class="item-genre">{{ localItem.genre }}</span>
      </div>
    </div>
  </transition>
</template>

<script>
  import http from 'axios';
  import Helper from '../../helper';

  export default {
    mixins: [Helper],

    props: ['item', 'genre', 'date'],

    data() {
      return {
        localItem: this.item,
        saveTimeout: null,
        auth: config.auth,
        prevRating: null,
        rated: false,
        disabled: false
      }
    },

    computed: {
      poster() {
        if(this.localItem.rating) {
          return config.poster + this.localItem.poster;
        }

        return config.posterTMDB + this.localItem.poster;
      },

      noImage() {
        return config.url + '/assets/img/no-image.png';
      },

      released() {
        const path = this.$route.path;
        const released = new Date(this.localItem.released * 1000);

        if(path == '/upcoming') {
          const language = navigator.language || navigator.userLanguage;

          return released.toLocaleDateString(language, {
            year: 'numeric',
            month: 'numeric',
            day: 'numeric'
          });
        }

        return released.getFullYear();
      }
    },

    methods: {
      changeRating() {
        if(this.auth) {
          clearTimeout(this.saveTimeout);

          this.prevRating = this.localItem.rating;
          this.localItem.rating = this.prevRating == 3 ? 1 : +this.prevRating + 1;

          this.saveTimeout = setTimeout(() => {
            this.saveNewRating();
          }, 500);
        }
      },

      saveNewRating() {
        http.patch(`${config.api}/change-rating/${this.localItem.id}`, {rating: this.localItem.rating}).catch(error => {
          this.localItem.rating = this.prevRating;
          alert('Error in saveNewRating()');
        });
      },

      addNewItem() {
        if(this.auth) {
          this.disabled = true;
          this.rated = true;

          http.post(`${config.api}/add`, {item: this.localItem}).then(value => {
            this.localItem = value.data;
            this.disabled = false;
          }, error => {
            if(error.status == 409) {
              alert(this.localItem.title + ' already exists!');
            }
          });
        }
      },

      removeItem() {
        if(this.auth) {
          const confirm = window.confirm(this.lang('confirm delete'));

          if(confirm) {
            http.delete(`${config.api}/remove/${this.localItem.id}`).then(value => {
              this.localItem.rating = null;
            }, error => {
              alert('Error in removeItem()');
            });
          }
        }
      }
    }
  }
</script>