mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 19:48:11 +00:00
sekcje: refactor plików
This commit is contained in:
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="number-generator tab">
|
||||
<div class="tab_header">
|
||||
<h2>GENERATOR NUMERU POCIĄGU</h2>
|
||||
<button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY ></button>
|
||||
</div>
|
||||
|
||||
<div class="tab_content">
|
||||
<div class="options">
|
||||
<select v-model="beginRegionName" @change="randomizeTrainNumber">
|
||||
<option :value="null" disabled>Początkowy obszar konstrukcyjny</option>
|
||||
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
|
||||
</select>
|
||||
|
||||
<select v-model="endRegionName" @change="randomizeTrainNumber">
|
||||
<option :value="null" disabled>Końcowy obszar konstrukcyjny</option>
|
||||
<option v-for="(_, name) in genData.regionNumbers" :value="name">{{ name }}</option>
|
||||
</select>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="generated-number">
|
||||
Wygenerowany numer pociągu: <b class="text--accent">{{ trainNumber }}</b>
|
||||
</div>
|
||||
|
||||
<div class="tab_actions">
|
||||
<button class="btn" @click="randomizeTrainNumber">PRZELOSUJ</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, computed, ref } from 'vue';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
import genData from '../../constants/numberGeneratorData.json';
|
||||
|
||||
type RegionName = keyof typeof genData.regionNumbers;
|
||||
|
||||
const store = useStore();
|
||||
|
||||
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 trainNumber = ref(null) as Ref<string | null>;
|
||||
|
||||
const randomizeTrainNumber = () => {
|
||||
if (beginRegionName.value == null || endRegionName.value == null || categoryRules.value == null) return '';
|
||||
|
||||
let number = '';
|
||||
|
||||
if (beginRegionName.value == endRegionName.value) {
|
||||
const sameRegionsNumbers = genData.sameRegions[beginRegionName.value];
|
||||
const randRegionNumber = sameRegionsNumbers[Math.floor(Math.random() * sameRegionsNumbers.length)];
|
||||
number += randRegionNumber.toString();
|
||||
} else {
|
||||
const beginRegionNumber = genData.regionNumbers[beginRegionName.value];
|
||||
const endRegionNumber = genData.regionNumbers[endRegionName.value];
|
||||
|
||||
number += `${beginRegionNumber}${endRegionNumber}`;
|
||||
}
|
||||
|
||||
const rulesArray = categoryRules.value.split(';').map((r) => ({
|
||||
index: r.split(':')[0],
|
||||
rule: r.split(':')[1],
|
||||
nums: Number(r.split(':')[2] || '1'),
|
||||
}));
|
||||
|
||||
rulesArray.forEach((r) => {
|
||||
const range = r.rule.split('-');
|
||||
|
||||
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();
|
||||
|
||||
number += new Array(Math.abs(randRange.length - r.nums)).fill('0').join('') + randRange;
|
||||
}
|
||||
});
|
||||
|
||||
trainNumber.value = number;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/tab.scss';
|
||||
@import '../../styles/global.scss';
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5em;
|
||||
|
||||
select {
|
||||
width: calc(50% - 0.5em);
|
||||
}
|
||||
}
|
||||
|
||||
.generated-number {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em;
|
||||
background-color: $secondaryColor;
|
||||
}
|
||||
|
||||
.tab_actions {
|
||||
button {
|
||||
grid-column: 3;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpointMd) {
|
||||
.number-generator {
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpointSm) {
|
||||
.options select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<div class="stock-generator tab">
|
||||
<div class="tab_header">
|
||||
<h2>GENERATOR SKŁADU TOWAROWEGO</h2>
|
||||
<button class="btn" @click="() => (store.stockSectionMode = 'stock-list')">POWRÓT DO LISTY ></button>
|
||||
</div>
|
||||
|
||||
<div class="tab_content">
|
||||
<h2>WŁAŚCIWOŚCI SKŁADU</h2>
|
||||
|
||||
<div class="tab_attributes">
|
||||
<label>
|
||||
Maksymalna masa (t)
|
||||
<input type="number" v-model="maxMass" step="100" max="4000" min="0" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Maks. długość (m)
|
||||
<input type="number" v-model="maxLength" step="25" max="650" min="0" />
|
||||
</label>
|
||||
|
||||
<label>
|
||||
Maks. liczba wagonów
|
||||
<input type="number" v-model="maxCarCount" step="1" max="60" min="1" />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<h2>ŁADUNEK</h2>
|
||||
<p>Wybierz ładunki, którymi chcesz wypełnić dostępne wagony:</p>
|
||||
|
||||
<div class="generator_cargo">
|
||||
<button
|
||||
class="btn"
|
||||
:data-chosen="chosenCargoTypes.includes(k as string)"
|
||||
v-for="(v, k) in store.stockData?.generator.cargo"
|
||||
@click="toggleCargoChosen(k as string, v)"
|
||||
>
|
||||
{{ k }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2>WAGONY Z WYBRANYMI ŁADUNKAMI</h2>
|
||||
|
||||
<div class="generator_warning">
|
||||
<span v-if="computedChosenCarTypes.size == 0">
|
||||
Wybierz co najmniej jeden ładunek, aby zobaczyć wagony, które go posiadają!
|
||||
</span>
|
||||
|
||||
<span v-else>
|
||||
Wagony posiadające wybrane ładunki. Najedź na nazwę, aby zobaczyć podgląd wagonu. Kliknij, aby wyłączyć z
|
||||
losowania (tylko podświetlone nazwy będą uwzględnione).
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="generator_vehicles">
|
||||
<button
|
||||
:data-chosen="true"
|
||||
:data-excluded="excludedCarTypes.includes(carType)"
|
||||
class="btn"
|
||||
v-for="carType in computedChosenCarTypes"
|
||||
:key="carType"
|
||||
@mouseover="onMouseHover(carType)"
|
||||
@mouseleave="onMouseLeave"
|
||||
@click="toggleCarExclusion(carType)"
|
||||
>
|
||||
{{ carType }}
|
||||
|
||||
<!-- <span>X</span> -->
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="tab_actions">
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock()">
|
||||
WYGENERUJ
|
||||
</button>
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="generateStock(true)">
|
||||
WYGENERUJ PRÓŻNE WAGONY
|
||||
</button>
|
||||
|
||||
<button class="btn" :data-disabled="computedChosenCarTypes.size == 0" @click="resetChosenCargo">
|
||||
ZRESETUJ ŁADUNKI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { useStore } from '../../store';
|
||||
|
||||
import stockMixin from '../../mixins/stockMixin';
|
||||
import { ICargo, ICarWagon } from '../../types';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'stock-generator',
|
||||
|
||||
mixins: [stockMixin],
|
||||
|
||||
data() {
|
||||
return {
|
||||
chosenCarTypes: [] as string[],
|
||||
excludedCarTypes: [] as string[],
|
||||
|
||||
chosenCargoTypes: [] as string[],
|
||||
|
||||
previewTimeout: -1,
|
||||
|
||||
maxMass: 3000,
|
||||
maxLength: 650,
|
||||
maxCarCount: 50,
|
||||
|
||||
store: useStore(),
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
computedChosenCarTypes() {
|
||||
return new Set<string>(this.chosenCarTypes.sort((c1, c2) => (c1 > c2 ? 1 : -1)));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
onMouseHover(type: string) {
|
||||
window.clearTimeout(this.previewTimeout);
|
||||
|
||||
this.previewTimeout = window.setTimeout(() => {
|
||||
this.previewCar(type);
|
||||
}, 400);
|
||||
},
|
||||
|
||||
onMouseLeave() {
|
||||
window.clearTimeout(this.previewTimeout);
|
||||
},
|
||||
|
||||
resetChosenCargo() {
|
||||
this.chosenCargoTypes.length = 0;
|
||||
this.chosenCarTypes.length = 0;
|
||||
this.excludedCarTypes.length = 0;
|
||||
},
|
||||
|
||||
generateStock(empty = false) {
|
||||
const generatedChosenStockList = this.chosenCargoTypes.reduce((acc, type) => {
|
||||
this.store.stockData?.generator.cargo[type]
|
||||
.filter((c) => !this.excludedCarTypes.includes(c.split(':')[0]))
|
||||
.forEach((c) => {
|
||||
const [type, cargoType] = c.split(':');
|
||||
|
||||
const carWagonObjs = this.store.carDataList.filter((cw) => cw.type.startsWith(type));
|
||||
const cargoObjs = [] as (ICargo | undefined)[];
|
||||
|
||||
if (!cargoType || empty) cargoObjs.push(undefined);
|
||||
else if (cargoType == 'all') cargoObjs.push(...carWagonObjs[0]?.cargoList);
|
||||
else cargoObjs.push(carWagonObjs[0]?.cargoList.find((cargo) => cargo.id == cargoType));
|
||||
|
||||
carWagonObjs.forEach((cw) => {
|
||||
cargoObjs.forEach((cargoObj) => {
|
||||
const chosenStock = acc.find((a) => a.constructionType.includes(cw.constructionType));
|
||||
|
||||
if (!chosenStock)
|
||||
acc.push({
|
||||
constructionType: cw.constructionType,
|
||||
carPool: [{ carWagon: cw, cargo: cargoObj }],
|
||||
});
|
||||
else chosenStock.carPool.push({ carWagon: cw, cargo: cargoObj });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
return acc;
|
||||
}, [] as { constructionType: string; carPool: { carWagon: ICarWagon; cargo?: ICargo }[] }[]);
|
||||
|
||||
this.store.stockList.length = this.store.stockList[0]?.isLoco ? 1 : 0;
|
||||
|
||||
new Array(this.maxCarCount).fill(0).forEach(() => {
|
||||
const randomStockType = generatedChosenStockList[~~(Math.random() * generatedChosenStockList.length)];
|
||||
const { carWagon, cargo } = randomStockType.carPool[~~(Math.random() * randomStockType.carPool.length)];
|
||||
|
||||
if (this.store.totalMass + (cargo?.totalMass || carWagon.mass) > this.maxMass) return;
|
||||
if (this.store.totalLength + carWagon.length > this.maxLength) return;
|
||||
|
||||
this.addCarWagon(carWagon, cargo);
|
||||
});
|
||||
|
||||
this.store.stockSectionMode = 'stock-list';
|
||||
},
|
||||
|
||||
previewCar(type: string) {
|
||||
const c = this.store.carDataList.find((c) => c.type.startsWith(type)) || null;
|
||||
|
||||
this.store.chosenVehicle = c;
|
||||
this.store.chosenCar = c;
|
||||
this.store.chosenLoco = null;
|
||||
this.store.chosenCargo = null;
|
||||
|
||||
if (c) this.store.chosenCarUseType = c?.useType;
|
||||
},
|
||||
|
||||
toggleCargoChosen(cargoType: string, vehicles: string[]) {
|
||||
if (this.chosenCargoTypes.includes(cargoType)) {
|
||||
vehicles.forEach((v) => {
|
||||
const [type] = v.split(':');
|
||||
this.chosenCarTypes.splice(this.chosenCarTypes.indexOf(type), 1);
|
||||
});
|
||||
|
||||
this.chosenCargoTypes.splice(this.chosenCargoTypes.indexOf(cargoType), 1);
|
||||
return;
|
||||
}
|
||||
|
||||
this.chosenCargoTypes.push(cargoType);
|
||||
|
||||
vehicles.forEach((v) => {
|
||||
const [type] = v.split(':');
|
||||
this.chosenCarTypes.push(type);
|
||||
});
|
||||
},
|
||||
|
||||
toggleCarExclusion(type: string) {
|
||||
if (!this.excludedCarTypes.includes(type)) this.excludedCarTypes.push(type);
|
||||
else this.excludedCarTypes = this.excludedCarTypes.filter((c) => c != type);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/global.scss';
|
||||
@import '../../styles/tab.scss';
|
||||
|
||||
|
||||
|
||||
h2 {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.generator_cargo,
|
||||
.generator_vehicles {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
padding: 0.5em;
|
||||
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
|
||||
background-color: $secondaryColor;
|
||||
|
||||
&[data-chosen='true'] {
|
||||
background-color: $accentColor;
|
||||
color: black;
|
||||
|
||||
box-shadow: 0 0 5px 1px $accentColor;
|
||||
}
|
||||
|
||||
&[data-excluded='true'] {
|
||||
background-color: gray;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
padding: 5px;
|
||||
|
||||
transform: translate(-8px, -50%);
|
||||
background-color: $bgColor;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.generator_vehicles {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
outline: none;
|
||||
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.generator_warning {
|
||||
background-color: $accentColor;
|
||||
padding: 0.5em;
|
||||
text-align: justify;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 470px) {
|
||||
.generator_cargo,
|
||||
.generator_vehicles {
|
||||
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,600 @@
|
||||
<template>
|
||||
<section class="stock-list">
|
||||
<div class="stock_actions">
|
||||
<label class="file-label">
|
||||
<input
|
||||
type="file"
|
||||
accept=".con, .txt"
|
||||
ref="conFile"
|
||||
style="position: fixed; top: -100%"
|
||||
@change="uploadStock"
|
||||
/>
|
||||
<div class="btn">ZAŁADUJ PLIK</div>
|
||||
</label>
|
||||
|
||||
<button class="btn" @click="store.stockSectionMode = 'number-generator'">GENERUJ NUMER</button>
|
||||
<button class="btn" @click="store.stockSectionMode = 'stock-generator'">LOSUJ SKŁAD</button>
|
||||
</div>
|
||||
|
||||
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
||||
<b class="no">
|
||||
POJAZD NR <span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
|
||||
</b>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||
@click="moveUpStock(store.chosenStockListIndex)"
|
||||
>
|
||||
<img :src="getIconURL('higher')" alt="move up vehicle" />
|
||||
PRZENIEŚ WYŻEJ
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||
@click="moveDownStock(store.chosenStockListIndex)"
|
||||
>
|
||||
<img :src="getIconURL('lower')" alt="move down vehicle" />
|
||||
PRZENIEŚ NIŻEJ
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="btn"
|
||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||
@click="removeStock(store.chosenStockListIndex)"
|
||||
>
|
||||
<img :src="getIconURL('remove')" alt="remove vehicle" />
|
||||
USUŃ
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="stock_actions">
|
||||
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
|
||||
POBIERZ PLIK
|
||||
</button>
|
||||
|
||||
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
|
||||
KOPIUJ JAKO TEKST
|
||||
</button>
|
||||
|
||||
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
|
||||
ZRESETUJ LISTĘ
|
||||
</button>
|
||||
|
||||
<button class="btn" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
|
||||
TASUJ WAGONY
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="stock_specs">
|
||||
<b class="real-stock-info" v-if="store.chosenRealStock">
|
||||
<span class="text--accent">
|
||||
<img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
|
||||
{{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
|
||||
</span>
|
||||
|
|
||||
</b>
|
||||
|
||||
<span>
|
||||
Masa: <span class="text--accent">{{ store.totalMass }}t</span> - Długość:
|
||||
<span class="text--accent">{{ store.totalLength }}m</span>
|
||||
- Vmax pociągu: <span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="stock_warnings">
|
||||
<div class="warning" v-if="locoNotSuitable">
|
||||
Lokomotywy EP07 i EP08 są przeznaczone jedynie do ruchu pasażerskiego!
|
||||
</div>
|
||||
|
||||
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
|
||||
Maksymalna długość składów pasażerskich nie może przekraczać 350m!
|
||||
</div>
|
||||
|
||||
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
|
||||
Maksymalna długość składów innych niż pasażerskie nie może przekraczać 650m!
|
||||
</div>
|
||||
|
||||
<div class="warning" v-if="trainTooHeavy">
|
||||
Ten skład jest za ciężki! Sprawdź
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
|
||||
>
|
||||
dopuszczalne masy składów
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="warning" v-if="tooManyLocomotives">Ten skład posiada za dużo pojazdów trakcyjnych!</div>
|
||||
</div>
|
||||
|
||||
<StockThumbnails :onListItemClick="onListItemClick" :onStockImageError="stockImageError" />
|
||||
|
||||
<!-- Stock list -->
|
||||
<ul ref="list">
|
||||
<li v-if="stockIsEmpty" class="list-empty">
|
||||
<div class="stock-info">Lista pojazdów jest pusta!</div>
|
||||
</li>
|
||||
|
||||
<TransitionGroup name="stock-list-anim">
|
||||
<li
|
||||
v-for="(stock, i) in store.stockList"
|
||||
:key="stock.id"
|
||||
:class="{ loco: stock.isLoco }"
|
||||
tabindex="0"
|
||||
@click="onListItemClick(i)"
|
||||
@keydown.enter="onListItemClick(i)"
|
||||
@keydown.w="moveUpStock(i)"
|
||||
@keydown.s="moveDownStock(i)"
|
||||
@keydown.backspace="removeStock(i)"
|
||||
ref="itemRefs"
|
||||
>
|
||||
<div
|
||||
class="stock-info"
|
||||
@dragstart="onDragStart(i)"
|
||||
@drop="onDrop($event, i)"
|
||||
@dragover="allowDrop"
|
||||
draggable="true"
|
||||
>
|
||||
<span class="stock-info__no" :data-selected="i == store.chosenStockListIndex">
|
||||
<span v-if="i == store.chosenStockListIndex">• </span>
|
||||
{{ i + 1 }}.
|
||||
</span>
|
||||
|
||||
<span class="stock-info__type">
|
||||
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
|
||||
</span>
|
||||
|
||||
<span class="stock-info__cargo" v-if="stock.cargo"> {{ stock.cargo.id }} </span>
|
||||
<span class="stock-info__length"> {{ stock.length }}m </span>
|
||||
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
|
||||
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
|
||||
</div>
|
||||
</li>
|
||||
</TransitionGroup>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import TrainImage from '../sections/TrainImageSection.vue';
|
||||
|
||||
import { useStore } from '../../store';
|
||||
import warningsMixin from '../../mixins/warningsMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
||||
import { IStock } from '../../types';
|
||||
import StockThumbnails from '../utils/StockThumbnails.vue';
|
||||
import stockMixin from '../../mixins/stockMixin';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'stock-list',
|
||||
components: { TrainImage, StockThumbnails },
|
||||
|
||||
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
|
||||
|
||||
setup() {
|
||||
const store = useStore();
|
||||
|
||||
return {
|
||||
store,
|
||||
};
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
imageOffsetY: 0,
|
||||
|
||||
draggedVehicleID: -1,
|
||||
}),
|
||||
|
||||
computed: {
|
||||
stockString() {
|
||||
return this.store.stockList
|
||||
.map((stock) => {
|
||||
let s = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
|
||||
|
||||
let final = s;
|
||||
for (let i = 0; i < stock.count - 1; i++) final += `;${s}`;
|
||||
|
||||
return final;
|
||||
})
|
||||
.join(';');
|
||||
},
|
||||
|
||||
stockIsEmpty() {
|
||||
return this.store.stockList.length == 0;
|
||||
},
|
||||
|
||||
chosenStockVehicle() {
|
||||
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
stockHasWarnings() {
|
||||
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
|
||||
},
|
||||
|
||||
stockImageError(e: Event, stock: IStock): void {
|
||||
(e.target as HTMLImageElement).src = `images/${stock.useType}-unknown.png`;
|
||||
},
|
||||
|
||||
copyToClipboard() {
|
||||
// if (this.stockHasWarnings()) {
|
||||
// alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
// return;
|
||||
// }
|
||||
|
||||
navigator.clipboard.writeText(this.stockString);
|
||||
|
||||
setTimeout(() => {
|
||||
alert('Pociąg został skopiowany do schowka!');
|
||||
}, 20);
|
||||
},
|
||||
|
||||
onListItemClick(stockID: number) {
|
||||
const stock = this.store.stockList[stockID];
|
||||
|
||||
this.store.chosenStockListIndex =
|
||||
this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
|
||||
|
||||
if (this.store.chosenStockListIndex == -1) {
|
||||
this.store.chosenVehicle = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.store.swapVehicles) this.store.swapVehicles = false;
|
||||
|
||||
this.previewStock(stock);
|
||||
},
|
||||
|
||||
getCarSpecFromType(typeStr: string) {
|
||||
const specArray = typeStr.split('_');
|
||||
|
||||
if (specArray.length == 0) return null;
|
||||
|
||||
/* 111a_Grafitti_1 */
|
||||
if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
|
||||
|
||||
/* 111a_PKP_Bnouz_01 */
|
||||
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
|
||||
},
|
||||
|
||||
resetStock() {
|
||||
this.store.stockList.length = 0;
|
||||
this.store.chosenStockListIndex = -1;
|
||||
},
|
||||
|
||||
addStock(index: number) {
|
||||
if (index == -1) return;
|
||||
|
||||
this.store.stockList[index].count++;
|
||||
},
|
||||
|
||||
subStock(index: number) {
|
||||
if (index == -1) return;
|
||||
|
||||
if (this.store.stockList[index].count < 2) return;
|
||||
|
||||
this.store.stockList[index].count--;
|
||||
},
|
||||
|
||||
removeStock(index: number) {
|
||||
if (index == -1) return;
|
||||
|
||||
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
|
||||
|
||||
if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
|
||||
},
|
||||
|
||||
moveUpStock(index: number) {
|
||||
if (index < 1) return;
|
||||
|
||||
const tempStock = this.store.stockList[index];
|
||||
|
||||
this.store.stockList[index] = this.store.stockList[index - 1];
|
||||
this.store.stockList[index - 1] = tempStock;
|
||||
|
||||
this.store.chosenStockListIndex = index - 1;
|
||||
},
|
||||
|
||||
moveDownStock(index: number) {
|
||||
if (index == -1) return;
|
||||
if (index > this.store.stockList.length - 2) return;
|
||||
|
||||
const tempStock = this.store.stockList[index];
|
||||
|
||||
this.store.stockList[index] = this.store.stockList[index + 1];
|
||||
this.store.stockList[index + 1] = tempStock;
|
||||
|
||||
this.store.chosenStockListIndex = index + 1;
|
||||
},
|
||||
|
||||
shuffleCars() {
|
||||
const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
|
||||
if (!stock.isLoco) acc.push(i);
|
||||
|
||||
return acc;
|
||||
}, [] as number[]);
|
||||
|
||||
for (let i = 0; i < this.store.stockList.length; i++) {
|
||||
if (!availableIndexes.includes(i)) continue;
|
||||
|
||||
availableIndexes.splice(i, -1);
|
||||
|
||||
const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
|
||||
const tempSwap = this.store.stockList[randAvailableIndex];
|
||||
|
||||
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
|
||||
this.store.stockList[i] = tempSwap;
|
||||
}
|
||||
},
|
||||
|
||||
downloadStock() {
|
||||
if (this.store.stockList.length == 0) return alert('Lista pojazdów jest pusta!');
|
||||
|
||||
// if (this.stockHasWarnings())
|
||||
// return alert('Jazda tym pociągiem jest niezgodna z regulaminem symulatora! Zmień parametry zestawienia!');
|
||||
|
||||
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${
|
||||
this.store.totalMass
|
||||
}t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
|
||||
|
||||
const fileName = prompt(
|
||||
'Nazwij plik, a następnie pobierz do folderu Presets (Dokumenty/TTSK/TrainDriver2):',
|
||||
defaultName
|
||||
);
|
||||
|
||||
if (!fileName) return;
|
||||
|
||||
const blob = new Blob([this.stockString]);
|
||||
const file = fileName + '.con';
|
||||
|
||||
var e = document.createEvent('MouseEvents'),
|
||||
a = document.createElement('a');
|
||||
a.download = file;
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.dataset.downloadurl = ['', a.download, a.href].join(':');
|
||||
e.initEvent('click', true, false);
|
||||
a.dispatchEvent(e);
|
||||
},
|
||||
|
||||
uploadStock() {
|
||||
const files = (this.$refs['conFile'] as HTMLInputElement).files;
|
||||
|
||||
if (files?.length != 1) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(files[0]);
|
||||
|
||||
reader.onload = (res) => {
|
||||
const stockString = res.target?.result;
|
||||
|
||||
if (!stockString || typeof stockString !== 'string') return;
|
||||
|
||||
this.loadStockFromString(stockString);
|
||||
};
|
||||
|
||||
reader.onerror = (err) => console.log(err);
|
||||
},
|
||||
|
||||
onDragStart(vehicleIndex: number) {
|
||||
this.draggedVehicleID = vehicleIndex;
|
||||
},
|
||||
|
||||
onDrop(e: DragEvent, vehicleIndex: number) {
|
||||
e.preventDefault();
|
||||
|
||||
let targetEl = (this.$refs['itemRefs'] as Element[])[vehicleIndex];
|
||||
|
||||
if (!targetEl) return;
|
||||
|
||||
const tempVehicle = this.store.stockList[vehicleIndex];
|
||||
|
||||
this.store.stockList[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
|
||||
this.store.stockList[this.draggedVehicleID] = tempVehicle;
|
||||
|
||||
this.store.chosenStockListIndex = vehicleIndex;
|
||||
},
|
||||
|
||||
allowDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/global';
|
||||
|
||||
.warning {
|
||||
padding: 0.25em;
|
||||
background: $accentColor;
|
||||
color: black;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.stock_controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0.5em;
|
||||
background-color: #353a57;
|
||||
|
||||
&[data-disabled='true'] {
|
||||
opacity: 0.8;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
input#stock-count {
|
||||
width: 3em;
|
||||
|
||||
margin: 0;
|
||||
padding: 0.25em;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
img {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stock_actions {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
margin: 1em 0;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||
|
||||
label.file-label {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
|
||||
input:focus-visible + div {
|
||||
outline: 1px solid white;
|
||||
color: $accentColor;
|
||||
}
|
||||
|
||||
input:hover + div {
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.real-stock-info {
|
||||
img {
|
||||
height: 1.3ch;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
ul > li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-width: 500px;
|
||||
|
||||
margin: 0.25em 0;
|
||||
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 1px solid white;
|
||||
}
|
||||
|
||||
&.list-empty {
|
||||
background-color: $secondaryColor;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
li > .stock-info {
|
||||
display: flex;
|
||||
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
|
||||
transition: color 100ms;
|
||||
|
||||
& > span {
|
||||
padding: 0.5em;
|
||||
margin-right: 0.25em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.stock_warnings {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.stock-info {
|
||||
&__no,
|
||||
&__type {
|
||||
background-color: $secondaryColor;
|
||||
}
|
||||
|
||||
&__count {
|
||||
background-color: #e04e3e;
|
||||
}
|
||||
|
||||
&__no {
|
||||
min-width: 3.5em;
|
||||
text-align: right;
|
||||
|
||||
&[data-selected='true'] {
|
||||
color: $accentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&__cargo {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
&__length,
|
||||
&__mass,
|
||||
&__speed {
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.stock-list-anim {
|
||||
&-move, /* apply transition to moving elements */
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
&-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-25px);
|
||||
}
|
||||
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $breakpointMd) {
|
||||
ul {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user