PWA: tryb offline

src/components/App/StatusIndicator.vue

@@ -161,7 +161,6 @@
 </template>
 
 <script lang="ts">
-
 import { defineComponent } from 'vue';
 import { DataStatus } from '../../scripts/enums/DataStatus';
 import { useStore } from '../../store/store';
@@ -172,6 +171,7 @@ export default defineComponent({
     return {
       tooltipActive: false,
       indicator: {
+        offline: false,
         status: DataStatus.Loading,
         message: 'data-status.S3',
       },
@@ -193,6 +193,7 @@ export default defineComponent({
 
     return {
       dataStatus: store.dataStatuses,
+      store,
     };
   },
 
@@ -206,6 +207,13 @@ export default defineComponent({
         const trainsDataStatus = statuses.trains;
         const dispatcherDataStatus = statuses.dispatchers;
 
+        if (this.store.isOffline) {
+          this.setSignalStatus(DataStatus.Initialized);
+          this.indicator.status = DataStatus.Initialized;
+          this.indicator.message = 'data-status.S1-offline';
+          return;
+        }
+
         if (connectionStatus == DataStatus.Error) {
           this.setSignalStatus(connectionStatus);
           this.indicator.status = connectionStatus;
@@ -252,6 +260,10 @@ export default defineComponent({
       this.orangeLight = false;
       this.redBottomLight = false;
 
+      if (status == DataStatus.Initialized) {
+        this.redTopLight = true;
+      }
+
       if (status == DataStatus.Loaded) {
         this.greenLight = true;
       }

src/components/App/UpdatePrompt.vue

@@ -14,18 +14,11 @@
 </template>
 
 <script setup lang="ts">
-import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { ref } from 'vue';
+import useCustomSW from '../../mixins/useCustomSW';
 
 const hidePrompt = ref(false);
-
-const { needRefresh, updateServiceWorker } = useRegisterSW({
-  immediate: true,
-
-  onNeedRefresh() {
-    console.log('Needs refresh!');
-  },
-});
+const { needRefresh, updateServiceWorker } = useCustomSW();
 </script>
 
 <style lang="scss" scoped>

src/components/JournalView/JournalStats.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="journal-stats">
+  <div class="journal-stats" v-show="!store.isOffline">
     <div class="tabs">
       <button
         v-for="tab in data.tabs"

src/components/TrainsView/TrainTable.vue

@@ -2,18 +2,22 @@
   <div class="train-table">
     <transition name="anim" mode="out-in">
       <div :key="store.dataStatuses.trains">
-        <Loading v-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+        <div class="table-info" v-if="store.isOffline">
+          {{ $t('app.offline') }}
+        </div>
 
-        <div class="table-info no-trains" v-if="trains.length == 0 && store.dataStatuses.trains != 0">
+        <Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
+
+        <div class="table-info no-trains" v-else-if="trains.length == 0 && store.dataStatuses.trains != 0">
           {{ $t('trains.no-trains') }}
         </div>
 
-        <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length != 0">
+        <div class="timeouts-warning" v-if="trainNumbersWithTimeouts.length == 0">
           <b class="warning-timeout">?</b>
           {{ $t('trains.timeout') }}
         </div>
-
-        <ul class="train-list">
+        
+        <ul class="train-list" v-else>
           <li
             class="train-row"
             v-for="train in currentTrains"