feat: basic multilang support (#320)

VueTorrent · Nov 27, 2021 · a7cc03c · a7cc03c
1 parent 9f2ca42
commit a7cc03c
Show file tree

Hide file tree

Showing 34 changed files with 359 additions and 96 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,7 +26,8 @@ module.exports = {
     'comma-style': ['error', 'last'],
     eqeqeq: 0,
     indent: ['error', 2, {
-      SwitchCase: 1
+      SwitchCase: 1,
+      "ignoredNodes": ["TemplateLiteral"]
     }],
     'vue/html-indent': [
       'error',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "uuid": "^8.3.2",
     "vue": "^2.6.14",
     "vue-apexcharts": "^1.6.2",
+    "vue-i18n": "^8.26.7",
     "vue-router": "^3.5.1",
     "vue-toastification": "^1.7.11",
     "vuedraggable": "^2.24.3",

diff --git a/src/App.vue b/src/App.vue
@@ -34,21 +34,8 @@ export default {
     }
   },
   created() {
-    self.addEventListener('fetch', function (event) {
-      event.respondWith(async function () {
-        try {
-          var res = await fetch(event.request)
-          var cache = await caches.open('cache')
-          cache.put(event.request.url, res.clone())
-
-          return res
-        } catch (error) {
-
-          return caches.match(event.request)
-        }
-      }())
-    })
     this.$store.commit('SET_APP_VERSION', process.env['APPLICATION_VERSION'])
+    this.$store.commit('SET_LANGUAGE')
     const needsAuth = this.needsAuthentication()
     if (needsAuth) {
       this.checkAuthenticated()

diff --git a/src/components/Modals/AddModal.vue b/src/components/Modals/AddModal.vue
@@ -32,7 +32,7 @@
         <v-card-title class="justify-center">
           <v-toolbar flat dense class="transparent">
             <v-toolbar-title class="mx-auto">
-              <h2>Add a new Torrent</h2>
+              <h2>{{ $t('modals.add.title') }}</h2>
             </v-toolbar-title>
             <v-btn
               fab
@@ -54,7 +54,7 @@
                     v-model="files"
                     color="deep-purple accent-4"
                     counter
-                    label="Select your files"
+                    :label="$t('modals.add.selectFiles')"
                     multiple
                     :prepend-icon="mdiPaperclip"
                     :rules="fileInputRules"

diff --git a/src/components/Modals/SettingsModal/SettingsModal.vue b/src/components/Modals/SettingsModal/SettingsModal.vue
@@ -14,7 +14,7 @@
       <v-card-title class="primary pa-0">
         <v-toolbar flat dense class="primary white--text">
           <v-toolbar-title class="mt-auto white--text">
-            <h3>Settings</h3>
+            <h3>{{ $t('settings') | titleCase }}</h3>
           </v-toolbar-title>
           <template #extension>
             <v-tabs v-model="tab" align-with-title show-arrows>

diff --git a/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue b/src/components/Modals/SettingsModal/Tabs/VueTorrent.vue
@@ -10,11 +10,9 @@
     </v-tabs>
     <v-tabs-items v-model="tab" touchless>
       <v-tab-item eager value="general">
-        <!--<General :is-active="tab === 'downloads'" />-->
         <General />
       </v-tab-item>
       <v-tab-item eager value="dashboard">
-        <!--<Dashboard :is-active="tab === 'bittorrent'" />-->
         <Dashboard />
       </v-tab-item>
     </v-tabs-items>

diff --git a/src/components/Modals/SettingsModal/Tabs/Vuetorrent/General.vue b/src/components/Modals/SettingsModal/Tabs/Vuetorrent/General.vue
@@ -82,6 +82,27 @@
         </v-col>
       </v-row>
     </v-list-item>
+    <v-list-item>
+      <v-row dense>
+        <v-col cols="8" sm="8" md="10">
+          <p class="subtitle-1 mt-2">
+            Language:
+          </p>
+        </v-col>
+        <v-col cols="4" sm="4" md="2">
+          <v-select
+            v-model="lang"
+            flat
+            solo
+            dense
+            hide-details
+            background-color="background"
+            class="rounded-xl"
+            :items="languages"
+          />
+        </v-col>
+      </v-row>
+    </v-list-item>
     <v-list-item>
       <v-row dense>
         <v-col cols="8" sm="8" md="10">
@@ -164,6 +185,7 @@ export default {
   name: 'General',
   data() {
     return {
+      languages: ['en', 'it', 'nl', 'zh'],
       paginationSizes: [5, 15, 30, 50],
       titleOptions: ['Default', 'Global Speed', 'First Torrent Status'],
       Qbitversion: 0
@@ -236,6 +258,14 @@ export default {
         this.webuiSettings.title = val
       }
     },
+    lang: {
+      get() {
+        return this.webuiSettings.lang
+      },
+      set(val) {
+        this.webuiSettings.lang = val
+      }
+    },
     version() {
       return this.getAppVersion()
     }
@@ -253,6 +283,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .v-select .v-select__selection {
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
 // Reversed input variant
 ::v-deep .v-input--reverse .v-input__slot {
   @import "src/styles/styles.scss";

diff --git a/src/components/Modals/TagsAndCategories/CreateCategoryDialog.vue b/src/components/Modals/TagsAndCategories/CreateCategoryDialog.vue
@@ -105,7 +105,7 @@ export default {
     },
     edit() {
       qbit.editCategory(this.category)
-      Vue.$toast.success('Category edited successfully!')
+      Vue.$toast.success(this.$t('toast.categorySaved'))
       this.cancel()
     }
   }

diff --git a/src/components/Modals/TorrentDetailModal/Tabs/Info.vue b/src/components/Modals/TorrentDetailModal/Tabs/Info.vue
@@ -28,7 +28,7 @@
         </tr>
         <tr>
           <td :class="commonStyle">
-            Size
+            {{ $t('torrent.size') | titleCase }}
           </td>
           <td>
             {{ torrent.size | getDataValue }}
@@ -107,7 +107,7 @@
         </tr>
         <tr>
           <td :class="commonStyle">
-            Added on
+            {{ $t('torrent.added') | titleCase }}
           </td>
           <td>
             {{ torrent.added_on }}
@@ -215,7 +215,7 @@
         </tr>
         <tr>
           <td :class="commonStyle">
-            Availability
+            {{ $t('torrent.availability') | titleCase }}
           </td>
           <td>
             {{ torrent.availability }}

diff --git a/src/components/Navbar/CurrentSpeed.vue b/src/components/Navbar/CurrentSpeed.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="status">
     <div class="text-uppercase white--text caption ml-4 font-weight-medium">
-      current speed
+      {{ $t('navbar.currentSpeed') }}
     </div>
     <v-row dense class="mx-1 pt-1">
       <v-col>

diff --git a/src/components/Navbar/FilterSelect.vue b/src/components/Navbar/FilterSelect.vue
@@ -19,7 +19,7 @@
       @input="setState"
     />
     <label class="white--text text-uppercase font-weight-medium caption ml-4">
-      Category
+      {{ $t('category') }}
     </label>
     <v-select
       aria-label="category_filter"

diff --git a/src/components/Navbar/FreeSpace.vue b/src/components/Navbar/FreeSpace.vue
@@ -3,7 +3,7 @@
     <StorageCard
       v-if="space"
       class="mt-8"
-      label="Free Space"
+      :label="$t('navbar.freeSpace') | titleCase"
       color="upload"
       :value="space"
     />

diff --git a/src/components/Navbar/NavbarActions.vue b/src/components/Navbar/NavbarActions.vue
@@ -36,24 +36,6 @@
         <span>Alt speeds</span>
       </v-tooltip>
     </v-col>
-    <!--<v-col>
-      <v-tooltip top>
-        <template #activator="{ on }">
-          <v-btn
-            text
-            tile
-            block
-            v-on="on"
-            @click="toggleAlarm"
-          >
-            <v-icon :class="commonStyle">
-              {{ alarm ? mdiBell : mdiBellOff }}
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>done notification</span>
-      </v-tooltip>
-    </v-col>-->
     <v-col>
       <connection-status :status="connectionStatus" />
     </v-col>
@@ -98,7 +80,6 @@ export default {
     ConnectionStatus
   },
   data: () => ({
-    //commonStyle: 'primarytext--text',
     commonStyle: 'white--text',
     mdiBrightness4,
     mdiBrightness7,
@@ -139,11 +120,6 @@ export default {
     toggleSpeed() {
       qbit.toggleSpeedLimitsMode()
     },
-    /*
-    toggleAlarm() {
-      this.$store.commit('TOGGLE_ALARM')
-    },
-    */
     toggleTheme() {
       this.$store.commit('TOGGLE_THEME')
       this.$vuetify.theme.dark = !this.$vuetify.theme.dark

diff --git a/src/components/Navbar/TopActions.vue b/src/components/Navbar/TopActions.vue
@@ -8,7 +8,7 @@
           fab
           color="grey--text"
           class="mr-0 ml-0"
-          aria-label="Add Torrent"
+          :aria-label="$t('navbar.topActions.addTorrent')"
           v-on="on"
           @click="addModal('AddModal')"
         >
@@ -17,7 +17,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span> Add Torrent</span>
+      <span> {{ $t('navbar.topActions.addTorrent') | titleCase }}</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">
@@ -26,7 +26,7 @@
           fab
           :text="!mobile"
           class="mr-0 ml-0"
-          aria-label="Resume Selected Torrents"
+          :aria-label="$t('navbar.topActions.resumeSelected')"
           v-on="on"
           @click="resumeTorrents"
         >
@@ -35,7 +35,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Resume Selected Torrents</span>
+      <span>{{ $t('navbar.topActions.resumeSelected') | titleCase }}</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">
@@ -44,7 +44,7 @@
           fab
           :text="!mobile"
           class="mr-0 ml-0"
-          aria-label="Pause Selected Torrents"
+          :aria-label="$t('navbar.topActions.pauseSelected')"
           v-on="on"
           @click="pauseTorrents"
         >
@@ -53,7 +53,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Pause Selected Torrents</span>
+      <span> {{ $t('navbar.topActions.pauseSelected') | titleCase }}</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">
@@ -62,7 +62,7 @@
           fab
           :text="!mobile"
           class="mr-0 ml-0"
-          aria-label="Remove Selected Torrents"
+          :aria-label="$t('navbar.topActions.removeSelected')"
           v-on="on"
           @click="removeTorrents"
         >
@@ -71,7 +71,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Remove Selected Torrents</span>
+      <span> {{ $t('navbar.topActions.removeSelected') | titleCase }}</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">
@@ -81,7 +81,7 @@
           fab
           color="grey--text"
           class="mr-0 ml-0"
-          aria-label="Search New Torrent"
+          :aria-label="$t('navbar.topActions.searchNew')"
           v-on="on"
           @click="addModal('SearchModal')"
         >
@@ -90,7 +90,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Search new Torrent</span>
+      <span>{{ $t('navbar.topActions.searchNew') | titleCase }}</span>
     </v-tooltip>
     <v-tooltip bottom>
       <template #activator="{ on }">
@@ -99,7 +99,7 @@
           fab
           :text="!mobile"
           class="mr-0 ml-0"
-          aria-label="Open Settings"
+          :aria-label="$t('navbar.topActions.openSettings')"
           v-on="on"
           @click="addModal('SettingsModal')"
         >
@@ -108,7 +108,7 @@
           </v-icon>
         </v-btn>
       </template>
-      <span>Open Settings</span>
+      <span>{{ $t('navbar.topActions.openSettings') | titleCase }}</span>
     </v-tooltip>
   </div>
 </template>

diff --git a/src/components/Torrent/DashboardItems/AddedOn.vue b/src/components/Torrent/DashboardItems/AddedOn.vue
@@ -1,7 +1,7 @@
 <template>
   <v-flex xs6 sm2>
     <div class="caption grey--text">
-      Added On
+      {{ $t('torrent.added') | titleCase }}
     </div>
     <div>{{ torrent.added_on }}</div>
   </v-flex>