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