mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-04 03:58:11 +00:00
restruct: stock list components
This commit is contained in:
@@ -1,245 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<section class="stock-list-tab">
|
<section class="stock-list-tab">
|
||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="stock_actions">
|
<!-- Stock Actions -->
|
||||||
<button
|
<StockActions />
|
||||||
class="btn btn--image"
|
|
||||||
@click="clickFileInput"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-upload-file')"
|
|
||||||
>
|
|
||||||
<input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
|
|
||||||
<FolderPlusIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Specs -->
|
||||||
class="btn btn--image"
|
<StockSpecs />
|
||||||
@click="uploadStockFromClipboard"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-upload-clipboard')"
|
|
||||||
>
|
|
||||||
<ClipboardDocumentCheckIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Spawn Settings -->
|
||||||
class="btn btn--image"
|
<StockSpawnSettings />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="downloadStock"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-download')"
|
|
||||||
>
|
|
||||||
<ArrowDownTrayIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock Warnings -->
|
||||||
class="btn btn--image"
|
<StockWarnings />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="copyToClipboard"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-copy')"
|
|
||||||
>
|
|
||||||
<DocumentDuplicateIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
<!-- Stock List -->
|
||||||
class="btn btn--image"
|
<StockList />
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="saveStockDataToStorage"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-bookmark')"
|
|
||||||
>
|
|
||||||
<BookmarkIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="resetStock"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-reset')"
|
|
||||||
>
|
|
||||||
<ArrowUturnLeftIcon />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:data-disabled="stockIsEmpty"
|
|
||||||
:disabled="stockIsEmpty"
|
|
||||||
@click="shuffleCars"
|
|
||||||
:data-button-tooltip="$t('stocklist.action-shuffle')"
|
|
||||||
>
|
|
||||||
<ArrowPathIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveUpStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<ChevronUpIcon />
|
|
||||||
{{ $t('stocklist.action-move-up') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="moveDownStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<ChevronDownIcon />
|
|
||||||
{{ $t('stocklist.action-move-down') }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="btn btn--image"
|
|
||||||
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
|
||||||
@click="removeStock(store.chosenStockListIndex)"
|
|
||||||
>
|
|
||||||
<TrashIcon />
|
|
||||||
{{ $t('stocklist.action-remove') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_specs">
|
|
||||||
<b class="real-stock-info" v-if="chosenRealComposition">
|
|
||||||
<span class="text--accent">
|
|
||||||
<img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
|
|
||||||
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
|
|
||||||
</span>
|
|
||||||
|
|
|
||||||
</b>
|
|
||||||
|
|
||||||
<span>
|
|
||||||
{{ $t('stocklist.mass') }}
|
|
||||||
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
|
|
||||||
({{ $t('stocklist.mass-accepted') }}:
|
|
||||||
<span class="text--accent">{{
|
|
||||||
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
|
|
||||||
}}</span
|
|
||||||
>) - {{ $t('stocklist.length') }}:
|
|
||||||
<span class="text--accent">{{ store.totalLength }}m</span>
|
|
||||||
- {{ $t('stocklist.vmax') }}
|
|
||||||
<span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
|
|
||||||
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
<div class="stock_spawn-settings">
|
|
||||||
<Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
|
|
||||||
{{ $t('stocklist.coldstart-info') }}
|
|
||||||
</Checkbox>
|
|
||||||
|
|
||||||
<Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
|
|
||||||
{{ $t('stocklist.doublemanning-info') }}
|
|
||||||
</Checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stock_warnings" v-if="hasAnyWarnings">
|
|
||||||
<div class="warning" v-if="locoNotSuitable">
|
|
||||||
(!) {{ $t('stocklist.warning-not-suitable') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
|
|
||||||
(!) {{ $t('stocklist.warning-passenger-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
|
|
||||||
(!) {{ $t('stocklist.warning-freight-too-long') }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="teamOnlyVehicles.length > 0">
|
|
||||||
(!)
|
|
||||||
{{
|
|
||||||
$t('stocklist.warning-team-only-vehicle', [
|
|
||||||
teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
|
|
||||||
])
|
|
||||||
}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="warning" v-if="weightExceeded">
|
|
||||||
(!)
|
|
||||||
<i18n-t keypath="stocklist.warning-too-heavy">
|
|
||||||
<template #href>
|
|
||||||
<a
|
|
||||||
target="_blank"
|
|
||||||
href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
|
|
||||||
>
|
|
||||||
{{ $t('stocklist.acceptable-mass-docs') }}
|
|
||||||
</a>
|
|
||||||
</template>
|
|
||||||
</i18n-t>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <div class="warning" v-if="locoCountExceeded">
|
|
||||||
{{ $t('stocklist.warning-too-many-locos') }}
|
|
||||||
</div> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<StockThumbnails :onListItemClick="onListItemClick" />
|
|
||||||
|
|
||||||
<!-- Stock list -->
|
|
||||||
<div class="list-wrapper">
|
|
||||||
<div v-if="stockIsEmpty" class="list-empty">
|
|
||||||
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul v-else>
|
|
||||||
<transition-group name="stock-list-anim">
|
|
||||||
<li
|
|
||||||
v-for="(stock, i) in store.stockList"
|
|
||||||
:key="stock.id"
|
|
||||||
:class="{ loco: isTractionUnit(stock.vehicleRef) }"
|
|
||||||
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"
|
|
||||||
:data-sponsor-only="
|
|
||||||
stock.vehicleRef.sponsorOnlyTimestamp &&
|
|
||||||
stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
|
|
||||||
"
|
|
||||||
:data-team-only="stock.vehicleRef.teamOnly"
|
|
||||||
>
|
|
||||||
{{
|
|
||||||
isTractionUnit(stock.vehicleRef)
|
|
||||||
? stock.vehicleRef.type
|
|
||||||
: getCarSpecFromType(stock.vehicleRef.type)
|
|
||||||
}}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stock-info-cargo" v-if="stock.cargo">
|
|
||||||
{{ stock.cargo.id }}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
|
|
||||||
|
|
||||||
<span class="stock-info-mass">
|
|
||||||
{{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
|
|
||||||
</span>
|
|
||||||
<span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</transition-group>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
@@ -251,42 +26,22 @@ import { useStore } from '../../store';
|
|||||||
|
|
||||||
import imageMixin from '../../mixins/imageMixin';
|
import imageMixin from '../../mixins/imageMixin';
|
||||||
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
||||||
import StockThumbnails from '../utils/StockThumbnails.vue';
|
|
||||||
import stockMixin from '../../mixins/stockMixin';
|
import stockMixin from '../../mixins/stockMixin';
|
||||||
import Checkbox from '../common/Checkbox.vue';
|
|
||||||
import { isTractionUnit } from '../../utils/vehicleUtils';
|
import StockActions from './stock-list/StockActions.vue';
|
||||||
import {
|
import StockSpecs from './stock-list/StockSpecs.vue';
|
||||||
ArrowDownTrayIcon,
|
import StockSpawnSettings from './stock-list/StockSpawnSettings.vue';
|
||||||
ArrowPathIcon,
|
import StockWarnings from './stock-list/StockWarnings.vue';
|
||||||
ArrowUpTrayIcon,
|
import StockList from './stock-list/StockList.vue';
|
||||||
ArrowUturnLeftIcon,
|
|
||||||
BookmarkIcon,
|
|
||||||
ChevronDownIcon,
|
|
||||||
ChevronUpIcon,
|
|
||||||
ClipboardDocumentIcon,
|
|
||||||
FolderPlusIcon,
|
|
||||||
ClipboardDocumentCheckIcon,
|
|
||||||
TrashIcon,
|
|
||||||
DocumentDuplicateIcon,
|
|
||||||
} from '@heroicons/vue/20/solid';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'stock-list',
|
name: 'stock-list',
|
||||||
components: {
|
components: {
|
||||||
StockThumbnails,
|
StockActions,
|
||||||
Checkbox,
|
StockSpecs,
|
||||||
FolderPlusIcon,
|
StockSpawnSettings,
|
||||||
ArrowDownTrayIcon,
|
StockWarnings,
|
||||||
ArrowPathIcon,
|
StockList,
|
||||||
ArrowUpTrayIcon,
|
|
||||||
ArrowUturnLeftIcon,
|
|
||||||
BookmarkIcon,
|
|
||||||
ChevronDownIcon,
|
|
||||||
ChevronUpIcon,
|
|
||||||
ClipboardDocumentIcon,
|
|
||||||
ClipboardDocumentCheckIcon,
|
|
||||||
DocumentDuplicateIcon,
|
|
||||||
TrashIcon,
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [imageMixin, stockMixin, stockPreviewMixin],
|
mixins: [imageMixin, stockMixin, stockPreviewMixin],
|
||||||
@@ -299,291 +54,17 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
data: () => ({
|
data: () => ({}),
|
||||||
imageOffsetY: 0,
|
|
||||||
draggedVehicleID: -1,
|
|
||||||
|
|
||||||
stockActions: [{}],
|
// computed: {
|
||||||
}),
|
// chosenStockVehicle() {
|
||||||
|
// return this.store.chosenStockListIndex == -1
|
||||||
|
// ? undefined
|
||||||
|
// : this.store.stockList[this.store.chosenStockListIndex];
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
|
||||||
computed: {
|
methods: {},
|
||||||
chosenRealComposition() {
|
|
||||||
const currentStockString = this.store.stockList.map((s) => s.vehicleRef.type).join(';');
|
|
||||||
|
|
||||||
return this.store.realCompositionList.find((rc) => rc.stockString == currentStockString);
|
|
||||||
},
|
|
||||||
|
|
||||||
stockIsEmpty() {
|
|
||||||
return this.store.stockList.length == 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
chosenStockVehicle() {
|
|
||||||
return this.store.chosenStockListIndex == -1
|
|
||||||
? undefined
|
|
||||||
: this.store.stockList[this.store.chosenStockListIndex];
|
|
||||||
},
|
|
||||||
|
|
||||||
lengthExceeded() {
|
|
||||||
return (
|
|
||||||
(this.store.totalLength > 350 && this.store.isTrainPassenger) ||
|
|
||||||
(this.store.totalLength > 650 && !this.store.isTrainPassenger)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
weightExceeded() {
|
|
||||||
return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
|
|
||||||
},
|
|
||||||
|
|
||||||
locoNotSuitable() {
|
|
||||||
return (
|
|
||||||
!this.store.isTrainPassenger &&
|
|
||||||
this.store.stockList.length > 1 &&
|
|
||||||
!this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
|
|
||||||
this.store.stockList.some(
|
|
||||||
(stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
// locoCountExceeded() {
|
|
||||||
// return (
|
|
||||||
// this.store.stockList.reduce((acc, stock) => {
|
|
||||||
// if (isTractionUnit(stock.vehicleRef)) acc += 1;
|
|
||||||
// return acc;
|
|
||||||
// }, 0) > 2
|
|
||||||
// );
|
|
||||||
// },
|
|
||||||
|
|
||||||
teamOnlyVehicles() {
|
|
||||||
return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
|
|
||||||
},
|
|
||||||
|
|
||||||
hasAnyWarnings() {
|
|
||||||
return (
|
|
||||||
this.weightExceeded || this.lengthExceeded || this.locoNotSuitable || this.teamOnlyVehicles
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
isTractionUnit,
|
|
||||||
|
|
||||||
copyToClipboard() {
|
|
||||||
navigator.clipboard.writeText(this.store.stockString);
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
alert(this.$t('stocklist.alert-copied'));
|
|
||||||
}, 20);
|
|
||||||
},
|
|
||||||
|
|
||||||
clickFileInput() {
|
|
||||||
(this.$refs['conFile'] as HTMLInputElement).click();
|
|
||||||
},
|
|
||||||
|
|
||||||
onListItemClick(stockID: number) {
|
|
||||||
const stock = this.store.stockList[stockID];
|
|
||||||
|
|
||||||
this.store.chosenStockListIndex =
|
|
||||||
this.store.chosenStockListIndex == stockID &&
|
|
||||||
this.store.chosenVehicle?.type == stock.vehicleRef.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;
|
|
||||||
},
|
|
||||||
|
|
||||||
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 (!isTractionUnit(stock.vehicleRef)) 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(this.$t('stocklist.alert-empty'));
|
|
||||||
|
|
||||||
const defaultName = `${this.chosenRealComposition ? this.chosenRealComposition.stockId + ' ' : ''}${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${
|
|
||||||
this.store.totalLength
|
|
||||||
}m; vmax ${this.store.maxStockSpeed}`;
|
|
||||||
|
|
||||||
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
|
||||||
|
|
||||||
if (!fileName) return;
|
|
||||||
|
|
||||||
const blob = new Blob([this.store.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);
|
|
||||||
},
|
|
||||||
|
|
||||||
uploadStockFromFile() {
|
|
||||||
const inputEl = this.$refs['conFile'] as HTMLInputElement;
|
|
||||||
const files = inputEl.files;
|
|
||||||
|
|
||||||
if (files?.length != 1) return;
|
|
||||||
if (!/\.con$/.test(files[0].name)) 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.error(err);
|
|
||||||
|
|
||||||
inputEl.value = '';
|
|
||||||
},
|
|
||||||
|
|
||||||
saveStockDataToStorage() {
|
|
||||||
if (this.store.stockList.length == 0) return;
|
|
||||||
|
|
||||||
const defaultName = `${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
|
|
||||||
const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
|
|
||||||
|
|
||||||
if (!entryName) return;
|
|
||||||
|
|
||||||
if (entryName in this.store.storageStockData) {
|
|
||||||
const overwriteDataConfirm = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
|
|
||||||
|
|
||||||
if (!overwriteDataConfirm) return;
|
|
||||||
|
|
||||||
this.store.storageStockData[entryName].updatedAt = new Date();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.store.storageStockData[entryName] = {
|
|
||||||
id: entryName,
|
|
||||||
createdAt: new Date(),
|
|
||||||
stockString: this.store.stockString,
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
|
||||||
localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
|
|
||||||
this.store.chosenStorageStockName = entryName;
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
async uploadStockFromClipboard() {
|
|
||||||
try {
|
|
||||||
const content = await navigator.clipboard.readText();
|
|
||||||
this.loadStockFromString(content);
|
|
||||||
} catch (error) {
|
|
||||||
switch (error) {
|
|
||||||
case 'stock-loading-error':
|
|
||||||
alert(this.$t('stocklist.stock-loading-error'));
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
alert(this.$t('stocklist.stock-clipboard-error'));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
@@ -595,178 +76,4 @@ export default defineComponent({
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.warning {
|
|
||||||
padding: 0.25em;
|
|
||||||
margin: 0.25em 0;
|
|
||||||
background: global.$accentColor;
|
|
||||||
color: black;
|
|
||||||
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: black;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
gap: 0.5em;
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_actions {
|
|
||||||
display: grid;
|
|
||||||
gap: 0.5em;
|
|
||||||
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
|
||||||
|
|
||||||
button {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&[data-button-tooltip] {
|
|
||||||
font-size: 0.85em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock_spawn-settings {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.real-stock-info {
|
|
||||||
img {
|
|
||||||
height: 1.3ch;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-wrapper {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-empty {
|
|
||||||
background-color: global.$secondaryColor;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
padding: 0.75em;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
overflow-y: scroll;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li > .stock-info {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.25em;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
font-weight: 700;
|
|
||||||
|
|
||||||
transition: color 100ms;
|
|
||||||
|
|
||||||
& > span {
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-no,
|
|
||||||
.stock-info-type {
|
|
||||||
background-color: global.$secondaryColor;
|
|
||||||
|
|
||||||
&[data-team-only='true'] {
|
|
||||||
color: global.$teamColor;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-sponsor-only='true'] {
|
|
||||||
color: global.$sponsorColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-no {
|
|
||||||
min-width: 3.5em;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
&[data-selected='true'] {
|
|
||||||
color: global.$accentColor;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-cargo {
|
|
||||||
background-color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stock-info-length,
|
|
||||||
.stock-info-mass,
|
|
||||||
.stock-info-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: global.$breakpointMd) {
|
|
||||||
ul {
|
|
||||||
min-height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -8,38 +8,51 @@
|
|||||||
<div class="tab_content">
|
<div class="tab_content">
|
||||||
<div class="storage-list-wrapper">
|
<div class="storage-list-wrapper">
|
||||||
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
|
<transition-group name="storage-list-anim" tag="ul" class="storage-list">
|
||||||
<li v-for="(storageEntry, stockName) in store.storageStockData" :key="stockName">
|
<li v-for="storageEntry in storageStockDataList" :key="storageEntry.id">
|
||||||
<div class="storage-item-top">
|
<div class="storage-item-top">
|
||||||
<button class="btn btn--text btn-name" @click="chooseStorageStock(stockName)">
|
<h3>
|
||||||
{{ stockName }}
|
{{ storageEntry.id }}
|
||||||
</button>
|
</h3>
|
||||||
|
|
||||||
<div class="storage-item-top-actions">
|
<div class="storage-item-top-actions">
|
||||||
<button class="btn btn--text" @click="toggleStorageEntryExpand(stockName)">
|
<button class="btn btn--icon" @click="chooseStorageStock(storageEntry.id)">
|
||||||
|
<ArrowRightEndOnRectangleIcon style="width: 25px" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="btn btn--icon" @click="toggleStorageEntryExpand(storageEntry.id)">
|
||||||
<ChevronDownIcon
|
<ChevronDownIcon
|
||||||
v-if="!expandedEntries.includes(stockName)"
|
v-if="!expandedEntries.includes(storageEntry.id)"
|
||||||
style="width: 25px"
|
style="width: 25px"
|
||||||
/>
|
/>
|
||||||
<ChevronUpIcon v-else style="width: 25px" />
|
<ChevronUpIcon v-else style="width: 25px" />
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="btn btn--text" @click="removeStockIndexFromStorage(stockName)">
|
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
|
||||||
<TrashIcon style="width: 25px" />
|
<TrashIcon style="width: 25px" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="storage-item-expandable" v-if="expandedEntries.includes(stockName)">
|
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
|
||||||
{{
|
<i>Stworzony: {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i>
|
||||||
storageEntry.stockString
|
<i v-if="storageEntry.updatedAt">
|
||||||
.split(';')
|
• Zaktualizowany:
|
||||||
.map((s) => s.split(/:|,/)[0])
|
{{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
|
||||||
.join(' + ')
|
>
|
||||||
}}
|
|
||||||
|
<div style="margin-top: 0.5em">
|
||||||
|
<i>Skład: </i>
|
||||||
|
{{
|
||||||
|
storageEntry.stockString
|
||||||
|
.split(';')
|
||||||
|
.map((s) => s.split(/:|,/)[0])
|
||||||
|
.join(' + ')
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-if="Object.keys(store.storageStockData).length == 0" class="storage-no-entries">
|
<li v-if="Object.keys(storageStockDataList).length == 0" class="storage-no-entries">
|
||||||
{{ $t('storage.no-entires') }}
|
{{ $t('storage.no-entires') }}
|
||||||
</li>
|
</li>
|
||||||
</transition-group>
|
</transition-group>
|
||||||
@@ -52,6 +65,7 @@
|
|||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
ArrowRightEndOnRectangleIcon,
|
||||||
ChevronDownIcon,
|
ChevronDownIcon,
|
||||||
ChevronUpIcon,
|
ChevronUpIcon,
|
||||||
FolderArrowDownIcon,
|
FolderArrowDownIcon,
|
||||||
@@ -67,6 +81,7 @@ export default defineComponent({
|
|||||||
ChevronUpIcon,
|
ChevronUpIcon,
|
||||||
FolderArrowDownIcon,
|
FolderArrowDownIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
|
ArrowRightEndOnRectangleIcon,
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [stockMixin],
|
mixins: [stockMixin],
|
||||||
@@ -78,7 +93,12 @@ export default defineComponent({
|
|||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
storageStockDataList() {
|
storageStockDataList() {
|
||||||
// return Object.keys(this.store.storageStockData).
|
return Object.values(this.store.storageStockData)
|
||||||
|
.sort((a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt))
|
||||||
|
.map((data) => ({
|
||||||
|
...data,
|
||||||
|
isExpanded: false,
|
||||||
|
}));
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -152,15 +172,20 @@ ul.storage-list > li {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage-item-top button.btn-name {
|
.storage-item-top > h3 {
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage-item-top-actions {
|
.storage-item-top-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
|
|
||||||
|
& > button {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.storage-item-expandable {
|
.storage-item-expandable {
|
||||||
|
|||||||
@@ -0,0 +1,345 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_actions">
|
||||||
|
<div class="actions-top">
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
@click="clickFileInput"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-upload-file')"
|
||||||
|
>
|
||||||
|
<input type="file" @change="uploadStockFromFile" ref="conFile" accept=".con,.txt" />
|
||||||
|
<FolderPlusIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
@click="uploadStockFromClipboard"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-upload-clipboard')"
|
||||||
|
>
|
||||||
|
<ClipboardDocumentCheckIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="downloadStock"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-download')"
|
||||||
|
>
|
||||||
|
<ArrowDownTrayIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="copyToClipboard"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-copy')"
|
||||||
|
>
|
||||||
|
<DocumentDuplicateIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="saveStockDataToStorage"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-bookmark')"
|
||||||
|
>
|
||||||
|
<BookmarkIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="resetStock"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-reset')"
|
||||||
|
>
|
||||||
|
<ArrowUturnLeftIcon />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:data-disabled="stockIsEmpty"
|
||||||
|
:disabled="stockIsEmpty"
|
||||||
|
@click="shuffleCars"
|
||||||
|
:data-button-tooltip="$t('stocklist.action-shuffle')"
|
||||||
|
>
|
||||||
|
<ArrowPathIcon />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-bottom" :data-disabled="store.chosenStockListIndex == -1">
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.moveUpStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<ChevronUpIcon />
|
||||||
|
{{ $t('stocklist.action-move-up') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.moveDownStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<ChevronDownIcon />
|
||||||
|
{{ $t('stocklist.action-move-down') }}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="btn btn--image"
|
||||||
|
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
|
||||||
|
@click="stockListUtils.removeStock(store.chosenStockListIndex)"
|
||||||
|
>
|
||||||
|
<TrashIcon />
|
||||||
|
{{ $t('stocklist.action-remove') }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
|
||||||
|
import { isTractionUnit } from '../../../utils/vehicleUtils';
|
||||||
|
import { useFileUtils } from '../../../utils/fileUtils';
|
||||||
|
import stockMixin from '../../../mixins/stockMixin';
|
||||||
|
import { useStockListUtils } from '../../../utils/stockListUtils';
|
||||||
|
import {
|
||||||
|
ArrowDownTrayIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
|
ArrowUturnLeftIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
ClipboardDocumentCheckIcon,
|
||||||
|
DocumentDuplicateIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
TrashIcon,
|
||||||
|
} from '@heroicons/vue/20/solid';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [stockMixin],
|
||||||
|
|
||||||
|
components: {
|
||||||
|
ArrowDownTrayIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
|
ArrowUturnLeftIcon,
|
||||||
|
BookmarkIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
ClipboardDocumentCheckIcon,
|
||||||
|
DocumentDuplicateIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
TrashIcon,
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const fileUtils = useFileUtils();
|
||||||
|
const stockListUtils = useStockListUtils();
|
||||||
|
|
||||||
|
return {
|
||||||
|
fileUtils,
|
||||||
|
stockListUtils,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
stockIsEmpty() {
|
||||||
|
return this.store.stockList.length == 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
copyToClipboard() {
|
||||||
|
navigator.clipboard.writeText(this.store.stockString);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
alert(this.$t('stocklist.alert-copied'));
|
||||||
|
}, 20);
|
||||||
|
},
|
||||||
|
|
||||||
|
clickFileInput() {
|
||||||
|
(this.$refs['conFile'] as HTMLInputElement).click();
|
||||||
|
},
|
||||||
|
|
||||||
|
resetStock() {
|
||||||
|
this.store.stockList.length = 0;
|
||||||
|
this.store.chosenStockListIndex = -1;
|
||||||
|
},
|
||||||
|
|
||||||
|
shuffleCars() {
|
||||||
|
const availableIndexes = this.store.stockList.reduce((acc, stock, i) => {
|
||||||
|
if (!isTractionUnit(stock.vehicleRef)) 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(this.$t('stocklist.alert-empty'));
|
||||||
|
|
||||||
|
const defaultName = this.fileUtils.getCurrentStockFileName();
|
||||||
|
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
|
||||||
|
|
||||||
|
if (!fileName) return;
|
||||||
|
|
||||||
|
const blob = new Blob([this.store.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);
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadStockFromFile() {
|
||||||
|
const inputEl = this.$refs['conFile'] as HTMLInputElement;
|
||||||
|
const files = inputEl.files;
|
||||||
|
|
||||||
|
if (files?.length != 1) return;
|
||||||
|
if (!/\.con$/.test(files[0].name)) 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.error(err);
|
||||||
|
|
||||||
|
inputEl.value = '';
|
||||||
|
},
|
||||||
|
|
||||||
|
saveStockDataToStorage() {
|
||||||
|
if (this.store.stockList.length == 0) return;
|
||||||
|
|
||||||
|
const defaultName = `${this.store.stockList[0].vehicleRef.type} ${(this.store.totalWeight / 1000).toFixed(1)}t; ${this.store.totalLength}m; vmax ${this.store.maxStockSpeed}`;
|
||||||
|
const entryName = prompt(this.$t('stocklist.prompt-bookmark'), defaultName);
|
||||||
|
|
||||||
|
if (!entryName) return;
|
||||||
|
|
||||||
|
let updatedAt: number | undefined = undefined;
|
||||||
|
|
||||||
|
if (entryName in this.store.storageStockData) {
|
||||||
|
const overwriteDataConfirm = confirm(this.$t('stocklist.prompt-bookmark-overwrite'));
|
||||||
|
|
||||||
|
if (!overwriteDataConfirm) return;
|
||||||
|
|
||||||
|
this.store.storageStockData[entryName]['updatedAt'] = Date.now();
|
||||||
|
this.store.storageStockData[entryName]['stockString'] = this.store.stockString;
|
||||||
|
} else {
|
||||||
|
this.store.storageStockData[entryName] = {
|
||||||
|
id: entryName,
|
||||||
|
createdAt: Date.now(),
|
||||||
|
stockString: this.store.stockString,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
localStorage.setItem('savedStockData', JSON.stringify(this.store.storageStockData));
|
||||||
|
this.store.chosenStorageStockName = entryName;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Wystąpił błąd podczas zapisywania składu do localStorage!', error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
async uploadStockFromClipboard() {
|
||||||
|
try {
|
||||||
|
const content = await navigator.clipboard.readText();
|
||||||
|
this.loadStockFromString(content);
|
||||||
|
} catch (error) {
|
||||||
|
switch (error) {
|
||||||
|
case 'stock-loading-error':
|
||||||
|
alert(this.$t('stocklist.stock-loading-error'));
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
alert(this.$t('stocklist.stock-clipboard-error'));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.stock_actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-bottom {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions-top {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.5em;
|
||||||
|
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
|
||||||
|
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&[data-button-tooltip] {
|
||||||
|
font-size: 0.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<div class="list-wrapper">
|
||||||
|
<StockThumbnails :onListItemClick="onListItemClick" />
|
||||||
|
|
||||||
|
<div v-if="stockIsEmpty" class="list-empty">
|
||||||
|
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul v-else>
|
||||||
|
<transition-group name="stock-list-anim">
|
||||||
|
<li
|
||||||
|
v-for="(stock, i) in store.stockList"
|
||||||
|
:key="stock.id"
|
||||||
|
:class="{ loco: isTractionUnit(stock.vehicleRef) }"
|
||||||
|
tabindex="0"
|
||||||
|
@click="onListItemClick(i)"
|
||||||
|
@keydown.enter="onListItemClick(i)"
|
||||||
|
@keydown.w="stockListUtils.moveUpStock(i)"
|
||||||
|
@keydown.s="stockListUtils.moveDownStock(i)"
|
||||||
|
@keydown.backspace="stockListUtils.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"
|
||||||
|
:data-sponsor-only="
|
||||||
|
stock.vehicleRef.sponsorOnlyTimestamp &&
|
||||||
|
stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
|
||||||
|
"
|
||||||
|
:data-team-only="stock.vehicleRef.teamOnly"
|
||||||
|
>
|
||||||
|
{{
|
||||||
|
isTractionUnit(stock.vehicleRef)
|
||||||
|
? stock.vehicleRef.type
|
||||||
|
: getCarSpecFromType(stock.vehicleRef.type)
|
||||||
|
}}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="stock-info-cargo" v-if="stock.cargo">
|
||||||
|
{{ stock.cargo.id }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="stock-info-length">{{ stock.vehicleRef.length }}m</span>
|
||||||
|
|
||||||
|
<span class="stock-info-mass">
|
||||||
|
{{ ((stock.vehicleRef.weight + (stock.cargo?.weight ?? 0)) / 1000).toFixed(1) }}t
|
||||||
|
</span>
|
||||||
|
<span class="stock-info-speed">{{ stock.vehicleRef.maxSpeed }}km/h</span>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</transition-group>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import { isTractionUnit } from '../../../utils/vehicleUtils';
|
||||||
|
import { useStockListUtils } from '../../../utils/stockListUtils';
|
||||||
|
import stockPreviewMixin from '../../../mixins/stockPreviewMixin';
|
||||||
|
import StockThumbnails from './StockThumbnails.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [stockPreviewMixin],
|
||||||
|
components: { StockThumbnails },
|
||||||
|
|
||||||
|
setup() {
|
||||||
|
const stockListUtils = useStockListUtils();
|
||||||
|
|
||||||
|
return { stockListUtils };
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
draggedVehicleID: -1,
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
stockIsEmpty() {
|
||||||
|
return this.store.stockList.length == 0;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
isTractionUnit,
|
||||||
|
|
||||||
|
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();
|
||||||
|
},
|
||||||
|
|
||||||
|
onListItemClick(stockID: number) {
|
||||||
|
const stock = this.store.stockList[stockID];
|
||||||
|
|
||||||
|
this.store.chosenStockListIndex =
|
||||||
|
this.store.chosenStockListIndex == stockID &&
|
||||||
|
this.store.chosenVehicle?.type == stock.vehicleRef.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]})`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-empty {
|
||||||
|
background-color: global.$secondaryColor;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
padding: 0.75em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
overflow-y: scroll;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li > .stock-info {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25em;
|
||||||
|
|
||||||
|
color: white;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
transition: color 100ms;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-no,
|
||||||
|
.stock-info-type {
|
||||||
|
background-color: global.$secondaryColor;
|
||||||
|
|
||||||
|
&[data-team-only='true'] {
|
||||||
|
color: global.$teamColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-sponsor-only='true'] {
|
||||||
|
color: global.$sponsorColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-no {
|
||||||
|
min-width: 3.5em;
|
||||||
|
text-align: right;
|
||||||
|
|
||||||
|
&[data-selected='true'] {
|
||||||
|
color: global.$accentColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-cargo {
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stock-info-length,
|
||||||
|
.stock-info-mass,
|
||||||
|
.stock-info-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: global.$breakpointMd) {
|
||||||
|
ul {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_spawn-settings">
|
||||||
|
<Checkbox :disabled="!store.stockSupportsColdStart" v-model="store.isColdStart">
|
||||||
|
{{ $t('stocklist.coldstart-info') }}
|
||||||
|
</Checkbox>
|
||||||
|
|
||||||
|
<Checkbox :disabled="!store.stockSupportsDoubleManning" v-model="store.isDoubleManned">
|
||||||
|
{{ $t('stocklist.doublemanning-info') }}
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import Checkbox from '../../common/Checkbox.vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { Checkbox },
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.stock_spawn-settings {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_specs">
|
||||||
|
<b class="real-stock-info" v-if="store.chosenStorageStockName">
|
||||||
|
<span class="text--accent">
|
||||||
|
<BookmarkIcon />
|
||||||
|
{{ store.chosenStorageStockName }}
|
||||||
|
</span>
|
||||||
|
|
|
||||||
|
</b>
|
||||||
|
|
||||||
|
<!-- <b class="real-stock-info" v-if="store.chosenRealComposition">
|
||||||
|
<span class="text--accent">
|
||||||
|
<img :src="getIconURL(chosenRealComposition.type)" :alt="chosenRealComposition.type" />
|
||||||
|
{{ chosenRealComposition.number }} {{ chosenRealComposition.name }}
|
||||||
|
</span>
|
||||||
|
|
|
||||||
|
</b> -->
|
||||||
|
|
||||||
|
<span>
|
||||||
|
{{ $t('stocklist.mass') }}
|
||||||
|
<span class="text--accent">{{ (store.totalWeight / 1000).toFixed(1) }}t</span>
|
||||||
|
({{ $t('stocklist.mass-accepted') }}:
|
||||||
|
<span class="text--accent">{{
|
||||||
|
store.acceptableWeight ? `${~~(store.acceptableWeight / 1000)}t` : '-'
|
||||||
|
}}</span
|
||||||
|
>) - {{ $t('stocklist.length') }}:
|
||||||
|
<span class="text--accent">{{ store.totalLength }}m</span>
|
||||||
|
- {{ $t('stocklist.vmax') }}
|
||||||
|
<span tabindex="0" :data-tooltip="$t('stocklist.disclaimer')">(?)</span>:
|
||||||
|
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import imageMixin from '../../../mixins/imageMixin';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
mixins: [imageMixin],
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.real-stock-info {
|
||||||
|
img {
|
||||||
|
height: 1.3ch;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+1
-3
@@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Ref, computed, nextTick, ref, watch } from 'vue';
|
import { Ref, computed, nextTick, ref, watch } from 'vue';
|
||||||
import { useStore } from '../../store';
|
import { useStore } from '../../../store';
|
||||||
|
|
||||||
const store = useStore();
|
const store = useStore();
|
||||||
const emit = defineEmits(['listItemClick']);
|
const emit = defineEmits(['listItemClick']);
|
||||||
@@ -173,8 +173,6 @@ const getVehicleThumbnails = (vehicleString: string) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
|
||||||
.stock-thumbnails {
|
.stock-thumbnails {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background-color: #353a57;
|
background-color: #353a57;
|
||||||
@@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<div class="stock_warnings" v-if="hasAnyWarnings">
|
||||||
|
<div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="lengthExceeded && store.isTrainPassenger">
|
||||||
|
(!) {{ $t('stocklist.warning-passenger-too-long') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="lengthExceeded && !store.isTrainPassenger">
|
||||||
|
(!) {{ $t('stocklist.warning-freight-too-long') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="teamOnlyVehicles.length > 0">
|
||||||
|
(!)
|
||||||
|
{{
|
||||||
|
$t('stocklist.warning-team-only-vehicle', [
|
||||||
|
teamOnlyVehicles.map((v) => v.vehicleRef.type).join(', '),
|
||||||
|
])
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="warning" v-if="weightExceeded">
|
||||||
|
(!)
|
||||||
|
<i18n-t keypath="stocklist.warning-too-heavy">
|
||||||
|
<template #href>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href="https://docs.google.com/spreadsheets/d/1BvTU-U7huIaEheov22TrhTtROUM4MwVfdbq03GVAEM8"
|
||||||
|
>
|
||||||
|
{{ $t('stocklist.acceptable-mass-docs') }}
|
||||||
|
</a>
|
||||||
|
</template>
|
||||||
|
</i18n-t>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <div class="warning" v-if="locoCountExceeded">
|
||||||
|
{{ $t('stocklist.warning-too-many-locos') }}
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import { useStore } from '../../../store';
|
||||||
|
import { isTractionUnit } from '../../../utils/vehicleUtils';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data: () => ({
|
||||||
|
store: useStore(),
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
teamOnlyVehicles() {
|
||||||
|
return this.store.stockList.filter((stock) => stock.vehicleRef.teamOnly);
|
||||||
|
},
|
||||||
|
|
||||||
|
hasAnyWarnings() {
|
||||||
|
return (
|
||||||
|
this.weightExceeded || this.lengthExceeded || this.locoNotSuitable || this.teamOnlyVehicles
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
lengthExceeded() {
|
||||||
|
return (
|
||||||
|
(this.store.totalLength > 350 && this.store.isTrainPassenger) ||
|
||||||
|
(this.store.totalLength > 650 && !this.store.isTrainPassenger)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
weightExceeded() {
|
||||||
|
return this.store.acceptableWeight && this.store.totalWeight > this.store.acceptableWeight;
|
||||||
|
},
|
||||||
|
|
||||||
|
locoNotSuitable() {
|
||||||
|
return (
|
||||||
|
!this.store.isTrainPassenger &&
|
||||||
|
this.store.stockList.length > 1 &&
|
||||||
|
!this.store.stockList.every((stock) => isTractionUnit(stock.vehicleRef)) &&
|
||||||
|
this.store.stockList.some(
|
||||||
|
(stock) => isTractionUnit(stock.vehicleRef) && stock.vehicleRef.type.startsWith('EP')
|
||||||
|
)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.warning {
|
||||||
|
padding: 0.25em;
|
||||||
|
margin: 0.25em 0;
|
||||||
|
background: global.$accentColor;
|
||||||
|
color: black;
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: black;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -230,6 +230,14 @@ button {
|
|||||||
outline: 1px solid white;
|
outline: 1px solid white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&--icon {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-btn.router-link-exact-active {
|
.link-btn.router-link-exact-active {
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ export interface IVehicleLocoProps {
|
|||||||
|
|
||||||
export interface StorageStockEntry {
|
export interface StorageStockEntry {
|
||||||
id: string;
|
id: string;
|
||||||
createdAt: Date;
|
createdAt: number;
|
||||||
updatedAt?: Date;
|
updatedAt?: number;
|
||||||
stockString: string;
|
stockString: string;
|
||||||
}
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import { useStore } from '../store';
|
||||||
|
|
||||||
|
export const useFileUtils = () => {
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
function getCurrentStockFileName() {
|
||||||
|
let fileName = '';
|
||||||
|
|
||||||
|
const currentStockString = store.stockList.map((s) => s.vehicleRef.type).join(';');
|
||||||
|
|
||||||
|
const currentRealComp = store.realCompositionList.find(
|
||||||
|
(rc) => rc.stockString == currentStockString
|
||||||
|
);
|
||||||
|
|
||||||
|
// Append real composition to the name if chosen
|
||||||
|
if (currentRealComp != undefined) {
|
||||||
|
fileName += currentRealComp.stockId;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append default props
|
||||||
|
fileName += `${store.stockList[0].vehicleRef.type} ${(store.totalWeight / 1000).toFixed(1)}t; ${store.totalLength}m; vmax ${store.maxStockSpeed}`;
|
||||||
|
|
||||||
|
return fileName;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { getCurrentStockFileName };
|
||||||
|
};
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
import { useStore } from '../store';
|
||||||
|
|
||||||
|
export const useStockListUtils = () => {
|
||||||
|
const store = useStore();
|
||||||
|
|
||||||
|
function removeStock(index: number) {
|
||||||
|
if (index == -1) return;
|
||||||
|
|
||||||
|
store.stockList = store.stockList.filter((stock, i) => i != index);
|
||||||
|
|
||||||
|
if (store.stockList.length < index + 1) store.chosenStockListIndex = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveUpStock(index: number) {
|
||||||
|
if (index < 1) return;
|
||||||
|
|
||||||
|
const tempStock = store.stockList[index];
|
||||||
|
|
||||||
|
store.stockList[index] = store.stockList[index - 1];
|
||||||
|
store.stockList[index - 1] = tempStock;
|
||||||
|
|
||||||
|
store.chosenStockListIndex = index - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
function moveDownStock(index: number) {
|
||||||
|
if (index == -1) return;
|
||||||
|
if (index > store.stockList.length - 2) return;
|
||||||
|
|
||||||
|
const tempStock = store.stockList[index];
|
||||||
|
|
||||||
|
store.stockList[index] = store.stockList[index + 1];
|
||||||
|
store.stockList[index + 1] = tempStock;
|
||||||
|
|
||||||
|
store.chosenStockListIndex = index + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
return { removeStock, moveDownStock, moveUpStock };
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user