mirror of
https://github.com/grey-cat-1908/metro.git
synced 2024-09-22 19:22:00 +03:00
translate
This commit is contained in:
parent
4b1c653235
commit
490a1a7158
7 changed files with 162 additions and 136 deletions
|
@ -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": {
|
||||
|
|
17
src/App.vue
17
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="green" @click="save">Сохранить (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="orange" @click="exportFile">{{ $t("app.export_file") }} (svg)</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">{{ $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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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})">
|
||||
</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>
|
||||
<v-btn
|
||||
color="purple"
|
||||
size="x-large"
|
||||
variant="flat"
|
||||
block
|
||||
@click="store.stations.push({'name': 'Тест', 'up': true, 'connectedStations': [], 'step': 300})">
|
||||
{{ $t("newStation.add_station") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
@ -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>
|
||||
<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-else size="x-large" variant="flat" block color="blue" @click="store.stations[i-1].up = true">Снизу</v-btn>
|
||||
<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">{{ $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">{{ $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>
|
||||
|
|
|
@ -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')
|
113
src/utils/i18n.ts
Normal file
113
src/utils/i18n.ts
Normal file
|
@ -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
|
||||
})
|
Loading…
Reference in a new issue