chore: code structure

src/components/JournalView/JournalDispatchers/JournalDispatcherEntry.vue

@@ -0,0 +1,217 @@
+<template>
+  <li class="dispatcher-history-entry">
+    <div class="entry-info">
+      <span>
+        <span>
+          <router-link :to="`/journal/dispatchers?search-station=${entry.stationName}`">
+            <b>{{ entry.stationName }}</b>
+          </router-link>
+
+          <b class="text--grayed"> #{{ entry.stationHash }}</b>
+        </span>
+        &bull;
+        <b
+          v-if="entry.dispatcherLevel !== null"
+          class="level-badge dispatcher"
+          :style="calculateExpStyle(entry.dispatcherLevel, entry.dispatcherIsSupporter)"
+        >
+          {{ entry.dispatcherLevel >= 2 ? entry.dispatcherLevel : 'L' }}
+        </b>
+        <b style="margin-left: 5px">
+          <span
+            v-if="apiStore.donatorsData.includes(entry.dispatcherName)"
+            data-tooltip-type="DonatorTooltip"
+            :data-tooltip-content="$t('donations.dispatcher-message')"
+          >
+            <router-link
+              class="text--donator"
+              :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+            >
+              {{ entry.dispatcherName }}
+            </router-link>
+          </span>
+
+          <router-link
+            v-else
+            :to="`/journal/dispatchers?search-dispatcher=${entry.dispatcherName}`"
+          >
+            {{ entry.dispatcherName }}
+          </router-link>
+        </b>
+
+        <div>
+          <span v-if="entry.timestampTo">
+            <b>{{ $d(entry.timestampFrom) }}</b>
+            {{ timestampToString(entry.timestampFrom) }}
+            -
+            <b
+              v-if="
+                new Date(entry.timestampFrom).getDate() != new Date(entry.timestampTo).getDate()
+              "
+            >
+              {{ $d(entry.timestampTo) }}
+            </b>
+            {{ timestampToString(entry.timestampTo) }} ({{
+              calculateDuration(entry.currentDuration)
+            }})
+          </span>
+
+          <router-link
+            :to="`/scenery?station=${entry.stationName}`"
+            class="dispatcher-online"
+            v-else
+          >
+            {{ $t('journal.online-since') }}
+            <b>
+              {{
+                new Date().getDate() != new Date(entry.timestampFrom).getDate()
+                  ? $d(entry.timestampFrom)
+                  : ''
+              }}
+              {{ timestampToString(entry.timestampFrom) }}
+            </b>
+            ({{ calculateDuration(entry.currentDuration) }})
+          </router-link>
+        </div>
+      </span>
+
+      <span class="entry-info-right">
+        <div>
+          <span>
+            {{ $t('scenery.dispatcher-rate') }}
+            <b class="text--primary"> {{ entry.dispatcherRate }}</b>
+          </span>
+          <button class="btn btn--option" @click="toggleExtraInfo">
+            {{ $t('scenery.dispatcher-status-changes') }}
+            <b class="text--primary">{{ entry.statusHistory.length }}</b>
+          </button>
+        </div>
+
+        <b class="region-badge" :aria-describedby="entry.region">
+          REGION: {{ regions.find((r) => r.id == entry.region)?.name }}
+        </b>
+      </span>
+    </div>
+
+    <div class="entry-extra" v-if="showExtraInfo">
+      <ul class="status-list">
+        <li v-for="statusItem in entry.statusHistory">
+          <b style="margin-right: 0.5em">{{
+            timestampToString(parseInt(statusItem.split('@')[0]))
+          }}</b>
+
+          <StationStatusBadge
+            :dispatcher-status="Number(statusItem.split('@')[1])"
+            :is-online="true"
+          />
+        </li>
+      </ul>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue';
+import { regions } from '../../../data/options.json';
+import { API } from '../../../typings/api';
+import dateMixin from '../../../mixins/dateMixin';
+import styleMixin from '../../../mixins/styleMixin';
+import { useApiStore } from '../../../store/apiStore';
+import StationStatusBadge from '../../Global/StationStatusBadge.vue';
+
+export default defineComponent({
+  props: {
+    entry: {
+      type: Object as PropType<API.DispatcherHistory.Data>,
+      required: true
+    },
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    }
+  },
+
+  components: { StationStatusBadge },
+  mixins: [dateMixin, styleMixin],
+  emits: ['toggleShowExtraInfo'],
+
+  data() {
+    return {
+      regions,
+      apiStore: useApiStore()
+    };
+  },
+
+  methods: {
+    toggleExtraInfo() {
+      this.$emit('toggleShowExtraInfo', this.entry.id);
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.region-badge {
+  padding: 0 0.25em;
+}
+
+.level-badge {
+  text-align: center;
+  display: inline-block;
+  line-height: 1.6em;
+}
+
+.dispatcher-online {
+  color: springgreen;
+}
+
+.dispatcher-history-entry {
+  background-color: #1a1a1a;
+  padding: 1em;
+}
+
+.entry-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  line-height: 1.75em;
+  gap: 0.5em;
+}
+
+.entry-info-right {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  text-align: center;
+  gap: 1em;
+}
+
+.entry-extra {
+  margin-top: 1em;
+}
+
+.status-list {
+  display: flex;
+  overflow: auto;
+  gap: 0.5em;
+}
+
+.status-list > li {
+  background-color: #313131;
+  padding: 0.2rem 0 0.2rem 0.5em;
+  margin: 0.5em 0;
+  border-radius: 1em;
+}
+
+@include smallScreen {
+  .entry-info {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+  }
+}
+</style>

src/components/JournalView/JournalDispatchers/JournalDispatchersList.vue

@@ -15,118 +15,16 @@
         {{ $t('app.no-result') }}
       </div>
 
-      <div v-else class="history-list">
-        <div v-for="historyItem in dispatcherHistory" :key="historyItem.id" class="history-item">
-          <div class="item-top">
-            <span>
-              <span>
-                <router-link :to="`/journal/dispatchers?search-station=${historyItem.stationName}`">
-                  <b>{{ historyItem.stationName }}</b>
-                </router-link>
-
-                <b class="text--grayed"> #{{ historyItem.stationHash }}</b>
-              </span>
-              &bull;
-              <b
-                v-if="historyItem.dispatcherLevel !== null"
-                class="level-badge dispatcher"
-                :style="
-                  calculateExpStyle(historyItem.dispatcherLevel, historyItem.dispatcherIsSupporter)
-                "
-              >
-                {{ historyItem.dispatcherLevel >= 2 ? historyItem.dispatcherLevel : 'L' }}
-              </b>
-              <b style="margin-left: 5px">
-                <span
-                  v-if="apiStore.donatorsData.includes(historyItem.dispatcherName)"
-                  data-tooltip-type="DonatorTooltip"
-                  :data-tooltip-content="$t('donations.dispatcher-message')"
-                >
-                  <router-link
-                    class="text--donator"
-                    :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-                  >
-                    {{ historyItem.dispatcherName }}
-                  </router-link>
-                </span>
-
-                <router-link
-                  v-else
-                  :to="`/journal/dispatchers?search-dispatcher=${historyItem.dispatcherName}`"
-                >
-                  {{ historyItem.dispatcherName }}
-                </router-link>
-              </b>
-
-              <div>
-                <span v-if="historyItem.timestampTo">
-                  <b>{{ $d(historyItem.timestampFrom) }}</b>
-                  {{ timestampToString(historyItem.timestampFrom) }}
-                  -
-                  <b
-                    v-if="
-                      new Date(historyItem.timestampFrom).getDate() !=
-                      new Date(historyItem.timestampTo).getDate()
-                    "
-                  >
-                    {{ $d(historyItem.timestampTo) }}
-                  </b>
-                  {{ timestampToString(historyItem.timestampTo) }} ({{
-                    calculateDuration(historyItem.currentDuration)
-                  }})
-                </span>
-
-                <router-link
-                  :to="`/scenery?station=${historyItem.stationName}`"
-                  class="dispatcher-online"
-                  v-else
-                >
-                  {{ $t('journal.online-since') }}
-                  <b>
-                    {{
-                      new Date().getDate() != new Date(historyItem.timestampFrom).getDate()
-                        ? $d(historyItem.timestampFrom)
-                        : ''
-                    }}
-                    {{ timestampToString(historyItem.timestampFrom) }}
-                  </b>
-                  ({{ calculateDuration(historyItem.currentDuration) }})
-                </router-link>
-              </div>
-            </span>
-
-            <span class="item-top-right">
-              <div>
-                <span>
-                  {{ $t('scenery.dispatcher-rate') }}
-                  <b class="text--primary"> {{ historyItem.dispatcherRate }}</b>
-                </span>
-                <button class="btn btn--option" @click="toggleExtraInfo(historyItem.id)">
-                  {{ $t('scenery.dispatcher-status-changes') }}
-                  <b class="text--primary">{{ historyItem.statusHistory.length }}</b>
-                </button>
-              </div>
-
-              <b class="region-badge" :aria-describedby="historyItem.region">
-                REGION: {{ regions.find((r) => r.id == historyItem.region)?.name }}
-              </b>
-            </span>
-          </div>
-
-          <div class="item-bottom" v-if="openItemIndexes.includes(historyItem.id)">
-            <div class="history-statuses">
-              <div v-for="statusItem in historyItem.statusHistory">
-                <b style="margin-right: 0.5em">{{
-                  timestampToString(parseInt(statusItem.split('@')[0]))
-                }}</b>
-                <StationStatusBadge
-                  :dispatcher-status="Number(statusItem.split('@')[1])"
-                  :is-online="true"
-                />
-              </div>
-            </div>
-          </div>
-        </div>
+      <ul v-else class="journal-list">
+        <transition-group name="list-anim">
+          <JournalDispatcherEntry
+            v-for="entry in dispatcherHistory"
+            :key="entry.id"
+            :entry="entry"
+            :onToggleShowExtraInfo="toggleExtraInfo"
+            :showExtraInfo="extraInfoIndexes.includes(entry.id)"
+          />
+        </transition-group>
 
         <AddDataButton
           :list="dispatcherHistory"
@@ -134,7 +32,7 @@
           :scrollNoMoreData="scrollNoMoreData"
           @addHistoryData="addHistoryData"
         />
-      </div>
+      </ul>
 
       <div class="journal_warning" v-if="scrollNoMoreData">
         {{ $t('journal.no-further-data') }}
@@ -149,21 +47,15 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
-import { regions } from '../../../data/options.json';
 import { useMainStore } from '../../../store/mainStore';
 import { API } from '../../../typings/api';
 import { Status } from '../../../typings/common';
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import StationStatusBadge from '../../Global/StationStatusBadge.vue';
-import dateMixin from '../../../mixins/dateMixin';
-import styleMixin from '../../../mixins/styleMixin';
-import { useApiStore } from '../../../store/apiStore';
+import JournalDispatcherEntry from './JournalDispatcherEntry.vue';
 
 export default defineComponent({
-  components: { Loading, AddDataButton, StationStatusBadge },
-
-  mixins: [dateMixin, styleMixin],
+  components: { Loading, AddDataButton, JournalDispatcherEntry },
 
   props: {
     dispatcherHistory: {
@@ -188,96 +80,30 @@ export default defineComponent({
     return {
       Status,
       store: useMainStore(),
-      apiStore: useApiStore(),
-      regions,
 
-      openItemIndexes: [] as number[]
+      extraInfoIndexes: [] as number[]
     };
   },
 
   methods: {
     toggleExtraInfo(id: number) {
-      const existingId = this.openItemIndexes.indexOf(id);
+      const existingIdx = this.extraInfoIndexes.indexOf(id);
 
-      if (existingId != -1) this.openItemIndexes.splice(existingId, 1);
-      else this.openItemIndexes.push(id);
+      if (existingIdx != -1) this.extraInfoIndexes.splice(existingIdx, 1);
+      else this.extraInfoIndexes.push(id);
     }
   }
 });
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/animations.scss';
-@import '../../../styles/responsive.scss';
-@import '../../../styles/badge.scss';
 @import '../../../styles/variables.scss';
 @import '../../../styles/JournalSection.scss';
 
-.history-list {
+.journal-list {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   text-align: left;
 }
-
-.region-badge {
-  padding: 0 0.25em;
-}
-
-.level-badge {
-  text-align: center;
-  display: inline-block;
-  line-height: 1.6em;
-}
-
-.dispatcher-online {
-  color: springgreen;
-}
-
-.history-item {
-  background-color: #1a1a1a;
-  padding: 1em;
-}
-
-.item-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  line-height: 1.75em;
-  gap: 0.5em;
-}
-
-.item-top-right {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  text-align: center;
-  gap: 1em;
-}
-
-.item-bottom {
-  margin-top: 1em;
-}
-
-.history-statuses {
-  display: flex;
-  overflow: auto;
-  gap: 0.5em;
-}
-
-.history-statuses > div {
-  background-color: #313131;
-  padding: 0.2rem 0 0.2rem 0.5em;
-  margin: 0.5em 0;
-  border-radius: 1em;
-}
-
-@include smallScreen {
-  .item-top {
-    flex-direction: column;
-    justify-content: center;
-    text-align: center;
-  }
-}
 </style>

src/components/JournalView/JournalTimetables/_TimetableHistoryList.vue

@@ -1,101 +0,0 @@
-<template>
-  <ul class="journal-list">
-    <transition-group name="list-anim">
-      <li
-        v-for="{ timetable, showExtraInfo } in computedTimetableHistory"
-        class="journal_item"
-        :key="timetable.id"
-        @click="showExtraInfo.value = !showExtraInfo.value"
-      >
-        <div class="journal_item-info">
-          <!-- General -->
-          <TimetableGeneral :timetable="timetable" />
-          <!-- Route -->
-          <span class="item-route">
-            <b>{{ timetable.route.replace('|', ' - ') }}</b>
-          </span>
-
-          <hr />
-          <!-- Stops -->
-          <TimetableStops :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-          <!-- Status -->
-          <TimetableStatus :timetable="timetable" />
-
-          <button class="btn--action btn--show">
-            {{ $t('journal.stock-info') }}
-            <img
-              :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
-              alt="Arrow icon"
-            />
-          </button>
-          <!-- Extra -->
-          <TimetableExtra :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
-        </div>
-      </li>
-    </transition-group>
-  </ul>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent, ref } from 'vue';
-
-import TimetableGeneral from './TimetableGeneral.vue';
-import TimetableStops from './TimetableStops.vue';
-import TimetableStatus from './TimetableStatus.vue';
-import TimetableExtra from './TimetableExtra.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { TimetableGeneral, TimetableStops, TimetableStatus, TimetableExtra },
-
-  props: {
-    timetableHistory: {
-      type: Array as PropType<API.TimetableHistory.Response>,
-      required: true
-    }
-  },
-  computed: {
-    computedTimetableHistory() {
-      return this.timetableHistory.map((timetable) => ({
-        timetable,
-        showExtraInfo: ref(false)
-      }));
-    }
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/variables';
-@import '../../../styles/responsive';
-@import '../../../styles/JournalSection';
-
-.btn--show {
-  display: flex;
-  font-weight: bold;
-  padding: 0.2em 0.45em;
-
-  img {
-    height: 1.3em;
-  }
-}
-
-hr {
-  margin: 0.25em 0;
-}
-
-@include smallScreen {
-  .journal_item-info {
-    text-align: center;
-  }
-
-  .item-route {
-    display: flex;
-    justify-content: center;
-  }
-
-  .btn--show {
-    margin: 1em auto 0 auto;
-  }
-}
-</style>

src/components/SceneryView/SceneryDispatchersHistory.vue

@@ -7,7 +7,7 @@
         {{ $t('scenery.history-list-empty') }}
       </div>
 
-      <div v-else class="history-list">
+      <div v-else class="journal-list">
         <div v-for="historyItem in historyList" :key="historyItem.id">
           <span>
             <span class="text--grayed" style="margin-right: 10px">
@@ -165,14 +165,14 @@ export default defineComponent({
   overflow: auto;
 }
 
-.history-list {
+.journal-list {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   text-align: left;
 }
 
-.history-list > div {
+.journal-list > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -195,7 +195,7 @@ export default defineComponent({
 }
 
 @include smallScreen {
-  .history-list > div {
+  .journal-list > div {
     flex-direction: column;
     justify-content: center;
     text-align: center;

src/components/SceneryView/SceneryTimetablesHistory.vue

@@ -19,7 +19,7 @@
         {{ $t('scenery.history-list-empty') }}
       </div>
 
-      <div v-else class="history-list">
+      <div v-else class="journal-list">
         <div v-for="timetableHistory in historyList" :key="timetableHistory.id">
           <span>
             <div>
@@ -219,14 +219,14 @@ export default defineComponent({
   }
 }
 
-.history-list {
+.journal-list {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
   text-align: left;
 }
 
-.history-list > div {
+.journal-list > div {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -235,7 +235,7 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
-.history-list > div > button > img {
+.journal-list > div > button > img {
   width: 2em;
   transform: rotate(180deg);
 }