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

Dodano sortowanie wg uwag eksploatacyjnych; poprawiono pomniejsze błędy

Browse Source
This commit is contained in:
Spythere
2022-03-29 16:16:51 +02:00
parent 69e5d838f4
commit 44c24a33ae
7 changed files with 164 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Global/SelectBox.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="select-box">
<div class="select-box_content">
<button class="selected" @click="toggleBox">
<span class="text--primary">{{prefix}}</span> {{ computedSelectedItem.value }}
<span class="text--primary">{{ prefix }}</span> {{ computedSelectedItem.value }}
</button>
<ul class="options" :ref="(el) => (listRef = el)">
src/components/TrainsView/TrainOptions.vue
+69 -17
View File
@@ -1,6 +1,33 @@
<template>
<div class="train-options">
<div class="options_wrapper">
<div class="options_content">
<div class="content_select">
<select-box
:itemList="translatedSorterOptions"
:defaultItemIndex="0"
@selected="changeSorter"
:prefix="$t('trains.sorter-prefix')"
/>
</div>
<div class="content_search">
<div class="search-box">
<input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
<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')" />
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
</div>
</div>
</div>
</div>
<!-- <div class="options_wrapper">
<select-box
:title="$t('trains.option-distance')"
:itemList="translatedSorterOptions"
@@ -8,7 +35,9 @@
:prefix="$t('trains.sorter-prefix')"
@selected="changeSorter"
/>
</div>
<div class="options_wrapper">
<div class="search-box">
<input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
@@ -20,7 +49,7 @@
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="() => (searchedDriver = '')" />
</div>
</div>
</div> -->
</div>
</template>
@@ -45,6 +74,10 @@ export default defineComponent({
id: 'distance',
value: 'kilometraż',
},
{
id: 'comments',
value: 'komentarze',
},
{
id: 'progress',
value: 'przebyta trasa',
@@ -99,25 +132,43 @@ export default defineComponent({
width: 100%;
}
}
.options {
&_wrapper {
display: flex;
flex-wrap: wrap;
.options_wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
@include smallScreen() {
justify-content: center;
}
}
margin-bottom: 0.5em;
@include smallScreen() {
justify-content: center;
&_content {
display: flex;
flex-direction: column;
align-items: flex-start;
.content_search,
.content_select {
display: flex;
align-items: center;
flex-wrap: wrap;
}
@include smallScreen() {
padding: 0 1em;
.content_select {
margin: 0 auto;
}
.content_search {
justify-content: center;
}
}
}
}
.select-box {
margin: 0.5em 0;
}
.search {
.content_search .search {
&-box {
position: relative;
@@ -125,17 +176,18 @@ export default defineComponent({
border-radius: 0.5em;
min-width: 200px;
margin: 0.5em 0 0.5em 0.5em;
margin: 0.5em 0.5em 0.5em 0;
@include smallScreen() {
width: 85%;
width: 100%;
margin: 0.5em auto;
}
}
&-input {
border: none;
min-width: 85%;
min-width: 100%;
padding: 0.35em 0.5em;
}
src/components/TrainsView/TrainTable.vue
+1
View File
@@ -201,6 +201,7 @@ img.train-image {
overflow: auto;
padding-right: 0.5em;
margin-top: 1em;
@include smallScreen() {
width: 100%;
src/components/TrainsView/TrainTimetableCard.vue
+10 -2
View File
@@ -6,7 +6,12 @@
</div>
<train-info :train="train" />
<train-schedule v-if="train.timetableData" :followingStops="train.timetableData.followingStops" ref="card-inner" tabindex="0" />
<train-schedule
v-if="train.timetableData"
:followingStops="train.timetableData.followingStops"
ref="card-inner"
tabindex="0"
/>
</section>
</template>
@@ -38,7 +43,7 @@ export default defineComponent({
methods: {
close() {
this.$emit('close');
}
},
},
});
</script>
@@ -64,7 +69,10 @@ export default defineComponent({
width: 95%;
max-width: 1300px;
max-height: calc(100vh - 2em);
top: 0;
transform: translate(-50%, 1em);
border: 1px solid white;
}
src/locales/en.json
+1
View File
@@ -143,6 +143,7 @@
"option-timetable": "train no.",
"option-progress": "route progress",
"option-delay": "current delay",
"option-comments": "comments",
"sorter-prefix": "Sort: ",
"search-train": "Train no.",
src/locales/pl.json
+1
View File
@@ -144,6 +144,7 @@
"option-timetable": "nr pociągu",
"option-progress": "przebyta trasa",
"option-delay": "opóźnienie",
"option-comments": "uwagi ekspl.",
"sorter-prefix": "Sortuj: ",
"search-train": "Numer pociągu",
src/views/TrainsView.vue
+81 -51
View File
@@ -42,67 +42,90 @@ const currentDelay = (stops: TrainStop[] | undefined) => {
return delay;
};
function sortTrainList(trainList: Train[], sorterActive: { id: string; dir: number }) {
return trainList.sort((a: Train, b: Train) => {
switch (sorterActive.id) {
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;
return -sorterActive.dir;
case 'progress':
if (confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops))
return sorterActive.dir;
return -sorterActive.dir;
case 'delay':
if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
return sorterActive.dir;
return -sorterActive.dir;
case 'speed':
if (a.speed > b.speed) return sorterActive.dir;
return -sorterActive.dir;
case 'timetable':
if (a.trainNo > b.trainNo) return sorterActive.dir;
return -sorterActive.dir;
case 'length':
if (a.length > b.length) return sorterActive.dir;
return -sorterActive.dir;
default:
break;
}
return 0;
});
}
const filteredTrainList = (
trainList: Train[],
searchedTrain: string,
searchedDriver: string,
sorterActive: { id: string; dir: number }
) => {
return trainList
.filter(
(train) =>
(searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
(searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
)
.sort((a, b) => {
const commentsA = a.timetableData?.followingStops.some(s => s.comments) ? 1 : 0;
const commentsB = b.timetableData?.followingStops.some(s => s.comments) ? 1 : 0;
sorterActive: { id: string; dir: number },
priorityProp: string
) => {
let finalTrainList: Train[] = [];
return commentsB - commentsA;
})
.sort((a: Train, b: Train) => {
switch (sorterActive.id) {
case 'mass':
if (a.mass > b.mass) return sorterActive.dir;
return -sorterActive.dir;
switch (sorterActive.id) {
case 'comments':
const trainsSortedByComments = trainList
.filter(
(train) =>
(searchedTrain.length > 0 ? train.trainNo.toString().startsWith(searchedTrain) : true) &&
(searchedDriver.length > 0 ? train.driverName.toLowerCase().startsWith(searchedDriver.toLowerCase()) : true)
)
.sort((a, b) => {
const commentsA = a.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
const commentsB = b.timetableData?.followingStops.some((s) => s.comments) ? 1 : 0;
case 'distance':
if ((a.timetableData?.routeDistance || -1) > (b.timetableData?.routeDistance || -1)) return sorterActive.dir;
return commentsB - commentsA;
});
return -sorterActive.dir;
const trainsWithComments = trainsSortedByComments.filter((train) =>
train.timetableData?.followingStops.some((s) => s.comments)
);
case 'progress':
if (
confirmedPercentage(a.timetableData?.followingStops) > confirmedPercentage(b.timetableData?.followingStops)
)
return sorterActive.dir;
const trainsWithoutComments = trainsSortedByComments.slice(trainsWithComments.length);
return -sorterActive.dir;
finalTrainList.push(...trainsWithComments);
finalTrainList.push(...sortTrainList(trainsWithoutComments, sorterActive));
break;
case 'delay':
if (currentDelay(a.timetableData?.followingStops) > currentDelay(b.timetableData?.followingStops))
return sorterActive.dir;
default:
finalTrainList.push(...sortTrainList(trainList, sorterActive));
break;
}
return -sorterActive.dir;
case 'speed':
if (a.speed > b.speed) return sorterActive.dir;
return -sorterActive.dir;
case 'timetable':
if (a.trainNo > b.trainNo) return sorterActive.dir;
return -sorterActive.dir;
case 'length':
if (a.length > b.length) return sorterActive.dir;
return -sorterActive.dir;
default:
break;
}
return 0;
});
return finalTrainList;
};
export default defineComponent({
@@ -129,13 +152,20 @@ export default defineComponent({
const sorterActive = ref({ id: 'distance', dir: -1 });
const searchedDriver = ref('');
const searchedTrain = ref('');
const priorityProp = ref('');
provide('searchedTrain', searchedTrain);
provide('searchedDriver', searchedDriver);
provide('sorterActive', sorterActive);
const computedTrains: ComputedRef<Train[]> = computed(() => {
return filteredTrainList(trainList.value, searchedTrain.value, searchedDriver.value, sorterActive.value);
return filteredTrainList(
trainList.value,
searchedTrain.value,
searchedDriver.value,
sorterActive.value,
priorityProp.value
);
});
/* Provide list for TrainStats category filter */