knowyt/client/src/components/CollectQuotes.vue

<template>
  <div class="collect-quotes">
    <div class="collect-quotes__explain">
      <p>collecting ...</p>
    </div>
    <div class="collect-quotes__example-title">
      Beispiel:
    </div>
    <div class="collect-quotes__example-container">
      <transition name="collect-quotes-fade" mode="out-in">
        <div class="collect-quotes__example-text" :key="quoteNr">
          {{ exampleQuotes[quoteNr] }}
        </div>
      </transition>
    </div>
    <div class="collect-quotes__list" v-for="quote in quotes" :key="quote.id">
      <div class="collect-quotes__quote">
        {{ quote.quote }}
      </div>
      <div class="collect-quotes__actions">
        <div class="collect-quotes__icon collect-quotes__icon-edit" />
        <div class="collect-quotes__icon collect-quotes__icon-delete" />
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      quoteNr: 0,
      exampleQuotes: [
        'Um mir mein Studium zu finanzieren habe ich den Taxischein gemacht. Ich bin jedoch nie gefahren.',
        'Ich mag jede Nudelsorte ausser Spaghetti, die kann ich nicht ausstehen.',
        'Zuerst wollte ich Baugestaltung und Architekturgeschichte studieren. Der Studiengang war aber so voll, dass ich mich nach nur 3 Vorlesungen umentschieden und statt dessen Informatik studiert habe.',
        'Nach dem Abi habe ich fast ein Jahr lang in einer Tierarztpraxis gejobbt.',
        'Ich habe drei Mal meinem/meiner Partner:in zuliebe angefangen, "Herr der Ringe" zu schauen und bin jedes Mal dabei dabei eingeschlafen.',
        'Ich habe vier Meerschweinchen: Tick, Trick, Track und Alfred.',
      ],
    }
  },
  computed: {
    quotes() {
      return this.$store.state.myQuotes.quotes
    },
  },
  async fetch() {
    await this.$engine.getMyQuotes()
  },
  beforeMount() {
    this.quoteNr = Math.floor(Math.random() * this.exampleQuotes.length),
    this.timer = window.setInterval(function() {
      this.quoteNr = (this.quoteNr + 1) % this.exampleQuotes.length
    }.bind(this), 15000)
  },
  beforeDestroy() {
    window.clearInterval(this.timer)
  },
}
</script>

<style lang="scss">
.collect-quotes {

  &__example {

    &-title {
      margin: 20px 80px;
      font-family: 'Wendy One';
      color: #ffffff;
    }

    &-container {
      display: flex;
      margin: 20px 80px;
      height: 120px;
      padding: 0 20px;
      border: 1px solid white;
      border-radius: 20px;
      background-color: #6040c0;
      align-items: center;
    }
    &-text {
      text-align: justify;
      font-family: Dosis;
      font-size: 24px;
      color: #ffffff;

      &:before {
        content: '„';
      }
      &:after {
        content: '“';
      }
    }
  }
}
.collect-quotes-fade-enter-active,
.collect-quotes-fade-leave-active {
  transition: all 0.4s ease;
}
.collect-quotes-fade-enter,
.collect-quotes-fade-leave-to {
  opacity: 0;
}

</style>