hotfix: code improvements

src/components/Timetable/TimetableSelect.vue

@@ -41,12 +41,17 @@
       <SunIcon v-else class="text-white size-6" />
     </button>
 
-    <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="openPrintingWindow">
+    <button
+      class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
+      :disabled="globalStore.currentTimetableData == null"
+      @click="openPrintingWindow"
+    >
       <PrinterIcon class="text-white size-6" />
     </button>
 
     <button
-      class="p-1 rounded-md"
+      class="p-1 rounded-md disabled:opacity-60 disabled:hover:bg-zinc-800"
+      :disabled="globalStore.currentTimetableData == null"
       :class="{
         'bg-green-600 hover:bg-green-700': isTimetableSaved,
         'bg-zinc-800 hover:bg-zinc-700': !isTimetableSaved,
@@ -108,6 +113,14 @@ function saveToStorage() {
   try {
     const savedTimetablesStorage = localStorage.getItem('savedTimetables');
     let savedTimetablesJSON: Record<number, TimetableData> = savedTimetablesStorage ? JSON.parse(savedTimetablesStorage) : {};
+
+    if (savedTimetablesJSON[globalStore.currentTimetableData.timetableId] !== undefined) {
+      globalStore.selectedStorageTimetable = savedTimetablesJSON[globalStore.currentTimetableData.timetableId];
+      globalStore.viewMode = 'storage';
+
+      return;
+    }
+
     savedTimetablesJSON[globalStore.currentTimetableData.timetableId] = { ...globalStore.currentTimetableData, savedTimestamp: Date.now() };
 
     localStorage.setItem('savedTimetables', JSON.stringify(savedTimetablesJSON));

src/components/Timetable/TimetableStorage.vue

@@ -9,18 +9,16 @@
       <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>
 
-      <transition-group class="relative" tag="ul" name="list">
-        <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>
-            <b>{{ timetable.driverName }} | {{ timetable.category }} {{ timetable.trainNo }}</b> {{ timetable.route.replace('|', ' > ') }}
-          </button>
+      <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>
+          <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>
-      </transition-group>
+        <button class="bg-zinc-900 p-2 hover:bg-zinc-800" @click="removeTimetable(timetable.timetableId)">
+          <TrashIcon class="size-5 text-white" />
+        </button>
+      </li>
     </div>
   </div>
 </template>
@@ -36,10 +34,10 @@ const globalStore = useGlobalStore();
 const i18n = useI18n();
 
 const filteredTimetables = computed(() => {
-  const timetables = Object.values(globalStore.storageTimetables);
+  let timetables = Object.values(globalStore.storageTimetables);
 
   if (globalStore.timetableSearch.length != 0)
-    timetables.filter((st) =>
+    timetables = timetables.filter((st) =>
       `${st.timetableId} ${st.driverName} ${st.route} ${st.category} ${st.trainNo}`
         .toLocaleLowerCase()
         .includes(globalStore.timetableSearch.toLocaleLowerCase())

src/components/Timetable/TimetableWarnings.vue

@@ -18,6 +18,10 @@
         </i18n-t>
       </div>
 
+      <button class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800" @click="removeTimetable(globalStore.currentTimetableData.timetableId)">
+        <TrashIcon class="text-white size-6" />
+      </button>
+
       <button class="font-bold bg-zinc-900 p-1 hover:bg-zinc-800" @click="globalStore.selectedStorageTimetable = null">
         <ArrowUturnLeftIcon class="text-white size-6" />
       </button>
@@ -26,8 +30,28 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowUturnLeftIcon, InformationCircleIcon } from '@heroicons/vue/16/solid';
+import { ArrowUturnLeftIcon, InformationCircleIcon, TrashIcon } from '@heroicons/vue/16/solid';
 import { useGlobalStore } from '../../stores/global.store';
+import { useI18n } from 'vue-i18n';
+import type { TimetableData } from '../../types/common.types';
 
 const globalStore = useGlobalStore();
+const i18n = useI18n();
+
+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;
+    
+    globalStore.selectedStorageTimetable = null;
+  } catch (error) {}
+}
 </script>