Added i18n functionality

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "vue": "^2.3.3",
+    "vue-i18n": "^7.1.1",
     "vue-router": "^2.3.1",
     "vue-svgicon": "^1.2.4",
     "vuex": "^2.3.1"

src/app/404/components/index.vue

@@ -1,6 +1,9 @@
 <template>
   <section>
     <h1>404</h1>
+    <p>
+      Content to be written.
+    </p>
   </section>
 </template>
 
@@ -10,4 +13,10 @@
   }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  @import "~styles/layout";
+
+  h1 {
+    margin-bottom: $base-gap;
+  }
+</style>

src/app/euromat/components/index.vue

@@ -2,9 +2,7 @@
   <section class="euromat">
     <div class="header-progress">
       <span>{{ currentThesis + 1 }}/{{ thesesCount }}</span>
-      <progress :value="currentThesis + 1" :max="thesesCount">
-        {{ currentThesis }}
-      </progress>
+      <thesis-progress :value="currentThesis + 1" :max="thesesCount" />
     </div>
 
     <header class="euromat-header">
@@ -28,10 +26,15 @@
 
 <script>
   import { getAllOptions, getThesis, getThesesCount } from '@/utils/data'
+  import Progress from '@/components/progress'
 
   export default {
     name: 'EuroMat',
 
+    components: {
+      'thesis-progress': Progress
+    },
+
     data () {
       return {
         currentThesis: 0,
@@ -84,21 +87,8 @@
     align-items: center;
     margin-bottom: $base-gap * 2;
 
-    progress[value] {
-      appearance: none;
-      width: 100%;
-      height: 20px;
-      margin-left: 15px;
-
-      &::-webkit-progress-bar {
-        background: $dark-blue;
-        border-radius: $border-radius;
-      }
-
-      &::-webkit-progress-value {
-        background: $yellow;
-        border-radius: $border-radius;
-      }
+    span {
+      margin-right: 15px;
     }
   }
 

src/app/imprint/components/index.vue

@@ -1,6 +1,6 @@
 <template>
   <section>
-    <h1>Impressum</h1>
+    <h1>{{ $t('headline') }}</h1>
     <p>Content to be written.</p>
   </section>
 </template>

src/app/intro/components/index.vue

@@ -1,9 +1,9 @@
 <template>
   <section>
-    <h1>Willkommen beim EuroMat</h1>
-    <p>Content to be written.</p>
+    <h1>{{ $t('intro.headline') }}</h1>
+    <p>{{ $t('intro.content') }}</p>
     <router-link tag="button" :to="{ path: '/thesen' }">
-      Start
+      {{ $t('intro.button') }}
     </router-link>
   </section>
 </template>

src/app/intro/i18n.js

@@ -0,0 +1,16 @@
+export default {
+  de: {
+    intro: {
+      headline: 'Willkommen beim Euromat',
+      content: 'Content to be written.',
+      button: 'Start'
+    }
+  },
+  en: {
+    intro: {
+      headline: 'Welcome to Euromat',
+      content: 'Content to be written.',
+      button: 'Start'
+    }
+  }
+}

src/app/intro/index.js

@@ -1 +1,2 @@
 export { default as routes } from './routes'
+export { default as i18n } from './i18n'

src/app/results/components/index.vue

@@ -1,15 +1,16 @@
 <template>
   <section>
-    <router-link :to="{ path: '/' }">
-      Zurück
-    </router-link>
+    <header class="results-header">
+      <router-link :to="{ path: '/' }">
+        Zurück
+      </router-link>
+      <h1>Dein Ergebnis</h1>
+    </header>
 
     <ul class="party-results">
       <li v-for="party in parties">
-        <span>{{ party.token }}</span>
-        <progress :value="getPartyMatch(party)" :max="thesesCount">
-          {{ getPartyMatch(party) }}
-        </progress>
+        <h2>{{ party.token }}</h2>
+        <party-percentage :value="getPartyMatch(party)" :max="thesesCount" />
       </li>
     </ul>
   </section>
@@ -17,10 +18,15 @@
 
 <script>
   import { getParties, getParty, getThesesCount } from '@/utils/data'
+  import Progress from '@/components/progress'
 
   export default {
     name: 'Results',
 
+    components: {
+      'party-percentage': Progress
+    },
+
     data () {
       return {
         results: {},
@@ -47,16 +53,20 @@
 </script>
 
 <style lang="scss" scoped>
+  @import "~styles/layout";
+
+  .results-header {
+    margin-bottom: $base-gap;
+  }
+
   .party-results {
     list-style: none;
     width: 100%;
 
     li {
       display: flex;
-    }
-
-    progress {
-      width: 100%;
+      flex-direction: column;
+      margin-bottom: $base-gap;
     }
   }
 </style>

src/app/results/routes.js

@@ -2,7 +2,7 @@ import Results from './components/index'
 
 export default [
   {
-    path: '/ergebnisse',
+    path: '/ergebnis',
     name: 'results',
     component: Results
   }

src/components/menu.vue

@@ -7,9 +7,16 @@
         </router-link>
       </li>
     </ul>
+
     <router-link class="menu-impressum" :to="impressum.route">
       {{ impressum.label }}
     </router-link>
+
+    <div class="menu-language">
+      <button v-for="lang of languages" type="button" @click="changeLanguage(lang.locale)">
+        {{ lang.label }}
+      </button>
+    </div>
   </aside>
 </template>
 
@@ -21,6 +28,15 @@
       menu: { type: Array, default: () => [] }
     },
 
+    data () {
+      return {
+        languages: [
+          { label: 'DE', locale: 'de' },
+          { label: 'EN', locale: 'en' }
+        ]
+      }
+    },
+
     computed: {
       impressum () {
         return this.menu[this.menu.length - 1]
@@ -30,6 +46,10 @@
     methods: {
       notLastItem (index) {
         return index !== this.menu.length - 1
+      },
+      changeLanguage (locale) {
+        this.$i18n.locale = locale
+        localStorage.setItem('locale', locale)
       }
     }
   }
@@ -74,5 +94,10 @@
     color: $text-color-base;
     font-weight: 500;
     font-size: 85%;
+    text-align: center;
+
+    &:hover {
+      color: $text-color-special;
+    }
   }
 </style>

src/components/progress.vue

@@ -0,0 +1,37 @@
+<template>
+  <progress :value="value" :max="max">
+    {{ value }}
+  </progress>
+</template>
+
+<script>
+  export default {
+    name: 'Progress',
+
+    props: {
+      value: { type: [String, Number], default: () => 0 },
+      max: { type: [String, Number], default: () => 100 }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~styles/colors";
+  @import "~styles/layout";
+
+  progress[value] {
+    appearance: none;
+    width: 100%;
+    height: 20px;
+
+    &::-webkit-progress-bar {
+      background: $dark-blue;
+      border-radius: $border-radius;
+    }
+
+    &::-webkit-progress-value {
+      background: $yellow;
+      border-radius: $border-radius;
+    }
+  }
+</style>

src/i18n/index.js

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+import { i18n as intro } from '@/app/intro'
+
+Vue.use(VueI18n)
+
+export default new VueI18n({
+  locale: localStorage.getItem('locale') || 'de',
+  fallbackLocale: 'de',
+  messages: {
+    ...intro
+  }
+})

src/main.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueSVGIcon from 'vue-svgicon'
 import App from '@/app/app'
 import router from './router'
+import i18n from './i18n'
 
 Vue.config.productionTip = false
 Vue.use(VueSVGIcon)
@@ -10,6 +11,7 @@ Vue.use(VueSVGIcon)
 new Vue({
   el: '#app',
   router,
+  i18n,
   template: '<App/>',
   components: { App }
 })

yarn.lock

@@ -6387,6 +6387,10 @@ vue-hot-reload-api@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.1.0.tgz#9ca58a6e0df9078554ce1708688b6578754d86de"
 
+vue-i18n@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-7.1.1.tgz#c37259c9088bf821144b393146d342686e9554ea"
+
 vue-loader@^12.1.0:
   version "12.2.2"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-12.2.2.tgz#2b3a764f27018f975bc78cb8b1f55137548ee2d7"