diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue new file mode 100644 index 0000000..3487e71 --- /dev/null +++ b/src/components/TrainsView/TrainInfo.vue @@ -0,0 +1,375 @@ + + + + + diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index c4e82ed..9568943 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -1,5 +1,7 @@ @@ -195,15 +93,19 @@ import { useStore } from '@/store'; import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json'; import Train from '@/scripts/interfaces/Train'; -import TrainStop from '@/scripts/interfaces/TrainStop'; + import TrainSchedule from '@/components/TrainsView/TrainSchedule.vue'; +import TrainInfo from '@/components/TrainsView/TrainInfo.vue'; import { DataStatus } from '@/scripts/enums/DataStatus'; import { GETTERS } from '@/constants/storeConstants'; +import TrainTimetableCard from './TrainTimetableCard.vue'; export default defineComponent({ components: { TrainSchedule, + TrainTimetableCard, + TrainInfo, }, props: { @@ -217,50 +119,11 @@ export default defineComponent({ defaultLocoImage: require('@/assets/unknown.png'), icons: { - warning: require('@/assets/icon-warning.svg'), arrowAsc: require('@/assets/icon-arrow-asc.svg'), arrowDesc: require('@/assets/icon-arrow-desc.svg'), }, defaultVehicleIcons: defaultVehicleIconsJSON, - - stats: { - main: [ - { - name: 'mass', - unit: 't', - multiplier: 0.001, - }, - { - name: 'speed', - unit: 'km/h', - }, - { - name: 'length', - unit: 'm', - }, - ], - - position: [ - { - name: 'scenery', - prop: 'currentStationName', - }, - { - name: 'route', - prop: 'connectedTrack', - }, - { - name: 'signal', - prop: 'signal', - }, - { - name: 'distance', - prop: 'distance', - unit: 'm', - }, - ], - }, }), setup(props) { @@ -280,7 +143,9 @@ export default defineComponent({ const paginatorPageCount = computed(() => Math.ceil(props.trains.length / PAGE_CAPACITY)); const currentTrains = computed(() => { - return props.trains.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY); + return props.trains; + + //.slice(currentPage.value * PAGE_CAPACITY, currentPage.value * PAGE_CAPACITY + PAGE_CAPACITY); }); watch([searchedTrain, searchedDriver], () => { @@ -335,62 +200,16 @@ export default defineComponent({ }, 10); }, - showTrainTimetable(trainNo: number, timetableId: number | undefined) { - if (!timetableId && this.trains.length == 1) this.searchedTrain = ''; - if (!timetableId) return; + showTrainTimetable(timetableId: number | undefined) { + if(!timetableId) return; - this.searchedTrain = - this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString(); - this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId; - }, - - onImageError(e: Event) { - const imageEl = e.target as HTMLImageElement; - - imageEl.hidden = true; - }, - - onImageLoad(e: Event) { - const imageEl = e.target as HTMLImageElement; - imageEl.hidden = false; - }, - - displayStopList(stops: TrainStop[]): string | undefined { - if (!stops) return ''; - - return stops - .reduce((acc: string[], stop: TrainStop, i: number) => { - if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.')) - acc.push(`${stop.stopName}`); - else if ( - i > 0 && - i < stops.length - 1 && - !stop.stopNameRAW.includes('po.') && - !stop.stopNameRAW.includes('SBL') - ) - acc.push(`${stop.stopName}`); - return acc; - }, []) - .join(' > '); - }, - - displayLocoInfo(locoType: string) { - if (locoType.includes('EN')) return `${this.$t('trains.EZT')}`; - if (locoType.includes('SN')) return `${this.$t('trains.SZT')}`; - if (locoType.startsWith('E')) return `${this.$t('trains.loco-electric')}`; - if (locoType.startsWith('S')) return `${this.$t('trains.loco-diesel')}`; - - return ''; - }, - - getSceneriesWithComments(timetableData: Train['timetableData']) { - return ( - timetableData?.followingStops.reduce((acc, stop) => { - if (stop.comments) acc.push(stop.stopNameRAW); - - return acc; - }, [] as string[]) || [] - ); + console.log("Gituwa", timetableId); + + // if (!timetableId && this.trains.length == 1) this.searchedTrain = ''; + // if (!timetableId) return; + // this.searchedTrain = + // this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString(); + // this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId; }, changePageTo(index: number) { @@ -449,6 +268,11 @@ img.train-image { .train { &-list { + max-height: 1000px; + overflow: auto; + + padding-right: 0.5em; + @include smallScreen() { width: 100%; } @@ -460,16 +284,6 @@ img.train-image { background-color: var(--clr-secondary); cursor: pointer; - - .row-wrapper { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); - grid-template-rows: 1fr; - - @include smallScreen() { - font-size: 1.2em; - } - } } &_cars { @@ -480,159 +294,6 @@ img.train-image { } } -.info { - display: flex; - flex-direction: column; - justify-content: space-between; - - & .timetable { - &_hero { - display: flex; - } - - &_general { - display: flex; - justify-content: space-between; - align-items: center; - } - - &_srjp .activator { - display: flex; - align-items: center; - - background-color: #22a8d1; - border-radius: 0.5em; - padding: 0.1em 0.35em; - } - - &_route { - display: flex; - align-items: center; - - font-weight: bold; - - margin: 5px 0; - - font-size: 1.1em; - } - - &_stops { - margin-bottom: 10px; - font-size: 0.7em; - } - - &_warnings { - display: flex; - color: black; - - .warning { - padding: 0.1em 0.65em; - margin-right: 0.35em; - - font-weight: bold; - - &.twr { - background: var(--clr-twr); - } - - &.skr { - background: var(--clr-skr); - } - } - } - } - - &_comments { - img { - width: 1.75em; - } - } -} - -.driver { - display: flex; - align-items: center; - justify-content: center; - flex-flow: column; - - grid-row: span 2; - - padding: 2em 0; - - &-info { - text-align: center; - word-wrap: break-word; - } - - &-name { - font-weight: bold; - } - - &-loco { - width: 100%; - text-align: center; - } - - &-cars { - margin: 0.65em 0; - white-space: pre-wrap; - text-align: center; - - color: #c5c5c5; - - .count { - color: var(--clr-primary); - } - } -} - -.stats { - font-size: 0.9em; - display: flex; - flex-direction: column; - justify-content: space-between; - - padding: 1em 0; - - &-main { - display: flex; - justify-content: space-between; - align-items: center; - - & > span { - display: flex; - justify-content: center; - align-items: center; - - width: 100%; - } - - img { - margin: 0 0.3em; - width: 2em; - } - } - - &-position { - display: flex; - - margin-top: 1em; - text-align: center; - - p { - color: var(--clr-accent); - } - - & > span { - width: 100%; - - img { - width: 2em; - } - } - } -} - .paginator { display: flex; justify-content: center; diff --git a/src/components/TrainsView/TrainTimetableCard.vue b/src/components/TrainsView/TrainTimetableCard.vue new file mode 100644 index 0000000..ee31061 --- /dev/null +++ b/src/components/TrainsView/TrainTimetableCard.vue @@ -0,0 +1,32 @@ + + + + + \ No newline at end of file diff --git a/src/store/index.ts b/src/store/index.ts index 7609069..8629790 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -398,13 +398,16 @@ export const store = createStore({ state.stationList = state.stationList.map(station => { const stationName = station.name.toLowerCase(); - const scheduledTrains: ScheduledTrain[] = timetableList.reduce((acc: ScheduledTrain[], timetable: Timetable) => { + console.log(stationName, station.onlineInfo?.hash); + + const scheduledTrains: ScheduledTrain[] = timetableList.reduce((acc: ScheduledTrain[], timetable: Timetable) => { if (!timetable.followingSceneries.includes(station.onlineInfo?.hash || "")) return acc; const stopInfoIndex = timetable.followingStops.findIndex(stop => { const stopName = stop.stopNameRAW.toLowerCase(); - if (station.generalInfo?.name == "Arkadia Zdrój 2019" && stop.pointId != "1583014379097") return false; + // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2019" && stop.pointId != "1583014379097") return false; + // if (stop.stopName == "ARKADIA ZDRÓJ" && station.name == "Arkadia Zdrój 2012" && stop.pointId != "1519258642187") return false; if (stationName === stopName) return true; if (stopName.includes(stationName) && !stop.stopName.includes("po.") && !stop.stopName.includes("podg.")) return true; @@ -450,6 +453,8 @@ export const store = createStore({ for (const checkpoint of station.generalInfo.checkpoints) { timetableList.forEach(timetable => { + if (!timetable.followingSceneries.includes(station.onlineInfo?.hash || "")) return; + timetable.followingStops .filter(trainStop => trainStop.stopNameRAW.toLowerCase() === checkpoint.checkpointName.toLowerCase()) .forEach(trainStop => {