Ulepszenie generatora składów (wip)

src/App.vue

@@ -6,12 +6,6 @@
   <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>
-    <transition name="card-appear">
-      <RandomizerCard />
-    </transition>
-  </keep-alive>
-
   <keep-alive>
     <transition name="card-appear">
       <RealStockCard />
@@ -26,8 +20,9 @@
 
       <TrainImageSection />
 
-      <ListSection />
+      <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
@@ -52,17 +47,17 @@ import packageInfo from '.././package.json';
 import { defineComponent } from 'vue';
 
 import InputsSection from './components/InputsSection.vue';
-import ListSection from './components/ListSection.vue';
 
 import { useStore } from './store';
 import TrainImageSection from './components/TrainImageSection.vue';
 import LogoSection from './components/LogoSection.vue';
 import RandomizerCard from './components/cards/RandomizerCard.vue';
 import RealStockCard from './components/cards/RealStockCard.vue';
+import StockSection from './components/StockSection.vue';
 
 export default defineComponent({
   components: {
-    ListSection,
+    StockSection,
     InputsSection,
     TrainImageSection,
     RandomizerCard,
@@ -165,7 +160,7 @@ main {
   grid-template-columns: 1fr 2fr;
   grid-template-rows: auto 360px minmax(400px, 1fr);
 
-  padding: 0.5em;
+  padding: 0 1em;
 }
 
 /* FOOTER SECTION */

src/components/StockGeneratorTab.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="stock-generator">
+    <div class="stock_actions">
+      <button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">LISTA SKŁADU</button>
+    </div>
+
+    <div class="generator_content">
+      <h2>WŁAŚCIWOŚCI SKŁADU</h2>
+
+      <div class="generator_attributes">
+        <label>
+          Maksymalna masa (t)
+          <input type="number" value="650" step="5" />
+        </label>
+
+        <label>
+          Maksymalna długość (m)
+          <input type="number" value="350" step="25" />
+        </label>
+      </div>
+
+      <h2>ŁADUNEK</h2>
+
+      <div class="generator_cargo">
+        <button
+          class="btn"
+          :data-chosen="chosenCargoTypes.includes(k)"
+          v-for="(v, k) in generatorData.cargo"
+          @click="toggleCargoChosen(k, v)"
+        >
+          {{ k }}
+        </button>
+      </div>
+
+      <h2>WYBRANE WAGONY</h2>
+      <p>Wagony posiadające wybrane ładunki. Kliknij na pojazd, aby został wyłączony z losowania.</p>
+
+      <div class="generator_vehicles">
+        <button :data-chosen="true" class="btn" v-for="car in chosenCarTypes" @click="previewCar(car)">
+          {{ car }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+
+import generatorData from '../data/generatorData.json';
+import { ICarWagon } from '../types';
+
+export default defineComponent({
+  name: 'stock-generator',
+
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  data() {
+    return {
+      generatorData,
+      chosenCarTypes: new Set() as Set<string>,
+      chosenCargoTypes: [] as string[],
+    };
+  },
+
+  methods: {
+    previewCar(type: string) {
+      this.store.chosenCar = this.store.carDataList.find((c) => c.constructionType == type) || null;
+      this.store.chosenVehicle = this.store.chosenCar;
+    },
+
+    toggleCargoChosen(cargoType: string, vehicles: string[]) {
+      if (this.chosenCargoTypes.includes(cargoType)) {
+        vehicles.forEach((v) => {
+          const [type] = v.split(':');
+          this.chosenCarTypes.delete(type);
+        });
+
+        this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
+        return;
+      }
+
+      this.chosenCargoTypes.push(cargoType);
+
+      vehicles.forEach((v) => {
+        const [type] = v.split(':');
+        const cars = this.store.carDataList.filter((c) => c.constructionType == type);
+
+        this.chosenCarTypes.add(type);
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/global.scss';
+
+.stock_actions {
+  justify-content: flex-end;
+}
+.generator_content {
+  margin-top: 1em;
+}
+
+h2 {
+  margin: 1em 0;
+}
+
+.generator_attributes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em;
+
+  label {
+    display: flex;
+    flex-direction: column;
+  }
+
+  input {
+    margin-top: 0.5em;
+    max-width: 200px;
+  }
+}
+
+.generator_cargo, .generator_vehicles {
+  display: grid;
+  gap: 0.5em;
+  grid-template-columns: repeat(4, 1fr);
+  
+  button {
+    padding: 0.5em;
+  
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+  
+    background-color: $secondaryColor;
+  
+    &[data-chosen='true'] {
+      background-color: $accentColor;
+      color: black;
+    }
+  }
+}
+
+</style>

src/components/StockListTab.vue

@@ -1,14 +1,14 @@
 <template>
-  <section class="stock-list-section">
+  <section class="stock-list">
-    <div class="list_actions">
+    <div class="stock_actions">
       <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
       <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
       <span class="spacer"></span>
       <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
-      <button class="btn" @click="store.isRandomizerCardOpen = true">LOSUJ SKŁAD</button>
+      <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
     </div>
 
-    <div class="stock_actions" :data-disabled="store.chosenStockListIndex == -1">
+    <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
       <b class="no">
         POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span> &nbsp;
       </b>
@@ -174,6 +174,7 @@ import warningsMixin from '../mixins/warningsMixin';
 import imageMixin from '../mixins/imageMixin';
 
 export default defineComponent({
+  name: 'stock-list',
   components: { TrainImage },
 
   mixins: [warningsMixin, imageMixin],
@@ -417,28 +418,7 @@ export default defineComponent({
   }
 }
 
-.stock-list-section {
+.stock_controls {
-  grid-row: 1 / 4;
-  grid-column: 2;
-}
-
-.list_actions {
-  display: flex;
-
-  .spacer {
-    flex-grow: 2;
-  }
-
-  button {
-    margin-right: 0.5em;
-
-    &:nth-child(5) {
-      margin-right: 0;
-    }
-  }
-}
-
-.stock_actions {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -606,4 +586,3 @@ li > .stock-info {
   }
 }
 </style>
-

src/components/StockSection.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="stock-section">
+    <keep-alive>
+      <component :is="chosenSectionComponent" :key="chosenSectionComponent"></component>
+    </keep-alive>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { useStore } from '../store';
+import StockListTab from './StockListTab.vue';
+import StockGeneratorTab from './StockGeneratorTab.vue';
+
+export default defineComponent({
+  setup() {
+    return {
+      store: useStore(),
+    };
+  },
+
+  computed: {
+    chosenSectionComponent() {
+      switch (this.store.stockSectionMode) {
+        case 'stock-list':
+          return StockListTab;
+
+        case 'stock-generator':
+          return StockGeneratorTab;
+
+        default:
+          return StockListTab;
+      }
+    },
+  },
+});
+</script>
+
+<style lang="scss">
+// Section styles
+.stock-section {
+  grid-row: 1 / 4;
+  grid-column: 2;
+}
+
+// Stock tabs styles
+.stock_actions {
+  display: flex;
+
+  .spacer {
+    flex-grow: 2;
+  }
+
+  button {
+    margin-right: 0.5em;
+
+    &:nth-child(5) {
+      margin-right: 0;
+    }
+  }
+}
+</style>

src/data/generatorData.json

@@ -0,0 +1,27 @@
+{
+  "passenger": {
+    "PKP_IC": [],
+    "PKP_PR": [],
+    "PKP_ALL": []
+  },
+  "cargo": {
+    "kontenery": ["627Z:all", "412Z:all"],
+    "drobnica": ["426S:all", "208Kf:all", "401Ka:all"],
+    "węgiel": ["412W:coal_01", "413S:coal_Fas", "429W:coal_01"],
+    "ruda": ["412W:ore_01", "401Zb:ore_35", "429W:ore_01"],
+    "piasek": ["412W:sand_01", "412W:sand_02", "413S:sand_Fas", "401Zb:sand_30", "429W:sand_01", "429W:sand_02"],
+    "kreda": ["413S:chalk_Fas"],
+    "kamień": ["412W:stone_01", "412W:stone_50", "401Zb:stone_25", "429W:stone_01"],
+    "złom": ["412W:scrap_01", "412W:scrap_02", "429W:scrap_01", "429W:scrap_02"],
+    "paliwo": ["29R_CTLL:all", "29R_PKP:all"],
+    "melasa": ["29R_PLPOL:all"],
+    "żwir": ["441V"],
+    "koła": ["424Z:wheels_01"],
+    "drewno": ["424Z:woods_01", "424Z:woods_2"],
+    "szyny": ["424Z:rails_01"],
+    "kable": ["424Z:cables_01"],
+    "cement": ["408S:all"],
+    "kruszywo": ["203V:all"],
+    "techniczne": ["209c", "304Ca"]
+  }
+}

src/store.ts

@@ -30,6 +30,8 @@ export const useStore = defineStore({
 
       vehiclePreviewSrc: '',
 
+      stockSectionMode: 'stock-generator',
+
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,
 

src/styles/global.scss

@@ -146,6 +146,10 @@ input {
   &:focus-visible {
     border-color: $accentColor;
   }
+
+  &::placeholder {
+    color: #aaa;
+  }
 }
 
 option {

src/types.ts

@@ -1,4 +1,5 @@
 export type Vehicle = ILocomotive | ICarWagon;
+export type StockSectionMode = 'STOCK_LIST' | 'STOCK_GENERATOR';
 
 export interface IStore {
   chosenCar: ICarWagon | null;
@@ -25,6 +26,8 @@ export interface IStore {
 
   isRandomizerCardOpen: boolean;
   isRealStockListCardOpen: boolean;
+
+  stockSectionMode: 'stock-list' | 'stock-generator';
 }
 
 export interface IVehicleData {