code cleanup dziennika

2026-05-03 05:18:11 +00:00 · 2023-09-29 03:03:59 +02:00
parent c5735a6953
commit d28d600833
13 changed files with 682 additions and 482 deletions
@@ -0,0 +1,187 @@
+<template>
+  <div class="item-extra" v-if="timetable.stockString && timetable.stockMass && showExtraInfo">
+    <hr />
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.dispatcher-name') }}</span>
+        <span>{{ timetable.authorName }}</span>
+      </span>
+    </div>
+
+    <div class="stock-specs">
+      <span class="badge">
+        <span>{{ $t('journal.stock-max-speed') }}</span>
+        <span>{{ timetable.maxSpeed }}km/h</span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-length') }}</span>
+        <span>
+          {{
+            currentHistoryIndex == 0
+              ? timetable.stockLength
+              : stockHistory[currentHistoryIndex].stockLength || timetable.stockLength
+          }}m
+        </span>
+      </span>
+
+      <span class="badge">
+        <span>{{ $t('journal.stock-mass') }}</span>
+        <span>
+          {{
+            Math.floor(
+              (currentHistoryIndex == 0
+                ? timetable.stockMass!
+                : stockHistory[currentHistoryIndex].stockMass || timetable.stockMass) / 1000
+            )
+          }}t
+        </span>
+      </span>
+    </div>
+
+    <!-- Historia zmian w składzie -->
+    <div class="stock-history" v-if="stockHistory.length > 1">
+      <button
+        class="btn--action"
+        v-for="(sh, i) in stockHistory"
+        :data-checked="i == currentHistoryIndex"
+        @click.stop="currentHistoryIndex = i"
+      >
+        {{ sh.updatedAt }}
+      </button>
+    </div>
+
+    <ul class="stock-list">
+      <li
+        v-for="(car, i) in (currentHistoryIndex == 0
+          ? timetable.stockString
+          : stockHistory[currentHistoryIndex].stockString
+        ).split(';')"
+        :key="i"
+      >
+        <img
+          @error="onImageError"
+          :src="`https://rj.td2.info.pl/dist/img/thumbnails/${car.split(':')[0]}.png`"
+          :alt="car"
+        />
+        <div>{{ car.replace(/_/g, ' ').split(':')[0] }}</div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import imageMixin from '../../../mixins/imageMixin';
+
+export default defineComponent({
+  mixins: [imageMixin],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true,
+    },
+
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      currentHistoryIndex: 0,
+    };
+  },
+
+  computed: {
+    stockHistory() {
+      return this.timetable.stockHistory
+        .slice()
+        .reverse()
+        .map((h) => {
+          const historyData = h.split('@');
+          return {
+            updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+              hour: '2-digit',
+              minute: '2-digit',
+            }),
+            stockString: historyData[1],
+            stockMass: Number(historyData[2]) || undefined,
+            stockLength: Number(historyData[3]) || undefined,
+          };
+        });
+    },
+  },
+
+  methods: {
+    onImageError(e: Event) {
+      const imageEl = e.target as HTMLImageElement;
+      imageEl.src = this.getImage('unknown.png');
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-extra {
+  margin-top: 0.5em;
+}
+
+.stock-history {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 1em;
+
+  button[data-checked='true'] {
+    color: $accentCol;
+  }
+}
+
+.stock-specs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  margin-top: 0.5em;
+
+  .badge {
+    margin: 0;
+
+    span:last-child {
+      color: black;
+      background-color: $accentCol;
+    }
+  }
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+  padding-bottom: 0.5em;
+  margin-top: 1em;
+
+  li > div {
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+
+  li > img {
+    vertical-align: text-bottom;
+    max-height: 60px;
+  }
+}
+</style>
@@ -0,0 +1,137 @@
+<template>
+  <div class="item-general">
+    <span
+      class="general-train"
+      tabindex="0"
+      @click.stop="showTimetable(timetable, $event.currentTarget)"
+      @keydown.enter="showTimetable(timetable, $event.currentTarget)"
+    >
+      <span class="text--grayed">#{{ timetable.id }}</span>
+
+      <span class="badges" v-if="timetable.skr || timetable.twr">
+        <span class="train-badge twr" v-if="timetable.twr" :title="$t('general.TWR')">TWR</span>
+        <span class="train-badge skr" v-if="timetable.skr" :title="$t('general.SKR')">SKR</span>
+      </span>
+
+      <span>
+        <strong class="text--primary">
+          {{ timetable.trainCategoryCode }}
+        </strong>
+        <strong>&nbsp;{{ timetable.trainNo }}</strong>
+      </span>
+      &bull;
+      <strong
+        v-if="timetable.driverLevel !== null"
+        class="level-badge driver"
+        :style="calculateExpStyle(timetable.driverLevel, timetable.driverIsSupporter)"
+      >
+        {{ timetable.driverLevel < 2 ? 'L' : `${timetable.driverLevel}` }}
+      </strong>
+
+      <strong>{{ timetable.driverName }}</strong>
+    </span>
+
+    <span class="general-time">
+      <b class="info-date"
+        >{{
+          new Date(timetable.createdAt).getTime() - new Date(timetable.beginDate).getTime() < 0
+            ? localeDateTime(timetable.createdAt, $i18n.locale)
+            : localeDateTime(timetable.beginDate, $i18n.locale)
+        }}
+      </b>
+
+      <b
+        class="info-badge"
+        :class="{
+          fulfilled: timetable.fulfilled,
+          terminated: timetable.terminated && !timetable.fulfilled,
+          active: !timetable.terminated,
+        }"
+      >
+        {{
+          !timetable.terminated
+            ? $t('journal.timetable-active')
+            : timetable.fulfilled
+            ? $t('journal.timetable-fulfilled')
+            : `${$t('journal.timetable-abandoned')} ${localeTime(timetable.endDate, $i18n.locale)}`
+        }}
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+import dateMixin from '../../../mixins/dateMixin';
+import modalTrainMixin from '../../../mixins/modalTrainMixin';
+import styleMixin from '../../../mixins/styleMixin';
+
+export default defineComponent({
+  mixins: [dateMixin, modalTrainMixin, styleMixin],
+
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  methods: {
+    showTimetable(timetable: TimetableHistory, target: EventTarget | null) {
+      if (timetable?.terminated) return;
+
+      this.selectModalTrain(timetable.driverName + timetable.trainNo.toString(), target);
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.item-general {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+
+.info-date {
+  margin-right: 0.5em;
+}
+
+.info-badge {
+  padding: 0.05em 0.35em;
+  color: black;
+
+  &.terminated {
+    background-color: salmon;
+  }
+
+  &.fulfilled {
+    background-color: lightgreen;
+  }
+
+  &.active {
+    background-color: lightblue;
+  }
+}
+
+.general-train {
+  cursor: pointer;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25em;
+}
+</style>
@@ -0,0 +1,68 @@
+<template>
+  <div class="item-status" style="margin: 0.5em 0">
+    <ProgressBar
+      :progressPercent="~~((timetable.currentDistance / timetable.routeDistance) * 100)"
+      :progressType="!timetable.fulfilled && timetable.terminated ? 'abandoned' : ''"
+    />
+
+    <span>
+      <span :style="{ color: timetable.fulfilled ? 'lightgreen' : timetable.terminated ? 'salmon' : '' }">
+        {{ timetable.currentDistance + ' km' }}
+      </span>
+      <span> / </span>
+      <span class="text--primary">{{ timetable.routeDistance }} km</span>
+      |
+      <span class="text--grayed">{{ timetable.confirmedStopsCount }}/{{ timetable.allStopsCount }}</span>
+    </span>
+
+    <span class="text--grayed" v-if="timetable.currentSceneryName">
+      <b>
+        {{ $t(`journal.${timetable.terminated ? 'last-seen-at' : 'currently-at'}`) }}
+        {{ timetable.currentSceneryName.replace(/.[a-zA-Z0-9]+.sc/, '') }}
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&lpar;</span>
+
+        <span v-if="timetable.currentLocation[1]">
+          {{ $t('journal.timetable-location-route') }} {{ timetable.currentLocation[1] }}
+        </span>
+
+        <span v-else-if="timetable.currentLocation[0]">
+          {{ $t('journal.timetable-location-signal') }} {{ timetable.currentLocation[0] }}
+        </span>
+
+        <span v-if="timetable.currentLocation[0] || timetable.currentLocation[1]">&rpar;</span>
+      </b>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import ProgressBar from '../../Global/ProgressBar.vue';
+
+export default defineComponent({
+  components: { ProgressBar },
+  props: {
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+
+.item-status {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+
+  @include smallScreen() {
+    justify-content: center;
+  }
+}
+</style>
@@ -0,0 +1,107 @@
+<template>
+  <div class="stop-list" v-if="showExtraInfo == true">
+    <span
+      v-for="(stop, i) in timetableStops.filter((_, i) =>
+        !showExtraInfo ? i == 0 || i == timetableStops.length - 1 : true
+      )"
+      class="stop-list-item"
+      :key="stop.stopName"
+      :data-confirmed="stop.confirmed"
+    >
+      <span v-if="i > 0">
+        &gt;
+        <span v-if="!showExtraInfo && i == 1 && timetableStops.length > 2">
+          ... (+{{ timetableStops.length - 2 }}) &gt;
+        </span>
+      </span>
+
+      <span class="stop-name">{{ stop.stopName }}</span>
+      <span v-html="stop.html"></span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import dateMixin from '../../../mixins/dateMixin';
+
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+
+export default defineComponent({
+  mixins: [dateMixin],
+
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+
+    timetable: {
+      type: Object as PropType<TimetableHistory>,
+      required: true,
+    },
+  },
+
+  computed: {
+    timetableStops() {
+      const timetable = this.timetable;
+
+      const stopNames = timetable.sceneriesString.split('%');
+
+      const beginDateHTML = ` (o. ${
+        timetable.beginDate != timetable.scheduledBeginDate
+          ? `<s class="text--grayed">${this.localeTime(timetable.beginDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledBeginDate, this.$i18n.locale)}</span>)`;
+
+      const endDateHTML = ` (p. ${
+        timetable.endDate != timetable.scheduledEndDate && timetable.fulfilled
+          ? `<s class="text--grayed">${this.localeTime(timetable.endDate, this.$i18n.locale)}</s>`
+          : ''
+      } <span>${this.localeTime(timetable.scheduledEndDate, this.$i18n.locale)}</span>)`;
+
+      return stopNames.map((stopName, i) => {
+        const confirmed = i < timetable.confirmedStopsCount;
+        if (i == 0) return { stopName, html: beginDateHTML, confirmed };
+        if (i == stopNames.length - 1) return { stopName, html: endDateHTML, confirmed };
+
+        const departureDateScheduled = this.stringToDate(timetable.checkpointDeparturesScheduled?.at(i));
+        const departureDateReal = this.stringToDate(timetable.checkpointDepartures?.at(i));
+        const arrivalDateScheduled = this.stringToDate(timetable.checkpointArrivalsScheduled?.at(i));
+        const arrivalDateReal = this.stringToDate(timetable.checkpointArrivals?.at(i));
+        const arrivalHTML =
+          (arrivalDateReal && arrivalDateScheduled && arrivalDateReal?.getTime() != arrivalDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(arrivalDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(arrivalDateReal || arrivalDateScheduled);
+        const departureHTML =
+          (departureDateReal &&
+          departureDateScheduled &&
+          departureDateReal?.getTime() != departureDateScheduled?.getTime()
+            ? `<s class="text--grayed">${this.parseDateToTimeString(departureDateScheduled)}</s> `
+            : '') + this.parseDateToTimeString(departureDateReal || departureDateScheduled);
+        let html = `${arrivalHTML}${departureHTML ? ` / ${departureHTML}` : ''}`;
+        if (html) html = ` (${html})`;
+        return { stopName, html, confirmed };
+      });
+    },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.stop-list {
+  word-wrap: break-word;
+  gap: 0.25em;
+  font-size: 0.95em;
+
+  color: #adadad;
+
+  &-item[data-confirmed='true'] {
+    color: lightgreen;
+
+    .stop-name {
+      font-weight: bold;
+    }
+  }
+}
+</style>
@@ -0,0 +1,124 @@
+<template>
+  <li
+    v-for="{ timetable, showExtraInfo} in computedTimetableHistory"
+    class="journal_item"
+    :key="timetable.id"
+    @click="showExtraInfo.value = !showExtraInfo.value"
+  >
+    <div class="journal_item-info">
+      <!-- Item General -->
+      <ItemGeneral :timetable="timetable" />
+
+      <!-- Item Route -->
+      <span class="item-route">
+        <b>{{ timetable.route.replace('|', ' - ') }}</b>
+      </span>
+
+      <hr />
+
+      <!-- Item Stops -->
+      <ItemStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+
+      <!-- Item Status -->
+      <ItemStatus :timetable="timetable" />
+
+      <button class="btn--option btn--show">
+        {{ $t('journal.stock-info') }}
+        <img :src="getIcon(`arrow-${showExtraInfo.value ? 'asc' : 'desc'}`)" alt="Arrow" />
+      </button>
+
+      <!-- Item Extra -->
+      <ItemExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue';
+import { TimetableHistory } from '../../../scripts/interfaces/api/TimetablesAPIData';
+import imageMixin from '../../../mixins/imageMixin';
+
+import ItemGeneral from './ItemGeneral.vue';
+import ItemStops from './ItemStops.vue';
+import ItemStatus from './ItemStatus.vue';
+import ItemExtra from './ItemExtra.vue';
+
+export default defineComponent({
+  mixins: [imageMixin],
+  props: {
+    timetableHistory: {
+      type: Array as PropType<TimetableHistory[]>,
+      required: true,
+    },
+  },
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        showExtraInfo: ref(false),
+      }));
+    },
+  },
+  methods: {},
+  components: { ItemGeneral, ItemStops, ItemStatus, ItemExtra },
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+
+.btn--show {
+  display: flex;
+  font-weight: bold;
+  padding: 0.2em 0.45em;
+
+  img {
+    height: 1.3em;
+  }
+}
+
+.journal_item {
+  cursor: pointer;
+}
+
+.journal_item,
+.journal_warning {
+  background-color: #1a1a1a;
+  padding: 1em;
+  margin-bottom: 1em;
+}
+
+hr {
+  margin: 0.25em 0;
+}
+
+// badge.scss
+.badges {
+  display: flex;
+  gap: 0.25em;
+}
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+
+
+  .btn--show {
+    margin: 1em auto 0 auto;
+  }
+
+  .info-general,
+  .general-train,
+  .stock-specs,
+  .stock-history {
+    justify-content: center;
+  }
+}
+</style>