feature(i18n): Added multi lang support

TheSpaghettiDetective · Mar 22, 2021 · be1201a · be1201a
1 parent c78999d
commit be1201a
Show file tree

Hide file tree

Showing 74 changed files with 923 additions and 332 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,7 +14,7 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'camelcase': 0,
+    camelcase: 0,
     '@typescript-eslint/camelcase': 0,
     '@typescript-eslint/no-explicit-any': 0
   },

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "vue-class-component": "^7.2.3",
     "vue-debounce-decorator": "^1.0.1",
     "vue-headful": "^2.1.0",
+    "vue-i18n": "^8.22.4",
     "vue-meta": "^2.4.0",
     "vue-prism-editor": "^1.2.2",
     "vue-property-decorator": "^9.1.2",

diff --git a/src/components/AppBar.vue b/src/components/AppBar.vue
@@ -22,19 +22,19 @@
 
       <btn text to="/" color="" class="d-none d-md-flex mx-1">
         <v-icon small class="mr-md-1">$home</v-icon>
-        <span>Dashboard</span>
+        <span>{{ $t('Dashboard') }}</span>
       </btn>
       <btn text to="/jobs" color="" class="d-none d-md-flex mx-1">
         <v-icon small class="mr-md-1">$files</v-icon>
-        <span>Jobs</span>
+        <span>{{ $t('Jobs') }}</span>
       </btn>
       <btn text to="/tune" color="" class="d-none d-md-flex mx-1">
         <v-icon small class="mr-md-1">$tune</v-icon>
-        <span>Tune</span>
+        <span>{{ $t('Tune') }}</span>
       </btn>
       <btn text to="/configure" color="" class="d-none d-md-flex mx-1">
         <v-icon small class="mr-md-1">$cogs</v-icon>
-        <span>Configure</span>
+        <span>{{ $t('Configure') }}</span>
       </btn>
       <v-tooltip bottom v-if="socketConnected">
         <template v-slot:activator="{ on, attrs }">
@@ -48,7 +48,7 @@
             <v-icon>$estop</v-icon>
           </btn>
         </template>
-        Emergency Stop
+        {{ $t('Emergency Stop') }}
       </v-tooltip>
 
       <v-badge

diff --git a/src/components/AppDrawer.vue b/src/components/AppDrawer.vue
@@ -13,39 +13,39 @@
           <v-icon>$home</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>Dashboard</v-list-item-title>
