Zmiany w designie dziennika rozkładów jazdy

src/components/JournalView/JournalTimetables.vue

@@ -46,44 +46,7 @@
                           <span class="text--grayed">#{{ item.timetableId }}</span>
                         </span>
 
-                        <div>
+                        &bull;
-                          <b>{{ item.route.replace('|', ' - ') }}</b>
-                        </div>
-
-                        <hr style="margin: 0.25em 0" />
-
-                        <div class="scenery-list">
-                          <span
-                            v-for="(scenery, i) in getSceneryList(item)"
-                            :key="scenery.name"
-                            :class="{ confirmed: scenery.confirmed }"
-                          >
-                            {{ i > 0 ? ' > ' : '' }} {{ scenery.name }}
-                          </span>
-                        </div>
-
-                        <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 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>
-
-                          <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) }}
-                          </span>
-                        </div>
-                      </span>
 
                         <b
                           class="journal_item-status"
@@ -101,6 +64,43 @@
                               : $t('journal.timetable-abandoned')
                           }}
                         </b>
+
+                        <div>
+                          <b>{{ item.route.replace('|', ' - ') }}</b>
+                        </div>
+
+                        <hr style="margin: 0.25em 0" />
+
+                        <div class="scenery-list">
+                          <span
+                            v-for="(scenery, i) in getSceneryList(item)"
+                            :key="scenery.name"
+                            :class="{ confirmed: scenery.confirmed }"
+                          >
+                            <span v-if="i > 0"> &gt;</span>
+                            {{ scenery.name }}
+
+                            <!-- Data odjazdu ze stacji początkowej -->
+                            <span v-if="i == 0" v-html="scenery.beginDateHTML"></span>
+
+                            <!-- 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>
+
+                            <!-- Data przyjazdu do stacji końcowej -->
+                            <span v-if="i == getSceneryList(item).length - 1" v-html="scenery.endDateHTML"> </span>
+                          </span>
+                        </div>
+                      </span>
                     </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>
+                      </span>
-
+                      &bull;
-                      <div>
+                      <span>
                         <b>{{ $t('journal.station-count') }}</b>
                         {{ item.confirmedStopsCount }} /
                         {{ item.allStopsCount }}
+                      </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) {
+    getSceneryList(item: TimetableHistory) {
-      return historyItem.sceneriesString
+      return item.sceneriesString.split('%').map((name, i) => {
-        .split('%')
+        const beginDateHTML =
-        .map((name, i) => ({ name, confirmed: i < historyItem.confirmedStopsCount }));
+          ' (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,15 +437,12 @@ export default defineComponent({
     padding: 0.2em 0;
 
     .scenery-list {
-      span {
       color: #adadad;
-
+      span.confirmed {
-        &.confirmed {
         color: #a3eba3;
       }
     }
   }
-  }
 
   &-status {
     &.terminated {

src/scripts/interfaces/api/TimetablesAPIData.ts

@@ -26,6 +26,11 @@ export interface TimetableHistory {
 
   authorName?: string;
   authorId?: number;
+
+  stockString?: string;
+  stockMass?: number;
+  stockLength?: number;
+  maxSpeed?: number;
 }
 
 export interface SceneryTimetableHistory {