chore(app): added migration info bar

src/App.vue

@@ -2,66 +2,69 @@
   <AppModals />
   <ImageFullscreenPreview v-if="store.vehiclePreviewSrc" />
 
+  <transition name="slide-bottom-anim">
+    <MigrationInfo v-if="store.isMigrationInfoOpen" />
+  </transition>
+
   <router-view></router-view>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
 import { useStore } from './store';
 import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import AppContainerView from './views/AppContainerView.vue';
 import AppModals from './components/app/AppModals.vue';
+import { computed, onMounted, watchEffect } from 'vue';
 import { registerSW } from 'virtual:pwa-register';
+import MigrationInfo from './components/app/MigrationInfo.vue';
+
+const store = useStore();
 
 registerSW({
   immediate: true,
-  onNeedRefresh() {
-    console.log('Needs refresh!');
-  },
 });
 
-export default defineComponent({
-  components: { ImageFullscreenPreview, AppContainerView, AppModals },
-  data() {
-    return { store: useStore() };
-  },
-
-  created() {
-    this.loadStockDataFromStorage();
-    this.store.setupAPIData();
-  },
-
-  computed: {
-    currentStockString() {
-      return this.store.stockString;
-    },
-  },
-
-  watch: {
-    currentStockString(val: string) {
-      if (val != this.store.chosenStorageStockString) {
-        this.store.chosenStorageStockName = '';
-      }
-    },
-  },
-
-  methods: {
-    loadStockDataFromStorage() {
-      const savedData = localStorage.getItem('savedStockData');
-
-      if (!savedData) {
-        localStorage.setItem('savedStockData', JSON.stringify({}));
-        return;
-      }
-
-      try {
-        this.store.storageStockData = JSON.parse(savedData);
-      } catch (error) {
-        console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
-      }
-    },
-  },
+onMounted(() => {
+  loadStockDataFromStorage();
+  showMigrationInfo();
+  store.setupAPIData();
 });
+
+const currentStockString = computed(() => store.stockString);
+
+watchEffect(() => {
+  if (currentStockString.value != store.chosenStorageStockString) {
+    store.chosenStorageStockName = '';
+  }
+});
+
+function showMigrationInfo() {
+  // Show only on old domain
+  if (location.hostname !== 'pojazdownik-td2.web.app' && location.hostname !== 'localhost') return;
+
+  const showInfo = localStorage.getItem('showMigrationInfo');
+
+  // Do not show if already acknowledged
+  if (showInfo === 'false') return;
+  
+  setTimeout(() => {
+    store.isMigrationInfoOpen = true;
+  }, 2000);
+}
+
+function loadStockDataFromStorage() {
+  const savedData = localStorage.getItem('savedStockData');
+
+  if (!savedData) {
+    localStorage.setItem('savedStockData', JSON.stringify({}));
+    return;
+  }
+
+  try {
+    store.storageStockData = JSON.parse(savedData);
+  } catch (error) {
+    console.error('Wystąpił błąd podczas przetwarzania danych o składach z localStorage!', error);
+  }
+}
 </script>
 
 <style lang="scss">