Wsparcie języka angielskiego (beta)

package-lock.json

@@ -10157,6 +10157,11 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "8.23.0",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.23.0.tgz",
+      "integrity": "sha512-mXgniaumwca8tKdp55fmvqIcW658vQQXq0zEyRHp8sgZ6t+Md+Whhu6CCPg9/erVNlvpKzsGsucGjt2N8GrFCA=="
+    },
     "vue-loader": {
       "version": "15.9.3",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.9.3.tgz",

package.json

@@ -14,6 +14,7 @@
     "howler": "^2.2.1",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.5",
+    "vue-i18n": "^8.23.0",
     "vue-property-decorator": "^8.4.2",
     "vue-router": "^3.4.3",
     "vuex": "^3.4.0"

src/App.vue

@@ -27,13 +27,19 @@
 
           <span class="header_links">
             <router-link class="route" active-class="route-active" to="/" exact
-              >SCENERIE</router-link
+              >{{ $t("app.sceneries") }} </router-link
             >/
-            <router-link class="route" active-class="route-active" to="/trains"
-              >POCIĄGI</router-link
+            <router-link
+              class="route"
+              active-class="route-active"
+              to="/trains"
+              >{{ $t("app.trains") }}</router-link
             >/
-            <router-link class="route" active-class="route-active" to="/history"
-              >DZIENNIK</router-link
+            <router-link
+              class="route"
+              active-class="route-active"
+              to="/history"
+              >{{ $t("app.journal") }}</router-link
             >
           </span>
         </div>
@@ -82,6 +88,18 @@ export default class App extends Vue {
   mounted() {
     this.synchronizeData();
 
+    if (window.navigator.language) {
+      switch (window.navigator.language) {
+        case "pl-PL":
+          this.$i18n.locale = "pl";
+          break;
+        case "en-EN":
+        default:
+          this.$i18n.locale = "en";
+          break;
+      }
+    }
+
     if (StorageManager.getStringValue("version") != this.VERSION) {
       StorageManager.setStringValue("version", this.VERSION);
 

src/components/StationsView/FilterCard.vue

@@ -21,7 +21,7 @@
           <span
             class="option-content"
             :class="option.section + (option.value ? ' checked' : '')"
-            >{{ option.content }}</span
+            >{{ $t(`filters.${option.id}`) }}</span
           >
         </label>
       </div>
@@ -42,7 +42,9 @@
 
         <span class="slider-value">{{ slider.value }}</span>
 
-        <div class="slider-content">{{ slider.content }}</div>
+        <div class="slider-content">
+          {{ $t(`filters.sliders.${slider.id}`) }}
+        </div>
       </div>
     </div>
 
@@ -51,15 +53,17 @@
         <label>
           <input type="checkbox" v-model="saveOptions" @change="saveFilters" />
           <span class="save" :class="{ checked: saveOptions }">
-            ZAPISZ FILTRY
+            {{ $t("filters.save") }}
           </span>
         </label>
       </div>
     </div>
 
     <div class="card-actions flex">
-      <button class="button" @click="resetFilters">RESET FILTRÓW</button>
-      <button class="button" @click="exit">ZAMKNIJ FILTRY</button>
+      <button class="button" @click="resetFilters">
+        {{ $t("filters.reset") }}
+      </button>
+      <button class="button" @click="exit">{{ $t("filters.close") }}</button>
     </div>
   </section>
 </template>

src/components/StationsView/StationTable.vue

@@ -4,7 +4,56 @@
       <table>
         <thead>
           <tr>
+            <!-- <th v-html="$t('sceneries.station')"></th>
+            <th v-html="$t('sceneries.min-lvl')"></th>
+            <th v-html="$t('sceneries.status')"></th>
+            <th v-html="$t('sceneries.dispatcher')"></th>
+            <th v-html="$t('sceneries.dispatcher-lvl')"></th>
+            <th v-html="$t('sceneries.routes')"></th>
+            <th v-html="$t('sceneries.general')"></th>
+            <th v-html="$t('sceneries.drivers-online')"></th>
+            <th v-html="$t('sceneries.spawns')"></th>
+            <th v-html="$t('sceneries.timetables')"></th> -->
+
             <th
+              v-for="(id, i) in headIds"
+              :key="id"
+              @click="() => changeSorter(i)"
+            >
+              <span class="header_wrapper">
+                <div v-html="$t(`sceneries.${id}`)"></div>
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.index == i"
+                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
+                  alt
+                />
+              </span>
+            </th>
+
+            <th
+              v-for="(id, i) in headIconsIds"
+              :key="id"
+              @click="() => changeSorter(i + 7)"
+            >
+              <span class="header_wrapper">
+                <img
+                  :src="require(`@/assets/icon-${id}.svg`)"
+                  :alt="id"
+                  :title="$t(`sceneries.${id}s`)"
+                />
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.index == i + 7"
+                  :src="sorterActive.dir == 1 ? ascIcon : descIcon"
+                  alt
+                />
+              </span>
+            </th>
+
+            <!-- <th
               v-for="(head, i) in headTitles"
               :key="i"
               @click="() => changeSorter(i)"
@@ -28,7 +77,7 @@
                   alt
                 />
               </span>
-            </th>
+            </th> -->
           </tr>
         </thead>
 
@@ -204,7 +253,6 @@
 import { Component, Prop } from "vue-property-decorator";
 
 import Station from "@/scripts/interfaces/Station";
-
 import styleMixin from "@/mixins/styleMixin";
 
 import Options from "@/components/StationsView/Options.vue";
@@ -228,6 +276,18 @@ export default class StationTable extends styleMixin {
   ascIcon: string = require("@/assets/icon-arrow-asc.svg");
   descIcon: string = require("@/assets/icon-arrow-desc.svg");
 
+  headIds = [
+    "station",
+    "min-lvl",
+    "status",
+    "dispatcher",
+    "dispatcher-lvl",
+    "routes",
+    "general",
+  ];
+
+  headIconsIds = ["user", "spawn", "timetable"];
+
   headTitles: string[][] = [
     ["Stacja"],
     ["Min. poziom", "dyżurnego"],

src/components/TrainsView/TrainOptions.vue

@@ -16,7 +16,9 @@
                 @click="() => chooseOption(option)"
               >
                 <input type="radio" name="sort" :id="option.id" />
-                <label :for="option.id">{{ option.content }}</label>
+                <label :for="option.id">
+                  {{ $t(`trains.option-${option.id}`) }}
+                </label>
               </li>
             </ul>
           </div>
@@ -27,7 +29,7 @@
         <div class="search-box">
           <input
             class="search-input"
-            placeholder="Szukaj nr pociągu..."
+            :placeholder="$t('trains.search-no')"
             v-model="searchedTrain"
           />
           <img
@@ -43,7 +45,7 @@
         <div class="search-box">
           <input
             class="search-input"
-            placeholder="Szukaj maszynisty..."
+            :placeholder="$t('trains.search-driver')"
             v-model="searchedDriver"
           />
           <img
@@ -70,7 +72,7 @@ export default class TrainOptions extends Vue {
   clickEventListener!: EventListener;
 
   sorterOptionsOpen = false;
-  currentSorterOption = "kilometraż";
+  currentSorterOption = this.$t("trains.option-distance");
 
   searchedTrain = "";
   searchedDriver = "";
@@ -112,7 +114,8 @@ export default class TrainOptions extends Vue {
 
   chooseOption(option: { id: string; content: string }) {
     this.$emit("changeSorter", { id: option.id, dir: -1 });
-    this.currentSorterOption = option.content;
+
+    this.currentSorterOption = this.$t(`trains.option-${option.id}`);
 
     this.closeSorterOptions();
   }

src/components/TrainsView/TrainStats.vue

@@ -6,17 +6,17 @@
         @click="toggleStats"
         v-if="trains.length > 0"
       >
-        STATYSTYKI RUCHU
+        {{ $t("trains.stats") }}
       </button>
     </div>
 
     <transition name="stats-anim">
       <div class="stats-body" v-if="statsOpen">
-        <h2 class="stats-header">STATYSTYKI RUCHU</h2>
+        <h2 class="stats-header">{{ $t("trains.stats") }}</h2>
 
         <div class="stats-speed">
           <div class="title stats-title">
-            PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]
+            {{ $t("trains.stats-speed") }}
           </div>
           <div class="stats-content">
             {{ speedStats.min }} | {{ speedStats.avg }} | {{ speedStats.max }}
@@ -25,7 +25,7 @@
 
         <div class="stats-length">
           <div class="title stats-title">
-            DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]
+            {{ $t("trains.stats-length") }}
           </div>
           <div class="stats-content">
             {{ timetableStats.min }} | {{ timetableStats.avg }} |
@@ -34,7 +34,9 @@
         </div>
 
         <div class="stats-categories">
-          <div class="title stats-title">KATEGORIE RJ</div>
+          <div class="title stats-title">
+            {{ $t("trains.stats-categories") }}
+          </div>
 
           <div class="category-list">
             <span
@@ -49,19 +51,23 @@
 
           <div class="special-list">
             <span class="special twr">
-              <span class="special-type">WYSOKIEGO RYZYKA</span>
+              <span class="special-type">{{
+                $t("trains.stats-special-twr")
+              }}</span>
               <span class="special-count">{{ specialTrainCount[0] }}</span>
             </span>
 
             <span class="special skr">
-              <span class="special-type">PRZEKROCZONA SKRAJNIA</span>
+              <span class="special-type">{{
+                $t("trains.stats-special-skr")
+              }}</span>
               <span class="special-count">{{ specialTrainCount[1] }}</span>
             </span>
           </div>
         </div>
 
         <div class="stats-locos">
-          <div class="title stats-title">NAJCZĘSTSZE JEDNOSTKI</div>
+          <div class="title stats-title">{{ $t("trains.stats-locos") }}</div>
 
           <div class="loco-list stats-content">
             <div class="loco-item" v-for="(loco, i) in locoList" :key="i">

src/data/options.json

@@ -56,7 +56,7 @@
       "content": "SCS"
     },
     {
-      "id": "by-hand",
+      "id": "manual",
       "name": "ręczne",
       "iconName": "ręczne",
       "section": "control",
@@ -65,7 +65,7 @@
       "content": "RĘCZNE"
     },
     {
-      "id": "levers",
+      "id": "mechanical",
       "name": "mechaniczne",
       "iconName": "mechaniczne",
       "section": "control",
@@ -84,7 +84,7 @@
       "content": "WSPÓŁCZESNA"
     },
     {
-      "id": "semaphore",
+      "id": "semaphores",
       "name": "kształtowa",
       "iconName": "kształtowa",
       "section": "signals",
@@ -102,7 +102,7 @@
       "content": "MIESZANA"
     },
     {
-      "id": "historic",
+      "id": "historical",
       "name": "historyczna",
       "iconName": "historyczna",
       "section": "signals",
@@ -134,7 +134,7 @@
   ],
   "sliders": [
     {
-      "id": "min-level",
+      "id": "min-lvl",
       "name": "minLevel",
       "minRange": 0,
       "maxRange": 20,
@@ -143,7 +143,7 @@
       "content": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO"
     },
     {
-      "id": "min-oneway-e",
+      "id": "routes-1t-cat",
       "name": "minOneWayCatenary",
       "minRange": 0,
       "maxRange": 5,
@@ -152,7 +152,7 @@
       "content": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
     },
     {
-      "id": "min-oneway-ne",
+      "id": "routes-1t-other",
       "name": "minOneWay",
       "minRange": 0,
       "maxRange": 5,
@@ -161,7 +161,7 @@
       "content": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
     },
     {
-      "id": "min-twoway-e",
+      "id": "routes-2t-cat",
       "name": "minTwoWayCatenary",
       "minRange": 0,
       "maxRange": 5,
@@ -170,7 +170,7 @@
       "content": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
     },
     {
-      "id": "min-twoway-ne",
+      "id": "routes-2t-other",
       "name": "minTwoWay",
       "minRange": 0,
       "maxRange": 5,

src/lang/en.json

@@ -0,0 +1,73 @@
+{
+  "app": {
+    "sceneries": "SCENERIES",
+    "trains": "TRAINS",
+    "journal": "JOURNAL"
+  },
+  "options": {
+    "filters": "FILTERS",
+    "donate": "DONATE"
+  },
+  "filters": {
+    "title": "STATION FILTER",
+    "default": "DEFAULT",
+    "not-default": "OTHER",
+    "real": "REAL",
+    "fictional": "FICTIONAL",
+    "SPK": "SPK",
+    "SCS": "SCS",
+    "manual": "MANUAL",
+    "mechanical": "MECHANICAL",
+    "modern": "MODERN",
+    "semaphores": "SEMAPHORES",
+    "mixed": "MIXED",
+    "historical": "HISTORICAL",
+    "free": "FREE",
+    "occupied": "OCCUPIED",
+    "sliders": {
+      "min-lvl": "MINIMUM REQUIRED DISPATCHER LEVEL",
+      "routes-1t-cat": "MINIMUM CATENARY SINGLE TRACK ROUTES",
+      "routes-1t-other": "MINIMUM OTHER SINGLE TRACK ROUTES",
+      "routes-2t-cat": "MINIMUM CATENARY DOUBLE TRACK ROUTES",
+      "routes-2t-other": "MINIMUM OTHER DOUBLE TRACK ROUTES"
+    },
+    "save": "SAVE FILTERS",
+    "reset": "RESET FILTERS",
+    "close": "CLOSE FILTERS"
+  },
+  "sceneries": {
+    "station": "Station",
+    "min-lvl": "Min. dispatcher <br> level",
+    "status": "Status",
+    "dispatcher": "Dispatcher",
+    "dispatcher-lvl": "Dispatcher <br> level",
+    "routes": "Routes <br> double | single",
+    "general": "General info",
+    "users": "Drivers online",
+    "spawns": "Spawns online",
+    "timetables": "Active timetables"
+  },
+  "trains": {
+    "stats": "TRAFFIC STATISTICS",
+    "stats-speed": "TRAINS SPEED (MIN | AVG | MAX) [km/h]",
+    "stats-length": "TIMETABLES LENGTH (MIN | AVG | MAX) [km]",
+    "stats-categories": "TIMETABLE CATEGORIES",
+    "stats-special-twr": "HIGH RISK",
+    "stats-special-skr": "EXCEEDED STRUCT. GAUGE",
+    "stats-locos": "MOST COMMON UNITS",
+    "option-mass": "mass",
+    "option-speed": "speed",
+    "option-length": "length",
+    "option-distance": "distance",
+    "option-timetable": "train no.",
+    "search-no": "Search for train no...",
+    "search-driver": "Search for driver...",
+    "detailed-timetable": "Detailed timetable for train no. "
+  },
+  "journal": {
+    "title": "SCENERY ACTIVITY JOURNAL",
+    "subtitle": "Shows all recent dispatchers on a selected scenery",
+    "disclaimer": "<b>This functionality is unfinished!</b> <br> Information shown here could be false or incorrect!",
+    "select": "Select a scenery"
+  }
+}

src/lang/pl.json

@@ -0,0 +1,73 @@
+{
+  "app": {
+    "sceneries": "SCENERIE",
+    "trains": "POCIĄGI",
+    "journal": "DZIENNIK"
+  },
+  "options": {
+    "filters": "FILTRY",
+    "donate": "WESPRZYJ"
+  },
+  "filters": {
+    "title": "FILTRUJ STACJE",
+    "default": "DOMYŚLNA",
+    "not-default": "POZA PACZKĄ",
+    "real": "REALNA",
+    "fictional": "FIKCYJNA",
+    "SPK": "SPK",
+    "SCS": "SCS",
+    "manual": "RĘCZNE",
+    "mechanical": "MECHANICZNE",
+    "modern": "WSPÓŁCZESNA",
+    "semaphores": "KSZTAŁTOWA",
+    "mixed": "MIESZANA",
+    "historical": "HISTORYCZNA",
+    "free": "WOLNA",
+    "occupied": "ZAJĘTA",
+    "sliders": {
+      "min-lvl": "MINIMALNY WYMAGANY POZIOM DYŻURNEGO",
+      "routes-1t-cat": "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)",
+      "routes-1t-other": "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)",
+      "routes-2t-cat": "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)",
+      "routes-2t-other": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
+    },
+    "save": "ZAPISZ FILTRY",
+    "reset": "RESETUJ FILTRY",
+    "close": "ZAMKNIJ FILTRY"
+  },
+  "sceneries": {
+    "station": "Stacja",
+    "min-lvl": "Min. poziom <br/> dyżurnego",
+    "status": "Status",
+    "dispatcher": "Dyżurny",
+    "dispatcher-lvl": "Poziom <br> dyżurnego",
+    "routes": "Szlaki <br> 2tor | 1tor",
+    "general": "Informacje <br> ogólne",
+    "users": "Maszyniści online",
+    "spawns": "Otwarte spawny",
+    "timetables": "Aktywne rozkłady jazdy"
+  },
+  "trains": {
+    "stats": "STATYSTYKI RUCHU",
+    "stats-speed": "PRĘDKOŚCI POCIĄGÓW (MIN | ŚR | MAX) [km/h]",
+    "stats-length": "DŁUGOŚCI ROZKŁADÓW (MIN | ŚR | MAX) [km]",
+    "stats-categories": "KATEGORIE RJ",
+    "stats-special-twr": "WYSOKIEGO RYZYKA",
+    "stats-special-skr": "PRZEKROCZONA SKRAJNIA",
+    "stats-locos": "NAJCZĘSTSZE JEDNOSTKI",
+    "option-mass": "masa",
+    "option-speed": "prędkość",
+    "option-length": "długość",
+    "option-distance": "kilometraż",
+    "option-timetable": "numer pociagu",
+    "search-no": "Szukaj nr pociągu...",
+    "search-driver": "Szukaj maszynisty...",
+    "detailed-timetable": "Szczegółowy rozkład jazdy pociągu "
+  },
+  "journal": {
+    "title": "DZIENNIK AKTYWNOŚCI SCENERII",
+    "subtitle": "Pokazuje dyżurnych, którzy ostatnio byli aktywni na wybranej scenerii",
+    "disclaimer": "<b>Ta funkcjonalność jest w testach beta!</b> <br> Informacje pokazywane na ekranie mogą znikać, a ich zawartość może być fałszywa!",
+    "select": "Wybierz scenerię"
+  }
+}

src/main.ts

@@ -2,11 +2,27 @@ import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import VueI18n from 'vue-i18n';
+
+import enLang from '@/lang/en.json';
+import plLang from '@/lang/pl.json';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: 'pl',
+  fallbackLocale: 'pl',
+  messages: {
+    en: enLang,
+    pl: plLang,
+  },
+});
 
 Vue.config.productionTip = false;
 
 new Vue({
   router,
   store,
+  i18n,
   render: h => h(App),
 }).$mount('#app');

src/views/StationsView.vue

@@ -15,13 +15,13 @@
                 :src="require('@/assets/icon-filter2.svg')"
                 alt="icon-filter"
               />
-              <p>FILTRY</p>
+              <p>{{ $t("options.filters") }}</p>
             </button>
 
             <button class="action-btn" @click="toggleModal">
               <img :src="dolarIcon" alt="icon-dolar" />
 
-              <p>WESPRZYJ</p>
+              <p>{{ $t("options.donate") }}</p>
             </button>
           </div>