enkapsulacja i uporządkowanie komponentów

src/App.vue

@@ -1,111 +1,35 @@
 <template>
-  <div class="image-preview" v-if="store.vehiclePreviewSrc != ''" @click="() => (store.vehiclePreviewSrc = '')">
+  <ImageFullscreenPreview />
-    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  <AppContainerView />
-  </div>
-
-  <div class="g-card-dimmer" v-if="store.isRandomizerCardOpen" @click="store.isRandomizerCardOpen = false"></div>
-  <div class="g-card-dimmer" v-if="store.isRealStockListCardOpen" @click="store.isRealStockListCardOpen = false"></div>
-
-  <keep-alive>
-    <RealStockCard v-if="store.isRealStockListCardOpen" />
-  </keep-alive>
-  <!-- <transition name="card-appear"> -->
-  <!-- </transition> -->
-
-  <div class="app_container">
-    <main>
-      <LogoSection />
-
-      <InputsSection />
-
-      <TrainImageSection />
-
-      <StockSection />
-    </main>
-
-    <footer>
-      <div class="text--grayed" style="margin-bottom: 0.25em">
-        Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
-        <a
-          style="color: #ccc"
-          href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
-          target="_blank"
-        >
-          regulaminem symulatora Train Driver 2</a
-        >!
-      </div>
-      <div class="text--grayed" style="margin-bottom: 0.25em" v-if="store.stockData">
-        Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
-      </div>
-      &copy;
-      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
-      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
-    </footer>
-  </div>
 </template>
 
 <script lang="ts">
-import packageInfo from '.././package.json';
-
 import { defineComponent } from 'vue';
-
-import InputsSection from './components/sections/InputsSection.vue';
-
 import { useStore } from './store';
