tłumaczenie PL/EN (wip, cz.2)

src/components/sections/LogoSection.vue

@@ -1,36 +1,75 @@
 <template>
-  <section class="logo-section" @click="navigate">
-    <img src="/images/logo.svg" alt="logo pojazdownik" />
+  <section class="logo-section">
+    <img src="/images/logo.svg" alt="logo pojazdownik" @click="navigate" />
+
+    <div class="actions">
+      <button
+        class="btn btn--text"
+        v-for="action in localeActions"
+        :data-selected="$i18n.locale == action.locale"
+        @click="chooseLocale(action.locale)"
+      >
+        {{ action.name }}
+      </button>
+    </div>
   </section>
 </template>
 
 <script lang="ts">
 export default {
-  setup() {
-    return {};
+  data() {
+    return {
+      localeActions: [
+        {
+          name: 'POLSKI',
+          locale: 'pl',
+        },
+        {
+          name: 'ENGLISH',
+          locale: 'en',
+        },
+      ],
+    };
   },
-
   methods: {
     navigate() {
       window.location.pathname = '';
     },
+
+    chooseLocale(locale: string) {
+      this.$i18n.locale = locale;
+    },
   },
 };
 </script>
 
 <style lang="scss" scoped>
+@import '../../styles/global.scss';
+
 .logo-section {
   grid-row: 1;
   grid-column: 1;
   margin-bottom: 1.5em;
 
   display: flex;
-  justify-content: center;
   align-items: center;
+  flex-direction: column;
+  gap: 0.5em;
 
   cursor: pointer;
 }
 
+.actions {
+  display: flex;
+  gap: 0.5em;
+
+  button[data-selected='true'] {
+    font-weight: bold;
+    color: $accentColor;
+    text-decoration: underline;
+  }
+}
+
 img {
   max-width: 25em;
   width: 100%;

src/components/sections/TrainImageSection.vue

@@ -1,14 +1,14 @@
 <template>
   <section class="train-image-section">
     <div class="train-image__wrapper">
-      <div class="train-image__content" :class="{'supporter': store.chosenVehicle?.supportersOnly}">
+      <div class="train-image__content" :class="{ supporter: store.chosenVehicle?.supportersOnly }">
         <transition name="img-message-anim">
           <div class="empty-message" v-if="store.imageLoading && store.chosenVehicle?.imageSrc">
-            ŁADOWANIE OBRAZU...
+            {{ $t('preview.loading') }}
           </div>
         </transition>
 
-        <div class="no-img" v-if="!store.chosenVehicle">PODGLĄD WYBRANEGO POJAZDU</div>
+        <div class="no-img" v-if="!store.chosenVehicle">{{ $t('preview.title') }}</div>
 
         <img
           v-if="store.chosenVehicle"
@@ -23,11 +23,11 @@
 
       <div class="train-image__info" v-if="store.chosenVehicle">
         <b class="text--accent">{{ store.chosenVehicle.type }}</b> &bull;
-        <b style="color: #ccc">{{
-          vehicleTypes[
-            isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType || 'loco-e'
-          ]
-        }}</b>
+        <b style="color: #ccc">
+          {{
+            $t(`preview.${isLocomotive(store.chosenVehicle) ? store.chosenVehicle.power : store.chosenVehicle.useType}`)
+          }}
+        </b>
 
         <div style="color: #ccc">
           <div>
@@ -35,21 +35,23 @@
             {{ store.chosenVehicle.maxSpeed }} km/h
           </div>
 
-          <div v-if="isLocomotive(store.chosenVehicle)">Typ kabiny: {{ store.chosenVehicle.cabinType }}</div>
+          <div v-if="isLocomotive(store.chosenVehicle)">
+            {{ $t('preview.cabin') }} {{ store.chosenVehicle.cabinType }}
+          </div>
 
           <div v-else>
             {{
-              store.chosenVehicle.useType == 'car-cargo'
-                ? store.stockData?.usage[store.chosenVehicle.constructionType]
-                : 'Typ konstrukcji: ' + store.chosenVehicle.constructionType
+              store.chosenVehicle.useType == 'car-cargo' // ? store.stockData?.usage[store.chosenVehicle.constructionType]
+                ? $t(`usage.${store.chosenVehicle.constructionType}`)
+                : `${$t('preview.construction')} ${store.chosenVehicle.constructionType}`
             }}
           </div>
 
-          <b style="color: salmon;" v-if="store.chosenVehicle.supportersOnly">* TYLKO DLA SPONSORÓW</b>
+          <b style="color: salmon" v-if="store.chosenVehicle.supportersOnly">{{ $t('preview.sponsor-only') }}</b>
         </div>
       </div>
 
-      <div class="train-image__info" v-else>Wybierz pojazd lub wagon, aby zobaczyć jego podgląd powyżej</div>
+      <div class="train-image__info" v-else>{{ $t('preview.desc') }}</div>
     </div>
   </section>
 </template>
@@ -70,19 +72,6 @@ export default defineComponent({
     };
   },
 
-  data() {
-    return {
-      vehicleTypes: {
-        'loco-e': 'ELEKTROWÓZ',
-        'loco-s': 'SPALINOWÓZ',
-        'loco-ezt': 'EZT',
-        'loco-szt': 'SZT',
-        'car-passenger': 'WAGON PASAŻERSKI',
-        'car-cargo': 'WAGON TOWAROWY',
-      } as { [key: string]: string },
-    };
-  },
-
   watch: {
     chosenVehicle(vehicle: Vehicle, prevVehicle: Vehicle) {
       if (vehicle && vehicle.type != prevVehicle?.type) {