Merge pull request #128 from Spythere/development

v1.30.0

index.html

@@ -22,6 +22,11 @@
 
     <link rel="icon" href="favicon.ico" />
 
+    <link rel="stylesheet" href="fa/css/fontawesome.css" />
+    <link rel="stylesheet" href="fa/css/brands.css" />
+    <link rel="stylesheet" href="fa/css/regular.css" />
+    <link rel="stylesheet" href="fa/css/solid.css" />
+
     <!-- Static OpenGraph meta -->
     <meta name="description" content="Pomocnik maszynisty i dyżurnego symulatora Train Driver 2" />
     <meta property="og:url" content="https://stacjownik-td2.web.app/" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "1.29.2",
+  "version": "1.30.0",
   "private": true,
   "type": "module",
   "scripts": {

src/components/DriverView/DriverNotFound.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="driver-not-found">
+    <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
+
+    <p class="text--grayed">
+      {{ $t('trains.driver-not-found-desc-1') }} <br />
+      {{ $t('trains.driver-not-found-desc-2') }}
+      <router-link to="/journal/timetables"
+        >{{ $t('trains.driver-not-found-journal') }} </router-link
+      >!
+    </p>
+
+    <p v-if="props.trainId && otherDriverTrains.length > 0">
+      <i18n-t keypath="trains.driver-not-found-others">
+        <template v-slot:driver>
+          <b>{{ otherDriverTrains[0].driverName }}</b>
+        </template>
+      </i18n-t>
+    </p>
+
+    <div class="other-driver-trains">
+      <template v-for="(train, i) in otherDriverTrains">
+        <router-link :to="`/driver?trainId=${train.id}`">
+          {{ train.trainNo }}
+          | {{ regions.find((r) => r.id == train.region)?.name ?? 'PL1' }}
+        </router-link>
+      </template>
+    </div>
+
+    <div style="margin-top: 1em">
+      <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useMainStore } from '../../store/mainStore';
+import { regions } from '../../data/options.json';
+
+const mainStore = useMainStore();
+
+const props = defineProps({
+  trainId: {
+    type: String
+  }
+});
+
+const otherDriverTrains = computed(() => {
+  return mainStore.trainList.filter(
+    (train) =>
+      train.driverId == Number(props.trainId?.split('|')[0]) &&
+      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
+  );
+});
+</script>
+
+<style lang="scss" scoped>
+.driver-not-found {
+  background-color: var(--clr-view-bg);
+  text-align: center;
+  padding: 1em;
+  border-radius: 0.5em 0.5em;
+
+  p {
+    padding: 0.5em 0;
+  }
+
+  a {
+    text-decoration: underline;
+    color: white;
+  }
+}
+
+.other-driver-trains {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+}
+</style>

src/components/DriverView/DriverTopActions.vue

@@ -0,0 +1,85 @@
+<template>
+    <div class="driver-top-actions">
+        <div class="actions-container">
+            <div class="actions actions-left">
+                <button class="a-button btn--filled btn--image" @click="routerReturn">
+                    <img src="/images/icon-back.svg" alt="train icon" />
+                    <span>
+                        {{ t('trains.driver-return-link') }}
+                    </span>
+                </button>
+            </div>
+
+            <div class="actions actions-right">
+                <a class="a-button btn--filled btn--image" :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
+                    target="_blank">
+                    <span class="hidable">
+                        {{ t('trains.driver-srjp-link') }}
+                    </span>
+
+                    <img src="/images/icon-srjp.svg" alt="srjp icon" />
+                </a>
+
+                <router-link :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
+                    class="a-button btn--filled btn--image">
+                    <span class="hidable">
+                        {{ t('trains.driver-journal-link') }}
+                    </span>
+
+                    <img src="/images/icon-train.svg" alt="train icon" />
+                </router-link>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { Train } from '../../typings/common';
+import { PropType } from 'vue';
+
+const router = useRouter();
+const { t } = useI18n();
+
+defineProps({
+    chosenTrain: {
+        type: Object as PropType<Train>,
+        required: true
+    }
+});
+
+function routerReturn() {
+    router.back();
+}
+</script>
+
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+
+.actions-container {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 0.5em;
+}
+
+.actions {
+    display: flex;
+    gap: 0.5em;
+}
+
+.actions-container>.actions>.a-button {
+    padding: 0.5em;
+    border-radius: 0.5em 0.5em 0 0;
+}
+
+@include responsive.smallScreen {
+    span.hidable {
+        display: none;
+    }
+}
+</style>

src/components/DriverView/DriverTrainCard.vue