-import TrainImageSection from './components/sections/TrainImageSection.vue';
+import ImageFullscreenPreview from './components/utils/ImageFullscreenPreview.vue';
-import LogoSection from './components/sections/LogoSection.vue';
+import AppContainerView from './views/AppContainerView.vue';
-import RealStockCard from './components/cards/RealStockCard.vue';
-import StockSection from './components/sections/StockSection.vue';
 
 export default defineComponent({
-  components: {
+  data() {
-    StockSection,
+    return {
-    InputsSection,
+      store: useStore(),
-    TrainImageSection,
+    };
-    LogoSection,
-    RealStockCard,
   },
-
-  data: () => ({
-    VERSION: packageInfo.version,
-    store: useStore(),
-    isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
-  }),
-
   async created() {
     /* dev info testing */
     // if (import.meta.env['VITE_STOCK_DEV'] == '1') {
     //   const data = await import('../stockInfoDev.json');
     //   this.store.stockData = data.default as any;
     // }
-    const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+    this.store.fetchStockInfoData();
-    this.store.stockData = stockData;
+    this.store.handleRouting();
-
-    // routing
-    switch (window.location.pathname) {
-      case '/numgnr':
-        this.store.stockSectionMode = 'number-generator';
-        break;
-      case '/stockgnr':
-        this.store.stockSectionMode = 'stock-generator';
-        break;
-      default:
-        break;
-    }
   },
+  components: { ImageFullscreenPreview, AppContainerView },
 });
 </script>
 
 <style lang="scss">
-@import './styles/global';
+@import './styles/global.scss';
-
-.app_container {
-  min-height: 100vh;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
 /* APP */
 #app {
@@ -134,65 +58,10 @@ h2 {
   color: #d1d1d1;
 }
 
-.image-preview {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 99;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: 100%;
-  height: 100%;
-
-  background: rgba(black, 0.85);
-
-  img {
-    width: 90%;
-    max-width: 800px;
-  }
-}
-
-/* MAIN SECTION */
-
-main {
-  display: grid;
-  gap: 1em 3em;
-
-  width: 100%;
-  max-width: 1300px;
-  min-height: 75vh;
-
-  grid-template-columns: 1fr 2fr;
-  grid-template-rows: auto 360px minmax(400px, 1fr);
-
-  // padding: 0 1em;
-  margin-bottom: 2em;
-}
-
-/* FOOTER SECTION */
-
-footer {
-  margin-top: auto;
-  text-align: center;
-  padding: 0 1em;
-}
-
-/* MOBILE VIEWS */
-
 @media screen and (max-width: $breakpointMd) {
   #app {
     font-size: calc(0.7rem + 0.75vw);
   }
-
-  main {
-    display: flex;
-    flex-direction: column;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-  }
 }
 </style>
 

src/components/app/AppModals.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <keep-alive>
+      <RealStockCard v-if="store.isRealStockListCardOpen" />
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+import RealStockCard from '../cards/RealStockCard.vue';
+
+export default defineComponent({
+  components: { RealStockCard },
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style scoped></style>

src/components/app/Footer.vue

@@ -0,0 +1,51 @@
+<template>
+  <footer>
+    <div class="text--grayed">
+      Ta strona ma charakter informacyjny. Autor nie ponosi odpowiedzialności za tworzenie pociągów niezgodnych z
+      <a
+        style="color: #ccc"
+        href="https://docs.google.com/document/d/1UAAPUtN0d_RoS4RgOzEzllJZJhA0VcizzCzKW4QylbY/edit"
+        target="_blank"
+      >
+        regulaminem symulatora Train Driver 2 </a
+      >!
+    </div>
+
+    <div class="text--grayed" v-if="store.stockData">
+      Strona jest kompletna dla wersji {{ store.stockData.version }} symulatora TD2
+    </div>
+
+    <div>
+      &copy;
+      <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
+      {{ new Date().getUTCFullYear() }} | v{{ VERSION }}{{ !isOnProductionHost ? 'dev' : '' }}
+    </div>
+  </footer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import packageInfo from '../../../package.json';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      isOnProductionHost: location.hostname == 'pojazdownik-td2.web.app',
+      VERSION: packageInfo.version,
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+footer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25em;
+
+  text-align: center;
+  padding: 1em 1em 0 1em;
+}
+</style>

src/components/app/MainContainer.vue

@@ -0,0 +1,45 @@
+<template>
+  <main>
+    <LogoSection />
+    <InputsSection />
+    <TrainImageSection />
+    <StockSection />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import LogoSection from '../sections/LogoSection.vue';
+import InputsSection from '../sections/InputsSection.vue';
+import TrainImageSection from '../sections/TrainImageSection.vue';
+import StockSection from '../sections/StockSection.vue';
+
+export default defineComponent({
+  components: { LogoSection, InputsSection, TrainImageSection, StockSection },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/global.scss';
+
+main {
+  display: grid;
+  gap: 1em;
+
+  width: 100%;
+  max-width: 1500px;
+  min-height: 75vh;
+
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: auto 360px minmax(400px, 1fr);
+}
+
+@media screen and (max-width: $breakpointMd) {
+  main {
+    display: flex;
+    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+  }
+}
+</style>

src/components/cards/RealStockCard.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="g-card-dimmer" @click="store.isRealStockListCardOpen = false"></div>
+
   <div class="real-stock-card g-card" @keydown.esc="store.isRealStockListCardOpen = false">
     <div class="g-card_bg" @click="store.isRealStockListCardOpen = false"></div>
 

src/components/utils/ImageFullscreenPreview.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="image-preview" v-if="store.vehiclePreviewSrc">
+    <img :src="store.vehiclePreviewSrc" alt="preview" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../../store';
+
+export default defineComponent({
+  data() {
+    return {
+      store: useStore(),
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+
+  background: rgba(black, 0.85);
+
+  img {
+    width: 90%;
+    max-width: 800px;
+  }
+}
+</style>

src/store.ts

@@ -56,5 +56,25 @@ export const useStore = defineStore({
     chosenRealStock: (state) => chosenRealStock(state),
     acceptableMass: (state) => acceptableMass(state),
   },
+
+  actions: {
+    async fetchStockInfoData() {
+      const stockData = await (await fetch(`https://spythere.github.io/api/td2/data/stockInfo.json`)).json();
+      this.stockData = stockData;
+    },
+
+    handleRouting() {
+      switch (window.location.pathname) {
+        case '/numgnr':
+          this.stockSectionMode = 'number-generator';
+          break;
+        case '/stockgnr':
+          this.stockSectionMode = 'stock-generator';
+          break;
+        default:
+          break;
+      }
+    },
+  },
 });
 

src/views/AppContainerView.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="app-container">
+    <MainContainer />
+    <Footer />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+import MainContainer from '../components/app/MainContainer.vue';
+import Footer from '../components/app/Footer.vue';
+
+export default defineComponent({
+  components: {
+    MainContainer,
+    Footer,
+  },
+
+  data: () => ({
+    store: useStore(),
+  }),
+});
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  min-height: 100vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>