chore: timetable warnings; locale test

src/components/App/MainContainer.vue

@@ -1,13 +1,15 @@
 <template>
-  <main class="grid print:block p-3 mx-auto max-w-[800px] h-screen grid-rows-[auto_1fr_20px] gap-1">
+  <main class="grid print:block p-3 mx-auto max-w-[800px] h-screen grid-rows-[auto_auto_1fr] gap-1">
     <TimetableSelect />
+    <TimetableWarnings />
     <TrainTimetable />
-    <MainBottom />
+    <!-- <MainBottom /> -->
   </main>
 </template>
 
 <script setup lang="ts">
 import TimetableSelect from '../Timetable/TimetableSelect.vue';
+import TimetableWarnings from "../Timetable/TimetableWarnings.vue";
 import TrainTimetable from '../Timetable/TrainTimetable.vue';
-import MainBottom from './MainBottom.vue';
+// import MainBottom from './MainBottom.vue';
 </script>

src/components/Timetable/TimetableWarnings.vue

@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="my-2 print:hidden"
+    v-if="globalStore.currentTimetableData && (globalStore.timetableWarnings || globalStore.currentTimetableData.savedTimestamp)"
+  >
+    <div v-if="globalStore.currentTimetableData?.savedTimestamp" class="flex justify-between p-1 bg-zinc-900">
+      <div>
+        {{ $t('storage-preview-text') }}
+        <b>#{{ globalStore.currentTimetableData.timetableId }}</b>
+      </div>
+
+      <button class="font-bold" @click="globalStore.selectedStorageTimetable = null">
+        <ArrowUturnLeftIcon class="text-white size-6" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ArrowUturnLeftIcon } from '@heroicons/vue/16/solid';
+import { useGlobalStore } from '../../stores/global.store';
+
+const globalStore = useGlobalStore();
+</script>

src/components/Timetable/TrainTimetable.vue

@@ -4,14 +4,6 @@
     v-if="globalStore.currentTimetableData != null"
     class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full"
   >
-    <div class="p-1 bg-zinc-900 my-2 print:hidden flex justify-between" v-if="globalStore.currentTimetableData.savedTimestamp">
-      <div>
-        Przeglądasz teraz zapisany rozkład jazdy o ID: <b>#{{ globalStore.currentTimetableData.timetableId }}</b>
-      </div>
-
-      <button class="font-bold" @click="globalStore.selectedStorageTimetable = null">Powróć do listy</button>
-    </div>
-
     <div>
       <div class="p-1 font-bold w-max">
         {{ globalStore.currentTimetableData.category }} {{ globalStore.currentTimetableData.trainNo }} Relacja
@@ -37,7 +29,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';``
+import { computed } from 'vue';
+``;
 import { useApiStore } from '../../stores/api.store';
 import { useGlobalStore } from '../../stores/global.store';
 import TimetableBody from './TimetableBody.vue';

src/i18n.ts

@@ -4,7 +4,7 @@ import localePL from './locales/pl.json';
 import localeEN from './locales/en.json';
 
 const i18n = createI18n({
-  locale: 'pl',
+  locale: 'en',
   fallbackLocale: 'pl',
   legacy: false,
 

src/locales/en.json

@@ -1 +1,4 @@
-{}
+{
+   "storage-preview-text": "You're browsing now the saved timetable with ID:",
+   "storage-preview-button-text": "Return"
+}

src/locales/pl.json

@@ -1 +1,4 @@
-{}
+{
+   "storage-preview-text": "Przeglądasz teraz zapisany rozkład jazdy o ID:",
+   "storage-preview-button-text": "Powróć"
+}

src/stores/global.store.ts

@@ -10,9 +10,10 @@ export const useGlobalStore = defineStore('global', {
 
     selectedActiveTrain: null as ActiveTrain | null,
     selectedStorageTimetable: null as TimetableData | null,
-
     storageTimetables: {} as Record<number, TimetableData>,
 
+    timetableWarnings: [] as string[],
+
     generatedDate: null as Date | null,
     generatedMs: 0,
   }),