added translations

#80 #19

ui/src/router/views/home.vue

@@ -1,5 +1,5 @@
 <script>
-import currencyFormtter from 'currency-formatter'
+import currencyFormatter from 'currency-formatter'
 
 import appConfig from '@src/app.config'
 import Layout from '@layouts/main.vue'
@@ -53,7 +53,7 @@ export default {
       return parseAndFormatDate(date)
     },
     formatCurrency(number) {
-      return currencyFormtter.format(number, { code: this.me.currency })
+      return currencyFormatter.format(number, { code: this.me.currency })
     },
   },
 }
@@ -62,14 +62,13 @@ export default {
 <template>
   <Layout>
     <b-notification v-if="myVehicles.length === 0" type="is-warning is-light" :closable="false">
-      <div class="columns">
+      <div class="columns is-three-quarters">
         <div class="column">
-          It seems you have not yet created a vehicle in the system. Start by creating an entry for
-          one of the vehicles you want to track.
+          {{ $t('novehicles') }}
         </div>
-        <div class="column" :class="!isMobile ? 'has-text-right' : ''">
+        <div class="column is-one-quarter" :class="!isMobile ? 'has-text-right' : ''">
           <b-button type="is-warning" class="" tag="router-link" :to="`/vehicles/create`"
-            >Create Now</b-button
+            >{{ $t('createnow') }}</b-button
           ></div
         >
       </div>
@@ -81,15 +80,11 @@ export default {
     >
       <div class="columns">
         <div class="column">
-          {{
-            `You have ${unprocessedQuickEntries.length} quick ${
-              unprocessedQuickEntries.length === 1 ? 'entry' : 'entries'
-            } pending to be processed.`
-          }}
+          {{ $tc('unprocessedquickentries', unprocessedQuickEntries.length, { '0': unprocessedQuickEntries.length }) }}
         </div>
         <div class="column" :class="!isMobile ? 'has-text-right' : ''">
           <b-button type="is-warning" class="is-small" tag="router-link" :to="`/quickEntries`"
-            >Process Now</b-button
+            >{{ $t('show') }}</b-button
           ></div
         >
       </div>
@@ -99,10 +94,10 @@ export default {
     <br />
     <section>
       <div class="columns" :class="isMobile ? 'has-text-centered' : ''"
-        ><div class="column is-three-quarters"> <h1 class="title">Your Vehicles</h1></div>
+        ><div class="column is-three-quarters"> <h1 class="title">{{ $t('yourvehicles') }}</h1></div>
         <div class="column is-one-quarter buttons" :class="!isMobile ? 'has-text-right' : ''">
           <b-button type="is-primary" tag="router-link" :to="`/vehicles/create`"
-            >Add Vehicle</b-button
+            >{{ $t('addvehicle') }}</b-button
           >
         </div></div
       >
@@ -125,7 +120,7 @@ export default {
               <div class="content">
                 <table class="table">
                   <div class="columns">
-                    <div class="column is-one-third">Last Fillup</div>
+                    <div class="column is-one-third">{{ $t('lastfillup') }}</div>
                     <div class="column"
                       >{{ formatDate(vehicle.fillups[0].date) }} <br />
                       {{ `${formatCurrency(vehicle.fillups[0].totalAmount)}` }} ({{
@@ -136,7 +131,7 @@ export default {
                   </div>
 
                   <div class="columns">
-                    <div class="column is-one-third">Odometer</div>
+                    <div class="column is-one-third">{{ $t('odometer') }}</div>
                     <div class="column">
                       <template v-if="vehicle.fillups.length">
                         {{ vehicle.fillups[0].odoReading }}&nbsp;{{
@@ -150,12 +145,12 @@ export default {
             </div>
             <footer class="card-footer">
               <router-link class="card-footer-item" :to="'/vehicles/' + vehicle.id">
-                Details
+                {{ $t('details') }}
               </router-link>
               <router-link class="card-footer-item" :to="`/vehicles/${vehicle.id}/fillup`">
-                Add Fillup </router-link
+                {{ $t('addfillup') }} </router-link
               ><router-link class="card-footer-item" :to="`/vehicles/${vehicle.id}/expense`">
-                Add Expense
+                {{ $t('addexpense') }}
               </router-link>
             </footer>
           </b-collapse>