@@ -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)"
>
-
+
+
+
@@ -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,