tłumaczenia; fix losowania generatora numeru

src/components/tabs/NumberGeneratorTab.vue

@@ -6,6 +6,13 @@
 
     <div class="tab_content">
       <div class="options">
+        <select v-model="chosenCategory" @change="randomizeTrainNumber()">
+          <option :value="null" disabled>{{ $t('numgen.train-category') }}</option>
+          <option v-for="(_, category) in genData.categories" :value="category">
+            {{ $t(`numgen.categories.${category}`) }}
+          </option>
+        </select>
+
         <select v-model="beginRegionName" @change="randomizeTrainNumber()">
           <option :value="null" disabled>{{ $t('numgen.start-region') }}</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
@@ -15,13 +22,6 @@
           <option :value="null" disabled>{{ $t('numgen.end-region') }}</option>
           <option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
         </select>
-
-        <select v-model="categoryRules" @change="randomizeTrainNumber()">
-          <option :value="null" disabled>{{ $t('numgen.train-category') }}</option>
-          <option v-for="(rules, category) in genData.categories" :value="rules">
-            {{ $t(`numgen.categories.${category}`) }}
-          </option>
-        </select>
       </div>
 
       <div class="generated-number" @click="copyNumber">
@@ -31,6 +31,23 @@
         <span v-else>{{ $t('numgen.warning') }}</span>
       </div>
 
+      <!-- <div v-if="chosenCategory">
+        Current numbering rules: {{ $t(`numgen.rules.${chosenCategory}`) }};
+
+        <span v-if="beginRegionName && endRegionName">
+          <span v-if="beginRegionName == endRegionName">
+            pierwsze dwie cyfry:
+            {{ genData.sameRegions[beginRegionName].join(', ') }}
+            (numer w obrębie obszaru {{ beginRegionName }})
+          </span>
+
+          <span v-else>
+            pierwsza cyfra: {{ genData.regionNumbers[beginRegionName] }}; druga cyfra:
+            {{ genData.regionNumbers[endRegionName] }}
+          </span>
+        </span>
+      </div> -->
+
       <div class="tab_links">
         <a :href="$t('numgen.td2-wiki-link')" target="_blank">
           {{ $t('numgen.td2-wiki') }}
@@ -55,10 +72,11 @@ import genData from '../../constants/numberGeneratorData.json';
 
 const i18n = useI18n();
 type RegionName = keyof typeof genData.regionNumbers;
+type Category = keyof typeof genData.categories;
 
 const beginRegionName = ref(null) as Ref<RegionName | null>;
 const endRegionName = ref(null) as Ref<RegionName | null>;
-const categoryRules = ref(null) as Ref<string | null>;
+const chosenCategory = ref(null) as Ref<Category | null>;
 
 const trainNumber = ref(null) as Ref<string | null>;
 
@@ -70,7 +88,7 @@ const copyNumber = () => {
 };
 
 const randomizeTrainNumber = (randomizeRegions = false) => {
-  if (categoryRules.value == null) return;
+  // if (categoryRules.value == null) return;
 
   const regionKeys = Object.keys(genData.regionNumbers);
 
@@ -93,13 +111,15 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
     number += `${beginRegionNumber}${endRegionNumber}`;
   }
 
-  // Do not roll the rest of number again if only randomize regions
-  if (randomizeRegions) {
+  // Do not roll the rest of number again if only randomize regions and category rules are already selected
+  if (randomizeRegions && chosenCategory.value != null) {
     trainNumber.value = number + trainNumber.value?.substring(2);
     return;
   }
 
-  const rulesArray = categoryRules.value.split(';').map((r) => ({
+  if (chosenCategory.value == null) chosenCategory.value = 'EI';
+
+  const rulesArray = genData.categories[chosenCategory.value].split(';').map((r) => ({
     index: r.split(':')[0],
     rule: r.split(':')[1],
     nums: Number(r.split(':')[2] || '1'),
@@ -126,12 +146,12 @@ const randomizeTrainNumber = (randomizeRegions = false) => {
 @import '../../styles/global.scss';
 
 .options {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 0.5em;
 
   select {
-    width: calc(50% - 0.5em);
+    width: 100%;
   }
 }