Zmiany w designie dziennika rozkładów jazdy

2026-05-03 13:28:11 +00:00 · 2022-09-01 01:56:16 +02:00
parent 951afcedeb
commit 76d0ff88f1
3 changed files with 236 additions and 205 deletions
@@ -46,6 +46,25 @@
                          <span class="text--grayed">#{{ item.timetableId }}</span>
                        </span>

+                        &bull;
+
+                        <b
+                          class="journal_item-status"
+                          :class="{
+                            fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
+                            terminated: item.terminated && !item.fulfilled,
+                            active: !item.terminated,
+                          }"
+                        >
+                          {{
+                            !item.terminated
+                              ? $t('journal.timetable-active')
+                              : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
+                              ? $t('journal.timetable-fulfilled')
+                              : $t('journal.timetable-abandoned')
+                          }}
+                        </b>
+
                        <div>
                          <b>{{ item.route.replace('|', ' - ') }}</b>
                        </div>
@@ -58,49 +77,30 @@
                            :key="scenery.name"
                            :class="{ confirmed: scenery.confirmed }"
                          >
-                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
-                          </span>
-                        </div>
+                            <span v-if="i > 0"> &gt;</span>
+                            {{ scenery.name }}

-                        <div class="schedule-dates">
-                          <!-- Data odjazdu ze stacji początkowej -->
-                          <b>{{ item.route.split('|')[0] }}:</b>
-                          <s v-if="item.beginDate != item.scheduledBeginDate" class="text--grayed">
-                            {{ localeTime(item.beginDate, $i18n.locale) }}
-                          </s>
-                          <span>{{ localeTime(item.scheduledBeginDate, $i18n.locale) }} </span>&bull;
+                            <!-- Data odjazdu ze stacji początkowej -->
+                            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>

-                          <!-- Data przyjazdu na stację końcową / porzucenia -->
-                          <b v-if="(item.fulfilled && item.terminated) || !item.terminated">
-                            {{ item.route.split('|').slice(-1)[0] }}:
-                          </b>
-                          <i v-else>{{ $t('journal.timetable-abandoned') }} </i>
+                            <!-- Data porzucenia rozkładu jazdy -->
+                            <span
+                              v-if="
+                                !item.fulfilled &&
+                                item.terminated &&
+                                scenery.confirmed &&
+                                !getSceneryList(item)[i + 1]?.confirmed
+                              "
+                              style="color: salmon"
+                              v-html="scenery.abandonedDateHTML"
+                            >
+                            </span>

-                          <s v-if="item.endDate != item.scheduledEndDate && item.terminated" class="text--grayed">
-                            {{ localeTime(item.fulfilled ? item.endDate : item.scheduledEndDate, $i18n.locale) }}
-                          </s>
-                          <span
-                            >{{ localeTime(item.fulfilled ? item.scheduledEndDate : item.endDate, $i18n.locale) }}
+                            <!-- Data przyjazdu do stacji końcowej -->
+                            <span v-if="i == getSceneryList(item).length - 1" v-html="scenery.endDateHTML"> </span>
                          </span>
                        </div>
                      </span>
-
-                      <b
-                        class="journal_item-status"
-                        :class="{
-                          fulfilled: item.fulfilled || item.currentDistance >= item.routeDistance * 0.9,
-                          terminated: item.terminated && !item.fulfilled,
-                          active: !item.terminated,
-                        }"
-                      >
-                        {{
-                          !item.terminated
-                            ? $t('journal.timetable-active')
-                            : item.fulfilled || item.currentDistance >= item.routeDistance * 0.9
-                            ? $t('journal.timetable-fulfilled')
-                            : $t('journal.timetable-abandoned')
-                        }}
-                      </b>
                    </div>

                    <div style="margin-top: 1em">
@@ -120,17 +120,21 @@
                    </div>

                    <div style="margin-top: 1em">
-                      <div>
+                      <span>
                        <b>{{ $t('journal.route-length') }}</b>
                        {{ !item.fulfilled ? item.currentDistance + ' /' : '' }}
                        {{ item.routeDistance }} km
-                      </div>
-
-                      <div>
+                      </span>
+                      &bull;
+                      <span>
                        <b>{{ $t('journal.station-count') }}</b>
                        {{ item.confirmedStopsCount }} /
                        {{ item.allStopsCount }}