@@ -0,0 +1,328 @@
+<template>
+  <div class="driver-train-card">
+    <TrainInfo :train="chosenTrain" :extended="true" />
+
+    <!-- Train action buttons -->
+    <div class="train-stock-actions">
+      <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
+        <i class="fa-regular fa-copy"></i> {{ i18n.t('trains.stock-copy') }}
+      </button>
+
+      <button class="btn btn--action" style="margin: 1em 0" @click="toggleNumberPropositions()">
+        <i class="fa-regular fa-lightbulb"></i> {{ i18n.t('trains.number-propositions') }}
+      </button>
+    </div>
+
+    <!-- Proposed numbers container -->
+    <transition name="view-anim" class="propositions-container">
+      <div v-if="arePropositionsVisible">
+        <h3 style="margin-bottom: 0.5em">{{ i18n.t('trains.number-propositions-header') }}</h3>
+
+        <div class="categories-select">
+          <button
+            v-for="(category, i) in availableCategories"
+            class="btn btn--option btn--action"
+            @click="selectCategory(i)"
+            :class="{ checked: i == chosenCategoryIndex }"
+          >
+            {{ category }}
+          </button>
+        </div>
+
+        <div v-if="numberPropositions.length > 0" class="propositions-numbers">
+          <div v-if="chosenCategory">
+            <b>{{ chosenCategory }} </b> -
+            {{ i18n.t(`categories.${chosenCategory.slice(0, 2)}`) }}
+            ({{ i18n.t(`categories.${chosenCategory.slice(2)}`) }})
+          </div>
+
+          <div v-if="chosenCategoryRules">
+            <span v-if="chosenCategoryRules[0]"
+              >{{ i18n.t('trains.number-propositions-third-number') }}
+              <b class="text--primary">{{ chosenCategoryRules[0] }}</b> &bull;
+            </span>
+
+            <span
+              >{{
+                i18n.t('trains.number-propositions-last-nums', {
+                  count: chosenCategoryRules[1].length
+                })
+              }}
+              <b class="text--primary">{{ chosenCategoryRules[1] }}</b> -
+              <b class="text--primary">{{ chosenCategoryRules[2] }}</b></span
+            >
+          </div>
+
+          <div style="margin-top: 0.5em">
+            <b>{{ i18n.t('trains.number-propositions-title') }}&nbsp;</b>
+            <i>{{ numberPropositions.join(', ') }}</i>
+          </div>
+        </div>
+
+        <div class="no-propositions" v-else>{{ i18n.t('trains.number-propositions-empty') }}</div>
+      </div>
+    </transition>
+
+    <StockList :trainStockList="chosenTrain.stockList" />
+    <TrainSchedule :train="chosenTrain" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref } from 'vue';
+import { Train } from '../../typings/common';
+import { useI18n } from 'vue-i18n';
+import { useApiStore } from '../../store/apiStore';
+
+import StockList from '../Global/StockList.vue';
+import TrainSchedule from '../TrainsView/TrainSchedule.vue';
+import TrainInfo from '../TrainsView/TrainInfo.vue';
+
+import rulesJSON from '../../data/trainNumberRules.json';
+import { computed } from 'vue';
+import { watch } from 'vue';
+
+const apiStore = useApiStore();
+
+const i18n = useI18n();
+
+const arePropositionsVisible = ref(false);
+const chosenCategoryIndex = ref(0);
+
+const numberPropositions = ref<string[]>([]);
+const chosenCategoryRules = ref<any[]>([]);
+
+const props = defineProps({
+  chosenTrain: {
+    type: Object as PropType<Train>,
+    required: true
+  }
+});
+
+function copyStockToClipboard() {
+  const stockString = props.chosenTrain.stockList.join(';');
+
+  if (!stockString) {
+    alert(i18n.t('trains.stock-clipboard-failure'));
+    return;
+  }
+
+  navigator.clipboard
+    .writeText(stockString)
+    .then(() => {
+      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
+    })
+    .catch(() => {
+      alert(i18n.t('trains.stock-clipboard-failure'));
+    });
+}
+
+function toggleNumberPropositions() {
+  arePropositionsVisible.value = !arePropositionsVisible.value;
+
+  if (arePropositionsVisible.value) generateNumberPropositions();
+}
+
+function selectCategory(i: number) {
+  chosenCategoryIndex.value = i;
+
+  generateNumberPropositions();
+}
+
+function generateNumberPropositions() {
+  const categoryCode = chosenCategory.value?.slice(0, 2);
+  const trainNoStr = props.chosenTrain.trainNo.toString();
+
+  // Get category rules
+  const rules = categoryCode
+    ? ((rulesJSON.categoriesRules as any)[categoryCode] as any[])
+    : undefined;
+
+  if (!categoryCode || !rules) {
+    numberPropositions.value.length = 0;
+    chosenCategoryRules.value.length = 0;
+
+    return;
+  }
+
+  const [thirdNumber, minRange, maxRange] = rules;
+
+  const propositionsArr: string[] = [];
+
+  for (let i = 0; i < 5; i++) {
+    let generatedNumStr = '';
+
+    generatedNumStr += trainNoStr.at(0) ?? Math.floor(Math.random() * 10);
+    generatedNumStr += trainNoStr.at(1) ?? Math.floor(Math.random() * 10);
+
+    // Third number
+    generatedNumStr += thirdNumber ?? '';
+
+    // Remaining numbers
+    const rangeNums = minRange?.length ?? 3;
+
+    const randRange = Math.floor(
+      Math.random() * (Number(maxRange) - Number(minRange)) + Number(minRange)
+    ).toString();
+
+    const leadingZeros = new Array(Math.abs(randRange.toString().length - rangeNums))
+      .fill('0')
+      .join('');
+
+    generatedNumStr += `${leadingZeros}${randRange}`;
+
+    const isNumberTaken =
+      apiStore.activeData?.trains?.some((t) => t.trainNo.toString() == generatedNumStr) ?? false;
+
+    if (!isNumberTaken) {
+      propositionsArr.push(generatedNumStr);
+    } else {
+      i--;
+    }
+
+    if (Number(randRange) > Number(maxRange)) break;
+  }
+
+  numberPropositions.value = propositionsArr;
+  chosenCategoryRules.value = rules;
+}
+
+const chosenCategory = computed(() => {
+  return availableCategories.value.at(chosenCategoryIndex.value);
+});
+
+const availableCategories = computed(() => {
+  const stockList = props.chosenTrain.stockList;
+  const headVehicle = stockList.at(0)?.split('-')[0] ?? '';
+
+  let availableCategories: string[] = [];
+  let categoryTraction = 'E';
+
+  let vehicleTypesSet = new Set<string>();
+  let wagonsNamesSet = new Set<string>();
+  let cargoNamesSet = new Set<string>();
+
+  for (const stockName of stockList) {
+    const [vehicleName, ...cargoList] = stockName.split(':');
+
+    const vehicleData = apiStore.vehiclesData?.find((v) => v.name == vehicleName);
+
+    if (!vehicleData) continue;
+
+    vehicleTypesSet.add(vehicleData.type);
+
+    if (vehicleData.type.startsWith('wagon-')) wagonsNamesSet.add(vehicleData.name.split('_')[0]);
+
+    if (cargoList !== undefined) cargoList.forEach((c) => cargoNamesSet.add(c.split('_')[0]));
+  }
+
+  let vehicleTypesArr = [...vehicleTypesSet];
+  let wagonsNamesArr = [...wagonsNamesSet];
+
+  // Traction
+  if (vehicleTypesArr[0] == 'loco-electric') categoryTraction = 'E';
+  else if (vehicleTypesArr[0] == 'loco-diesel') categoryTraction = 'S';
+  else if (vehicleTypesArr[0] == 'unit-electric') categoryTraction = 'J';
+  else categoryTraction = 'M';
+
+  // EMU / DMU - M*, R*, P*
+  if (vehicleTypesArr.length == 1 && (categoryTraction == 'J' || categoryTraction == 'M')) {
+    availableCategories.push('MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Only locos (up to 3) - LT, LP, LS
+  else if (stockList.length <= 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    if (/^(EU|ET|201E|4E|SU|ST|M62|CTLR4C)/.test(headVehicle)) availableCategories.push('LT');
+    if (/^(EU|EP|SU|SP)/.test(headVehicle)) availableCategories.push('LP');
+    if (/^(SM)/.test(headVehicle)) availableCategories.push('LS');
+  }
+  // Only locos (more than 3) - TH
+  else if (stockList.length > 3 && vehicleTypesArr.every((v) => v.startsWith('loco-'))) {
+    availableCategories.push('TH');
+  }
+  // Loco(s) + passenger only wagons - M*, R*, E*, P*
+  else if (vehicleTypesArr.every((v) => v.startsWith('loco-') || v == 'wagon-passenger')) {
+    availableCategories.push('EI', 'EC', 'EN', 'MO', 'MP', 'MM', 'RO', 'RP', 'RA', 'RM', 'PW');
+  }
+  // Loco(s) + cargo only / mixed wagons - T*, Z*
+  else {
+    if (wagonsNamesArr.every((v) => /^(627Z|412Z)/.test(v)))
+      availableCategories.push('TC', 'TD', 'TS');
+    else if (stockList.slice(1).every((v) => /PKPE/.test(v))) {
+      availableCategories.push('ZU', 'ZN');
+    } else if (wagonsNamesArr.length < 3 || cargoNamesSet.size < 3) {
+      availableCategories.push('TM', 'TG', 'TS', 'TK');
+    } else {
+      availableCategories.push('TN', 'TR', 'TS', 'TK');
+    }
+  }
+
+  return availableCategories.map((c) => `${c}${categoryTraction}`);
+});
+
+watch(
+  computed(() => `${props.chosenTrain.trainNo}`),
+  () => {
+    chosenCategoryIndex.value = 0;
+    generateNumberPropositions();
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+@use '../../styles/responsive';
+
+.driver-train-card {
+  padding: 1em;
+  background-color: var(--clr-view-bg);
+  border-radius: 0 0 0.5em 0.5em;
+}
+
+.train-stock-actions {
+  display: flex;
+  gap: 0.5em;
+}
+
+.propositions-container {
+  margin-bottom: 1em;
+  padding: 0.5em;
+  background-color: #111;
+}
+
+.categories-select {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.5em);
+    left: 0;
+
+    width: 100%;
+    height: 2px;
+    background-color: #aaa;
+  }
+}
+
+.propositions-numbers {
+  margin-top: 1em;
+}
+
+.no-propositions {
+  margin-top: 1em;
+  color: #ccc;
+}
+
+@include responsive.smallScreen {
+  .propositions-container {
+    text-align: center;
+  }
+
+  .categories-select {
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalOptions.vue

@@ -33,31 +33,56 @@
           <h1 class="option-title">{{ $t('options.search-title') }}</h1>
           <div class="search_content">
             <div class="search" v-for="(_, propName) in searchersValues" :key="propName">
-              <label v-if="propName == 'search-date-from'" for="search-date">{{
-                $t(`options.search-${optionsType}-date`)
-              }}</label>
+              <!-- Train category select -->
+              <div v-if="propName.toString() == 'select-categoryCode'">
+                <label for="journalCategoryCode">{{ $t(`options.${propName}`) }}</label>
 
-              <div class="search-box">
-                <input
-                  class="search-input"
-                  v-model="searchersValues[propName]"
-                  @keydown.enter="searchConfirm"
-                  @focus="preventKeyDown = true"
-                  @blur="preventKeyDown = false"
-                  :placeholder="$t(`options.${propName}`)"
-                  :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
-                  :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
-                  :id="`${propName}`"
-                  :list="propName.toString()"
-                />
+                <div class="search-box">
+                  <select
+                    class="search-input"
+                    name="journalCategoryCode"
+                    id="journalCategoryCode"
+                    v-model="searchersValues[propName]"
+                  >
+                    <option value="">...</option>
+                    <option v-for="categoryName in allCategories" :value="categoryName">
+                      {{ categoryName }} - {{ getCategoryExplanation(categoryName) }}
+                    </option>
+                  </select>
+                </div>
+              </div>
 
-                <button class="btn btn--action search-exit" v-if="!propName.toString().startsWith('search-date')">
-                  <img
-                    src="/images/icon-exit.svg"
-                    alt="exit-icon"
-                    @click="onInputClear(propName)"
+              <!-- Other inputs -->
+              <div v-else>
+                <label v-if="propName == 'search-date-from'" for="search-date">{{
+                  $t(`options.search-${optionsType}-date`)
+                }}</label>
+                
+                <div class="search-box">
+                  <input
+                    class="search-input"
+                    v-model="searchersValues[propName]"
+                    @keydown.enter="searchConfirm"
+                    @focus="preventKeyDown = true"
+                    @blur="preventKeyDown = false"
+                    :placeholder="$t(`options.${propName}`)"
+                    :type="propName.toString().startsWith('search-date') ? 'date' : 'text'"
+                    :min="propName.toString().startsWith('search-date') ? '2022-02-01' : undefined"
+                    :id="`${propName}`"
+                    :list="propName.toString()"
                   />
-                </button>
+
+                  <button
+                    class="btn btn--action search-exit"
+                    v-if="!propName.toString().startsWith('search-date')"
+                  >
+                    <img
+                      src="/images/icon-exit.svg"
+                      alt="exit-icon"
+                      @click="onInputClear(propName)"
+                    />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
@@ -117,10 +142,12 @@ import { useMainStore } from '../../store/mainStore';
 import { Journal } from './typings';
 import { Status } from '../../typings/common';
 import { useApiStore } from '../../store/apiStore';
+import { allCategories } from '../../data/trainNumberRules.json';
+import trainCategoryMixin from '../../mixins/trainCategoryMixin';
 
 export default defineComponent({
   emits: ['onSearchConfirm', 'onOptionsReset', 'onRefreshData'],
-  mixins: [keyMixin],
+  mixins: [keyMixin, trainCategoryMixin],
 
   props: {
     sorterOptionIds: {
@@ -152,6 +179,7 @@ export default defineComponent({
   data() {
     return {
       showOptions: false,
+      allCategories,
 
       driverSuggestions: [] as string[],
       dispatcherSuggestions: [] as string[],

src/components/JournalView/typings.ts

@@ -12,7 +12,8 @@ export namespace Journal {
     | 'search-dispatcher'
     | 'search-issuedFrom'
     | 'search-terminatingAt'
-    | 'search-via';
+    | 'search-via'
+    | 'select-categoryCode';
 
   export type TimetableSearchType = {
     [key in TimetableSearchKey]: string;

src/components/TrainsView/TrainInfo.vue

@@ -219,15 +219,22 @@ export default defineComponent({
     stockSpeedLimit() {
       let isPassenger = true;
 
-      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName) => {
-        const vehicleData = this.apiStore.vehiclesData?.find(
-          (v) => v.name == stockName.split(':')[0]
-        );
+      const vehicleMaxSpeed = this.train.stockList.reduce((acc, stockName, i) => {
+        const [vehicleName, vehicleCargo] = stockName.split(':');
+
+        const vehicleData = this.apiStore.vehiclesData?.find((v) => v.name == vehicleName);
 
         if (!vehicleData) return acc;
-        if (vehicleData.type == 'wagon-freight') isPassenger = false;
 
-        const vehicleSpeed = vehicleData.group.speed;
+        let vehicleSpeed = vehicleData.group.speed;
+
+        if (vehicleData.type == 'wagon-freight') {
+          isPassenger = false;
+
+          if (vehicleCargo !== undefined && vehicleData.group.speedLoaded) {
+            vehicleSpeed = vehicleData.group.speedLoaded;
+          }
+        }
 
         return Math.min(vehicleSpeed, acc);
       }, Infinity);

src/components/TrainsView/TrainOptions.vue

@@ -36,7 +36,7 @@
                 id="active-trains"
                 v-model="searchedDriver"
               >
-                <option value="">{{ $t('options.search-driver') }}</option>
+                <option value="">{{ $t('options.select-driver') }}</option>
                 <option v-for="driverName in activeDriverNames" :value="driverName">
                   {{ driverName }}
                 </option>

src/data/speedLimits.ts

@@ -4,6 +4,9 @@ export const speedLimits: Record<string, any> = {
       '650000': 125
     },
     cargo: {
+      '750000': 100,
+      '1000000': 90,
+      '1500000': 80,
       '2000000': 70
     },
     none: 110
@@ -13,6 +16,9 @@ export const speedLimits: Record<string, any> = {
       '650000': 125
     },
     cargo: {
+      '750000': 100,
+      '1000000': 90,
+      '1500000': 80,
       '2000000': 70
     },
     none: 110
@@ -22,6 +28,9 @@ export const speedLimits: Record<string, any> = {
       '650000': 125
     },
     cargo: {
+      '750000': 100,
+      '1000000': 90,
+      '1500000': 80,
       '2000000': 70
     },
     none: 110
@@ -65,6 +74,7 @@ export const speedLimits: Record<string, any> = {
     },
     cargo: {
       '1200000': 100,
+      '2000000': 80,
       '3100000': 70
     },
     none: 125

src/data/trainNumberRules.json

@@ -0,0 +1,95 @@
+{
+    "allCategories": [			
+      "ROE", "ROJ", "ROS", "ROM",
+      "RPE", "RPJ", "RPS", "RPM", 
+      "RME", "RMJ", "RMS", "RMM", 
+      "RAE", "RAJ", "RAS", "RAM", 
+      "MPE", "MPJ", "MPS", "MPM",
+      "MME", "MMJ", "MMS", "MMM",
+      "MOE", "MOJ", "MOS", "MOM",
+      "MHE", "MHJ", "MHS",
+      "EIE", "EIS", 
+      "ENE", "ENS", 
+      "ECE", "ECS", 
+      "PWE", "PWM", "PWJ", "PWS", 
+      "PXE", "PXM", "PXJ", "PXS", 
+      "TCE", "TCS", 
+      "TDE", "TDS", 
+      "TGE", "TGS", 
+      "TKE", "TKS", 
+      "TME", "TMS", 
+      "TNE", "TNS", 
+      "TRE", "TRS", 
+      "TSE", "TSS",
+      "THE", "THS",
+      "LPE", 
+      "LTE", "LTS",
+      "LSS",
+      "LZE", "LZS", 
+      "ZNE", "ZNS",
+      "ZUE", "ZUS"
+    ],
+    "regionNumbers": {
+      "Warszawa (1)": 1,
+      "Lublin (2)": 2,
+      "Kraków (3)": 3,
+      "Sosnowiec (4)": 4,
+      "Gdańsk (5)": 5,
+      "Wrocław (6)": 6,
+      "Poznań (7)": 7,
+      "Szczecin (8)": 8,
+      "Rezerwa (9)": 9
+    },
+    "sameRegions": {
+      "Losowy": [
+        10, 11, 19, 91, 93, 97, 99, 20, 22, 29, 30, 33, 39, 40, 44, 49, 94, 50, 55, 59, 90, 95, 96,
+        66, 60, 69, 77, 70, 79, 88, 80, 89, 92, 98
+      ],
+      "Warszawa (1)": [10, 11, 19, 91, 93, 97, 99],
+      "Lublin (2)": [20, 22, 29],
+      "Kraków (3)": [30, 33, 39],
+      "Sosnowiec (4)": [40, 44, 49, 94],
+      "Gdańsk (5)": [50, 55, 59, 90, 95, 96],
+      "Wrocław (6)": [66, 60, 69],
+      "Poznań (7)": [77, 70, 79],
+      "Szczecin (8)": [88, 80],
+      "Rezerwa (9)": [89, 92, 98]
+    },
+    "categoriesRules": {
+      "EI": [null, "00", "99"],
+      "EC": [null, "000", "049"],
+      "EN": [null, "000", "049"],
+  
+      "RO": [null, "200", "999"],
+      "RP": [null, "050", "169"],
+      "RM": [null, "200", "999"],
+      "RA": [null, "200", "999"],
+  
+      "MO": [null, "200", "999"],
+      "MP": [null, "050", "169"],
+      "MM": [null, "001", "049"],
+      "MH": [null, "170", "199"],
+  
+      "PW": ["6", "000", "899"],
+      "PX": ["6", "000", "899"],
+  
+      "TM": ["4", "000", "899"],
+      "TN": ["3", "000", "899"],
+      "TK": ["3", "000", "899"],
+      "TD": ["2", "000", "899"],
+      "TG": ["1", "000", "899"],
+      "TR": ["1", "000", "899"],
+      "TC": ["0", "000", "899"],
+      "TS": ["5", "000", "899"],
+      "TH": ["5", "000", "899"],
+  
+      "LT": ["5", "000", "899"],
+      "LP": ["6", "000", "899"],
+      "LS": ["9", "000", "899"],
+      "LZ": ["9", "000", "899"],
+  
+      "ZN": ["9", "000", "899"],
+      "ZU": ["9", "000", "899"]
+    }
+  }
+  

src/locales/en.json

@@ -158,7 +158,8 @@
     "filter-title": "FILTER BY:",
     "search-title": "SEARCH:",
     "search-train": "Train no. / #",
-    "search-driver": "Choose a driver...",
+    "select-driver": "Choose a driver...",
+    "search-driver": "Driver name",
     "search-dispatcher": "Dispatcher name",
     "search-station": "Scenery name / #",
     "search-author": "Timetable author name",
@@ -169,6 +170,7 @@
     "search-dispatchers-date": "Service date (from / to)",
     "search-date-from": "Date (UTC+2 / CEST)",
     "search-date-to": "Date (UTC+2 / CEST)",
+    "select-categoryCode": "Train category",
     "sort-mass": "mass",
     "sort-speed": "speed",
     "sort-length": "length",
@@ -394,8 +396,15 @@
     "driver-not-found-others": "Player {driver} is online as:",
     "driver-not-found-return": "GO BACK TO THE MAIN SITE",
     "stock-copy": "COPY THE STOCK",
+    "number-propositions": "PROPOSE NUMBER",
     "stock-clipboard-success": "Successfully copied the railway stock in a text form to your clipboard!",
-    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/"
+    "stock-clipboard-failure": "Oops! Something happened and the railway stock couldn't be copied to your clipboard! :/",
+  
+    "number-propositions-header": "Generate number examples for selected category:",
+    "number-propositions-third-number": "Third digit:",
+    "number-propositions-last-nums": "{count} last digits from the range of:",
+    "number-propositions-title": "Propositions:",
+    "number-propositions-empty": "No propositions available for the chosen category! :/"
   },
   "train-stats": {
     "stats-button": "STATISTICS",

src/locales/pl.json

@@ -155,7 +155,8 @@
     "filter-title": "FILTRUJ WG:",
     "search-title": "SZUKAJ:",
     "search-train": "Nr pociągu / #",
-    "search-driver": "Wybierz maszynistę...",
+    "search-driver": "Nick maszynisty",
+    "select-driver": "Wybierz maszynistę...",
     "search-dispatcher": "Nick dyżurnego",
     "search-station": "Nazwa scenerii / #",
     "search-author": "Nick autora rozkładu jazdy",
@@ -166,6 +167,7 @@
     "search-dispatchers-date": "Data służby (od / do)",
     "search-date-from": "Data (UTC+2 / CEST)",
     "search-date-to": "Data (UTC+2 / CEST)",
+    "select-categoryCode": "Kategoria pociągu",
     "sort-routeDistance": "kilometraż",
     "sort-allStopsCount": "stacje",
     "sort-beginDate": "data",
@@ -381,8 +383,16 @@
     "driver-not-found-others": "Gracz {driver} jest online jako:",
     "driver-not-found-return": "WRÓĆ NA STRONĘ GŁÓWNĄ",
     "stock-copy": "SKOPIUJ SKŁAD",
+    "number-propositions": "ZAPROPONUJ NUMER",
     "stock-clipboard-success": "Pomyślnie skopiowano skład w postaci tekstowej do schowka!",
-    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/"
+    "stock-clipboard-failure": "Ups! Nie udało się skopiować składu do schowka! :/",
+
+    "number-propositions-header": "Wygeneruj propozycje numerów dla kategorii pociągu:",
+    "number-propositions-third-number": "Trzecia cyfra:",
+    "number-propositions-last-nums": "{count} ostatnie cyfry z przedziału:",
+    "number-propositions-title": "Propozycje:",
+    "number-propositions-empty": "Brak propozycji dla wybranej kategorii! :/"
+
   },
   "train-stats": {
     "stats-button": "STATYSTYKI",

src/styles/_badge.scss

@@ -8,7 +8,8 @@
 
   margin: 0.25em;
 
-  & > span {
+  & > span,
+  & > a > span {
     display: inline-block;
     background: #585858;
     padding: 0.2em 0.4em;
@@ -22,7 +23,7 @@
 
     text-align: center;
 
-    @include responsive.smallScreen{
+    @include responsive.smallScreen {
       font-size: 1em;
     }
   }

src/styles/_dropdown.scss

@@ -29,17 +29,19 @@
   top: calc(100% + 0.5em);
 
   background-color: var(--clr-bg3);
-  // box-shadow: 0 5px 10px 2px #0f0f0f;
   box-shadow: 0 0 5px 1px var(--clr-primary);
 
   width: 100%;
   max-width: 550px;
 
+  max-height: 750px;
+  overflow: auto;
+
   padding: 1em;
   z-index: 100;
 }
 
-@include responsive.smallScreen{
+@include responsive.smallScreen {
   .dropdown_wrapper {
     font-size: 1.1em;
     max-width: 100%;

src/styles/_global.scss

@@ -8,6 +8,7 @@
   --clr-bg: #4d4d4d;
   --clr-bg2: #1b1b1b;
   --clr-bg3: #1d1d1d;
+  --clr-view-bg: #1a1a1a;
 
   --clr-accent: #1085b3;
   --clr-accent2: #ff3d5d;
@@ -22,6 +23,7 @@
 
   --clr-donator: #f7a4ff;
 
+
   --no-scroll-padding: 17px;
   --max-container-width: 1700px;
 

src/styles/_journal-section.scss

@@ -12,7 +12,7 @@
 .list_wrapper {
   overflow-y: auto;
   height: calc(100vh - 12.5em);
-  min-height: 650px;
+  min-height: 700px;
   margin-top: 0.5em;
   position: relative;
 

src/typings/common.ts

@@ -229,6 +229,8 @@ export interface VehiclesGroup {
   id: number;
   name: string;
   speed: number;
+  speedLoaded?: number;
+  speedLoco?: number;
   length: number;
   weight: number;
   cargoTypes: VehicleCargo[] | null;

src/views/DriverView.vue

@@ -2,103 +2,27 @@
   <section class="driver-view">
     <div class="view-wrapper">
       <div v-if="chosenTrain">
-        <div class="actions-container">
-          <div class="actions actions-left">
-            <a class="a-button btn--image" @click="$router.back()">
-              <img src="/images/icon-back.svg" alt="train icon" />
-              <span>
-                {{ $t('trains.driver-return-link') }}
-              </span>
-            </a>
-          </div>
-
-          <div class="actions actions-right">
-            <a
-              class="a-button btn--image"
-              :href="`https://srjp-td2.web.app/?id=${chosenTrain.id}`"
-              target="_blank"
-            >
-              <span class="hidable">
-                {{ $t('trains.driver-srjp-link') }}
-              </span>
-
-              <img src="/images/icon-srjp.svg" alt="srjp icon" />
-            </a>
-
-            <router-link
-              :to="`/journal/timetables?search-driver=${chosenTrain.driverName}`"
-              class="a-button btn--image"
-            >
-              <span class="hidable">
-                {{ $t('trains.driver-journal-link') }}
-              </span>
-
-              <img src="/images/icon-train.svg" alt="train icon" />
-            </router-link>
-          </div>
-        </div>
-
-        <div class="train-card">
-          <TrainInfo :train="chosenTrain" :extended="true" />
-
-          <button class="btn btn--action" style="margin: 1em 0" @click="copyStockToClipboard()">
-            <i class="fa-regular fa-copy"></i> {{ $t('trains.stock-copy') }}
-          </button>
-
-          <StockList :trainStockList="chosenTrain.stockList" />
-          <TrainSchedule :train="chosenTrain" />
-        </div>
+        <DriverTopActions :chosenTrain="chosenTrain" />
+        <DriverTrainCard :chosenTrain="chosenTrain" />
       </div>
 
       <Loading v-else-if="apiStore.dataStatuses.connection == Status.Data.Loading" />
 
-      <div v-else class="driver-not-found">
-        <h2>&olcross; {{ $t('trains.driver-not-found-header') }}</h2>
-
-        <p class="text--grayed">
-          {{ $t('trains.driver-not-found-desc-1') }} <br />
-          {{ $t('trains.driver-not-found-desc-2') }}
-          <router-link to="/journal/timetables"
-            >{{ $t('trains.driver-not-found-journal') }} </router-link
-          >!
-        </p>
-
-        <p v-if="props.trainId && otherDriverTrains.length > 0">
-          <i18n-t keypath="trains.driver-not-found-others">
-            <template v-slot:driver>
-              <b>{{ otherDriverTrains[0].driverName }}</b>
-            </template>
-          </i18n-t>
-        </p>
-
-        <div class="other-driver-trains">
-          <template v-for="(train, i) in otherDriverTrains">
-            <router-link :to="`/driver?trainId=${train.id}`">
-              {{ train.trainNo }}
-              | {{ regionsJSON.find((r) => r.id == train.region)?.name ?? 'PL1' }}
-            </router-link>
-          </template>
-        </div>
-
-        <div style="margin-top: 1em">
-          <router-link to="/">&lt;&lt; {{ $t('trains.driver-not-found-return') }}</router-link>
-        </div>
-      </div>
+      <DriverNotFound v-else :trainId="props.trainId" />
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import TrainInfo from '../components/TrainsView/TrainInfo.vue';
-import TrainSchedule from '../components/TrainsView/TrainSchedule.vue';
-import StockList from '../components/Global/StockList.vue';
 import Loading from '../components/Global/Loading.vue';
 import { useMainStore } from '../store/mainStore';
 import { useApiStore } from '../store/apiStore';
 import { Status } from '../typings/common';
-import { regions as regionsJSON } from '../data/options.json';
-import { useI18n } from 'vue-i18n';
+
+import DriverTopActions from '../components/DriverView/DriverTopActions.vue';
+import DriverTrainCard from '../components/DriverView/DriverTrainCard.vue';
+import DriverNotFound from '../components/DriverView/DriverNotFound.vue';
 
 const props = defineProps({
   trainId: {
@@ -113,106 +37,16 @@ const props = defineProps({
 const mainStore = useMainStore();
 const apiStore = useApiStore();
 
-const i18n = useI18n();
-
 const chosenTrain = computed(() =>
   mainStore.trainList.find((train) => train.id == props.trainId || train.modalId == props.modalId)
 );
-
-const otherDriverTrains = computed(() => {
-  return mainStore.trainList.filter(
-    (train) =>
-      train.driverId == Number(props.trainId?.split('|')[0]) &&
-      (train.timetableData || train.online || train.lastSeen >= Date.now() - 60000)
-  );
-});
-
-function copyStockToClipboard() {
-  const stockString = chosenTrain.value?.stockList.join(';');
-
-  if (!stockString) {
-    alert(i18n.t('trains.stock-clipboard-failure'));
-    return;
-  }
-
-  navigator.clipboard
-    .writeText(stockString)
-    .then(() => {
-      prompt(i18n.t('trains.stock-clipboard-success'), stockString);
-    })
-    .catch(() => {
-      alert(i18n.t('trains.stock-clipboard-failure'));
-    });
-}
 </script>
 
 <style lang="scss" scoped>
-@use '../styles/responsive';
-@use 'sass:color';
-
-$viewBgCol: #1a1a1a;
-
 .driver-view {
   margin: 0 auto;
   padding: 1em 0;
   max-width: var(--max-container-width);
   min-height: calc(100vh - 7em);
 }
-
-.actions-container {
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: 0.5em;
-}
-
-.actions {
-  display: flex;
-  gap: 0.5em;
-}
-
-.actions-container > .actions > a {
-  background-color: $viewBgCol;
-  padding: 0.5em;
-  border-radius: 0.5em 0.5em 0 0;
-
-  &:hover {
-    background-color: color.adjust($viewBgCol, $lightness: 10%);
-  }
-}
-
-.train-card {
-  padding: 1em;
-  background-color: $viewBgCol;
-  border-radius: 0 0 0.5em 0.5em;
-}
-
-.driver-not-found {
-  background-color: $viewBgCol;
-  text-align: center;
-  padding: 1em;
-  border-radius: 0.5em 0.5em;
-
-  p {
-    padding: 0.5em 0;
-  }
-
-  a {
-    text-decoration: underline;
-    color: white;
-  }
-}
-
-.other-driver-trains {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 0.5em;
-}
-
-@include responsive.smallScreen{
-  span.hidable {
-    display: none;
-  }
-}
 </style>

src/views/JournalTimetables.vue

@@ -122,6 +122,7 @@ interface TimetablesQueryParams {
   driverName?: string;
   trainNo?: string;
   timetableId?: string;
+  categoryCode?: string;
 
   authorName?: string;
 
@@ -215,6 +216,7 @@ export default defineComponent({
       'search-issuedFrom': '',
       'search-via': '',
       'search-terminatingAt': '',
+      'select-categoryCode': '',
       'search-date-from': ''
     } as Journal.TimetableSearchType);
 
@@ -230,6 +232,7 @@ export default defineComponent({
     return {
       sorterActive,
       searchersValues,
+
       filterList,
       initFilters,
 
@@ -356,6 +359,7 @@ export default defineComponent({
       const issuedFrom = this.searchersValues['search-issuedFrom'].trim() || undefined;
       const via = this.searchersValues['search-via'].trim() || undefined;
       const terminatingAt = this.searchersValues['search-terminatingAt'].trim() || undefined;
+      const categoryCode = this.searchersValues['select-categoryCode'].trim() || undefined;
 
       let dateTo: string | undefined = undefined;
 
@@ -365,8 +369,6 @@ export default defineComponent({
 
         dateTo = d.toISOString().split('T')[0];
       }
-      // const timestampFrom = dateString ? Date.parse(new Date(dateString).toISOString()) : undefined;
-      // const timestampTo = timestampFrom ? timestampFrom + 86400000 : undefined;
 
       const queryParams: TimetablesQueryParams = {};
 
@@ -433,6 +435,7 @@ export default defineComponent({
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['terminatingAt'] = terminatingAt;
       queryParams['via'] = via;
+      queryParams['categoryCode'] = categoryCode;
 
       queryParams['issuedFrom'] = issuedFrom;
       queryParams['sortBy'] =