translate

package.json

@@ -14,6 +14,7 @@
     "@vueuse/core": "^10.9.0",
     "pinia": "^2.1.7",
     "vue": "^3.3.11",
+    "vue-i18n": "^9.10.2",
     "vuetify": "^3.5.9"
   },
   "devDependencies": {

src/App.vue

@@ -145,29 +145,32 @@ store.$subscribe((mutation, state) => {
       <v-container>
         <v-row>
           <v-col>
-            <h2>Основные настройки</h2>
+            <h2>{{ $t("app.main_settings") }}</h2>
             <br>
             <BaseSettings/>
           </v-col>
           <v-col>
-            <h2>Станции</h2>
+            <h2>{{ $t("app.stations") }}</h2>
             <br>
             <NewStation />
             <hr>
             <StationsTable />
           </v-col>
           <v-col>
-            <h2>Управление</h2>
+            <h2>{{ $t("app.configure") }}</h2>
             <br>
             <div class="">
-              <v-btn size="x-large" variant="flat" block color="orange" @click="exportFile">Экспорт (svg)</v-btn>
+              <v-btn size="x-large" variant="flat" block color="orange" @click="exportFile">{{ $t("app.export_file") }} (svg)</v-btn>
-              <v-btn size="x-large" variant="flat" block color="green" @click="save">Сохранить (json)</v-btn>
+              <v-btn size="x-large" variant="flat" block color="green" @click="save">{{ $t("app.save_file") }} (json)</v-btn>
-              <v-btn size="x-large" variant="flat" block color="blue" @click="importFile">Импорт (json)</v-btn>
+              <v-btn size="x-large" variant="flat" block color="blue" @click="importFile">{{ $t("app.import_file") }} (json)</v-btn>
 
               <input type="file" id="fileInput" style="display: none" @change="setFile" accept=".json" />
               <hr>
               <br>
-              <h2>Курсор: ({{ xcord }}; {{ ycord }}) |  <a class="text-right" style="text-decoration: none" href="https://arbuz.icu/blog/metro-line/">Подробнее</a></h2>
+              <h2>{{ $t("app.cursor") }}: ({{ xcord }}; {{ ycord }}) |  <a class="text-right" style="text-decoration: none" href="https://arbuz.icu/blog/metro-line/">{{ $t("app.about") }}</a> |
+                <a v-if="$i18n.locale != 'en'" @click="$i18n.locale = 'en'; sessionStorage.setItem('locale', $i18n.locale);" style="color: red; cursor: pointer;">English</a>
+                <a v-else @click="$i18n.locale = 'ru'; sessionStorage.setItem('locale', $i18n.locale);" style="color: red; cursor: pointer;">Русский</a>
+              </h2>
             </div>
           </v-col>
         </v-row>

src/components/BaseSettings.vue

@@ -9,15 +9,15 @@ const store = useStore()
   <div class="">
     <ul>
       <li>
-        <h3>Ширина схемы:</h3>
+        <h3>{{ $t('baseSettings.width')}}:</h3>
         <v-text-field v-model="store.width"></v-text-field>
       </li>
       <li>
-        <h3>Высота схемы:</h3>
+        <h3>{{ $t('baseSettings.height')}}:</h3>
         <v-text-field v-model="store.height"></v-text-field>
       </li>
       <li>
-        <h3>Линия:</h3>
+        <h3>{{ $t('baseSettings.line')}}:</h3>
         <v-dialog max-width="800">
           <template v-slot:activator="{ props: activatorProps }">
             <v-btn
@@ -26,20 +26,20 @@ const store = useStore()
                 size="x-large"
                 variant="flat"
                 block
-                text="Конфигурация"
+                :text="$t('baseSettings.configure')"
             ></v-btn>
           </template>
 
           <template v-slot:default="{ isActive }">
-            <v-card title="Конфигурация">
+            <v-card :title="$t('baseSettings.configure')">
               <template v-slot:text>
-                <h2>Название:</h2>
+                <h2>{{ $t('baseSettings.configModal.name')}}:</h2>
                 <v-text-field v-model="store.name"></v-text-field>
 
-                <h2>Номер:</h2>
+                <h2>{{ $t('baseSettings.configModal.number')}}:</h2>
                 <v-text-field v-model="store.number"></v-text-field>
 
-                <h2>Цвет:</h2>
+                <h2>{{ $t('baseSettings.configModal.color')}}:</h2>
                 <center>
                   <v-color-picker v-model="store.color" mode="hex"></v-color-picker>
                 </center>
@@ -51,7 +51,7 @@ const store = useStore()
                 <v-spacer></v-spacer>
 
                 <v-btn
-                    text="Закрыть"
+                    :text="$t('baseSettings.configModal.close')"
                     variant="text"
                     @click="isActive.value = false"
                 ></v-btn>

src/components/NewStation.vue

@@ -6,108 +6,14 @@ const store = useStore()
 </script>
 
 <template>
-  <v-dialog max-width="800">
-    <template v-slot:activator="{ props: activatorProps }">
     <v-btn
-          v-bind="activatorProps"
         color="purple"
         size="x-large"
         variant="flat"
         block
-          text="Добавить станцию"
         @click="store.stations.push({'name': 'Тест', 'up': true, 'connectedStations': [], 'step': 300})">
+      {{ $t("newStation.add_station") }}
     </v-btn>
-    </template>
-
-    <template v-slot:default="{ isActive }">
-      <v-card title="Конфигурация: Новая Станция">
-        <template v-slot:text>
-          <h2>Название:</h2>
-          <v-text-field v-model="store.stations[store.stations.length-1].name"></v-text-field>
-
-          <h2>Отображение:</h2>
-          <v-btn v-if="store.stations[store.stations.length-1].up == true" size="x-large" variant="flat" block color="green" @click="store.stations[store.stations.length-1].up = false">Сверху</v-btn>
-          <v-btn v-else size="x-large" variant="flat" block color="blue" @click="store.stations[store.stations.length-1].up = true">Снизу</v-btn>
-
-          <h2>Шаг (<code>x: 0 — {{ store.width - 400 }}</code>):</h2>
-          <div class="">
-            <v-slider
-                class="ma-5"
-                v-model="store.stations[store.stations.length-1].step"
-                :max="store.width - 400"
-                :min="0"
-                :step="10"
-                density="compact"
-            >
-              <template v-slot:append>
-                <v-text-field
-                    v-model="store.stations[store.stations.length-1].step"
-                    density="compact"
-                    style="width: 100px"
-                    type="number"
-                    variant="outlined"
-                    hide-details
-                ></v-text-field>
-              </template>
-            </v-slider>
-          </div>
-          <h2>Связанные станции (переходы):</h2>
-          <br>
-          <v-btn
-              color="purple"
-              size="x-large"
-              variant="flat"
-              block
-              text="Добавить переход"
-              @click="store.stations[store.stations.length-1].connectedStations.push({'name': 'Тест', 'branch': {'color': '#fff', 'number': 2}})">
-          </v-btn>
-          <v-expansion-panels>
-            <v-expansion-panel
-                v-for="i in store.stations[store.stations.length-1].connectedStations.length"
-                :key="i"
-            >
-              <template v-slot:title>
-                <h2>{{ store.stations[store.stations.length-1].connectedStations[i - 1].name }}</h2>
-              </template>
-              <template v-slot:text>
-                <h3>Название:</h3>
-                <v-text-field v-model="store.stations[store.stations.length-1].connectedStations[i - 1].name"></v-text-field>
-
-                <h3>Номер линии:</h3>
-                <v-text-field v-model="store.stations[store.stations.length-1].connectedStations[i - 1].branch.number"></v-text-field>
-
-                <h2>Цвет:</h2>
-                <center>
-                  <v-color-picker v-model="store.stations[store.stations.length-1].connectedStations[i - 1].branch.color" mode="hex"></v-color-picker>
-                </center>
-
-                <v-btn
-                    color="red"
-                    size="x-large"
-                    variant="flat"
-                    block
-                    text="Удалить переход"
-                    @click="store.stations[store.stations.length-1].connectedStations.splice(i - 1, 1);">
-                </v-btn>
-              </template>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </template>
-
-        <hr>
-
-        <v-card-actions>
-          <v-spacer></v-spacer>
-
-          <v-btn
-              text="Закрыть"
-              variant="text"
-              @click="isActive.value = false"
-          ></v-btn>
-        </v-card-actions>
-      </v-card>
-    </template>
-  </v-dialog>
 </template>
 
 <style scoped>

src/components/StationsTable.vue

@@ -10,12 +10,12 @@ const store = useStore()
     <thead>
     <tr>
       <th class="text-left">
-        Название
+        {{ $t('stationsTable.name') }}
       </th>
       <th class="text-left">
-        Шаг (<code>x</code>)
+        {{ $t('stationsTable.step') }} (<code>x</code>)
       </th>
-      <th class="text-left">Действие</th>
+      <th class="text-left">{{ $t('stationsTable.action') }}</th>
     </tr>
     </thead>
     <tbody>
@@ -35,16 +35,16 @@ const store = useStore()
           </template>
 
           <template v-slot:default="{ isActive }">
-            <v-card title="Конфигурация: Станция">
+            <v-card :title="$t('stationsTable.editStation.title')">
               <template v-slot:text>
-                <h2>Название:</h2>
+                <h2>{{ $t('stationsTable.editStation.name') }}:</h2>
                 <v-text-field v-model="store.stations[i-1].name"></v-text-field>
 
-                <h2>Отображение:</h2>
+                <h2>{{ $t('stationsTable.editStation.show') }}:</h2>
-                <v-btn v-if="store.stations[i-1].up == true" size="x-large" variant="flat" block color="green" @click="store.stations[i-1].up = false">Сверху</v-btn>
+                <v-btn v-if="store.stations[i-1].up == true" size="x-large" variant="flat" block color="green" @click="store.stations[i-1].up = false">{{ $t('stationsTable.editStation.up') }}</v-btn>
-                <v-btn v-else size="x-large" variant="flat" block color="blue" @click="store.stations[i-1].up = true">Снизу</v-btn>
+                <v-btn v-else size="x-large" variant="flat" block color="blue" @click="store.stations[i-1].up = true">{{ $t('stationsTable.editStation.down') }}</v-btn>
 
-                <h2>Шаг (<code>x: 0 — {{ store.width - 400 }}</code>):</h2>
+                <h2>{{ $t('stationsTable.editStation.step') }} (<code>x: 0 — {{ store.width - 400 }}</code>):</h2>
                 <div class="">
                   <v-slider
                       class="ma-5"
@@ -65,14 +65,14 @@ const store = useStore()
                     </template>
                   </v-slider>
                 </div>
-                <h2>Связанные станции (переходы):</h2>
+                <h2>{{ $t('stationsTable.editStation.connectedStations.title') }}</h2>
                 <br>
                 <v-btn
                     color="purple"
                     size="x-large"
                     variant="flat"
                     block
-                    text="Добавить переход"
+                    :text="$t('stationsTable.editStation.connectedStations.add')"
                     @click="store.stations[i-1].connectedStations.push({'name': 'Тест', 'branch': {'color': '#fff', 'number': 2}})">
                 </v-btn>
                 <v-expansion-panels>
@@ -84,23 +84,25 @@ const store = useStore()
                       <h2>{{ store.stations[i-1].connectedStations[j - 1].name }}</h2>
                     </template>
                     <template v-slot:text>
-                      <h3>Название:</h3>
+                      <h3>{{ $t('stationsTable.editStation.connectedStations.name') }}:</h3>
                       <v-text-field v-model="store.stations[i-1].connectedStations[j - 1].name"></v-text-field>
 
-                      <h3>Номер линии:</h3>
+                      <h3>{{ $t('stationsTable.editStation.connectedStations.number') }}:</h3>
                       <v-text-field v-model="store.stations[i-1].connectedStations[j - 1].branch.number"></v-text-field>
 
-                      <h2>Цвет:</h2>
+                      <h3>{{ $t('stationsTable.editStation.connectedStations.color') }}:</h3>
                       <center>
                         <v-color-picker v-model="store.stations[i-1].connectedStations[j - 1].branch.color" mode="hex"></v-color-picker>
                       </center>
 
+                      <br>
+
                       <v-btn
                           color="red"
                           size="x-large"
                           variant="flat"
                           block
-                          text="Удалить переход"
+                          :text="$t('stationsTable.editStation.connectedStations.delete')"
                           @click="store.stations[i-1].connectedStations.splice(j - 1, 1);">
                       </v-btn>
                     </template>
@@ -114,7 +116,7 @@ const store = useStore()
                     size="x-large"
                     variant="flat"
                     block
-                    text="Удалить станцию"
+                    :text="$t('stationsTable.editStation.delete')"
                     @click="isActive.value = false; store.stations.splice(i - 1, 1);">
                 </v-btn>
               </template>
@@ -125,7 +127,7 @@ const store = useStore()
                 <v-spacer></v-spacer>
 
                 <v-btn
-                    text="Закрыть"
+                    :text="$t('stationsTable.editStation.close')"
                     variant="text"
                     @click="isActive.value = false"
                 ></v-btn>

src/main.ts

@@ -13,6 +13,7 @@ import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
 
 import {createPinia} from "pinia";
+import {i18n} from "./utils/i18n.ts";
 
 const pinia = createPinia()
 
@@ -21,4 +22,4 @@ const vuetify = createVuetify({
     directives
 })
 
-createApp(App).use(vuetify).use(pinia).mount('#app')
+createApp(App).use(vuetify).use(pinia).use(i18n).mount('#app')

src/utils/i18n.ts

@@ -0,0 +1,113 @@
+// @ts-nocheck
+
+import { createI18n } from 'vue-i18n'
+
+const messages = {
+    en: {
+        app: {
+            main_settings: 'Main settings',
+            stations: "Stations",
+            configure: "Manage",
+            export_file: 'Export',
+            save_file: 'Save',
+            import_file: 'Import',
+            cursor: 'Cursor',
+            about: 'About project'
+        },
+        newStation: {
+            add_station: 'Add station',
+        },
+        stationsTable: {
+            name: "Name",
+            step: "Step",
+            action: "Action",
+            editStation: {
+                title: "Configuration: Station",
+                name: "Name",
+                show: "Show",
+                up: "Up",
+                down: "Down",
+                step: "Step",
+                connectedStations: {
+                    title: "Interchange Stations:",
+                    add: "Add int. station",
+                    name: "Name",
+                    number: "Line number",
+                    color: "Color",
+                    delete: "Remove int. station"
+                },
+                delete: "Remove station",
+                close: "Close"
+            }
+        },
+        baseSettings: {
+            width: "Scheme width",
+            height: "Scheme height",
+            line: "Line",
+            configure: "Configuration",
+            configModal: {
+                name: "Name",
+                number: "Number",
+                color: "Color",
+                close: "Close"
+            }
+        }
+    },
+    ru: {
+        app: {
+            main_settings: 'Основные настройки',
+            stations: "Станции",
+            configure: "Управления",
+            export_file: 'Экспорт',
+            save_file: 'Сохранить',
+            import_file: 'Импорт',
+            cursor: 'Курсор',
+            about: 'О проекте'
+        },
+        newStation: {
+            add_station: 'Добавить станцию',
+        },
+        stationsTable: {
+            name: "Название",
+            step: "Шаг",
+            action: "Действие",
+            editStation: {
+                title: "Конфигурация: Новая Станция",
+                name: "Название",
+                show: "Отображение",
+                up: "Сверху",
+                down: "Снизу",
+                step: "Шаг",
+                connectedStations: {
+                    title: "Связанные станции (переходы):",
+                    add: "Добавить переход",
+                    name: "Название",
+                    number: "Номер линии",
+                    color: "Цвет",
+                    delete: "Удалить переход"
+                },
+                delete: "Удалить станцию",
+                close: "Закрыть"
+            }
+        },
+        baseSettings: {
+            width: "Ширина схемы",
+            height: "Высота схемы",
+            line: "Линия",
+            configure: "Конфигурация",
+            configModal: {
+                name: "Название",
+                number: "Номер",
+                color: "Цвет",
+                close: "Закрыть"
+            }
+        }
+    }
+}
+
+// 2. Create i18n instance with options
+export const i18n = createI18n({
+    locale: sessionStorage.getItem("locale"),
+    fallbackLocale: 'ru',
+    messages
+})