feat: offline mode; PWA

src/components/App/UpdatePrompt.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="fixed z-50 bottom-0 right-0">
+    <button @click="onUpdateClick" class="p-3 m-3 bg-cyan-600 rounded-md text-xl" ref="updateBtnEl">
+      <div>{{ $t('update-prompt.line1') }}</div>
+      <u>{{ $t('update-prompt.line2') }}</u>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+
+const emit = defineEmits(['onUpdateClick']);
+const updateBtnEl = ref<HTMLElement | null>(null);
+
+function onUpdateClick() {
+  emit('onUpdateClick');
+}
+
+onMounted(() => {
+  updateBtnEl.value?.focus();
+});
+</script>

src/components/Timetable/TimetableSelect.vue

@@ -99,9 +99,14 @@
     <input
       type="text"
       v-else-if="globalStore.viewMode == 'journal'"
-      v-model="globalStore.journalTimetableSearch"
       @change="fetchJournalTimetables"
-      class="bg-zinc-800 p-1 rounded-md print:hidden w-full"
+      v-model="globalStore.journalTimetableSearch"
+      :class="`bg-zinc-800 p-1 rounded-md print:hidden w-full ${
+        apiStore.connectionMode == 'offline' ? 'opacity-35' : ''
+      }`"
+      :disabled="
+        apiStore.journalDataStatus == DataStatus.LOADING || apiStore.connectionMode == 'offline'
+      "
       :placeholder="$t('journal-search-placeholder')"
     />
   </div>

src/components/Timetable/TrainTimetable.vue

@@ -18,7 +18,8 @@
 
   <div class="overflow-auto text-center font-bold text-zinc-400 p-1 min-h-full" v-else>
     <div v-if="globalStore.viewMode == 'active'">
-      <div>{{ $t('train-select-info') }}</div>
+      <div v-if="apiStore.connectionMode == 'online'">{{ $t('train-select-info') }}</div>
+      <div v-else class="bg-red-500 text-white p-2">{{ $t('data-offline-mode') }}</div>
     </div>
 
     <LocalStorageView v-else-if="globalStore.viewMode == 'storage'" />

src/components/TimetableViews/JournalStorageView.vue

@@ -4,7 +4,11 @@
       {{ $t('journal-preview-title') }}
     </h2>
 
-    <div v-if="apiStore.journalDataStatus == DataStatus.LOADING" class="bg-zinc-900 p-2">
+    <div v-if="apiStore.connectionMode == 'offline'" class="bg-red-500 p-2">
+      {{ $t('data-offline-mode') }}
+    </div>
+
+    <div v-else-if="apiStore.journalDataStatus == DataStatus.LOADING" class="bg-zinc-900 p-2">
       {{ $t('data-loading-text') }}
     </div>