collect quotes: show examples

client/src/components/CollectQuotes.vue

@@ -1,18 +1,109 @@
 <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 {
 
+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>

client/src/plugins/engine/getMyQuotes.js

@@ -0,0 +1,12 @@
+export default async function() {
+  const { store } = this.context
+
+  try {
+    const response = await this.callApi('/api/getQuotes', {
+      g: store.state.engine.user?.game,
+    })
+    store.commit('myQuotes/setQuotes', response.data.quotes)
+  } catch(e) {
+    store.commit('myQuotes/setQuotes', undefined)
+  }
+}

client/src/plugins/engine/index.js

@@ -10,6 +10,8 @@ import continueGame from './continueGame'
 import finishGame from './finishGame'
 import parseSyncData from './parseSyncData'
 import saveSelection from './saveSelection'
+import getMyQuotes from './getMyQuotes'
+import saveQuote from './saveQuote'
 
 export default (context, inject) => {
   const engine = {
@@ -24,6 +26,8 @@ export default (context, inject) => {
     fetchUpdate,
     fetchUserInfo,
     collectQuotes,
+    getMyQuotes,
+    saveQuote,
     startGame,
     resetGame,
     continueGame,

client/src/plugins/engine/saveQuote.js

@@ -0,0 +1,9 @@
+export default async function(id, quote) {
+  const { store } = this.context
+
+  await this.callApi('/api/saveQuote', {
+    g: store.state.engine.user?.game,
+    id,
+    quote,
+  })
+}

client/src/store/myQuotes.js

@@ -0,0 +1,13 @@
+export const state = () => ({
+  quotes: [],
+})
+
+export const mutations = {
+  setQuotes(state, list) {
+    if (typeof list === 'undefined') {
+      state.quotes = []
+    } else {
+      state.quotes = list
+    }
+  },
+}