Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 21:38:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

TrainTable: nowe działanie widoku SRJP

Browse Source
This commit is contained in:
Spythere
2022-01-12 14:13:30 +01:00
parent 5dfefaa9ba
commit aa363115d3
5 changed files with 136 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/TrainsView/TrainOptions.vue
+30 -61
View File
@@ -9,77 +9,57 @@
/> />
<div class="search-box"> <div class="search-box">
<input <input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
class="search-input"
v-model="searchedTrain"
:placeholder="$t('trains.search-train')"
/>
<img <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedTrain = '')" />
class="search-exit"
:src="exitIcon"
alt="exit-icon"
@click="() => (searchedTrain = '')"
/>
</div> </div>
<div class="search-box"> <div class="search-box">
<input <input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
class="search-input"
v-model="searchedDriver"
:placeholder="$t('trains.search-driver')"
/>
<img <img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
class="search-exit"
:src="exitIcon"
alt="exit-icon"
@click="() => (searchedDriver = '')"
/>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from "vue"; import { computed, defineComponent, inject, Ref } from 'vue';
import { useI18n } from "vue-i18n"; import { useI18n } from 'vue-i18n';
import SelectBox from "../Global/SelectBox.vue"; import SelectBox from '../Global/SelectBox.vue';
export default defineComponent({ export default defineComponent({
components: { SelectBox }, components: { SelectBox },
props: ["queryTrain"], emits: ['changeSearchedTrain', 'changeSearchedDriver', 'changeSorter'],
emits: ["changeSearchedTrain", "changeSearchedDriver", "changeSorter"],
data: () => ({ data: () => ({
exitIcon: require("@/assets/icon-exit.svg"), exitIcon: require('@/assets/icon-exit.svg'),
searchedTrain: "",
searchedDriver: "",
}), }),
setup() { setup() {
const { t } = useI18n(); const { t } = useI18n();
const queryTrain = inject('queryTrain') as Ref<string>;
const sorterOptions = [ const sorterOptions = [
{ {
id: "mass", id: 'mass',
value: "masa", value: 'masa',
}, },
{ {
id: "speed", id: 'speed',
value: "prędkość", value: 'prędkość',
}, },
{ {
id: "length", id: 'length',
value: "długość", value: 'długość',
}, },
{ {
id: "distance", id: 'distance',
value: "kilometraż", value: 'kilometraż',
}, },
{ {
id: "timetable", id: 'timetable',
value: "numer pociągu", value: 'numer pociągu',
}, },
]; ];
@@ -92,52 +72,41 @@ export default defineComponent({
return { return {
translatedSorterOptions, translatedSorterOptions,
queryTrain,
searchedTrain: inject('searchedTrain') as string,
searchedDriver: inject('searchedDriver') as string,
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
}; };
}, },
mounted() { mounted() {
if (this.queryTrain) { if (this.queryTrain) {
this.searchedTrain = this.queryTrain; this.searchedTrain = this.queryTrain;
this.searchedDriver = ""; this.searchedDriver = '';
} }
}, },
methods: { methods: {
chooseTrain(train: string) {
this.$emit("changeSearchedTrain", train);
},
chooseDriver(driverName: string) {
this.$emit("changeSearchedDriver", driverName);
},
changeSorter(item: { id: string | number; value: string }) { changeSorter(item: { id: string | number; value: string }) {
this.$emit("changeSorter", { id: item.id, dir: -1 }); this.sorterActive.id = item.id;
this.sorterActive.dir = -1;
}, },
}, },
watch: { watch: {
searchedTrain(value: string) {
this.chooseTrain(value);
},
searchedDriver(value: string) {
this.chooseDriver(value);
},
queryTrain(train: string) { queryTrain(train: string) {
if (!train) return; if (!train) return;
if (train == "") return; if (train == '') return;
this.searchedTrain = train; this.searchedTrain = train;
this.searchedDriver = ""; this.searchedDriver = '';
}, },
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../styles/responsive"; @import '../../styles/responsive';
.train-options { .train-options {
@include smallScreen() { @include smallScreen() {
src/components/TrainsView/TrainSchedule.vue
+3 -1
View File
@@ -16,8 +16,10 @@
<span class="stop-name"> <span class="stop-name">
<span v-html="stop.stopName"></span> <span v-html="stop.stopName"></span>
<!-- <img v-if="stop.comments" :src="icons.warning" :title="`${$t('trains.comment')}: ${stop.comments}`"> --> <img v-if="stop.comments" :src="icons.warning" :title="stop.comments">
<!-- {{ decodeURIComponent(stop.comments) }} --> <!-- {{ decodeURIComponent(stop.comments) }} -->
<span v-html="stop.comments"></span>
</span> </span>
<span class="stop-date"> <span class="stop-date">
<span <span
src/components/TrainsView/TrainTable.vue
+46 -51
View File
@@ -5,25 +5,26 @@
</div> </div>
<transition name="train-list-anim" mode="out-in"> <transition name="train-list-anim" mode="out-in">
<div :key="timetableLoaded"> <div :key="timetableLoaded + searchedDriver + searchedTrain + sorterActive.id">
<div class="table-info no-trains" v-if="computedTrains.length == 0 && timetableLoaded"> <div class="table-info no-trains" v-if="trains.length == 0 && timetableLoaded">
{{ $t('trains.no-trains') }} {{ $t('trains.no-trains') }}
</div> </div>
<div class="table-info loading" v-if="computedTrains.length == 0 && !timetableLoaded"> <div class="table-info loading" v-if="trains.length == 0 && !timetableLoaded">
{{ $t('trains.loading') }} {{ $t('trains.loading') }}
</div> </div>
<ul class="train-list"> <ul class="train-list">
<li <li
class="train-row" class="train-row"
v-for="train in computedTrains.filter((_, i) => i < 10)" v-for="train in trains"
:key="train.trainNo + train.driverId" :key="train.trainNo + train.driverId"
tabindex="0" tabindex="0"
@keydown.enter="changeScheduleShowState(train.timetableData?.timetableId)" @click="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
@keydown.enter="showTrainTimetable(train.trainNo, train.timetableData?.timetableId)"
:ref="(el) => registerReference(el, train.timetableData?.timetableId)" :ref="(el) => registerReference(el, train.timetableData?.timetableId)"
> >
<div class="row-wrapper" @click="changeScheduleShowState(train.timetableData?.timetableId)"> <div class="row-wrapper">
<span class="info"> <span class="info">
<div class="info_timetable" v-if="!train.timetableData"> <div class="info_timetable" v-if="!train.timetableData">
<div class="timetable_general"> <div class="timetable_general">
@@ -60,7 +61,7 @@
<span class="activator"> <span class="activator">
SRJP SRJP
<img <img
:src="showedSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc" :src="chosenSchedule == train.timetableData.timetableId ? icons.arrowAsc : icons.arrowDesc"
alt="arrow-icon" alt="arrow-icon"
/> />
</span> </span>
@@ -127,6 +128,7 @@
{{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} {{ `${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
</span> </span>
</div> </div>
<div class="stats-position"> <div class="stats-position">
<span v-for="stat in stats.position" :key="stat.name"> <span v-for="stat in stats.position" :key="stat.name">
<div> <div>
@@ -138,17 +140,11 @@
</span> </span>
</div> </div>
<transition name="unfold-timetable-anim" @enter="enter" @afterEnter="afterEnter" @leave="leave"> <TrainSchedule
<TrainSchedule v-if="train.timetableData?.timetableId == chosenSchedule"
v-if="showedSchedule === train.timetableData?.timetableId" :followingStops="train.timetableData?.followingStops"
:followingStops="train.timetableData?.followingStops" />
@click="changeScheduleShowState(train.timetableData?.timetableId)"
/>
</transition>
</li> </li>
<div class="table-info limit" v-if="timetableLoaded && computedTrains.length > 10">
{{ $t('trains.table-limit') }}
</div>
</ul> </ul>
</div> </div>
</transition> </transition>
@@ -156,7 +152,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, ComputedRef, defineComponent, Ref, ref } from '@vue/runtime-core'; import { computed, ComputedRef, defineComponent, inject, Ref, ref } from '@vue/runtime-core';
import { useStore } from '@/store'; import { useStore } from '@/store';
import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json'; import defaultVehicleIconsJSON from '@/data/defaultVehicleIcons.json';
@@ -174,19 +170,13 @@ export default defineComponent({
}, },
props: { props: {
computedTrains: { trains: {
type: Array as () => Train[], type: Array as () => Train[],
required: true, required: true,
}, },
queryTrain: {
type: String,
required: false,
},
}, },
data: () => ({ data: () => ({
showedSchedule: 0,
defaultLocoImage: require('@/assets/unknown.png'), defaultLocoImage: require('@/assets/unknown.png'),
icons: { icons: {
@@ -242,21 +232,23 @@ export default defineComponent({
const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]); const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
const queryTimetable = computed(() => { const searchedTrain = inject('searchedTrain') as Ref<string>;
const q = props.computedTrains.find((train) => train.trainNo === Number(props.queryTrain))?.timetableData; const searchedDriver = inject('searchedDriver') as Ref<string>;
const queryTrain = inject('queryTrain') as Ref<string>;
return q; const chosenSchedule = ref(0);
});
return { return {
elList, elList,
queryTimetable, searchedTrain,
searchedDriver,
chosenSchedule,
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded), timetableLoaded: computed(() => timetableDataStatus.value === DataStatus.Loaded),
timetableError: computed(() => timetableDataStatus.value === DataStatus.Error), timetableError: computed(() => timetableDataStatus.value === DataStatus.Error),
distanceLimitExceeded: computed( distanceLimitExceeded: computed(
() => () => props.trains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) != -1
props.computedTrains.findIndex(({ timetableData }) => timetableData && timetableData.routeDistance > 200) !=
-1
), ),
}; };
}, },
@@ -291,27 +283,34 @@ export default defineComponent({
}, },
focusOnTrain(trainNoStr: string) { focusOnTrain(trainNoStr: string) {
const timetableId = this.computedTrains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData const timetableId = this.trains.find((train) => train.trainNo == Number(trainNoStr))?.timetableData?.timetableId;
?.timetableId;
if (!timetableId) return; if (!timetableId) return;
this.changeScheduleShowState(timetableId); this.showTrainTimetable(Number(trainNoStr), timetableId);
}, },
changeScheduleShowState(timetableId: number | undefined) { showTrainTimetable(trainNo: number, timetableId: number | undefined) {
if (!timetableId || timetableId < 0) return; if (!timetableId && this.trains.length == 1) this.searchedTrain = '';
this.showedSchedule = this.showedSchedule == timetableId ? 0 : timetableId; if (!timetableId) return;
this.searchedTrain =
this.searchedTrain == trainNo.toString() && this.chosenSchedule != 0 ? '' : trainNo.toString();
this.chosenSchedule = this.chosenSchedule == timetableId ? 0 : timetableId;
this.scrollToTimetable(timetableId);
},
scrollToTimetable(timetableId: number) {
setTimeout(() => { setTimeout(() => {
const currentEl = this.elList[timetableId]; const currentEl = this.elList[timetableId];
currentEl?.scrollIntoView({ currentEl?.scrollIntoView({
behavior: 'smooth', behavior: 'smooth',
block: this.showedSchedule == 0 ? 'nearest' : 'center', block: 'center',
}); });
}, 200); }, 150);
}, },
onImageError(e: Event) { onImageError(e: Event) {
@@ -325,7 +324,7 @@ export default defineComponent({
return stops return stops
.reduce((acc: string[], stop: TrainStop, i: number) => { .reduce((acc: string[], stop: TrainStop, i: number) => {
if (stop.stopType.includes('ph')) if (stop.stopType.includes('ph') && !stop.stopNameRAW.includes('po.'))
acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`); acc.push(`<strong style='color:${stop.confirmed ? 'springgreen' : 'white'}'>${stop.stopName}</strong>`);
else if ( else if (
i > 0 && i > 0 &&
@@ -358,10 +357,6 @@ export default defineComponent({
); );
}, },
}, },
activated() {
if (this.queryTrain) this.focusOnTrain(this.queryTrain);
},
}); });
</script> </script>
@@ -387,7 +382,7 @@ export default defineComponent({
} }
&-leave-active { &-leave-active {
transition: all 100ms ease-out 100ms; transition: all 100ms ease-out;
} }
} }
@@ -448,7 +443,6 @@ img.train-image {
.info { .info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
& .timetable { & .timetable {
&_hero { &_hero {
@@ -458,6 +452,7 @@ img.train-image {
&_general { &_general {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
&_srjp .activator { &_srjp .activator {
@@ -551,17 +546,17 @@ img.train-image {
} }
.stats { .stats {
font-size: 0.9em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
font-size: 0.9em;
padding: 1em 0; padding: 1em 0;
&-main { &-main {
display: flex; display: flex;
margin-bottom: 1.5em; justify-content: space-between;
align-items: center;
& > span { & > span {
display: flex; display: flex;
src/data/decodedChars.json
+18 -18
View File
@@ -1,20 +1,20 @@
{ {
"0D3": "Ó", "&#x0D3": "Ó",
"0F3": "ó", "&#x0F3": "ó",
"104": "Ą", "&#x104": "Ą",
"105": "ą", "&#x105": "ą",
"106": "Ć", "&#x106": "Ć",
"107": "ć", "&#x107": "ć",
"280": "Ę", "&#x280": "Ę",
"281": "ę", "&#x281": "ę",
"141": "Ł", "&#x141": "Ł",
"142": "ł", "&#x142": "ł",
"143": "Ń", "&#x143": "Ń",
"144": "ń", "&#x144": "ń",
"15A": "Ś", "&#x15A": "Ś",
"15B": "ś", "&#x15B": "ś",
"179": "Ź", "&#x179": "Ź",
"17A": "ź", "&#x17A": "ź",
"17B": "Ż", "&#x17B": "Ż",
"17C": "ż" "&#x17C": "ż"
} }
src/views/TrainsView.vue
+38 -69
View File
@@ -4,31 +4,26 @@
<div class="options-bar"> <div class="options-bar">
<TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" /> <TrainStats :trains="trainList" :trainStatsOpen="trainStatsOpen" />
<TrainOptions <TrainOptions />
:queryTrain="train"
@changeSorter="changeSorter"
@changeSearchedTrain="changeSearchedTrain"
@changeSearchedDriver="changeSearchedDriver"
/>
</div> </div>
<TrainTable :computedTrains="computedTrains" :queryTrain="train" /> <TrainTable :trains="computedTrains" />
</div> </div>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, ComputedRef, defineComponent, provide, reactive, ref } from "vue"; import { computed, ComputedRef, defineComponent, provide, reactive, Ref, ref } from 'vue';
import { DataStatus } from "@/scripts/enums/DataStatus"; import { DataStatus } from '@/scripts/enums/DataStatus';
import Train from "@/scripts/interfaces/Train"; import Train from '@/scripts/interfaces/Train';
import TrainTable from "@/components/TrainsView/TrainTable.vue"; import TrainTable from '@/components/TrainsView/TrainTable.vue';
import TrainStats from "@/components/TrainsView/TrainStats.vue"; import TrainStats from '@/components/TrainsView/TrainStats.vue';
import TrainOptions from "@/components/TrainsView/TrainOptions.vue"; import TrainOptions from '@/components/TrainsView/TrainOptions.vue';
import { useStore } from "@/store"; import { useStore } from '@/store';
import { GETTERS } from "@/constants/storeConstants"; import { GETTERS } from '@/constants/storeConstants';
const filteredTrainList = ( const filteredTrainList = (
trainList: Train[], trainList: Train[],
@@ -39,39 +34,29 @@ const filteredTrainList = (
return trainList return trainList
.filter( .filter(
(train) => (train) =>
(searchedTrain.length > 0 (searchedTrain.length > 0 ? train.trainNo.toString().includes(searchedTrain) : true) &&
? train.trainNo.toString().includes(searchedTrain) (searchedDriver.length > 0 ? train.driverName.toLowerCase().includes(searchedDriver.toLowerCase()) : true)
: true) &&
(searchedDriver.length > 0
? train.driverName
.toLowerCase()
.includes(searchedDriver.toLowerCase())
: true)
) )
.sort((a: Train, b: Train) => { .sort((a: Train, b: Train) => {
switch (sorterActive.id) { switch (sorterActive.id) {
case "mass": case 'mass':
if (a.mass > b.mass) return sorterActive.dir; if (a.mass > b.mass) return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case "distance": case 'distance':
if ( if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
(a.timetableData?.routeDistance || -1) >
(b.timetableData?.routeDistance || -1)
)
return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case "speed": case 'speed':
if (a.speed > b.speed) return sorterActive.dir; if (a.speed > b.speed) return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case "timetable": case 'timetable':
if (a.trainNo > b.trainNo) return sorterActive.dir; if (a.trainNo > b.trainNo) return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
case "length": case 'length':
if (a.length > b.length) return sorterActive.dir; if (a.length > b.length) return sorterActive.dir;
return -sorterActive.dir; return -sorterActive.dir;
@@ -80,7 +65,7 @@ const filteredTrainList = (
} }
return 0; return 0;
}) });
}; };
export default defineComponent({ export default defineComponent({
@@ -90,38 +75,36 @@ export default defineComponent({
TrainOptions, TrainOptions,
}, },
props: ["train"], props: ['train'],
data: () => ({ data: () => ({
statsIcon: require("@/assets/icon-stats.svg"), statsIcon: require('@/assets/icon-stats.svg'),
trainStatsOpen: false, trainStatsOpen: false,
queryTrain: "", queryTrain: '',
}), }),
setup() { setup(props) {
const store = useStore(); const store = useStore();
const trainList: ComputedRef<Train[]> = computed( const trainList: ComputedRef<Train[]> = computed(() => store.getters[GETTERS.trainList]);
() => store.getters[GETTERS.trainList]
);
const timetableDataStatus: ComputedRef<DataStatus> = computed( const timetableDataStatus: ComputedRef<DataStatus> = computed(() => store.getters[GETTERS.timetableDataStatus]);
() => store.getters[GETTERS.timetableDataStatus]
);
const sorterActive = ref({ id: "distance", dir: -1 }); const sorterActive = ref({ id: 'distance', dir: -1 });
const searchedDriver = ref(""); const searchedDriver = ref('');
const searchedTrain = ref(""); const searchedTrain = ref('');
const queryTrain = ref(props.train) as Ref<string>;
provide('searchedTrain', searchedTrain);
provide('searchedDriver', searchedDriver);
provide('sorterActive', sorterActive);
provide('queryTrain', queryTrain);
const computedTrains: ComputedRef<Train[]> = computed(() => { const computedTrains: ComputedRef<Train[]> = computed(() => {
if (timetableDataStatus.value != DataStatus.Loaded) return []; if (timetableDataStatus.value != DataStatus.Loaded) return [];
return filteredTrainList( return filteredTrainList(trainList.value, searchedTrain.value, searchedDriver.value, sorterActive.value);
trainList.value,
searchedTrain.value,
searchedDriver.value,
sorterActive.value
);
}); });
/* Provide list for TrainStats category filter */ /* Provide list for TrainStats category filter */
@@ -134,28 +117,14 @@ export default defineComponent({
searchedTrain, searchedTrain,
searchedDriver, searchedDriver,
sorterActive, sorterActive,
chosenTrainCategories chosenTrainCategories,
}; };
}, },
methods: {
changeSearchedTrain(trainNo: string) {
this.searchedTrain = trainNo;
},
changeSearchedDriver(name: string) {
this.searchedDriver = name;
},
changeSorter(sorter: { id: string; dir: number }) {
this.sorterActive = sorter;
},
},
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../styles/responsive.scss"; @import '../styles/responsive.scss';
.trains-view { .trains-view {
min-height: 100%; min-height: 100%;