design

src/components/NumberGeneratorTab.vue

@@ -7,18 +7,22 @@
 
     <div class="tab_content">
       <div class="options">
-        <select v-model="regionNumbers">
+        <select v-model="regionNumbers" @change="randomizeTrainNumber">
           <option :value="null" disabled>Obszar konstrukcyjny</option>
           <option v-for="(nums, name) in genData.regions" :value="nums">{{ name }}</option>
         </select>
 
-        <select v-model="categoryRules">
+        <select v-model="categoryRules" @change="randomizeTrainNumber">
           <option :value="null" disabled>Kategoria pociągu</option>
           <option v-for="(rules, category) in genData.categories" :value="rules">{{ category }}</option>
         </select>
       </div>
 
-      <h1>Wygenerowany numer pociągu: {{ computedNumber }}</h1>
+      <h1>
+        Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
+      </h1>
+
+      <button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
     </div>
   </div>
 </template>
@@ -34,13 +38,15 @@ const store = useStore();
 const regionNumbers = ref(null) as Ref<number[] | null>;
 const categoryRules = ref(null) as Ref<string | null>;
 
-const computedNumber = computed(() => {
+const trainNumber = ref(null) as Ref<string | null>;
+
+const randomizeTrainNumber = () => {
   if (regionNumbers.value == null || categoryRules.value == null) return '';
 
-  let trainNumber = '';
+  let number = '';
   const randRegionNumber = regionNumbers.value[Math.floor(Math.random() * regionNumbers.value.length)];
 
-  trainNumber += randRegionNumber.toString();
+  number += randRegionNumber.toString();
 
   const rulesArray = categoryRules.value.split(';').map((r) => ({
     index: r.split(':')[0],
@@ -51,17 +57,17 @@ const computedNumber = computed(() => {
   rulesArray.forEach((r) => {
     const range = r.rule.split('-');
 
-    if (range.length == 1) trainNumber += r.rule;
+    if (range.length == 1) number += r.rule;
     else {
       const [minRange, maxRange] = range;
       const randRange = Math.floor(Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)).toString();
 
-      trainNumber += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
+      number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
     }
   });
 
-  return trainNumber;
+  trainNumber.value = number;
-});
+};
 </script>
 
 <style lang="scss" scoped>

src/components/StockListTab.vue

@@ -2,9 +2,22 @@
   <section class="stock-list">
     <div class="stock_actions">
       <button class="btn" @click="downloadStock">POBIERZ POCIĄG</button>
-      <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
-      <button class="btn" style="margin-left: auto" @click="shuffleCars">TASUJ WAGONY</button>
       <button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
+      <button class="btn" @click="store.stockSectionMode = 'number-generator'">GENERUJ NUMER</button>
+    </div>
+
+    <div class="stock_actions">
+      <button
+        class="btn"
+        :data-disabled="store.stockList.length == 0"
+        :disabled="store.stockList.length == 0"
+        @click="copyToClipboard"
+      >
+        KOPIUJ DO SCHOWKA
+      </button>
+
+      <button class="btn" @click="resetStock">ZRESETUJ LISTĘ</button>
+      <button class="btn" @click="shuffleCars">TASUJ WAGONY</button>
     </div>
 
     <div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
@@ -40,14 +53,6 @@
       </button>
     </div>
 
-    <div class="stock_additional">
-      <button class="btn" v-if="store.stockList.length > 0" @click="copyToClipboard">
-        Skopiuj tekst składu do schowka
-      </button>
-
-      <button class="btn" v-if="store.stockList[0]?.isLoco">Wygeneruj numer pociągu</button>
-    </div>
-
     <div class="stock_specs">
       <b class="real-stock-info" v-if="store.chosenRealStock">
         <span class="text--accent">
@@ -417,11 +422,8 @@ export default defineComponent({
   }
 }
 
-.stock_additional {
+.stock_actions button {
-  display: flex;
+  width: 100%;
-  gap: 0.5em;
-
-  margin: 0.5em 0;
 }
 
 .real-stock-info {

src/components/StockSection.vue

@@ -70,13 +70,10 @@ export default defineComponent({
 .stock_actions {
   display: flex;
   gap: 0.5em;
+  margin: 0.5em 0;
 
   @media only screen and (max-width: 450px) {
     flex-wrap: wrap;
-
-    button {
-      width: 100%;
-    }
   }
 }
 </style>

src/store.ts

@@ -37,7 +37,7 @@ export const useStore = defineStore({
 
       vehiclePreviewSrc: '',
 
-      stockSectionMode: 'number-generator',
+      stockSectionMode: 'stock-list',
 
       isRandomizerCardOpen: false,
       isRealStockListCardOpen: false,