Fixes bug in euromat answer check and updates party page

src/app/euromat/components/euromat.vue

@@ -2,7 +2,7 @@
   <section class="euromat">
     <div class="header-progress">
       <div>
-        <span class="progress-current">{{ currentThesis + 1 }}</span>
+        <span class="progress-current">{{ currentThesisStep }}</span>
         <span>/{{ thesesCount }}</span>
       </div>
       <button
@@ -64,6 +64,9 @@
       isGermanLocale () {
         return this.$i18n.locale === 'de'
       },
+      currentThesisStep () {
+        return this.currentThesis + 1
+      },
       thesisTitle () {
         if (this.currentThesis === this.thesesCount) {
           return
@@ -111,14 +114,15 @@
         if (!option) {
           return console.warn('Invalid answer')
         }
-        if (this.currentThesis === this.thesesCount - 1) {
-          this.forwardToResults()
-        }
 
         const thesis = this.getThesis(this.currentThesis)
         this.answers.push({ thesis: thesis.id, position: option.position })
         this.currentThesis += 1
         event && event.target.blur()
+
+        if (this.currentThesis === this.thesesCount) {
+          this.forwardToResults()
+        }
       },
       forwardToResults () {
         sessionStorage.setItem('euromat-answers', JSON.stringify(this.answers))

src/app/euromat/components/results.vue

@@ -52,10 +52,6 @@
   import { parties } from '@/data'
   import Progress from '@/components/progress'
 
-  // FIXME: There is a bug that not all theses are send to localStorage.
-  // We have 30 theses now, but only 29 are stored. Hence I check if
-  // answers is even an object.
-
   const addUp = (a, b) => a + b
 
   export default {

src/app/euromat/i18n.js

@@ -15,7 +15,7 @@ export default {
         pageTitle: 'Ergebnis',
         headline: 'Dein Ergebnis',
         entry: 'Super, Sie haben es geschafft! Gespannt, wie Ihr Ergebnis ausfällt? Hier ist es auch schon:',
-        thanks: 'Danke, dass Sie den EUROMAT genutzt haben. Wir hoffen es hat Ihnen Freude bereitet und vergessen Sie nicht: am 24. September ist Bundestagswahl!',
+        thanks: 'Danke, dass Sie den Euromat genutzt haben. Wir hoffen es hat Ihnen Freude bereitet und vergessen Sie nicht: am 24. September ist Bundestagswahl!',
         buttons: {
           startover: 'Euromat wiederholen',
           index: 'Zur Startseite'
@@ -46,7 +46,7 @@ export default {
         pageTitle: 'Results',
         headline: 'Your results',
         entry: 'Great, you made it! Curious about your result? We won\'t keep you any longer, here it is:',
-        thanks: 'Thanks for using EUROMAT. We hope you enjoyed it and don\'t forget: 24. September is election day!',
+        thanks: 'Thanks for using Euromat. We hope you enjoyed it and don\'t forget: 24. September is election day!',
         buttons: {
           startover: 'Start over',
           index: 'Back to landing page'

src/app/party/components/index.vue

@@ -1,19 +1,170 @@
 <template>
   <section>
-    <router-link :to="{ path: '/thesen/ergebnis' }">
-      {{ $t('party.back') }}
-    </router-link>
+    <header class="party-header">
+      <div class="party-header-logo">
+        <img :src="partyLogo" :width="logoSize" :height="logoSize" :alt="partyName" />
+      </div>
 
-    <h1>Partei {{ $route.params.token }}</h1>
+      <div class="party-header-info">
+        <router-link v-if="!!answers" class="btn btn-dark btn-small" :to="{ path: resultsPath }">
+          {{ $t('party.back') }}
+          <feather-corner-up-left />
+        </router-link>
+        <h1>{{ partyName }}</h1>
+      </div>
+    </header>
+
+    <ul class="party-theses-list">
+      <li class="list-header">
+        <h2>Thesis</h2>
+        <h2>Partei</h2>
+        <h2>Deine Wahl</h2>
+      </li>
+      <li v-for="thesis in theses">
+        <div class="list-thesis">
+          <span>{{ getCategory(thesis.category) }}</span>
+          <h3>{{ getThesis(thesis.thesis) }}</h3>
+        </div>
+
+        <div class="list-statements">
+          <div class="statements-party">
+            <feather-icon :type="getPartyStatement(thesis.id)" />
+          </div>
+          <div v-if="!!answers" class="statements-user">
+            <feather-icon :type="getUserStatement(thesis.id)" />
+          </div>
+        </div>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script>
+  import { parties, theses } from '@/data'
   export default {
-    name: 'Party'
+    name: 'Party',
+
+    data () {
+      return {
+        logoSize: 60,
+        partyLogo: require(`@/assets/svg/${this.$route.params.token}-logo.svg`),
+        party: parties.find(p => p.token === this.$route.params.token.toUpperCase()),
+        answers: JSON.parse(sessionStorage.getItem('euromat-answers')),
+        theses
+      }
+    },
+
+    computed: {
+      isGermanLocale () {
+        return this.$i18n.locale === 'de'
+      },
+      resultsPath () {
+        return this.isGermanLocale
+          ? '/thesen/ergebnis'
+          : '/theses/results'
+      },
+      partyName () {
+        return this.party.name[this.$i18n.locale]
+      }
+    },
+
+    methods: {
+      getCategory (category) {
+        return category[this.$i18n.locale]
+      },
+      getThesis (thesis) {
+        return thesis[this.$i18n.locale]
+      },
+      positionToIconName (position) {
+        switch (position) {
+          case 'positive':
+            return 'thumbs-up'
+          case 'negative':
+            return 'thumbs-down'
+          case 'skipped':
+            return 'corner-up-right'
+          case 'neutral':
+          default:
+            return 'circle'
+        }
+      },
+      getPartyStatement (id) {
+        return this.positionToIconName(
+          this.party.positions.find(p => p.thesis === id).position
+        )
+      },
+      getUserStatement (id) {
+        return this.positionToIconName(
+          this.answers.find(a => a.thesis === id).position
+        )
+      }
+    }
   }
 </script>
 
 <style lang="scss" scoped>
+  @import "~styles/colors";
   @import "~styles/layout";
+
+  .party-header {
+    display: flex;
+    align-items: flex-start;
+
+    .party-header-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-right: $small-gap;
+
+      .btn {
+        margin-bottom: $small-gap / 2;
+      }
+    }
+
+    .party-header-logo {
+      margin-right: $small-gap;
+      background: $background-secondary;
+      padding: $small-gap;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      box-shadow: $button-shadow;
+
+      img {
+        object-fit: contain;
+      }
+    }
+  }
+
+  .party-theses-list {
+    margin-top: $base-gap;
+    list-style: none;
+
+    .list-header {
+      background: $transparent-white;
+      border-radius: $border-radius;
+
+      h2 {
+        font-size: $font-size-base;
+        color: $text-color-base;
+        margin: 0;
+      }
+    }
+
+    li {
+      padding: $small-gap 0;
+      display: flex;
+    }
+
+    li:not(:last-child):not(.list-header) {
+      border-bottom: 2px dashed $transparent-white;
+    }
+
+    .list-thesis {
+      span {
+        color: $text-color-secondary;
+      }
+    }
+  }
 </style>

src/app/party/i18n.js

@@ -1,12 +1,14 @@
 export default {
   de: {
     party: {
-      back: 'Zurück'
+      pageTitle: 'Partei',
+      back: 'Zurück zum Ergebnis'
     }
   },
   en: {
     party: {
-      back: 'Back'
+      pageTitle: 'Party',
+      back: 'Back to results'
     }
   }
 }

src/app/party/routes.js

@@ -1,10 +1,17 @@
 import Party from './components/index'
+import i18n from './i18n'
 
 export default [
   {
     path: '/partei/:token',
     alias: '/party/:token',
     name: 'party',
-    component: Party
+    component: Party,
+    meta: {
+      title: {
+        de: i18n.de.party.pageTitle,
+        en: i18n.en.party.pageTitle
+      }
+    }
   }
 ]

src/data/parties.json

@@ -1,6 +1,9 @@
 [
   {
-    "name": "Christlich Demokratische Union Deutschlands",
+    "name": {
+      "de": "Christlich Demokratische Union Deutschlands",
+      "en": "Christian Democratic Union of Germany"
+    },
     "token": "CDU",
     "id": 0,
     "positions": [
@@ -157,7 +160,10 @@
     ]
   },
   {
-    "name": "Sozialdemokratische Partei Deutschlands",
+    "name": {
+      "de": "Sozialdemokratische Partei Deutschlands",
+      "en": "Social Democratic Party of Germany"
+    },
     "token": "SPD",
     "id": 1,
     "positions": [
@@ -314,7 +320,10 @@
     ]
   },
   {
-    "name": "Die Linke",
+    "name": {
+      "de": "Die Linke",
+      "en": "The Left"
+    },
     "token": "LINKE",
     "id": 2,
     "positions": [
@@ -471,7 +480,10 @@
     ]
   },
   {
-    "name": "Bündnis 90/Die Grünen",
+    "name": {
+      "de": "Bündnis 90/Die Grünen",
+      "en": "Alliance 90/The Greens"
+    },
     "token": "GRÜNE",
     "id": 3,
     "positions": [
@@ -628,7 +640,10 @@
     ]
   },
   {
-    "name": "Freie Demokratische Partei",
+    "name": {
+      "de": "Freie Demokratische Partei",
+      "en": "Free Democratic Party"
+    },
     "token": "FDP",
     "id": 4,
     "positions": [