+          <v-list-item-title>{{ $t('Dashboard') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-list-item to="/jobs" class="d-flex d-md-none" v-if="klippyReady">
         <v-list-item-icon>
           <v-icon>$files</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>Jobs</v-list-item-title>
+          <v-list-item-title>{{ $t('Jobs') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-list-item to="/tune" class="d-flex d-md-none">
         <v-list-item-icon>
           <v-icon>$tune</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>Tune</v-list-item-title>
+          <v-list-item-title>{{ $t('Tune') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-list-item to="/configure" class="d-flex d-md-none">
         <v-list-item-icon>
           <v-icon>$cogs</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>Configure</v-list-item-title>
+          <v-list-item-title>{{ $t('Configure') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-list-item to="/interface">
         <v-list-item-icon>
           <v-icon>$cog</v-icon>
         </v-list-item-icon>
         <v-list-item-content>
-          <v-list-item-title>Interface</v-list-item-title>
+          <v-list-item-title>{{ $t('Interface') }}</v-list-item-title>
         </v-list-item-content>
       </v-list-item>
       <v-divider></v-divider>

diff --git a/src/components/FlashMessage.vue b/src/components/FlashMessage.vue
@@ -14,7 +14,7 @@
         v-bind="attrs"
         @click="open = false"
       >
-        Close
+        {{ $t('Close') }}
       </btn>
     </template>
   </v-snackbar>
@@ -23,6 +23,7 @@
 <script lang="ts">
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
+import { $t } from '@/i18n'
 
 @Component({})
 export default class FlashMessage extends Vue {
@@ -32,7 +33,7 @@ export default class FlashMessage extends Vue {
   @Prop({ type: String, default: 'success' })
   type!: string;
 
-  @Prop({ type: String, default: 'Saved!' })
+  @Prop({ type: String, default: $t('Saved!') })
   text!: string;
 
   @Prop({ type: Number, default: 3000 })

diff --git a/src/components/FluiddIcon.vue b/src/components/FluiddIcon.vue
@@ -19,13 +19,14 @@
 <script lang="ts">
 import Vue from 'vue'
 import { Component, Prop } from 'vue-property-decorator'
+import { $t } from '@/i18n'
 
 @Component({})
 export default class FluiddIcon extends Vue {
   @Prop({ type: String, default: 'success' })
   width!: string;
 
-  @Prop({ type: String, default: 'Saved!' })
+  @Prop({ type: String, default: $t('Saved!') })
   height!: string;
 
   @Prop({ type: String, required: true })

diff --git a/src/components/SettingsBar.vue b/src/components/SettingsBar.vue
@@ -39,12 +39,12 @@ import SystemCommandsWidget from '@/components/widgets/SystemCommandsWidget.vue'
 })
 export default class SettingsBar extends Mixins(StateMixin) {
   items = [
-    { name: 'General', icon: '$printer', ref: '#general' },
-    { name: 'Camera', icon: '$camera', ref: '#camera' },
-    { name: 'Theme', icon: '$cogs', ref: '#theme' },
-    { name: 'Toolhead', icon: '$printer3dNozzle', ref: '#toolhead' },
-    { name: 'Macros', icon: '$fileCode', ref: '#macros' },
-    { name: 'Presets', icon: '$fire', ref: '#presets' }
+    { name: this.$t('General'), icon: '$printer', ref: '#general' },
+    { name: this.$t('Camera'), icon: '$camera', ref: '#camera' },
+    { name: this.$t('Theme'), icon: '$cogs', ref: '#theme' },
+    { name: this.$t('Toolhead'), icon: '$printer3dNozzle', ref: '#toolhead' },
+    { name: this.$t('Macros'), icon: '$fileCode', ref: '#macros' },
+    { name: this.$t('Presets'), icon: '$fire', ref: '#presets' }
   ]
 }
 </script>
diff --git a/src/components/VersionStatus.vue b/src/components/VersionStatus.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-chip v-if="!hasUpdate && (!dirty && valid)" x-small label outlined color="success">UP TO DATE</v-chip>
+    <v-chip v-if="!hasUpdate && (!dirty && valid)" x-small label outlined color="success">{{ $t('UP TO DATE') }}</v-chip>
     <v-tooltip left>
       <template v-slot:activator="{ on, attrs }">
         <v-chip
@@ -11,10 +11,10 @@
           label
           outlined
           color="error">
-          DIRTY
+          {{ $t('DIRTY') }}
         </v-chip>
       </template>
-      <span>indicates local changes to the repo</span>
+      <span>{{ $t('indicates local changes to the repo') }}</span>
     </v-tooltip>
 
     <v-tooltip left>
@@ -27,10 +27,10 @@
           label
           outlined
           color="error">
-          INVALID
+          {{ $t('INVALID') }}
         </v-chip>
       </template>
-      <span>indicates a detached head, not on master or an invalid origin</span>
+      <span>{{ $t('indicates a detached head, not on master or an invalid origin') }}</span>
     </v-tooltip>
 
     <btn
@@ -41,7 +41,7 @@
       text
       color="warning"
       @click="$emit('on-update')">
-      UPDATE
+      {{ $t('UPDATE') }}
     </btn>
   </div>
 </template>

diff --git a/src/components/cards/KlippyCard.vue b/src/components/cards/KlippyCard.vue
@@ -7,9 +7,9 @@
     <v-card-text>
       <v-row>
         <v-col cols="12" sm="auto">
-          <btn v-if="!klippyConnected" block color="primary" @click="serviceRestartKlipper" class="me-2 mb-2">Restart Klipper</btn>
-          <btn v-if="klippyConnected" block color="primary" @click="restartKlippy" class="me-2 mb-2">Restart Klipper</btn>
-          <btn v-if="klippyConnected" block color="primary" @click="firmwareRestartKlippy" class="me-2 mb-2">Firmware Restart</btn>
+          <btn v-if="!klippyConnected" block color="primary" @click="serviceRestartKlipper" class="me-2 mb-2">{{ $t('Restart Klipper') }}</btn>
+          <btn v-if="klippyConnected" block color="primary" @click="restartKlippy" class="me-2 mb-2">{{ $t('Restart Klipper') }}</btn>
+          <btn v-if="klippyConnected" block color="primary" @click="firmwareRestartKlippy" class="me-2 mb-2">{{ $t('Firmware Restart') }}</btn>
           <btn block @click="getKlippyLog()" class="me-2 mb-2"><v-icon left small>$download</v-icon>Klippy.log</btn>
           <btn block @click="getMoonrakerLog()" class="me-2 mb-2"><v-icon left small>$download</v-icon>Moonraker.log</btn>
         </v-col>

diff --git a/src/components/cards/configuration/BedAdjustCard.vue b/src/components/cards/configuration/BedAdjustCard.vue
@@ -1,6 +1,6 @@
 <template>
   <collapsable-card
-    title="Bed Adjustments"
+    :title="$t('Bed Adjustments')"
     icon="$bedMesh">
     <v-card>
       <v-card-title>z-adjust</v-card-title>

diff --git a/src/components/cards/configuration/BedMeshCard.vue b/src/components/cards/configuration/BedMeshCard.vue
@@ -1,7 +1,7 @@
 <template>
   <collapsable-card
     :loading="loading"
-    title="Bed Mesh"
+    :title="$t('Bed Mesh')"
     :lazy="false"
     icon="$bedMesh">
     <bed-mesh-widget @hook:mounted="componentMounted"></bed-mesh-widget>

diff --git a/src/components/cards/configuration/EndStopsCard.vue b/src/components/cards/configuration/EndStopsCard.vue
@@ -1,7 +1,7 @@
 <template>
   <collapsable-card
-    title="Endstops"
-    subTitle="Use the refresh button to update endstop status."
+    :title="$t('Endstops')"
+    :subTitle="$t('Use the refresh button to update endstop status.')"
     :collapsable="false"
     icon="$expandHorizontal">
     <template v-slot:collapse-button>
@@ -25,7 +25,7 @@
           small
           label>
           <v-icon small left>{{ (item === 'open') ? '$blankCircle' : '$markedCircle' }}</v-icon>
-          {{ item.toUpperCase() }}
+          {{ $t(item.toUpperCase()) }}
         </v-chip>
       </v-layout>
     </v-card-text>
@@ -36,11 +36,18 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import StateMixin from '@/mixins/state'
 import { SocketActions } from '@/socketActions'
+import { $t } from '@/i18n'
 
 @Component({
   components: {}
 })
 export default class EndStopsCard extends Mixins(StateMixin) {
+  // Marking strings for extraction
+  ENDSTOPS_LABELS = {
+    OPEN: $t('OPEN'),
+    TRIGGERED: $t('TRIGGERED')
+  }
+
   get endStops () {
     return this.$store.getters['printer/getEndstops']
   }

diff --git a/src/components/cards/configuration/LogsCard.vue b/src/components/cards/configuration/LogsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <collapsable-card
-    title="Printer Logs"
+    :title="$t('Printer Logs')"
     icon="$download">
     <v-card-text>
       <btn block @click="getKlippyLog()" class="me-2 mb-2"><v-icon left small>$download</v-icon> Klippy.log</btn>

diff --git a/src/components/cards/configuration/PrintHistoryCard.vue b/src/components/cards/configuration/PrintHistoryCard.vue
@@ -1,6 +1,6 @@
 <template>
   <collapsable-card
-    title="Job History"
+    :title="$t('Job History')"
     icon="$history">
     <job-history></job-history>
 
@@ -10,7 +10,7 @@
         small
         class="ma-1">
         <v-icon small left>$delete</v-icon>
-        <span>Remove All</span>
+        <span>{{ $t('Remove All') }}</span>
       </btn>
     </template>
 
@@ -29,7 +29,7 @@ import { SocketActions } from '@/socketActions'
 })
 export default class PrinterHistoryCard extends Vue {
   handleRemoveAll () {
-    this.$confirm('Are you sure? This will clear all history, and printer statistics.')
+    this.$confirm(this.$t('Are you sure? This will clear all history, and printer statistics.').toString())
       .then(res => {
         if (res) {
           SocketActions.serverHistoryDeleteJob('all')