chore: moved language button to sceneries table top bar

src/components/App/AppHeader.vue

@@ -1,18 +1,6 @@
 <template>
   <header class="app_header">
     <div class="header_container">
-      <div class="header_icons">
-        <span class="icons-top">
-          <img
-            src="/images/icon-pl.svg"
-            alt="icon-pl"
-            @click="changeLang('en')"
-            v-if="currentLang == 'pl'"
-          />
-          <img src="/images/icon-en.jpg" alt="icon-en" @click="changeLang('pl')" v-else />
-        </span>
-      </div>
-
       <div class="header_body">
         <StatusIndicator />
 
@@ -76,27 +64,12 @@ import RegionDropdown from '../Global/RegionDropdown.vue';
 export default defineComponent({
   components: { StatusIndicator, Clock, RegionDropdown },
 
-  emits: ['changeLang'],
-
-  props: {
-    currentLang: {
-      type: String,
-      required: true
-    }
-  },
-
   setup() {
     return {
       store: useMainStore()
     };
   },
 
-  methods: {
-    changeLang(lang: string) {
-      this.$emit('changeLang', lang);
-    }
-  },
-
   computed: {
     onlineTrainsCount() {
       return this.store.trainList.filter((train) => train.region == this.store.region.id).length;
@@ -141,7 +114,7 @@ export default defineComponent({
 
     border-radius: 0 0 1em 1em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       position: relative;
       margin-top: 0.5em;
     }
@@ -180,20 +153,12 @@ export default defineComponent({
 
     padding: 0.5em;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       transform: translateX(85%);
     }
   }
 }
 
-// ICONS
-.icons-top {
-  img {
-    width: 2.5em;
-    cursor: pointer;
-  }
-}
-
 // COUNTER
 .info_counter {
   display: flex;

src/components/App/AppWelcomeCard.vue

@@ -4,11 +4,11 @@
       <h1>{{ $t('welcome.title') }}</h1>
 
       <div class="language-select">
-        <button :data-active="$i18n.locale == 'pl'" @click="changeLang('pl')">
+        <button :data-active="$i18n.locale == 'pl'" @click="store.changeLocale('pl')">
           <img src="/images/icon-pl.svg" alt="" width="45" />
         </button>
 
-        <button :data-active="$i18n.locale == 'en'" @click="changeLang('en')">
+        <button :data-active="$i18n.locale == 'en'" @click="store.changeLocale('en')">
           <img src="/images/icon-en.jpg" alt="" width="45" />
         </button>
       </div>
@@ -114,12 +114,9 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import Card from '../Global/Card.vue';
 import { useMainStore } from '../../store/mainStore';
-import StorageManager from '../../managers/storageManager';
 
-const i18n = useI18n();
 const store = useMainStore();
 
 const emit = defineEmits(['toggleCard']);
@@ -130,13 +127,6 @@ const props = defineProps({
 function toggleCard(state: boolean) {
   emit('toggleCard', state);
 }
-
-function changeLang(localeName: string) {
-  i18n.locale.value = localeName;
-  store.currentLocale = localeName;
-
-  StorageManager.setStringValue('lang', localeName);
-}
 </script>
 
 <style lang="scss" scoped>