Added translations

server/controllers/auth.go

@@ -115,7 +115,7 @@ func userLogin(c *gin.Context) {
 		Email:        user.Email,
 		Token:        token,
 		RefreshToken: refreshToken,
-		Role:         user.RoleDetail().Long,
+		Role:         user.RoleDetail().Key,
 	}
 	c.JSON(http.StatusOK, response)
 }
@@ -149,7 +149,7 @@ func refresh(c *gin.Context) {
 				Email:        user.Email,
 				Token:        token,
 				RefreshToken: refreshToken,
-				Role:         user.RoleDetail().Long,
+				Role:         user.RoleDetail().Key,
 			}
 			c.JSON(http.StatusOK, response)
 		} else {

server/db/enums.go

@@ -52,75 +52,58 @@ const (
 )
 
 type EnumDetail struct {
-	Short string `json:"short"`
-	Long  string `json:"long"`
+	Key string `json:"key"`
 }
 
 var FuelUnitDetails map[FuelUnit]EnumDetail = map[FuelUnit]EnumDetail{
 	LITRE: {
-		Short: "Lt",
-		Long:  "Litre",
+		Key:  "litre",
 	},
 	GALLON: {
-		Short: "Gal",
-		Long:  "Gallon",
+		Key:  "gallon",
 	}, KILOGRAM: {
-		Short: "Kg",
-		Long:  "Kilogram",
+		Key:  "kilogram",
 	}, KILOWATT_HOUR: {
-		Short: "KwH",
-		Long:  "Kilowatt Hour",
+		Key:  "kilowatthour",
 	}, US_GALLON: {
-		Short: "US Gal",
-		Long:  "US Gallon",
+		Key:  "usgallon",
 	},
 	MINUTE: {
-		Short: "Mins",
-		Long:  "Minutes",
+		Key:  "minutes",
 	},
 }
 
 var FuelTypeDetails map[FuelType]EnumDetail = map[FuelType]EnumDetail{
 	PETROL: {
-		Short: "Petrol",
-		Long:  "Petrol",
+		Key:  "petrol",
 	},
 	DIESEL: {
-		Short: "Diesel",
-		Long:  "Diesel",
+		Key:  "diesel",
 	}, CNG: {
-		Short: "CNG",
-		Long:  "CNG",
+		Key:  "cng",
 	}, LPG: {
-		Short: "LPG",
-		Long:  "LPG",
+		Key:  "lpg",
 	}, ELECTRIC: {
-		Short: "Electric",
-		Long:  "Electric",
+		Key:  "electric",
 	}, ETHANOL: {
-		Short: "Ethanol",
-		Long:  "Ethanol",
+		Key:  "ethanol",
 	},
 }
 
 var DistanceUnitDetails map[DistanceUnit]EnumDetail = map[DistanceUnit]EnumDetail{
 	KILOMETERS: {
-		Short: "Km",
-		Long:  "Kilometers",
+		Key: "kilometers",
 	},
 	MILES: {
-		Short: "Mi",
-		Long:  "Miles",
+		Key: "miles",
 	},
 }
 
 var RoleDetails map[Role]EnumDetail = map[Role]EnumDetail{
 	ADMIN: {
-		Short: "Admin",
-		Long:  "ADMIN",
+		Key: "ADMIN",
 	},
 	USER: {
-		Short: "User",
-		Long:  "USER",
+		Key: "USER",
 	},
 }

ui/package.json

@@ -41,10 +41,12 @@
     "currency-formatter": "^1.5.7",
     "date-fns": "2.10.0",
     "lodash": "^4.17.21",
+    "node-gyp": "^9.3.1",
     "normalize.css": "8.0.1",
     "nprogress": "0.2.0",
     "vue": "2.6.11",
     "vue-chartjs": "^3.5.1",
+    "vue-i18n": "^8.28.2",
     "vue-meta": "2.3.3",
     "vue-router": "3.1.6",
     "vuex": "3.1.2"

ui/src/components/createQuickEntry.vue

@@ -20,7 +20,7 @@ export default {
         }
       } else {
         if (this.file == null) {
-          return 'Upload Photo'
+          return this.$t('uploadphoto')
         } else {
           return ''
         }
@@ -39,7 +39,7 @@ export default {
         .post(`/api/quickEntries`, formData)
         .then((data) => {
           this.$buefy.toast.open({
-            message: 'Quick Entry Created Successfully',
+            message: this.$t('quickentrycreatedsuccessfully'),
             type: 'is-success',
             duration: 3000,
           })
@@ -68,9 +68,9 @@ export default {
   <div class="section box">
     <div class="columns">
       <div class="column is-two-thirds">
-        <p class="title">Quick Entry</p>
+        <p class="title">{{ $tc('quickentry',1) }}</p>
         <p class="subtitle"
-          >Take a pic of the invoice or the fuel pump display to make an entry later.</p
+          >{{ $t('quickentrydesc') }}</p
         ></div
       >
       <div class="column is-one-third is-flex is-align-content-center">
@@ -99,10 +99,10 @@ export default {
                 native-type="submit"
                 :disabled="tryingToCreate"
                 type="is-primary"
-                value="Upload File"
+                :value="this.$t('uploadfile')"
                 class="control"
               >
-                Upload File
+                {{ $t('uploadfile') }}
               </b-button>
             </div></div
           >

ui/src/components/mileageChart.vue

@@ -30,7 +30,7 @@ export default {
       var labels = this.chartData.map((x) => x.date.substr(0, 10))
       var dataset = {
         steppedLine: true,
-        label: `Mileage (${this.user.distanceUnitDetail.short}/${this.vehicle.fuelUnitDetail.short})`,
+        label: `${this.$t('odometer')} (${this.$t('unit.short.' + this.user.distanceUnitDetail.key)}/${this.$t('unit.short.' + this.vehicle.fuelUnitDetail.key)})`,
         fill: true,
         data: this.chartData.map((x) => x.mileage),
       }

ui/src/components/nav-bar.vue

@@ -10,42 +10,42 @@ export default {
       persistentNavRoutes: [
         {
           name: 'home',
-          title: 'Home',
+          title: this.$t('menu.home'),
         },
       ],
       loggedInNavRoutes: [
         {
           name: 'quickEntries',
-          title: () => 'Quick Entries',
+          title: () => this.$t('menu.quickentries'),
           badge: () => this.unprocessedQuickEntries.length,
         },
         {
           name: 'import',
-          title: () => 'Import',
+          title: () => this.$t('menu.import'),
         },
         {
           name: 'settings',
-          title: 'Settings',
+          title: this.$t('menu.settings'),
         },
         {
           name: 'logout',
-          title: 'Log out',
+          title: this.$t('menu.logout'),
         },
       ],
       loggedOutNavRoutes: [
         {
           name: 'login',
-          title: 'Log in',
+          title: this.$t('menu.login'),
         },
       ],
       adminNavRoutes: [
         {
           name: 'site-settings',
-          title: 'Site Settings',
+          title: this.$t('menu.sitesettings'),
         },
         {
           name: 'users',
-          title: 'Users',
+          title: this.$t('menu.users'),
         },
       ],
     }
@@ -72,7 +72,7 @@ export default {
         <NavBarRoutes :routes="persistentNavRoutes" />
         <NavBarRoutes v-if="loggedIn" :routes="loggedInNavRoutes" />
         <NavBarRoutes v-else :routes="loggedOutNavRoutes" />
-        <b-navbar-dropdown v-if="loggedIn && isAdmin" label="Admin">
+        <b-navbar-dropdown v-if="loggedIn && isAdmin" :label="$t('menu.admin')">
           <NavBarRoutes :routes="adminNavRoutes" />
         </b-navbar-dropdown>
       </template>

ui/src/components/quickEntryDisplay.vue

@@ -50,12 +50,12 @@ export default {
       <b-select
         v-if="unprocessedQuickEntries.length"
         v-model="quickEntry"
-        placeholder="Refer quick entry"
+        :placeholder="this.$t('referquickentry')"
         expanded
         @input="showQuickEntry($event)"
       >
         <option v-for="option in unprocessedQuickEntries" :key="option.id" :value="option">
-          Taken: {{ parseAndFormatDateTime(option.createdAt) }}
+          {{ $t('created') }}: {{ parseAndFormatDateTime(option.createdAt) }}
         </option>
       </b-select>
       <p class="control">

ui/src/components/shareVehicle.vue

@@ -55,7 +55,7 @@ export default {
         return
       }
       this.$buefy.dialog.confirm({
-        title: 'Transfer Vehicle',
+        title: this.$t('transfervehicle'),
         message: 'Are you sure you want to do this? You will lose ownership and all editing rights if you confirm.',
         cancelText: 'Cancel',
         confirmText: 'Go Ahead',
@@ -90,7 +90,7 @@ export default {
 
 <template>
   <div class="box" style="max-width:600px">
-    <h1 class="subtitle">Share {{ vehicle.nickname }}</h1>
+    <h1 class="subtitle">{{ $t('share') }} {{ vehicle.nickname }}</h1>
     <section>
       <div class="columns is-mobile" v-for="model in models" :key="model.id">
         <div class="column is-one-third">
@@ -101,7 +101,7 @@ export default {
           </b-field> </div
         ><div class="column is-three-quarters">
           <b-field>
-            <b-button v-if="model.isShared && !model.isOwner" type="is-primary is-small" @click="transferVehicle(model)">Make Owner</b-button>
+            <b-button v-if="model.isShared && !model.isOwner" type="is-primary is-small" @click="transferVehicle(model)">{{ $t('makeowner') }}</b-button>
           </b-field></div
         ></div
       >

ui/src/components/statsWidget.vue

@@ -1,6 +1,6 @@
 <script>
 import { addDays, addMonths } from 'date-fns'
-import currencyFormtter from 'currency-formatter'
+import currencyFormatter from 'currency-formatter'
 import { mapState } from 'vuex'
 
 import axios from 'axios'
@@ -14,12 +14,12 @@ export default {
   data: function() {
     return {
       dateRangeOptions: [
-        { label: 'This week', value: 'this_week' },
-        { label: 'This month', value: 'this_month' },
-        { label: 'Past 30 days', value: 'past_30_days' },
-        { label: 'Past 3 months', value: 'past_3_months' },
-        { label: 'This year', value: 'this_year' },
-        { label: 'All Time', value: 'all_time' },
+        { label: this.$t('thisweek'), value: 'this_week' },
+        { label: this.$t('thismonth'), value: 'this_month' },
+        { label: this.$tc('pastxdays', 30), value: 'past_30_days' },
+        { label: this.$tc('pastxmonths', 3), value: 'past_3_months' },
+        { label: this.$t('thisyear'), value: 'this_year' },
+        { label: this.$t('alltime'), value: 'all_time' },
       ],
       dateRangeOption: 'past_30_days',
       stats: [],
@@ -32,15 +32,15 @@ export default {
         return [
           [
             {
-              label: 'Total Expenditure',
+              label: this.$t('totalexpenses'),
               value: this.formatCurrency(0, this.user.currency),
             },
             {
-              label: 'Fillup Costs',
+              label: this.$t('fillupcost'),
               value: `${this.formatCurrency(0, this.user.currency)} (0)`,
             },
             {
-              label: 'Other Expenses',
+              label: this.$t('otherexpenses'),
               value: `${this.formatCurrency(0, this.user.currency)} (0)`,
             },
           ],
@@ -49,15 +49,15 @@ export default {
       return this.stats.map((x) => {
         return [
           {
-            label: 'Total Expenditure',
+            label: this.$t('totalexpenses'),
             value: this.formatCurrency(x.expenditureTotal, x.currency),
           },
           {
-            label: 'Fillup Costs',
+            label: this.$t('fillupcost'),
             value: `${this.formatCurrency(x.expenditureFillups, x.currency)} (${x.countFillups})`,
           },
           {
-            label: 'Other Expenses',
+            label: this.$t('otherexpenses'),
             value: `${this.formatCurrency(x.expenditureExpenses, x.currency)} (${x.countExpenses})`,
           },
         ]
@@ -80,7 +80,7 @@ export default {
       if (!currencyCode) {
         currencyCode = this.me.currency
       }
-      return currencyFormtter.format(number, { code: currencyCode })
+      return currencyFormatter.format(number, { code: currencyCode })
     },
     getStats() {
       axios
@@ -129,7 +129,7 @@ export default {
 <template>
   <div>
     <div class="columns">
-      <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">Stats</h1></div>
+      <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">{{ $t('statistics') }}</h1></div>
       <div class="column">
         <b-select v-model="dateRangeOption" class="is-pulled-right is-medium">
           <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">

ui/src/i18n.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+Vue.use(VueI18n);
+
+function loadLocaleMessages () {
+    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+    const messages = {}
+    locales.keys().forEach(key => {
+      const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+      if (matched && matched.length > 1) {
+        const locale = matched[1]
+        messages[locale] = locales(key)
+      }
+    })
+    return messages
+  }
+
+const i18n = new VueI18n({
+    locale: navigator.language.split('-')[0] || 'en',
+    fallbackLocale: 'en',
+    messages: loadLocaleMessages()
+});
+
+export default i18n;