diff --git a/src/assets/icon-warning.svg b/src/assets/icon-warning.svg new file mode 100644 index 0000000..67ff397 --- /dev/null +++ b/src/assets/icon-warning.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/TrainsView/TrainSchedule.vue b/src/components/TrainsView/TrainSchedule.vue index 05755e6..710724c 100644 --- a/src/components/TrainsView/TrainSchedule.vue +++ b/src/components/TrainsView/TrainSchedule.vue @@ -14,7 +14,10 @@ {{ Math.floor(stop.stopDistance) }} - + + + + +
@@ -88,8 +92,15 @@ export default defineComponent({ required: true, }, }, + emits: ['click'], + data: () => ({ + icons: { + warning: require("@/assets/icon-warning.svg") + } + }), + setup(props) { return { lastConfirmed: computed(() => { @@ -177,7 +188,6 @@ $stopNameClr: #22a8d1; top: -1px; left: -17px; - height: 100%; width: 3px; @@ -335,6 +345,11 @@ ul.stop_list > li.stop { display: flex; align-items: center; + + img { + width: 1em; + margin-left: 0.5em; + } } .stop-date { diff --git a/src/components/TrainsView/TrainTable.vue b/src/components/TrainsView/TrainTable.vue index 67e13d6..22adbd3 100644 --- a/src/components/TrainsView/TrainTable.vue +++ b/src/components/TrainsView/TrainTable.vue @@ -19,10 +19,9 @@ :key="i" tabindex="0" @keydown.enter="changeScheduleShowState(train.timetableData?.timetableId)" - - :ref="el => registerReference(el, train.timetableData?.timetableId)" + :ref="(el) => registerReference(el, train.timetableData?.timetableId)" > -
+
@@ -58,7 +57,10 @@ SRJP - arrow-icon + arrow-icon {{ $t('trains.detailed-timetable') }} {{ train.trainNo }} @@ -77,6 +79,10 @@
+ +
+ +
@@ -168,8 +174,11 @@ export default defineComponent({ showedSchedule: 0, defaultLocoImage: require('@/assets/unknown.png'), - ascSVG: require('@/assets/icon-arrow-asc.svg'), - descSVG: require('@/assets/icon-arrow-desc.svg'), + icons: { + warning: require('@/assets/icon-warning.svg'), + arrowAsc: require('@/assets/icon-arrow-asc.svg'), + arrowDesc: require('@/assets/icon-arrow-desc.svg'), + }, stats: { main: [ @@ -261,7 +270,7 @@ export default defineComponent({ }, registerReference(el: HTMLElement, timetableId: number | undefined) { - if(timetableId) this.elList[timetableId] = el; + if (timetableId) this.elList[timetableId] = el; }, focusOnTrain(trainNoStr: string) { @@ -321,6 +330,10 @@ export default defineComponent({ return ''; }, + + hasTimetableComments(timetableData: Train['timetableData']) { + return timetableData?.followingStops.some((stop) => stop.comments) || false; + }, }, activated() { @@ -374,6 +387,16 @@ 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 { @@ -384,18 +407,12 @@ img.train-image { } } -.wrapper { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(20em, 1fr)); - grid-template-rows: 1fr; - - @include smallScreen() { - font-size: 1.2em; - } -} - .info { - .timetable { + display: flex; + flex-direction: column; + justify-content: space-between; + + & .timetable { &_hero { display: flex; } @@ -450,6 +467,12 @@ img.train-image { } } } + + &_comments { + img { + width: 2em; + } + } } .driver { diff --git a/src/store/index.ts b/src/store/index.ts index fde9ec7..c671643 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -219,6 +219,8 @@ export const store = createStore({ stopType: point.pointStopType, stopDistance: point.pointDistance, + comments: point.comments, + mainStop: point.pointName.includes("strong"), arrivalLine,