Added core logic to calculate results

src/app/app.vue

@@ -21,13 +21,24 @@
     box-sizing: border-box;
   }
 
+  html,
   body {
-    margin: 0;
+    width: 100vw;
+    height: 100vh;
   }
 
-  #app {
+  body {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  button {
+    padding: 10px;
+  }
+
+  main {
+    max-width: 50vw;
+    margin: 0 auto;
+  }
 </style>

src/app/euromat/components/euromat.vue

@@ -1,15 +1,17 @@
 <template>
   <section class="euromat">
-    <header>
-      <span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
-      <progress :value="currentThesis + 1" :max="thesesCount">
-        {{ currentThesis }}
-      </progress>
+    <header class="euromat-header">
+      <div class="header-progress">
+        <span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
+        <progress :value="currentThesis + 1" :max="thesesCount">
+          {{ currentThesis }}
+        </progress>
+      </div>
       <h1 class="thesis">{{ thesisTitle }}</h1>
     </header>
 
     <div class="euromat-controls">
-      <button type="button" @click="submitAnswer(optionSkip)">
+      <button class="controls-skip" type="button" @click="submitAnswer(optionSkip)">
         {{ optionSkip.label }}
       </button>
       <ul class="euromat-btns">
@@ -72,8 +74,24 @@
 </script>
 
 <style lang="scss" scoped>
+  .header-progress {
+    display: flex;
+
+    progress {
+      width: 100%;
+    }
+  }
+
+  .euromat-controls {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
   .euromat-btns {
     list-style: none;
     display: flex;
+    justify-content: center;
   }
 </style>

src/app/results/components/results.vue

@@ -3,24 +3,58 @@
     <router-link :to="{ path: '/' }">
       Zurück
     </router-link>
-    <code>{{ results }}</code>
+
+    <ul class="party-results">
+      <li v-for="party in parties">
+        <span>{{ party.token }}</span>
+        <progress :value="getPartyMatch(party)" :max="thesesCount">
+          {{ getPartyMatch(party) }}
+        </progress>
+      </li>
+    </ul>
   </section>
 </template>
 
 <script>
+  import { getParties, getParty, getThesesCount } from '@/utils/data'
+
   export default {
     name: 'Results',
 
     data () {
       return {
-        results: {}
+        results: {},
+        thesesCount: getThesesCount(),
+        parties: getParties()
+      }
+    },
+
+    methods: {
+      getPartyMatch (party) {
+        const { positions } = getParty(party.token)
+        return this.results.filter(answer =>
+          answer.option.position === positions[answer.thesis.id].position).length
       }
     },
 
     mounted () {
       this.results = JSON.parse(localStorage.getItem('results'))
+      console.log(this.results)
     }
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  .party-results {
+    list-style: none;
+    width: 100%;
+
+    li {
+      display: flex;
+    }
+
+    progress {
+      width: 100%;
+    }
+  }
+</style>

src/utils/data.js

@@ -16,3 +16,6 @@ export const getThesesCount = () =>
 
 export const getParty = token =>
   parties.find(p => p.token === token)
+
+export const getParties = () =>
+  parties