chore(app): added button for manual migration info card toggle

public/images/icon-alert-triangle.svg

@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" />
+  <path d="M12 9v4" />
+  <path d="M12 17h.01" />
+</svg>

src/App.vue

@@ -8,7 +8,7 @@
     <AppWelcomeCard :is-card-open="isWelcomeCardOpen" @toggle-card="closeWelcomeCard" />
 
     <MigrateInfoCard
-      :is-open="isMigrateInfoCardOpen"
+      :is-open="store.isMigrateInfoCardOpen"
       @toggle-card="closeMigrateInfoCard"
     ></MigrateInfoCard>
 
@@ -78,7 +78,6 @@ export default defineComponent({
 
     isUpdateCardOpen: false,
     isWelcomeCardOpen: false,
-    isMigrateInfoCardOpen: false,
 
     isOnProductionHost: /(stacjownik-td2)(\.web\.app|\.spythere\.eu)/.test(location.hostname)
   }),
@@ -113,7 +112,7 @@ export default defineComponent({
       }
 
       if (query.get('migrateCard') == '1') {
-        this.isMigrateInfoCardOpen = true;
+        this.store.isMigrateInfoCardOpen = true;
       }
     },
 
@@ -177,7 +176,7 @@ export default defineComponent({
       if (location.hostname != 'stacjownik-td2.web.app') return;
       if (StorageManager.getBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY) === true) return;
 
-      this.isMigrateInfoCardOpen = true;
+      this.store.isMigrateInfoCardOpen = true;
     },
 
     loadLang() {
@@ -204,7 +203,7 @@ export default defineComponent({
     },
 
     closeMigrateInfoCard() {
-      this.isMigrateInfoCardOpen = false;
+      this.store.isMigrateInfoCardOpen = false;
       StorageManager.setBooleanValue(MIGRATE_INFO_CARD_SEEN_KEY, true);
     }
   }

src/store/mainStore.ts

@@ -36,7 +36,9 @@ export const useMainStore = defineStore('mainStore', {
       chosenModalTrainId: undefined,
 
       modalLastClickedTarget: null,
-      currentLocale: 'pl'
+      currentLocale: 'pl',
+
+      isMigrateInfoCardOpen: false
     }) as MainStoreState,
 
   actions: {

src/store/typings.ts

@@ -13,6 +13,7 @@ export interface MainStoreState {
   chosenModalTrainId?: string;
   modalLastClickedTarget: EventTarget | null;
   currentLocale: string;
+  isMigrateInfoCardOpen: boolean;
 }
 
 export interface StationJSONData {

src/views/StationsView.vue

@@ -13,6 +13,15 @@
         </div>
 
         <div class="topbar-links">
+          <button
+            class="btn--image migrate-info-button"
+            @click="toggleMigrateInfoCard(true)"
+            data-tooltip-type="HtmlTooltip"
+            :data-tooltip-content="`<b>${$t('migrate-info.tooltip-content')}</b>`"
+          >
+            <img :src="`/images/icon-alert-triangle.svg`" alt="show migrate info card"  />
+          </button>
+
           <button
             class="btn--image lang-button"
             @click="toggleLocales()"
@@ -110,6 +119,10 @@ export default defineComponent({
       this.isDonationCardOpen = value;
     },
 
+    toggleMigrateInfoCard(value: boolean) {
+      this.mainStore.isMigrateInfoCardOpen = value;
+    },
+
     toggleLocales() {
       this.mainStore.changeLocale(this.mainStore.currentLocale == 'pl' ? 'en' : 'pl');
     }
@@ -138,6 +151,7 @@ export default defineComponent({
   display: flex;
   gap: 0.5em;
   justify-content: space-between;
+  overflow-x: auto;
 
   position: relative;
   margin-bottom: 0.5em;
@@ -170,6 +184,11 @@ button.lang-button {
   background-color: #111;
 }
 
+button.migrate-info-button {
+  padding: 0 0.5em;
+  background-color: var(--clr-primary);
+}
+
 a.pojazdownik-link {
   background-color: #1f263b;