From 44c24a33aea729b0b9e7174b7ed9175bfe8a75dd Mon Sep 17 00:00:00 2001 From: Spythere Date: Tue, 29 Mar 2022 16:16:51 +0200 Subject: [PATCH] =?UTF-8?q?Dodano=20sortowanie=20wg=20uwag=20eksploatacyjn?= =?UTF-8?q?ych;=20poprawiono=20pomniejsze=20b=C5=82=C4=99dy?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Global/SelectBox.vue | 2 +- src/components/TrainsView/TrainOptions.vue | 86 +++++++++--- src/components/TrainsView/TrainTable.vue | 1 + .../TrainsView/TrainTimetableCard.vue | 12 +- src/locales/en.json | 1 + src/locales/pl.json | 1 + src/views/TrainsView.vue | 132 +++++++++++------- 7 files changed, 164 insertions(+), 71 deletions(-) diff --git a/src/components/Global/SelectBox.vue b/src/components/Global/SelectBox.vue index b7e7a0c..df5bd0d 100644 --- a/src/components/Global/SelectBox.vue +++ b/src/components/Global/SelectBox.vue @@ -2,7 +2,7 @@
    diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue index 80fe960..1b642dc 100644 --- a/src/components/TrainsView/TrainOptions.vue +++ b/src/components/TrainsView/TrainOptions.vue @@ -1,6 +1,33 @@ @@ -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; } diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index e31944e..154815a 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -201,6 +201,7 @@ img.train-image { overflow: auto; padding-right: 0.5em; + margin-top: 1em; @include smallScreen() { width: 100%; diff --git a/src/components/TrainsView/TrainTimetableCard.vue b/src/components/TrainsView/TrainTimetableCard.vue index 2273e71..da400a0 100644 --- a/src/components/TrainsView/TrainTimetableCard.vue +++ b/src/components/TrainsView/TrainTimetableCard.vue @@ -6,7 +6,12 @@
- + @@ -38,7 +43,7 @@ export default defineComponent({ methods: { close() { this.$emit('close'); - } + }, }, }); @@ -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; } diff --git a/src/locales/en.json b/src/locales/en.json index b35cb0a..3c8e238 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -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.", diff --git a/src/locales/pl.json b/src/locales/pl.json index 0cf0d8f..102db25 100644 --- a/src/locales/pl.json +++ b/src/locales/pl.json @@ -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", diff --git a/src/views/TrainsView.vue b/src/views/TrainsView.vue index 278b66d..3daf375 100644 --- a/src/views/TrainsView.vue +++ b/src/views/TrainsView.vue @@ -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 = 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 */