Spythere/pojazdownik
1
0
Fork 0
mirror of https://github.com/Spythere/pojazdownik.git synced 2026-05-04 03:58:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

section improvements; hotfixes

Browse Source
This commit is contained in:
Spythere
2023-10-26 21:35:42 +02:00
parent 45b2bd01a2
commit 2bbf9a8ac3
28 changed files with 495 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/tabs/StockListTab.vue
+92 -194
View File
@@ -1,176 +1,111 @@
<template>
<section class="stock-list-tab">
<div class="tab_header">
<h2>{{ $t("stocklist.title") }}</h2>
<h2>{{ $t('stocklist.title') }}</h2>
</div>
<div class="stock_actions">
<label class="file-label">
<div class="btn btn--image">
<img src="/images/icon-upload.svg" alt="" />
{{ $t("stocklist.action-upload") }}
</div>
<button class="btn btn--image" @click="clickFileInput">
<input type="file" @change="uploadStock" ref="conFile" accept=".con,.txt" />
<img src="/images/icon-upload.svg" alt="upload icon" />
{{ $t('stocklist.action-upload') }}
</button>
<input
type="file"
@change="uploadStock"
ref="conFile"
accept=".con,.txt"
/>
</label>
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="downloadStock"
>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="downloadStock">
<img src="/images/icon-download.svg" alt="download icon" />
{{ $t("stocklist.action-download") }}
{{ $t('stocklist.action-download') }}
</button>
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="copyToClipboard"
>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="copyToClipboard">
<img src="/images/icon-copy.svg" alt="copy icon" />
{{ $t("stocklist.action-copy") }}
{{ $t('stocklist.action-copy') }}
</button>
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="resetStock"
>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="resetStock">
<img src="/images/icon-reset.svg" alt="reset icon" />
{{ $t("stocklist.action-reset") }}
{{ $t('stocklist.action-reset') }}
</button>
<button
class="btn btn--image"
:data-disabled="stockIsEmpty"
:disabled="stockIsEmpty"
@click="shuffleCars"
>
<button class="btn btn--image" :data-disabled="stockIsEmpty" :disabled="stockIsEmpty" @click="shuffleCars">
<img src="/images/icon-shuffle.svg" alt="shuffle icon" />
{{ $t("stocklist.action-shuffle") }}
{{ $t('stocklist.action-shuffle') }}
</button>
</div>
<div
class="stock_controls"
:data-disabled="store.chosenStockListIndex == -1"
>
<div class="stock_controls" :data-disabled="store.chosenStockListIndex == -1">
<b v-if="store.chosenStockListIndex >= 0">
{{ $t("stocklist.vehicle-no") }}
{{ $t('stocklist.vehicle-no') }}
<span class="text--accent">{{ store.chosenStockListIndex + 1 }}</span>
&nbsp;
</b>
<b v-else>
{{ $t("stocklist.no-vehicle-chosen") }}
{{ $t('stocklist.no-vehicle-chosen') }}
</b>
<button
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveUpStock(store.chosenStockListIndex)"
>
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveUpStock(store.chosenStockListIndex)">
<img :src="getIconURL('higher')" alt="move up vehicle" />
{{ $t("stocklist.action-move-up") }}
{{ $t('stocklist.action-move-up') }}
</button>
<button
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="moveDownStock(store.chosenStockListIndex)"
>
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="moveDownStock(store.chosenStockListIndex)">
<img :src="getIconURL('lower')" alt="move down vehicle" />
{{ $t("stocklist.action-move-down") }}
{{ $t('stocklist.action-move-down') }}
</button>
<button
class="btn"
:tabindex="store.chosenStockListIndex == -1 ? -1 : 0"
@click="removeStock(store.chosenStockListIndex)"
>
<button class="btn" :tabindex="store.chosenStockListIndex == -1 ? -1 : 0" @click="removeStock(store.chosenStockListIndex)">
<img :src="getIconURL('remove')" alt="remove vehicle" />
{{ $t("stocklist.action-remove") }}
{{ $t('stocklist.action-remove') }}
</button>
</div>
<div class="stock_specs">
<b class="real-stock-info" v-if="store.chosenRealStock">
<span class="text--accent">
<img
:src="getIconURL(store.chosenRealStock.type)"
:alt="store.chosenRealStock.type"
/>
<img :src="getIconURL(store.chosenRealStock.type)" :alt="store.chosenRealStock.type" />
{{ store.chosenRealStock.number }} {{ store.chosenRealStock.name }}
</span>
|
</b>
<span>
{{ $t("stocklist.mass") }}
<span class="text--accent">{{ store.totalMass }}t</span> ({{
$t("stocklist.mass-accepted")
}}:
<span class="text--accent">{{
store.acceptableMass ? store.acceptableMass + "t" : "-"
}}</span
>) - {{ $t("stocklist.length") }}:
{{ $t('stocklist.mass') }}
<span class="text--accent">{{ store.totalMass }}t</span> ({{ $t('stocklist.mass-accepted') }}:
<span class="text--accent">{{ store.acceptableMass ? store.acceptableMass + 't' : '-' }}</span
>) - {{ $t('stocklist.length') }}:
<span class="text--accent">{{ store.totalLength }}m</span>
- {{ $t("stocklist.vmax") }}:
- {{ $t('stocklist.vmax') }}:
<span class="text--accent">{{ store.maxStockSpeed }} km/h</span>
</span>
</div>
<div class="stock_cold-start">
<label>
<input
type="checkbox"
v-model="store.isColdStart"
:disabled="
!locoSupportsColdStart(store.stockList[0]?.constructionType || '')
"
/>
{{ $t("stocklist.coldstart-info") }}
<input type="checkbox" v-model="store.isColdStart" :disabled="!locoSupportsColdStart(store.stockList[0]?.constructionType || '')" />
{{ $t('stocklist.coldstart-info') }}
</label>
</div>
<div class="stock_warnings" v-if="stockHasWarnings">
<div class="warning" v-if="locoNotSuitable">
(!) {{ $t("stocklist.warning-not-suitable") }}
</div>
<div class="warning" v-if="locoNotSuitable">(!) {{ $t('stocklist.warning-not-suitable') }}</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">
(!) {{ $t("stocklist.warning-passenger-too-long") }}
</div>
<div class="warning" v-if="trainTooLong && store.isTrainPassenger">(!) {{ $t('stocklist.warning-passenger-too-long') }}</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">
(!) {{ $t("stocklist.warning-freight-too-long") }}
</div>
<div class="warning" v-if="trainTooLong && !store.isTrainPassenger">(!) {{ $t('stocklist.warning-freight-too-long') }}</div>
<div class="warning" v-if="trainTooHeavy">
(!)
<i18n-t keypath="stocklist.warning-too-heavy">
<template #href>
<a
target="_blank"
href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit"
>
{{ $t("stocklist.acceptable-mass-docs") }}
<a target="_blank" href="https://docs.google.com/spreadsheets/d/1bFXUsHsAu4youmNz-46Q1HslZaaoklvfoBDS553TnNk/edit">
{{ $t('stocklist.acceptable-mass-docs') }}
</a>
</template>
</i18n-t>
</div>
<div class="warning" v-if="tooManyLocomotives">
{{ $t("stocklist.warning-too-many-locos") }}
{{ $t('stocklist.warning-too-many-locos') }}
</div>
</div>
@@ -179,7 +114,7 @@
<!-- Stock list -->
<ul ref="stock_list">
<li v-if="stockIsEmpty" class="list-empty">
<div class="stock-info">{{ $t("stocklist.list-empty") }}</div>
<div class="stock-info">{{ $t('stocklist.list-empty') }}</div>
</li>
<TransitionGroup name="stock-list-anim">
@@ -195,25 +130,13 @@
@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"
>
<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">&bull;&nbsp;</span>
{{ i + 1 }}.
</span>
<span
class="stock-info__type"
:class="{ supporter: stock.supportersOnly }"
>
<span class="stock-info__type" :class="{ sponsor: stock.isSponsorsOnly }">
{{ stock.isLoco ? stock.type : getCarSpecFromType(stock.type) }}
</span>
@@ -221,9 +144,7 @@
{{ stock.cargo.id }}
</span>
<span class="stock-info__length"> {{ stock.length }}m </span>
<span class="stock-info__mass"
>{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t
</span>
<span class="stock-info__mass">{{ stock.cargo ? stock.cargo.totalMass : stock.mass }}t </span>
<span class="stock-info__speed"> {{ stock.maxSpeed }}km/h </span>
</div>
</li>
@@ -233,19 +154,19 @@
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { defineComponent } from 'vue';
import { useStore } from "../../store";
import { useStore } from '../../store';
import { locoSupportsColdStart } from "../../utils/locoUtils";
import warningsMixin from "../../mixins/warningsMixin";
import imageMixin from "../../mixins/imageMixin";
import stockPreviewMixin from "../../mixins/stockPreviewMixin";
import StockThumbnails from "../utils/StockThumbnails.vue";
import stockMixin from "../../mixins/stockMixin";
import { locoSupportsColdStart } from '../../utils/locoUtils';
import warningsMixin from '../../mixins/warningsMixin';
import imageMixin from '../../mixins/imageMixin';
import stockPreviewMixin from '../../mixins/stockPreviewMixin';
import StockThumbnails from '../utils/StockThumbnails.vue';
import stockMixin from '../../mixins/stockMixin';
export default defineComponent({
name: "stock-list",
name: 'stock-list',
components: { StockThumbnails },
mixins: [warningsMixin, imageMixin, stockMixin, stockPreviewMixin],
@@ -269,20 +190,12 @@ export default defineComponent({
stockString() {
return this.store.stockList
.map((stock, i) => {
let stockTypeStr =
stock.isLoco || !stock.cargo
? stock.type
: `${stock.type}:${stock.cargo.id}`;
let coldStart =
i == 0 &&
this.store.isColdStart &&
locoSupportsColdStart(stock.constructionType || "")
? ",c"
: "";
let stockTypeStr = stock.isLoco || !stock.cargo ? stock.type : `${stock.type}:${stock.cargo.id}`;
let coldStart = i == 0 && this.store.isColdStart && locoSupportsColdStart(stock.constructionType || '') ? ',c' : '';
return stockTypeStr + coldStart;
})
.join(";");
.join(';');
},
stockIsEmpty() {
@@ -290,18 +203,11 @@ export default defineComponent({
},
chosenStockVehicle() {
return this.store.chosenStockListIndex == -1
? undefined
: this.store.stockList[this.store.chosenStockListIndex];
return this.store.chosenStockListIndex == -1 ? undefined : this.store.stockList[this.store.chosenStockListIndex];
},
stockHasWarnings() {
return (
this.tooManyLocomotives ||
this.trainTooHeavy ||
this.trainTooLong ||
this.locoNotSuitable
);
return this.tooManyLocomotives || this.trainTooHeavy || this.trainTooLong || this.locoNotSuitable;
},
},
@@ -312,18 +218,18 @@ export default defineComponent({
navigator.clipboard.writeText(this.stockString);
setTimeout(() => {
alert(this.$t("stocklist.alert-copied"));
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.type
? -1
: stockID;
this.store.chosenStockListIndex = this.store.chosenStockListIndex == stockID && this.store.chosenVehicle?.type == stock.type ? -1 : stockID;
if (this.store.chosenStockListIndex == -1) {
this.store.chosenVehicle = null;
@@ -336,13 +242,12 @@ export default defineComponent({
},
getCarSpecFromType(typeStr: string) {
const specArray = typeStr.split("_");
const specArray = typeStr.split('_');
if (specArray.length == 0) return null;
/* 111a_Grafitti_1 */
if (specArray.length == 3)
return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
if (specArray.length == 3) return `${specArray[0]} ${specArray[1]}-${specArray[2]}`;
/* 111a_PKP_Bnouz_01 */
return `${specArray[0]} ${specArray[2]}-${specArray[3]} (${specArray[1]})`;
@@ -370,12 +275,9 @@ export default defineComponent({
removeStock(index: number) {
if (index == -1) return;
this.store.stockList = this.store.stockList.filter(
(stock, i) => i != index,
);
this.store.stockList = this.store.stockList.filter((stock, i) => i != index);
if (this.store.stockList.length < index + 1)
this.store.chosenStockListIndex = -1;
if (this.store.stockList.length < index + 1) this.store.chosenStockListIndex = -1;
},
moveUpStock(index: number) {
@@ -413,8 +315,7 @@ export default defineComponent({
availableIndexes.splice(i, -1);
const randAvailableIndex =
availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const randAvailableIndex = availableIndexes[Math.floor(Math.random() * availableIndexes.length)];
const tempSwap = this.store.stockList[randAvailableIndex];
this.store.stockList[randAvailableIndex] = this.store.stockList[i];
@@ -423,33 +324,30 @@ export default defineComponent({
},
downloadStock() {
if (this.store.stockList.length == 0)
return alert(this.$t("stocklist.alert-empty"));
if (this.store.stockList.length == 0) return alert(this.$t('stocklist.alert-empty'));
const defaultName = `${
this.store.chosenRealStockName || this.store.stockList[0].type
} ${this.store.totalMass}t; ${this.store.totalLength}m; vmax ${
this.store.maxStockSpeed
}`;
const defaultName = `${this.store.chosenRealStockName || this.store.stockList[0].type} ${this.store.totalMass}t; ${
this.store.totalLength
}m; vmax ${this.store.maxStockSpeed}`;
const fileName = prompt(this.$t("stocklist.prompt-file"), defaultName);
const fileName = prompt(this.$t('stocklist.prompt-file'), defaultName);
if (!fileName) return;
const blob = new Blob([this.stockString]);
const file = fileName + ".con";
const file = fileName + '.con';
var e = document.createEvent("MouseEvents"),
a = document.createElement("a");
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.dataset.downloadurl = ['', a.download, a.href].join(':');
e.initEvent('click', true, false);
a.dispatchEvent(e);
},
uploadStock() {
const inputEl = this.$refs["conFile"] as HTMLInputElement;
const inputEl = this.$refs['conFile'] as HTMLInputElement;
const files = inputEl.files;
if (files?.length != 1) return;
@@ -461,14 +359,14 @@ export default defineComponent({
reader.onload = (res) => {
const stockString = res.target?.result;
if (!stockString || typeof stockString !== "string") return;
if (!stockString || typeof stockString !== 'string') return;
this.loadStockFromString(stockString);
};
reader.onerror = (err) => console.log(err);
inputEl.value = "";
inputEl.value = '';
},
onDragStart(vehicleIndex: number) {
@@ -478,14 +376,13 @@ export default defineComponent({
onDrop(e: DragEvent, vehicleIndex: number) {
e.preventDefault();
let targetEl = (this.$refs["itemRefs"] as Element[])[vehicleIndex];
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[vehicleIndex] = this.store.stockList[this.draggedVehicleID];
this.store.stockList[this.draggedVehicleID] = tempVehicle;
this.store.chosenStockListIndex = vehicleIndex;
@@ -499,8 +396,8 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
@import "../../styles/global";
@import "../../styles/tab.scss";
@import '../../styles/global';
@import '../../styles/tab.scss';
.stock-list-tab {
display: grid;
@@ -532,7 +429,7 @@ export default defineComponent({
background-color: #353a57;
&[data-disabled="true"] {
&[data-disabled='true'] {
opacity: 0.8;
user-select: none;
@@ -564,12 +461,13 @@ export default defineComponent({
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
label.file-label {
text-align: center;
cursor: pointer;
button {
width: 100%;
input {
display: none;
opacity: 0;
width: 0;
height: 0;
}
}
}
@@ -626,7 +524,7 @@ li > .stock-info {
}
}
.supporter {
.sponsor {
color: salmon;
}
@@ -644,7 +542,7 @@ li > .stock-info {
min-width: 3.5em;
text-align: right;
&[data-selected="true"] {
&[data-selected='true'] {
color: $accentColor;
}
}
src/components/tabs/WikiListTab.vue
+65 -61
View File
@@ -7,10 +7,10 @@
<div class="tab_content">
<div class="actions-panel">
<div class="actions-panel_vehicles">
<button class="btn" :data-chosen="filters.tractions" @click="toggleFilter('tractions')">
<button class="btn" :data-chosen="currentFilterMode == 'tractions'" @click="toggleFilter('tractions')">
{{ $t('wiki.action-vehicles') }}
</button>
<button class="btn" :data-chosen="filters.carriages" @click="toggleFilter('carriages')">
<button class="btn" :data-chosen="currentFilterMode == 'carriages'" @click="toggleFilter('carriages')">
{{ $t('wiki.action-carriages') }}
</button>
</div>
@@ -34,12 +34,16 @@
</tr>
</thead>
<!-- @click="previewLocomotive(vehicle)"
@keydown.enter="previewLocomotive(vehicle)"
@dblclick="addLocomotive(vehicle)"
-->
<tbody>
<tr v-for="vehicle in computedVehicleList" v-show="vehicle.show" :key="vehicle.type" tabindex="0">
<tr
v-for="{ vehicle, show } in computedTableData"
tabindex="0"
v-show="show"
:key="vehicle.type"
@click="previewVehicle(vehicle)"
@keydown.enter="previewVehicle(vehicle)"
@dblclick="addVehicle(vehicle)"
>
<td style="width: 120px">
<img
width="120"
@@ -50,16 +54,18 @@
/>
</td>
<td>{{ vehicle.type }}</td>
<!-- <td>{{ $t(`wiki.${vehicle.power || vehicle.}`) }}</td> -->
<td :data-sponsoronly="vehicle.isSponsorsOnly">{{ vehicle.type }}</td>
<td v-if="isLocomotive(vehicle)">{{ $t(`wiki.${vehicle.power}`) }}</td>
<td v-else>{{ $t(`wiki.${vehicle.useType}`) }}</td>
<td>{{ vehicle.constructionType }}</td>
<td>{{ vehicle.length }}m</td>
<td>{{ vehicle.mass }}t</td>
<td>{{ vehicle.maxSpeed }}km/h</td>
<td v-if="!filters.tractions && filters.carriages">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length ?? '---' : 'niedost.' }}</td>
<td v-if="filters.tractions && !filters.carriages">
<td v-if="currentFilterMode == 'carriages'">{{ !isLocomotive(vehicle) ? vehicle.cargoList.length : '---' }}</td>
<td v-if="currentFilterMode == 'tractions'">
{{ isLocomotive(vehicle) ? (locoSupportsColdStart(vehicle.constructionType) ? `&check;` : '&cross;') : '---' }}
</td>
</tr>
@@ -82,18 +88,23 @@ import stockMixin from '../../mixins/stockMixin';
import imageMixin from '../../mixins/imageMixin';
import { locoSupportsColdStart } from '../../utils/locoUtils';
type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'power' | 'coldStart';
type SorterID = 'type' | 'constructionType' | 'image' | 'length' | 'mass' | 'maxSpeed' | 'cargoCount' | 'group' | 'coldStart';
interface WikiHeader {
interface IWikiHeader {
id: SorterID;
sortable: boolean;
for: 'all' | 'carriages' | 'tractions';
}
const headers: WikiHeader[] = [
interface IWikiRow {
vehicle: Vehicle;
show: boolean;
}
const headers: IWikiHeader[] = [
{ id: 'image', sortable: false, for: 'all' },
{ id: 'type', sortable: true, for: 'all' },
{ id: 'power', sortable: true, for: 'all' },
{ id: 'group', sortable: true, for: 'all' },
{ id: 'constructionType', sortable: true, for: 'all' },
{ id: 'length', sortable: true, for: 'all' },
{ id: 'mass', sortable: true, for: 'all' },
@@ -102,16 +113,6 @@ const headers: WikiHeader[] = [
{ id: 'cargoCount', sortable: true, for: 'carriages' },
];
// const carHeaders: WikiHeader[] = [
// { id: 'image', sortable: false },
// { id: 'type', sortable: true },
// { id: 'constructionType', sortable: true },
// { id: 'length', sortable: true },
// { id: 'mass', sortable: true },
// { id: 'maxSpeed', sortable: true },
// { id: 'cargoCount', sortable: true },
// ];
export default defineComponent({
mixins: [stockPreviewMixin, stockMixin, imageMixin],
@@ -120,8 +121,7 @@ export default defineComponent({
store: useStore(),
headers,
locosScrollTop: 0,
carsScrollTop: 0,
scrollTop: 0,
searchedVehicleTypeName: '',
@@ -130,95 +130,95 @@ export default defineComponent({
direction: 1,
},
filters: {
tractions: true,
carriages: true,
},
currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages',
};
},
activated() {
const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement;
// tableWrapperRef.scrollTo({
// top: this.wikiMode == 'locomotives' ? this.locosScrollTop : this.carsScrollTop,
// });
tableWrapperRef.scrollTo({
top: this.scrollTop,
});
},
methods: {
locoSupportsColdStart,
isLocomotive,
toggleFilter(name: keyof typeof this.filters) {
this.filters[name] = !this.filters[name];
toggleFilter(name: typeof this.currentFilterMode) {
this.currentFilterMode = this.currentFilterMode == name ? 'all' : name;
},
toggleSorter(header: WikiHeader) {
toggleSorter(header: IWikiHeader) {
if (!header.sortable) return;
if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1;
this.currentSorter.id = header.id;
},
sortVehicles(vA: Vehicle, vB: Vehicle) {
sortTableRows(row1: IWikiRow, row2: IWikiRow) {
if (!row1.show) return 0;
const { id, direction } = this.currentSorter;
const vehiclesAreLocos = isLocomotive(vA) && isLocomotive(vB);
const vehiclesAreCars = !isLocomotive(vA) && !isLocomotive(vB);
switch (id) {
case 'type':
case 'constructionType':
return direction == 1 ? vA[id].localeCompare(vB[id]) : vB[id].localeCompare(vA[id]);
case 'group':
return direction == 1 ? row1.vehicle[id].localeCompare(row2.vehicle[id]) : row2.vehicle[id].localeCompare(row1.vehicle[id]);
case 'mass':
case 'length':
case 'maxSpeed':
return Math.sign(vA[id] - vB[id]) * direction;
return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction;
case 'cargoCount':
if (vehiclesAreCars) return Math.sign((vA.cargoList.length || -1) - (vB.cargoList.length || -1)) * direction;
break;
return (
(!isLocomotive(row1.vehicle) ? Math.sign(row1.vehicle.cargoList.length || -1) : -1) -
(!isLocomotive(row2.vehicle) ? (row2.vehicle.cargoList.length || -1) * direction : -1)
);
case 'coldStart':
if (vehiclesAreLocos) return (locoSupportsColdStart(vA.constructionType) > locoSupportsColdStart(vB.constructionType) ? 1 : -1) * direction;
break;
return (locoSupportsColdStart(row1.vehicle.constructionType) > locoSupportsColdStart(row2.vehicle.constructionType) ? 1 : -1) * direction;
default:
break;
}
return direction == 1 ? vA.type.localeCompare(vB.type) : vB.type.localeCompare(vA.type);
return direction == 1 ? row1.vehicle.type.localeCompare(row2.vehicle.type) : row2.vehicle.type.localeCompare(row1.vehicle.type);
},
},
computed: {
computedVehicleList() {
computedTableData(): IWikiRow[] {
return this.store.vehicleDataList
.map((vehicle) => ({
...vehicle,
vehicle,
show:
new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) &&
((this.filters.tractions && isLocomotive(vehicle)) || (this.filters.carriages && !isLocomotive(vehicle))),
(this.currentFilterMode == 'all' ||
(this.currentFilterMode == 'tractions' && isLocomotive(vehicle)) ||
(this.currentFilterMode == 'carriages' && !isLocomotive(vehicle))),
// ((this.filters.tractions && isLocomotive(vehicle)) || (this.filters.carriages && !isLocomotive(vehicle))),
}))
.sort(this.sortVehicles);
.sort((a, b) => this.sortTableRows(a, b));
},
visibleHeaders() {
const filtersActive =
this.filters.carriages && this.filters.tractions ? 'all' : this.filters.carriages ? 'carriages' : this.filters.tractions ? 'tractions' : null;
console.log(filtersActive);
const filtersActive = this.currentFilterMode;
return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive);
},
// computedCarList() {
// const trimmedSearchValue = this.searchedVehicleTypeName.trim();
areTractionVehiclesShown() {
return this.currentFilterMode == 'all' || this.currentFilterMode == 'tractions';
},
// return this.store.carDataList.map((car) =>({
// })).sort(this.sortVehicles);
// },
areCarriagesShown() {
return this.currentFilterMode == 'all' || this.currentFilterMode == 'carriages';
},
},
});
</script>
@@ -291,6 +291,10 @@ export default defineComponent({
td {
text-align: center;
height: 70px;
&[data-sponsoronly='true'] {
color: salmon;
}
}
}