-                      </div>
+                      </span>
+                    </div>
+
+                    <div v-if="item.stockString">
+                      <!-- {{ item.stockString }} -->
                    </div>
                  </li>
                </transition-group>
@@ -266,10 +270,35 @@ export default defineComponent({
      this.statsCardOpen = false;
    },

-    getSceneryList(historyItem: TimetableHistory) {
-      return historyItem.sceneriesString
-        .split('%')
-        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
+    getSceneryList(item: TimetableHistory) {
+      return item.sceneriesString.split('%').map((name, i) => {
+        const beginDateHTML =
+          ' (o. ' +
+          (item.beginDate != item.scheduledBeginDate
+            ? `<s class='text--grayed'>${this.localeTime(item.beginDate, this.$i18n.locale)}</s> `
+            : '') +
+          `<span>${this.localeTime(item.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+        const endDateHTML =
+          ' (p. ' +
+          (item.endDate != item.scheduledEndDate && item.fulfilled
+            ? `<s class='text--grayed'>${this.localeTime(
+                item.fulfilled ? item.endDate : item.scheduledEndDate,
+                this.$i18n.locale
+              )}</s> `
+            : '') +
+          `<span>${this.localeTime(
+            item.fulfilled || (item.terminated && !item.fulfilled) ? item.scheduledEndDate : item.endDate,
+            this.$i18n.locale
+          )}</span>)`;
+
+        const abandonedDateHTML = ` (porz. ${this.localeTime(
+          item.fulfilled ? item.scheduledEndDate : item.endDate,
+          this.$i18n.locale
+        )})`;
+
+        return { name, confirmed: i < item.confirmedStopsCount, beginDateHTML, endDateHTML, abandonedDateHTML };
+      });
    },

    handleScroll() {
@@ -408,12 +437,9 @@ export default defineComponent({
    padding: 0.2em 0;

    .scenery-list {
-      span {
-        color: #adadad;
-
-        &.confirmed {
-          color: #a3eba3;
-        }
+      color: #adadad;
+      span.confirmed {
+        color: #a3eba3;
      }
    }
  }
@@ -1,118 +1,118 @@
-<template>
-  <section class="scenery-timetables-history scenery-section">
-    <Loading v-if="dataStatus != 2" />
-
-    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
-    <ul class="history-list" v-else>
-      <li class="list-item" v-for="historyItem in sceneryHistoryList">
-        <div>
-          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
-          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
-        </div>
-
-        <div>
-          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
-            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
-            <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
-            <div>{{ historyItem.driverName }}</div>
-          </router-link>
-        </div>
-
-        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
-        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
-        <div>
-          {{ $t('scenery.timetable-author-title') }}:
-          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
-          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
-        </div>
-
-        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
-      </li>
-    </ul>
-  </section>
-</template>
-
-<script lang="ts">
-
-import axios from 'axios';
-import { defineComponent, PropType } from 'vue';
-import dateMixin from '../../mixins/dateMixin';
-import { DataStatus } from '../../scripts/enums/DataStatus';
-import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
-import Station from '../../scripts/interfaces/Station';
-import { URLs } from '../../scripts/utils/apiURLs';
-import Loading from '../Global/Loading.vue';
-
-export default defineComponent({
-  name: 'SceneryTimetablesHistory',
-  mixins: [dateMixin],
-  props: {
-    station: {
-      type: Object as PropType<Station>,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      sceneryHistoryList: [] as TimetableHistory[],
-      dataStatus: DataStatus.Loading,
-    };
-  },
-  mounted() {
-    this.fetchAPIData();
-  },
-  methods: {
-    async fetchAPIData(countFrom = 0, countLimit = 15) {
-      try {
-        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
-        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
-
-        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
-        this.dataStatus = DataStatus.Loaded;
-      } catch (error) {
-        console.error(error);
-      }
-    },
-  },
-  components: { Loading },
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../styles/responsive.scss';
-@import '../../styles/SceneryView/styles.scss';
-
-.list-warning {
-  padding: 1em 0.5em;
-  background-color: #444;
-  font-size: 1.2em;
-}
-
-.history-list {
-  padding: 0 0.5em;
-}
-
-.list-item {
-  display: grid;
-  grid-template-columns: 1fr 2fr 2fr 1fr;
-  gap: 1em;
-  align-items: center;
-
-  background-color: #353535;
-  padding: 0.5em;
-  margin: 0.5em 0;
-
-  line-height: 1.5em;
-}
-
-@include smallScreen {
-  .history-list {
-    font-size: 1.1em;
-  }
-  .list-item {
-    grid-template-columns: 1fr 1fr;
-    font-size: 1.05em;
-  }
-}
-</style>
-
+<template>
+  <section class="scenery-timetables-history scenery-section">
+    <Loading v-if="dataStatus != 2" />
+
+    <div class="list-warning" v-else-if="sceneryHistoryList.length == 0">{{ $t('scenery.history-list-empty') }}</div>
+    <ul class="history-list" v-else>
+      <li class="list-item" v-for="historyItem in sceneryHistoryList">
+        <div>
+          <b>{{ localeDay(historyItem.beginDate, $i18n.locale) }}</b>
+          {{ localeTime(historyItem.beginDate, $i18n.locale) }}
+        </div>
+
+        <div>
+          <router-link :to="`/journal/timetables?timetableId=${historyItem.timetableId}`">
+            <span class="text--grayed"> #{{ historyItem.timetableId }} </span>
+            <b class="text--primary">&nbsp;{{ historyItem.trainCategoryCode }} {{ historyItem.trainNo }}</b>
+            <div>{{ historyItem.driverName }}</div>
+          </router-link>
+        </div>
+
+        <div>{{ historyItem.route.replace('|', ' -> ') }}</div>
+        <!-- <div>{{ historyItem.routeDistance }} km</div> -->
+        <div>
+          {{ $t('scenery.timetable-author-title') }}:
+          <b v-if="historyItem.authorName">{{ historyItem.authorName }}</b>
+          <i v-else>{{ $t('scenery.timetable-author-unknown') }}</i>
+        </div>
+
+        <!-- <div v-if="historyItem.authorId">{{ historyItem.authorName }}</div> -->
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script lang="ts">
+
+import axios from 'axios';
+import { defineComponent, PropType } from 'vue';
+import dateMixin from '../../mixins/dateMixin';
+import { DataStatus } from '../../scripts/enums/DataStatus';
+import { TimetableHistory, SceneryTimetableHistory } from '../../scripts/interfaces/api/TimetablesAPIData';
+import Station from '../../scripts/interfaces/Station';
+import { URLs } from '../../scripts/utils/apiURLs';
+import Loading from '../Global/Loading.vue';
+
+export default defineComponent({
+  name: 'SceneryTimetablesHistory',
+  mixins: [dateMixin],
+  props: {
+    station: {
+      type: Object as PropType<Station>,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      sceneryHistoryList: [] as TimetableHistory[],
+      dataStatus: DataStatus.Loading,
+    };
+  },
+  mounted() {
+    this.fetchAPIData();
+  },
+  methods: {
+    async fetchAPIData(countFrom = 0, countLimit = 15) {
+      try {
+        const requestString = `${URLs.stacjownikAPI}/api/getSceneryTimetables?name=${this.station.name}&countFrom=${countFrom}&countLimit=${countLimit}`;
+        const historyAPIData: SceneryTimetableHistory = await (await axios.get(requestString)).data;
+
+        this.sceneryHistoryList = historyAPIData.sceneryTimetables;
+        this.dataStatus = DataStatus.Loaded;
+      } catch (error) {
+        console.error(error);
+      }
+    },
+  },
+  components: { Loading },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/responsive.scss';
+@import '../../styles/SceneryView/styles.scss';
+
+.list-warning {
+  padding: 1em 0.5em;
+  background-color: #444;
+  font-size: 1.2em;
+}
+
+.history-list {
+  padding: 0 0.5em;
+}
+
+.list-item {
+  display: grid;
+  grid-template-columns: 1fr 2fr 2fr 1fr;
+  gap: 1em;
+  align-items: center;
+
+  background-color: #353535;
+  padding: 0.5em;
+  margin: 0.5em 0;
+
+  line-height: 1.5em;
+}
+
+@include smallScreen {
+  .history-list {
+    font-size: 1.1em;
+  }
+  .list-item {
+    grid-template-columns: 1fr 1fr;
+    font-size: 1.05em;
+  }
+}
+</style>
+