chore: added storage switching between local and api modes

src/components/Timetable/TrainTimetable.vue

@@ -23,7 +23,7 @@
     </div>
 
     <div v-else>
-      <TimetableStorage />
+      <StorageView />
     </div>
   </div>
 </template>
@@ -36,7 +36,7 @@ import { useGlobalStore } from '../../stores/global.store';
 import TimetableBody from './TimetableBody.vue';
 import TimetableHeader from './TimetableHeader.vue';
 import type { SceneryRoute, StopRow, TimetablePathData } from '../../types/common.types';
-import TimetableStorage from './TimetableStorage.vue';
+import StorageView from '../TimetableStorage/StorageView.vue';
 
 const globalStore = useGlobalStore();
 const apiStore = useApiStore();

src/components/TimetableStorage/ApiStorage.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>API STORAGE</div>
+</template>
+
+<script setup lang="ts"></script>

src/components/TimetableStorage/LocalStorage.vue

@@ -1,14 +1,8 @@
 <template>
-  <div class="text-white">
+  <div>
-    <div v-if="globalStore.selectedStorageTimetable == null && Object.keys(globalStore.storageTimetables).length == 0">
-      <div class="font-bold text-xl">{{ $t('storage-empty-header') }}</div>
-      <div>{{ $t('storage-empty-info') }}</div>
-    </div>
-
-    <div v-else>
-      <div class="font-bold text-xl p-2 bg-zinc-700 mb-3">{{ $t('storage-preview-title') }}</div>
     <div class="font-bold p-2 bg-zinc-800 mb-3" v-if="filteredTimetables.length == 0">{{ $t('storage-preview-empty') }}</div>
 
+    <ul>
       <li v-for="timetable in filteredTimetables" class="flex gap-1 w-full my-2">
         <button class="bg-zinc-900 p-2 w-full cursor-pointer hover:bg-zinc-800 text-left" @click="selectTimetable(timetable)">
           <div class="text-zinc-300">#{{ timetable.timetableId }} &bull; {{ new Date(timetable.savedTimestamp!).toLocaleString() }}</div>
@@ -19,16 +13,16 @@
           <TrashIcon class="size-5 text-white" />
         </button>
       </li>
-    </div>
+    </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-import { TrashIcon } from '@heroicons/vue/16/solid';
-import { useGlobalStore } from '../../stores/global.store';
-import type { TimetableData } from '../../types/common.types';
 import { useI18n } from 'vue-i18n';
+import { useGlobalStore } from '../../stores/global.store';
 import { computed } from 'vue';
+import { TrashIcon } from '@heroicons/vue/16/solid';
+import type { TimetableData } from '../../types/common.types';
 
 const globalStore = useGlobalStore();
 const i18n = useI18n();
@@ -69,5 +63,3 @@ function removeTimetable(timetableId: number) {
   } catch (error) {}
 }
 </script>
-
-<style scoped></style>

src/components/TimetableStorage/StorageView.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="text-white">
+    <div v-if="globalStore.selectedStorageTimetable == null && Object.keys(globalStore.storageTimetables).length == 0">
+      <div class="font-bold text-xl">{{ $t('storage-empty-header') }}</div>
+      <div>{{ $t('storage-empty-info') }}</div>
+    </div>
+
+    <div v-else>
+      <div class="font-bold p-2 bg-zinc-700 mb-3">
+        <div class="text-2xl">{{ $t('storage-preview-title') }}</div>
+        <div class="flex gap-2 justify-center">
+          <template v-for="(mode, i) in storageModeList">
+            <span v-if="i != 0">&bull;</span>
+            <button class="hover:text-green-300" :class="{ 'underline text-green-300': currentStorageModeIndex == i }" @click="selectStorageMode(i)">
+              {{ $t(`storage-mode.${mode.key}`) }}
+            </button>
+          </template>
+        </div>
+      </div>
+
+      <!-- Current storage mode component -->
+      <component :is="storageModeList[currentStorageModeIndex].component" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
+import { StorageMode } from '../../types/common.types';
+import { ref, type Component, type Ref } from 'vue';
+import LocalStorage from '../TimetableStorage/LocalStorage.vue';
+import ApiStorage from '../TimetableStorage/ApiStorage.vue';
+
+interface CurrentStorageMode {
+  key: StorageMode;
+  component: Component;
+}
+
+const globalStore = useGlobalStore();
+const currentStorageModeIndex: Ref<number> = ref(0);
+
+const storageModeList: CurrentStorageMode[] = [
+  {
+    key: StorageMode.LOCAL,
+    component: LocalStorage,
+  },
+  {
+    key: StorageMode.API,
+    component: ApiStorage,
+  },
+];
+
+function selectStorageMode(index: number) {
+  currentStorageModeIndex.value = index;
+}
+</script>

src/locales/en.json

@@ -22,5 +22,9 @@
    "storage-preview-empty": "No entries found for given parameters",
    "storage-preview-info": "Archived timetable {id} for user {driverName} from: {date}",
    "storage-preview-button-text": "Return",
-   "delete-timetable-confirm": "Are you sure that you want to delete this timetable?"
+   "delete-timetable-confirm": "Are you sure that you want to delete this timetable?",
+   "storage-mode": {
+      "local": "LOCALLY",
+      "api": "STACJOWNIK"
+   }
 }

src/locales/pl.json

@@ -22,5 +22,9 @@
    "storage-preview-empty": "Nie znaleziono żadnych wpisów dla podanych parametrów",
    "storage-preview-info": "Rozkład archiwalny {id} maszynisty {driverName} z dnia {date}",
    "storage-preview-button-text": "Powróć",
-   "delete-timetable-confirm": "Czy na pewno chcesz usunąć ten rozkład jazdy z archiwum?"
+   "delete-timetable-confirm": "Czy na pewno chcesz usunąć ten rozkład jazdy z archiwum?",
+   "storage-mode": {
+      "local": "LOKALNIE",
+      "api": "STACJOWNIK"
+   }
 }

src/types/common.types.ts

@@ -1,5 +1,10 @@
 export type ViewMode = 'active' | 'storage';
 
+export enum StorageMode {
+  LOCAL = 'local',
+  API = 'api'
+}
+
 export interface ActiveData {
   trains: ActiveTrain[];
   activeSceneries: ActiveScenery[];