From baa39a5a996b55f7ad48b348290574fd5a88860d Mon Sep 17 00:00:00 2001 From: Spythere Date: Sun, 14 Apr 2024 00:13:01 +0200 Subject: [PATCH] chore: wiki list tab revamp --- src/components/sections/TrainImageSection.vue | 25 +- src/components/tabs/WikiListTab.vue | 394 +++++------------- src/locales/en.json | 25 +- src/locales/pl.json | 25 +- 4 files changed, 138 insertions(+), 331 deletions(-) diff --git a/src/components/sections/TrainImageSection.vue b/src/components/sections/TrainImageSection.vue index 086a61c..2fa738c 100644 --- a/src/components/sections/TrainImageSection.vue +++ b/src/components/sections/TrainImageSection.vue @@ -44,7 +44,7 @@ }} - {{ + - {{ + {{ $t('preview.team-only') }} @@ -157,22 +157,13 @@ img { } } -// .train-image { -// &__content { -// &.sponsor img { -// border: 1px solid salmon; -// } +.sponsor-only { + color: $sponsorColor; +} -// img { -// max-width: 380px; -// width: 100%; -// height: 100%; -// border: 1px solid white; - -// cursor: zoom-in; -// } -// } -// } +.team-only { + color: $teamColor; +} .image-info { font-size: 1.1em; diff --git a/src/components/tabs/WikiListTab.vue b/src/components/tabs/WikiListTab.vue index b03ac6f..033abdb 100644 --- a/src/components/tabs/WikiListTab.vue +++ b/src/components/tabs/WikiListTab.vue @@ -5,116 +5,65 @@
-
-
- - -
- -
- + + - + + - -
+ + +
  • - + {{ vehicle.type.replace(/_/g, ' ') }}
    {{ $t(`wiki.${vehicle.group}`) }} | {{ isTractionUnit(vehicle) ? vehicle.cabinType : vehicle.constructionType }}
    - {{ vehicle.maxSpeed }}km/h | {{ (vehicle.weight / 1000).toFixed(1) }}t | - {{ vehicle.length }}m + {{ vehicle.length }}m | {{ (vehicle.weight / 1000).toFixed(1) }}t | + {{ vehicle.maxSpeed }}km/h
- -
- -
@@ -128,40 +77,13 @@ import { isTractionUnit } from '../../utils/vehicleUtils'; import stockMixin from '../../mixins/stockMixin'; import imageMixin from '../../mixins/imageMixin'; -type SorterID = - | 'type' - | 'constructionType' - | 'image' - | 'length' - | 'weight' - | 'maxSpeed' - | 'cargoCount' - | 'group' - | 'coldStart'; +const sorters = ['type', 'group', 'length', 'weight', 'maxSpeed'] as const; +const filters = ['vehicles-all', 'vehicles-traction', 'vehicles-wagon'] as const; -interface IWikiHeader { - id: SorterID; - sortable: boolean; - for: 'all' | 'carriages' | 'tractions'; -} +type SorterType = (typeof sorters)[number]; +type SorterDirection = 'asc' | 'desc'; -interface IWikiRow { - vehicle: IVehicle; - show: boolean; - showImage: boolean; -} - -const headers: IWikiHeader[] = [ - { id: 'image', sortable: false, for: 'all' }, - { id: 'type', sortable: true, for: 'all' }, - { id: 'group', sortable: true, for: 'all' }, - { id: 'constructionType', sortable: true, for: 'all' }, - { id: 'length', sortable: true, for: 'all' }, - { id: 'weight', sortable: true, for: 'all' }, - { id: 'maxSpeed', sortable: true, for: 'all' }, - // { id: 'coldStart', sortable: true, for: 'tractions' }, - // { id: 'cargoCount', sortable: true, for: 'carriages' }, -]; +type FilterType = (typeof filters)[number]; export default defineComponent({ mixins: [stockPreviewMixin, stockMixin, imageMixin], @@ -170,31 +92,27 @@ export default defineComponent({ return { store: useStore(), observer: null as IntersectionObserver | null, - headers, - scrollTop: 0, + sorters: sorters, + filters: filters, searchedVehicleTypeName: '', - currentSorter: { - id: 'type' as SorterID, - direction: 1, - }, + sorterType: 'type' as SorterType, + sorterDirection: 'asc' as SorterDirection, - currentFilterMode: 'all' as 'all' | 'tractions' | 'carriages', + filterType: 'vehicles-all' as FilterType, }; }, - mounted() { - this.mountObserver(); - }, + watch: { + computedVehicles() { + const vehiclesRef = this.$refs['vehicles'] as HTMLElement; - activated() { - const tableWrapperRef = this.$refs['table-wrapper'] as HTMLElement; - - tableWrapperRef.scrollTo({ - top: this.scrollTop, - }); + vehiclesRef.scrollTo({ + top: 0, + }); + }, }, methods: { @@ -206,115 +124,59 @@ export default defineComponent({ this.previewVehicle(vehicle); }, - mountObserver() { - if (this.observer) return; + sortVehicles(v1: IVehicle, v2: IVehicle) { + const direction = this.sorterDirection == 'asc' ? 1 : -1; - this.observer = new IntersectionObserver((entries) => { - entries.forEach((entry) => { - if (entry.intersectionRatio > 0) { - entry.target - .querySelector('img')! - .setAttribute('src', entry.target.querySelector('img')!.getAttribute('data-src')!); - } - }); - }); - - (this.$refs['itemRefs'] as HTMLElement[])?.forEach((el) => this.observer?.observe(el)); - }, - - toggleFilter(name: typeof this.currentFilterMode) { - this.currentFilterMode = this.currentFilterMode == name ? 'all' : name; - const vehiclesRef = this.$refs['vehicles'] as HTMLElement; - - vehiclesRef.scrollTo({ - top: this.scrollTop, - }); - }, - - toggleSorter(header: IWikiHeader) { - if (!header.sortable) return; - - if (header.id == this.currentSorter.id) this.currentSorter.direction *= -1; - this.currentSorter.id = header.id; - }, - - sortTableRows(row1: IWikiRow, row2: IWikiRow) { - if (!row1.show) return 0; - - const { id, direction } = this.currentSorter; - - switch (id) { + switch (this.sorterType) { case 'type': - case 'constructionType': case 'group': - return direction == 1 - ? row1.vehicle[id].localeCompare(row2.vehicle[id]) - : row2.vehicle[id].localeCompare(row1.vehicle[id]); + return direction * v1[this.sorterType].localeCompare(v2[this.sorterType]); case 'weight': case 'length': case 'maxSpeed': - return Math.sign(row1.vehicle[id] - row2.vehicle[id]) * direction; + return Math.sign(v1[this.sorterType] - v2[this.sorterType]) * direction; - case 'cargoCount': - return ( - Math.sign( - (!isTractionUnit(row1.vehicle) ? row1.vehicle.cargoTypes.length || -1 : -1) - - (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1) - ) * direction - ); + // case 'cargoCount': + // return ( + // Math.sign( + // (!isTractionUnit(v1) ? v1.cargoTypes.length || -1 : -1) - + // (!isTractionUnit(row2.vehicle) ? row2.vehicle.cargoTypes.length || -1 : -1) + // ) * direction + // ); - case 'coldStart': - return ( - ((isTractionUnit(row1.vehicle) && row1.vehicle.coldStart ? 1 : -1) - - (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) * - direction - ); + // case 'coldStart': + // return ( + // ((isTractionUnit(v1) && v1.coldStart ? 1 : -1) - + // (isTractionUnit(row2.vehicle) && row2.vehicle.coldStart ? 1 : -1)) * + // direction + // ); default: - break; + return v1.type.localeCompare(v2.type) * direction; } - - return direction == 1 - ? row1.vehicle.type.localeCompare(row2.vehicle.type) - : row2.vehicle.type.localeCompare(row1.vehicle.type); }, }, computed: { - computedTableData(): IWikiRow[] { + computedVehicles() { return this.store.vehicleDataList .filter( (vehicle) => new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) && - (this.currentFilterMode == 'all' || - (this.currentFilterMode == 'tractions' && isTractionUnit(vehicle)) || - (this.currentFilterMode == 'carriages' && !isTractionUnit(vehicle))) + (this.filterType == 'vehicles-all' || + (this.filterType == 'vehicles-traction' && isTractionUnit(vehicle)) || + (this.filterType == 'vehicles-wagon' && !isTractionUnit(vehicle))) ) - .map((vehicle) => ({ - vehicle, - showImage: false, - show: - new RegExp(`${this.searchedVehicleTypeName.trim()}`, 'i').test(vehicle.type) && - (this.currentFilterMode == 'all' || - (this.currentFilterMode == 'tractions' && isTractionUnit(vehicle)) || - (this.currentFilterMode == 'carriages' && !isTractionUnit(vehicle))), - })) - .sort((a, b) => this.sortTableRows(a, b)); - }, - - visibleHeaders() { - const filtersActive = this.currentFilterMode; - - return this.headers.filter((header) => header.for == 'all' || header.for == filtersActive); + .sort((v1, v2) => this.sortVehicles(v1, v2)); }, areTractionVehiclesShown() { - return this.currentFilterMode == 'all' || this.currentFilterMode == 'tractions'; + return this.filterType == 'vehicles-all' || this.filterType == 'vehicles-traction'; }, areCarriagesShown() { - return this.currentFilterMode == 'all' || this.currentFilterMode == 'carriages'; + return this.filterType == 'vehicles-all' || this.filterType == 'vehicles-wagon'; }, }, }); @@ -323,26 +185,21 @@ export default defineComponent({