mirror of
https://github.com/Spythere/pojazdownik.git
synced 2026-05-03 11:45:34 +00:00
restruct: stock list components
This commit is contained in:
@@ -1,245 +1,20 @@
|
||||
<template>
|
||||
<section class="stock-list-tab">
|
||||
<div class="tab_content">
|
||||
<div class="stock_actions">
|
||||
<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>
|
||||
<!-- Stock Actions -->
|
||||
<StockActions />
|
||||
|
||||
<button
|
||||
class="btn btn--image"
|
||||
@click="uploadStockFromClipboard"
|
||||
:data-button-tooltip="$t('stocklist.action-upload-clipboard')"
|
||||
>
|
||||
<ClipboardDocumentCheckIcon />
|
||||
</button>
|
||||
<!-- Stock Specs -->
|
||||
<StockSpecs />
|
||||
|
||||
<button
|
||||
class="btn btn--image"
|
||||
:data-disabled="stockIsEmpty"
|
||||
:disabled="stockIsEmpty"
|
||||
@click="downloadStock"
|
||||
:data-button-tooltip="$t('stocklist.action-download')"
|
||||
>
|
||||
<ArrowDownTrayIcon />
|
||||
</button>
|
||||
<!-- Stock Spawn Settings -->
|
||||
<StockSpawnSettings />
|
||||
|
||||
<button
|
||||
class="btn btn--image"
|
||||
:data-disabled="stockIsEmpty"
|
||||
:disabled="stockIsEmpty"
|
||||
@click="copyToClipboard"
|
||||
:data-button-tooltip="$t('stocklist.action-copy')"
|
||||
>
|
||||
<DocumentDuplicateIcon />
|
||||
</button>
|
||||
<!-- Stock Warnings -->
|
||||
<StockWarnings />
|
||||
|
||||
<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="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>
|
||||
<!-- Stock List -->
|
||||
<StockList />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -251,42 +26,22 @@ import { useStore } from '../../store';
|
||||
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
|
||||
import StockThumbnails from '../utils/StockThumbnails.vue';
|
||||
import stockMixin from '../../mixins/stockMixin';
|
||||
import Checkbox from '../common/Checkbox.vue';
|
||||
import { isTractionUnit } from '../../utils/vehicleUtils';
|
||||
import {
|
||||
ArrowDownTrayIcon,
|
||||
ArrowPathIcon,
|
||||
ArrowUpTrayIcon,
|
||||
ArrowUturnLeftIcon,
|
||||
BookmarkIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
ClipboardDocumentIcon,
|
||||
FolderPlusIcon,
|
||||
ClipboardDocumentCheckIcon,
|
||||
TrashIcon,
|
||||
DocumentDuplicateIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
|
||||
import StockActions from './stock-list/StockActions.vue';
|
||||
import StockSpecs from './stock-list/StockSpecs.vue';
|
||||
import StockSpawnSettings from './stock-list/StockSpawnSettings.vue';
|
||||
import StockWarnings from './stock-list/StockWarnings.vue';
|
||||
import StockList from './stock-list/StockList.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'stock-list',
|
||||
components: {
|
||||
StockThumbnails,
|
||||
Checkbox,
|
||||
FolderPlusIcon,
|
||||
ArrowDownTrayIcon,
|
||||
ArrowPathIcon,
|
||||
ArrowUpTrayIcon,
|
||||
ArrowUturnLeftIcon,
|
||||
BookmarkIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
ClipboardDocumentIcon,
|
||||
ClipboardDocumentCheckIcon,
|
||||
DocumentDuplicateIcon,
|
||||
TrashIcon,
|
||||
StockActions,
|
||||
StockSpecs,
|
||||
StockSpawnSettings,
|
||||
StockWarnings,
|
||||
StockList,
|
||||
},
|
||||
|
||||
mixins: [imageMixin, stockMixin, stockPreviewMixin],
|
||||
@@ -299,291 +54,17 @@ export default defineComponent({
|
||||
};
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
imageOffsetY: 0,
|
||||
draggedVehicleID: -1,
|
||||
data: () => ({}),
|
||||
|
||||
stockActions: [{}],
|
||||
}),
|
||||
// computed: {
|
||||
// chosenStockVehicle() {
|
||||
// return this.store.chosenStockListIndex == -1
|
||||
// ? undefined
|
||||
// : this.store.stockList[this.store.chosenStockListIndex];
|
||||
// },
|
||||
// },
|
||||
|
||||
computed: {
|
||||
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();
|
||||
},
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -595,178 +76,4 @@ export default defineComponent({
|
||||
flex-direction: column;
|
||||
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>
|
||||
|
||||
@@ -8,38 +8,51 @@
|
||||
<div class="tab_content">
|
||||
<div class="storage-list-wrapper">
|
||||
<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">
|
||||
<button class="btn btn--text btn-name" @click="chooseStorageStock(stockName)">
|
||||
{{ stockName }}
|
||||
</button>
|
||||
<h3>
|
||||
{{ storageEntry.id }}
|
||||
</h3>
|
||||
|
||||
<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
|
||||
v-if="!expandedEntries.includes(stockName)"
|
||||
v-if="!expandedEntries.includes(storageEntry.id)"
|
||||
style="width: 25px"
|
||||
/>
|
||||
<ChevronUpIcon v-else style="width: 25px" />
|
||||
</button>
|
||||
|
||||
<button class="btn btn--text" @click="removeStockIndexFromStorage(stockName)">
|
||||
<button class="btn btn--icon" @click="removeStockIndexFromStorage(storageEntry.id)">
|
||||
<TrashIcon style="width: 25px" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="storage-item-expandable" v-if="expandedEntries.includes(stockName)">
|
||||
{{
|
||||
storageEntry.stockString
|
||||
.split(';')
|
||||
.map((s) => s.split(/:|,/)[0])
|
||||
.join(' + ')
|
||||
}}
|
||||
<div class="storage-item-expandable" v-if="expandedEntries.includes(storageEntry.id)">
|
||||
<i>Stworzony: {{ new Date(storageEntry.createdAt).toLocaleString($i18n.locale) }}</i>
|
||||
<i v-if="storageEntry.updatedAt">
|
||||
• Zaktualizowany:
|
||||
{{ new Date(storageEntry.updatedAt).toLocaleString($i18n.locale) }}</i
|
||||
>
|
||||
|
||||
<div style="margin-top: 0.5em">
|
||||
<i>Skład: </i>
|
||||
{{
|
||||
storageEntry.stockString
|
||||
.split(';')
|
||||
.map((s) => s.split(/:|,/)[0])
|
||||
.join(' + ')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</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') }}
|
||||
</li>
|
||||
</transition-group>
|
||||
@@ -52,6 +65,7 @@
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
import {
|
||||
ArrowRightEndOnRectangleIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
FolderArrowDownIcon,
|
||||
@@ -67,6 +81,7 @@ export default defineComponent({
|
||||
ChevronUpIcon,
|
||||
FolderArrowDownIcon,
|
||||
TrashIcon,
|
||||
ArrowRightEndOnRectangleIcon,
|
||||
},
|
||||
|
||||
mixins: [stockMixin],
|
||||
@@ -78,7 +93,12 @@ export default defineComponent({
|
||||
|
||||
computed: {
|
||||
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;
|
||||
}
|
||||
|
||||
.storage-item-top button.btn-name {
|
||||
.storage-item-top > h3 {
|
||||
font-size: 1.2em;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.storage-item-top-actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
|
||||
& > button {
|
||||
background-color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="stock-thumbnails" ref="thumbnailsRef">
|
||||
<ul>
|
||||
<li
|
||||
class="thumbnail-item"
|
||||
v-for="(stock, stockIndex) in store.stockList"
|
||||
:key="stockIndex"
|
||||
:data-selected="store.chosenStockListIndex == stockIndex"
|
||||
:data-sponsor-only="
|
||||
stock.vehicleRef.sponsorOnlyTimestamp &&
|
||||
stock.vehicleRef.sponsorOnlyTimestamp > Date.now()
|
||||
"
|
||||
:data-team-only="stock.vehicleRef.teamOnly"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart(stockIndex)"
|
||||
@drop="onDrop($event, stockIndex)"
|
||||
@dragover="allowDrop"
|
||||
@click="onListItemClick(stockIndex)"
|
||||
>
|
||||
<div class="stock-text">
|
||||
<p>
|
||||
{{ stock.vehicleRef.type.replace(/_/g, ' ') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<span>
|
||||
<img
|
||||
v-for="thumbnail in getVehicleThumbnails(stock.vehicleRef.type)"
|
||||
draggable="false"
|
||||
style="min-width: 200px"
|
||||
:src="`https://stacjownik.spythere.eu/static/thumbnails/${thumbnail.src}.png`"
|
||||
:alt="stock.vehicleRef.type"
|
||||
:title="stock.vehicleRef.type"
|
||||
@load="($event) => (($event.target as HTMLImageElement).style.minWidth = 'auto')"
|
||||
@error="
|
||||
($event) =>
|
||||
(($event.target as HTMLImageElement).src = `/images/${thumbnail.fallbackSrc}.png`)
|
||||
"
|
||||
height="70"
|
||||
/>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Ref, computed, nextTick, ref, watch } from 'vue';
|
||||
import { useStore } from '../../../store';
|
||||
|
||||
const store = useStore();
|
||||
const emit = defineEmits(['listItemClick']);
|
||||
|
||||
const thumbnailsRef = ref() as Ref<HTMLElement>;
|
||||
const draggedIndex = ref(-1);
|
||||
|
||||
const onListItemClick = (index: number) => {
|
||||
emit('listItemClick', index);
|
||||
};
|
||||
|
||||
watch(
|
||||
computed(() => store.chosenStockListIndex),
|
||||
(index) => {
|
||||
if (index < 0) return;
|
||||
|
||||
nextTick(() => {
|
||||
(thumbnailsRef.value as HTMLElement)
|
||||
.querySelector(`li:nth-child(${index + 1})`)
|
||||
?.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'start',
|
||||
behavior: 'smooth',
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
// Dragging images
|
||||
const onDragStart = (vehicleIndex: number) => {
|
||||
draggedIndex.value = vehicleIndex;
|
||||
};
|
||||
|
||||
const onDrop = (e: DragEvent, vehicleIndex: number) => {
|
||||
e.preventDefault();
|
||||
|
||||
let targetEl = thumbnailsRef.value.querySelector(`li:nth-child(${vehicleIndex + 1})`);
|
||||
|
||||
if (!targetEl && draggedIndex.value != -1) return;
|
||||
|
||||
const tempVehicle = store.stockList[vehicleIndex];
|
||||
store.stockList[vehicleIndex] = store.stockList[draggedIndex.value];
|
||||
store.stockList[draggedIndex.value] = tempVehicle;
|
||||
|
||||
store.chosenStockListIndex = vehicleIndex;
|
||||
};
|
||||
|
||||
const allowDrop = (e: DragEvent) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
const getVehicleThumbnails = (vehicleString: string) => {
|
||||
const [vehicleName, vehicleCargo] = vehicleString.split(':');
|
||||
|
||||
const thumbnails: { src: string; fallbackSrc: string }[] = [];
|
||||
|
||||
// Generowanie członów EN57
|
||||
if (vehicleName.startsWith('EN57')) {
|
||||
thumbnails.push(
|
||||
{ src: vehicleName + 'ra', fallbackSrc: 'unknown_ezt-ra' },
|
||||
{ src: vehicleName + 's', fallbackSrc: 'unknown_ezt-s' },
|
||||
{ src: vehicleName + 'rb', fallbackSrc: 'unknown_ezt-rb' }
|
||||
);
|
||||
}
|
||||
|
||||
// Generowanie członów EN71
|
||||
else if (vehicleName.startsWith('EN71')) {
|
||||
thumbnails.push(
|
||||
{ src: vehicleName + 'ra', fallbackSrc: 'unknown_ezt-ra' },
|
||||
{ src: vehicleName + 'sa', fallbackSrc: 'unknown_ezt-sa' },
|
||||
{ src: vehicleName + 'sb', fallbackSrc: 'unknown_ezt-sb' },
|
||||
{ src: vehicleName + 'rb', fallbackSrc: 'unknown_ezt-rb' }
|
||||
);
|
||||
}
|
||||
|
||||
// Generowanie pojazdów i członów 2EN57
|
||||
else if (vehicleString.startsWith('2EN57')) {
|
||||
const [firstVehicleNumber, secondVehicleNumber] = vehicleString
|
||||
.replace('2EN57-', '')
|
||||
.split('+');
|
||||
|
||||
thumbnails.push(
|
||||
{ src: `EN57-${firstVehicleNumber}ra`, fallbackSrc: 'unknown_ezt-ra' },
|
||||
{ src: `EN57-${firstVehicleNumber}s`, fallbackSrc: 'unknown_ezt-s' },
|
||||
{ src: `EN57-${firstVehicleNumber}rb`, fallbackSrc: 'unknown_ezt-rb' },
|
||||
{ src: `EN57-${secondVehicleNumber}ra`, fallbackSrc: 'unknown_ezt-ra' },
|
||||
{ src: `EN57-${secondVehicleNumber}s`, fallbackSrc: 'unknown_ezt-s' },
|
||||
{ src: `EN57-${secondVehicleNumber}rb`, fallbackSrc: 'unknown_ezt-rb' }
|
||||
);
|
||||
}
|
||||
|
||||
// Generowanie członów Gor77
|
||||
else if (vehicleString.startsWith('Gor77')) {
|
||||
thumbnails.push(
|
||||
{ src: vehicleName + '-A', fallbackSrc: 'unknown_Gor77-A' },
|
||||
{ src: vehicleName + '-B', fallbackSrc: 'unknown_Gor77-B' },
|
||||
{ src: vehicleName + '-C', fallbackSrc: 'unknown_Gor77-C' },
|
||||
{ src: vehicleName + '-D', fallbackSrc: 'unknown_Gor77-D' }
|
||||
);
|
||||
}
|
||||
|
||||
// Generowanie członów ET41
|
||||
else if (vehicleString.startsWith('ET41')) {
|
||||
thumbnails.push(
|
||||
{ src: vehicleName + '-A', fallbackSrc: 'unknown_ET41-A' },
|
||||
{ src: vehicleName + '-B', fallbackSrc: 'unknown_ET41-B' }
|
||||
);
|
||||
}
|
||||
|
||||
// Generowanie pozostałych pojazdów
|
||||
else {
|
||||
let fallbackVehicleImage = 'unknown_cargo';
|
||||
|
||||
if (/^(EP|EU)/.test(vehicleName)) fallbackVehicleImage = 'unknown_train';
|
||||
else if (/^(SM42)/.test(vehicleName)) fallbackVehicleImage = 'unknown_SM42';
|
||||
else if (/(\d{3}a|(Bau|Gor)\d{2}|304C)_/.test(vehicleName))
|
||||
fallbackVehicleImage = 'unknown_passenger';
|
||||
|
||||
thumbnails.push({ src: vehicleName, fallbackSrc: fallbackVehicleImage });
|
||||
}
|
||||
|
||||
return thumbnails;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stock-thumbnails {
|
||||
overflow: auto;
|
||||
background-color: #353a57;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
min-height: 110px;
|
||||
}
|
||||
|
||||
.thumbnail-item {
|
||||
cursor: pointer;
|
||||
font-size: 0.85em;
|
||||
text-align: center;
|
||||
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
&[data-selected='true'] {
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
|
||||
&[data-sponsor-only='true'] > b {
|
||||
color: global.$sponsorColor;
|
||||
}
|
||||
|
||||
&[data-team-only='true'] > b {
|
||||
color: global.$teamColor;
|
||||
}
|
||||
|
||||
img {
|
||||
max-height: 70px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.stock-text {
|
||||
font-weight: bold;
|
||||
color: #ccc;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.thumbnail-item > span {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
cursor: crosshair;
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user