chore: added storage timetables filtering, deleting and information

src/components/Timetable/TimetableSelect.vue

@@ -4,7 +4,7 @@
       class="p-1 rounded-md"
       :class="{
         'bg-zinc-800 hover:bg-zinc-700': globalStore.viewMode == 'active',
-        'bg-green-500 hover:bg-green-400': globalStore.viewMode == 'storage',
+        'bg-green-600 hover:bg-green-500': globalStore.viewMode == 'storage',
       }"
       @click="toggleViewMode"
     >
@@ -31,6 +31,7 @@
     <input
       type="text"
       v-if="globalStore.viewMode == 'storage'"
+      v-model="globalStore.timetableSearch"
       class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
       :placeholder="$t('train-search-placeholder')"
     />

src/components/Timetable/TimetableStorage.vue

@@ -1,15 +1,23 @@
 <template>
-  <div>
+  <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 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 class="flex flex-col gap-3">
-        <li v-for="timetable in globalStore.storageTimetables" class="text-left">
-          <button class="bg-zinc-900 p-2 w-full text-zinc-300 cursor-pointer hover:bg-zinc-800" @click="selectTimetable(timetable)">
-            <b>{{ timetable.driverName }} {{ timetable.category }} {{ timetable.trainNo }}</b> {{ timetable.route.replace('|', ' - ') }}
+        <li v-for="timetable in filteredTimetables" class="flex gap-1">
+          <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>
+            <b>{{ timetable.driverName }} | {{ timetable.category }} {{ timetable.trainNo }}</b> {{ timetable.route.replace('|', ' > ') }}
+          </button>
+
+          <button class="bg-zinc-900 p-2 hover:bg-zinc-800" @click="removeTimetable(timetable.timetableId)">
+            <TrashIcon class="size-5 text-white" />
           </button>
         </li>
       </ul>
@@ -18,14 +26,50 @@
 </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 { computed } from 'vue';
 
 const globalStore = useGlobalStore();
+const i18n = useI18n();
+
+const filteredTimetables = computed(() => {
+  const timetables = Object.values(globalStore.storageTimetables);
+
+  if (globalStore.timetableSearch.length != 0)
+    timetables.filter((st) =>
+      `${st.timetableId} ${st.driverName} ${st.route} ${st.category} ${st.trainNo}`
+        .toLocaleLowerCase()
+        .includes(globalStore.timetableSearch.toLocaleLowerCase())
+    );
+
+  timetables.sort((a, b) => {
+    return (b.savedTimestamp ?? 0) - (a.savedTimestamp ?? 0);
+  });
+
+  return timetables;
+});
 
 function selectTimetable(timetable: TimetableData) {
   globalStore.selectedStorageTimetable = timetable;
 }
+
+function removeTimetable(timetableId: number) {
+  const isConfirmed = confirm(i18n.t('delete-timetable-confirm'));
+
+  if (!isConfirmed) return;
+
+  try {
+    const savedTimetablesStorage = localStorage.getItem('savedTimetables');
+    let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage ? JSON.parse(savedTimetablesStorage) : {};
+    delete savedTimetablesJSON[timetableId];
+
+    localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));
+    globalStore.storageTimetables = savedTimetablesJSON;
+  } catch (error) {}
+}
 </script>
 
 <style scoped></style>

src/components/Timetable/TimetableWarnings.vue

@@ -1,15 +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 class="my-2 print:hidden" v-if="globalStore.currentTimetableData?.savedTimestamp">
+    <div class="flex gap-2">
+      <div class="flex items-center gap-2 bg-zinc-900 p-1 w-full">
+        <div>
+          <InformationCircleIcon class="size-5" />
+        </div>
+        <i18n-t keypath="storage-preview-info" tag="span">
+          <template v-slot:id>
+            <b>#{{ globalStore.currentTimetableData.timetableId }}</b>
+          </template>
+          <template v-slot:driverName>
+            <b>{{ globalStore.currentTimetableData.driverName }}</b>
+          </template>
+          <template v-slot:date>
+            <b>{{ new Date(globalStore.currentTimetableData.savedTimestamp).toLocaleString() }}</b>
+          </template>
+        </i18n-t>
       </div>
 
-      <button class="font-bold" @click="globalStore.selectedStorageTimetable = null">
+      <button class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800" @click="globalStore.selectedStorageTimetable = null">
         <ArrowUturnLeftIcon class="text-white size-6" />
       </button>
     </div>
@@ -17,7 +26,7 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowUturnLeftIcon } from '@heroicons/vue/16/solid';
+import { ArrowUturnLeftIcon, InformationCircleIcon } from '@heroicons/vue/16/solid';
 import { useGlobalStore } from '../../stores/global.store';
 
 const globalStore = useGlobalStore();