refactor: journals

src/components/JournalView/JournalTimetables/JournalTimetablesList.vue

@@ -17,7 +17,34 @@
         </div>
 
         <div v-else>
-          <TimetableHistoryList :timetableHistory="timetableHistory" />
+          <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" />
+
+                  <!-- Extra -->
+                  <TimetableDetails :timetable="timetable" :showExtraInfo="showExtraInfo.value" />
+                </div>
+              </li>
+            </transition-group>
+          </ul>
 
           <AddDataButton
             :list="timetableHistory"
@@ -37,17 +64,29 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, ref } from 'vue';
 
 import Loading from '../../Global/Loading.vue';
 import AddDataButton from '../../Global/AddDataButton.vue';
-import TimetableHistoryList from './TimetableHistoryList.vue';
+
 import { useMainStore } from '../../../store/mainStore';
 import { Status } from '../../../typings/common';
 import { API } from '../../../typings/api';
 
+import TimetableGeneral from './TimetableGeneral.vue';
+import TimetableStops from './TimetableStops.vue';
+import TimetableStatus from './TimetableStatus.vue';
+import TimetableDetails from './TimetableDetails.vue';
+
 export default defineComponent({
-  components: { Loading, AddDataButton, TimetableHistoryList },
+  components: {
+    Loading,
+    AddDataButton,
+    TimetableDetails,
+    TimetableGeneral,
+    TimetableStatus,
+    TimetableStops
+  },
 
   props: {
     timetableHistory: {
@@ -73,6 +112,15 @@ export default defineComponent({
       Status,
       store: useMainStore()
     };
+  },
+
+  computed: {
+    computedTimetableHistory() {
+      return this.timetableHistory.map((timetable) => ({
+        timetable,
+        showExtraInfo: ref(false)
+      }));
+    }
   }
 });
 </script>
@@ -80,4 +128,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../../styles/JournalSection.scss';
 @import '../../../styles/animations.scss';
+
+@include smallScreen {
+  .journal_item-info {
+    text-align: center;
+  }
+
+  .item-route {
+    display: flex;
+    justify-content: center;
+  }
+}
 </style>

src/components/JournalView/JournalTimetables/TimetableDetails.vue

@@ -0,0 +1,195 @@
+<template>
+  <div>
+    <div class="details-actions">
+      <button class="btn--action">
+        <b>{{ $t('journal.stock-info') }}</b>
+        <img :src="`/images/icon-arrow-${showExtraInfo ? 'asc' : 'desc'}.svg`" alt="Arrow icon" />
+      </button>
+    </div>
+
+    <div class="details-body" 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
+          v-for="(sh, i) in stockHistory"
+          :key="i"
+          class="btn--action"
+          :data-checked="i == currentHistoryIndex"
+          @click.stop="currentHistoryIndex = i"
+        >
+          {{ sh.updatedAt }}
+        </button>
+      </div>
+
+      <StockList
+        :trainStockList="
+          (currentHistoryIndex == 0
+            ? timetable.stockString
+            : stockHistory[currentHistoryIndex].stockString
+          ).split(';')
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import StockList from '../../Global/StockList.vue';
+import { API } from '../../../typings/api';
+
+export default defineComponent({
+  components: { StockList },
+  props: {
+    showExtraInfo: {
+      type: Boolean,
+      required: true
+    },
+    timetable: {
+      type: Object as PropType<API.TimetableHistory.Data>,
+      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 = '/images/icon-unknown.png';
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/variables.scss';
+@import '../../../styles/responsive.scss';
+@import '../../../styles/badge.scss';
+
+.details-body {
+  margin-top: 0.5em;
+}
+
+.details-actions {
+  display: flex;
+
+  button img {
+    height: 1.25em;
+  }
+}
+
+.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;
+    }
+  }
+}
+
+ul.stock-list {
+  display: flex;
+  align-items: flex-end;
+  overflow: auto;
+
+  padding-bottom: 0.5em;
+
+  li > div {
+    margin: 1em 0;
+
+    text-align: center;
+    color: #aaa;
+    font-size: 0.9em;
+  }
+}
+
+@include smallScreen() {
+  .stock-specs {
+    justify-content: center;
+  }
+
+  .details-actions {
+    justify-content: center;
+  }
+}
+</style>

src/components/JournalView/JournalTimetables/TimetableExtra.vue

@@ -1,173 +0,0 @@
-<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
-        v-for="(sh, i) in stockHistory"
-        :key="i"
-        class="btn--action"
-        :data-checked="i == currentHistoryIndex"
-        @click.stop="currentHistoryIndex = i"
-      >
-        {{ sh.updatedAt }}
-      </button>
-    </div>
-
-    <StockList
-      :trainStockList="
-        (currentHistoryIndex == 0
-          ? timetable.stockString
-          : stockHistory[currentHistoryIndex].stockString
-        ).split(';')
-      "
-    />
-
-  </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import StockList from '../../Global/StockList.vue';
-import { API } from '../../../typings/api';
-
-export default defineComponent({
-  components: { StockList },
-  props: {
-    showExtraInfo: {
-      type: Boolean,
-      required: true
-    },
-    timetable: {
-      type: Object as PropType<API.TimetableHistory.Data>,
-      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 = '/images/icon-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;
-
-  li > div {
-    margin: 1em 0;
-
-    text-align: center;
-    color: #aaa;
-    font-size: 0.9em;
-  }
-}
-</style>

src/components/JournalView/JournalTimetables/TimetableGeneral.vue

@@ -64,11 +64,11 @@
 
       <button
         v-if="timetable.terminated == false"
-        class="btn--image btn--action btn-timetable"
+        class="btn--action btn-timetable"
         @click.stop="showTimetable(timetable, $event.currentTarget)"
       >
-        <img src="/images/icon-train.svg" alt="" />
+        <img src="/images/icon-train.svg" alt="train icon" />
-        {{ $t('journal.timetable-online-button') }}
+        <b>{{ $t('journal.timetable-online-button') }}</b>
       </button>
     </span>
   </div>
@@ -104,8 +104,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/responsive.scss';
+@import '../../../styles/responsive';
-@import '../../../styles/badge.scss';
+@import '../../../styles/badge';
 
 .item-general {
   display: flex;
@@ -117,8 +117,22 @@ export default defineComponent({
   margin-bottom: 0.5em;
 }
 
-.info-date {
+.general-train {
-  margin-right: 0.5em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25em;
+
+  cursor: pointer;
+  line-height: 2;
+}
+
+.general-time {
+  display: flex;
+  align-items: center;
+
+  gap: 0.5em;
 }
 
 .badges {
@@ -143,24 +157,12 @@ export default defineComponent({
   }
 }
 
-.general-train {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25em;
-
-  cursor: pointer;
-  line-height: 2;
-}
-
 .btn-timetable {
-  display: inline-block;
+  display: flex;
-  padding: 0.1em 0.4em;
+  padding: 0.2em 0.5em;
-  margin-left: 0.5em;
 
   img {
-    vertical-align: top;
+    height: 1.25em;
   }
 }
 

src/components/JournalView/JournalTimetables/TimetableHistoryList.vue

@@ -21,7 +21,7 @@
           <!-- Status -->
           <TimetableStatus :timetable="timetable" />
 
-          <button class="btn--option btn--show">
+          <button class="btn--action btn--show">
             {{ $t('journal.stock-info') }}
             <img
               :src="`/images/icon-arrow-${showExtraInfo.value ? 'asc' : 'desc'}.svg`"
@@ -66,9 +66,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/variables.scss';
+@import '../../../styles/variables';
-@import '../../../styles/responsive.scss';
+@import '../../../styles/responsive';
-@import '../../../styles/JournalSection.scss';
+@import '../../../styles/JournalSection';
 
 .btn--show {
   display: flex;

src/components/SceneryView/SceneryInfo/SceneryInfoIcons.vue

@@ -24,8 +24,8 @@
       :title="
         $t('sceneries.info.control-type') + $t(`controls.${station?.generalInfo.controlType}`)
       "
-      v-html="getControlTypeAbbrev(station?.generalInfo.controlType)"
     >
+      {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
     </span>
 
     <img
@@ -88,12 +88,11 @@
 
 <script lang="ts">
 import { PropType, defineComponent } from 'vue';
-import stationInfoMixin from '../../../mixins/stationInfoMixin';
 import styleMixin from '../../../mixins/styleMixin';
 import Station from '../../../scripts/interfaces/Station';
 
 export default defineComponent({
-  mixins: [stationInfoMixin, styleMixin],
+  mixins: [styleMixin],
   props: {
     station: {
       type: Object as PropType<Station>
@@ -104,6 +103,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '../../../styles/icons.scss';
+
 .info-icons {
   display: flex;
   justify-content: center;
@@ -111,6 +111,7 @@ export default defineComponent({
 
   margin: 1em;
 }
+
 .icon-info {
   display: flex;
   justify-content: center;

src/components/StationsView/StationTable.vue

@@ -206,8 +206,8 @@
                     $t('sceneries.info.control-type') +
                     $t(`controls.${station.generalInfo?.controlType}`)
                   "
-                  v-html="getControlTypeAbbrev(station.generalInfo.controlType)"
                 >
+                  {{ $t(`controls.abbrevs.${station.generalInfo.controlType}`) }}
                 </span>
 
                 <img
@@ -302,7 +302,6 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 import dateMixin from '../../mixins/dateMixin';
-import stationInfoMixin from '../../mixins/stationInfoMixin';
 import styleMixin from '../../mixins/styleMixin';
 import Station from '../../scripts/interfaces/Station';
 import { useStationFiltersStore } from '../../store/stationFiltersStore';
@@ -324,7 +323,7 @@ export default defineComponent({
 
   emits: ['toggleDonationModal'],
   components: { Loading, StationStatusBadge },
-  mixins: [styleMixin, dateMixin, stationInfoMixin, popupMixin],
+  mixins: [styleMixin, dateMixin, popupMixin],
 
   data: () => ({
     headIconsIds,

src/locales/en.json

@@ -81,7 +81,20 @@
     "ręczne+SCS": "manual + SCS",
     "mechaniczne": "levers (mechanical)",
     "mechaniczne+SPK": "levers + SPK",
-    "mechaniczne+SCS": "levers + SCS"
+    "mechaniczne+SCS": "levers + SCS",
+
+    "abbrevs": {
+      "SPK": "SPK",
+      "SCS": "SCS",
+      "SCS-SPK": "S/S",
+      "SPE": "SPE",
+      "ręczne": "R",
+      "ręczne+SPK": "R",
+      "ręczne+SCS": "R",
+      "mechaniczne": "M",
+      "mechaniczne+SPK": "M",
+      "mechaniczne+SCS": "M"
+    }
   },
   "status": {
     "online": "UNTIL ",
@@ -367,7 +380,7 @@
     "minutes": "{value} min | {value} mins",
     "seconds": "{value} s",
 
-    "stock-info": "EXTRA INFO",
+    "stock-info": "DETAILS",
     "stock-length": "Length",
     "stock-mass": "Mass",
     "stock-max-speed": "Max. speed",

src/locales/pl.json

@@ -77,7 +77,20 @@
     "ręczne+SCS": "ręczne z SCS",
     "mechaniczne": "mechaniczne",
     "mechaniczne+SPK": "mechaniczne z SPK",
-    "mechaniczne+SCS": "mechaniczne z SCS"
+    "mechaniczne+SCS": "mechaniczne z SCS",
+
+    "abbrevs": {
+      "SPK": "SPK",
+      "SCS": "SCS",
+      "SCS-SPK": "S/S",
+      "SPE": "SPE",
+      "ręczne": "R",
+      "ręczne+SPK": "R",
+      "ręczne+SCS": "R",
+      "mechaniczne": "M",
+      "mechaniczne+SPK": "M",
+      "mechaniczne+SCS": "M"
+    }
   },
   "status": {
     "online": "DO ",
@@ -163,7 +176,7 @@
       "access": "DOSTĘPNOŚĆ OGÓLNA",
       "control": "TYP STEROWANIA",
       "signals": "TYP SYGNALIZACJI",
-      "addons": "DODATKOWE PROGRAMY",
+      "addons": "SZCZEGÓŁY",
       "blockades": "BLOKADY LINIOWE",
       "status": "STATUS ONLINE",
       "timetables": "AKTYWNE ROZKŁADY JAZDY"
@@ -352,7 +365,7 @@
     "timetable-abandoned": "PORZUCONY",
     "timetable-online-button": "RJ ONLINE",
 
-    "stock-info": "DODATKOWE INFORMACJE",
+    "stock-info": "SZCZEGÓŁY",
     "stock-length": "Długość",
     "stock-mass": "Masa",
     "stock-max-speed": "Prędkość maks.",

src/mixins/stationInfoMixin.ts

@@ -1,24 +0,0 @@
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  methods: {
-    getControlTypeAbbrev(controlType: string) {
-      switch (controlType) {
-        case 'mechaniczne':
-          return 'M';
-        case 'SCS-SPK':
-          return 'S/S';
-        case 'ręczne':
-          return 'R';
-        case 'mechaniczne+SPK':
-          return 'M';
-        case 'ręczne+SPK':
-          return 'R';
-        case 'mechaniczne+SCS':
-          return 'M';
-        default:
-          return controlType;
-      }
-    }
-  }
-});

src/store/apiStore.ts

@@ -57,7 +57,7 @@ export const useApiStore = defineStore('apiStore', {
 
       // Active data schedueler
       this.fetchActiveData();
-      this.setupActiveDataFetcher();
+      // this.setupActiveDataFetcher();
     },
 
     async setupActiveDataFetcher() {
@@ -72,13 +72,14 @@ export const useApiStore = defineStore('apiStore', {
       if (!this.activeData) this.dataStatuses.connection = Status.Data.Loading;
 
       try {
+        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
+
         const response = await this.client!.get<API.ActiveData.Response>('api/getActiveData');
+        console.log(response);
 
         this.activeData = response.data;
         this.lastFetchData = new Date();
         this.dataStatuses.connection = Status.Data.Loaded;
-
-        console.log('Fetching active data at ' + new Date().toLocaleTimeString('pl-PL'));
       } catch (error) {
         this.dataStatuses.connection = Status.Data.Error;
         console.error('Ups! Wystąpił błąd podczas pobierania danych online:', error);

vite.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
     vue(),
     VitePWA({
       registerType: 'autoUpdate',
-      includeAssets: ['/images/*.png', '/fonts/*.woff', '/fonts/*.woff2'],
+      includeAssets: ['/images/*.{png,svg,jpg}', '/fonts/*.{woff,woff2}'],
 
       workbox: {
         disableDevLogs: true,
@@ -22,28 +22,17 @@ export default defineConfig({
             urlPattern: new RegExp('^https://stacjownik.spythere.eu/api/getSceneries', 'i'),
             handler: 'NetworkFirst',
             options: {
-              cacheName: 'sceneries-cache',
+              cacheName: 'spythere-sceneries-cache',
               cacheableResponse: {
                 statuses: [0, 200]
               }
             }
           },
           {
-            urlPattern: new RegExp('^https://raw.githubusercontent.com/Spythere/api/*', 'i'),
+            urlPattern: new RegExp('^https://rj.td2.info.pl/dist/img/thumbnails/*', 'i'),
-            handler: 'NetworkFirst',
-            options: {
-              cacheName: 'github-api-cache',
-
-              cacheableResponse: {
-                statuses: [0, 200]
-              }
-            }
-          },
-          {
-            urlPattern: /^https:\/\/rj.td2.info.pl\/dist\/img\/thumbnails\/.*/i,
             handler: 'CacheFirst',
             options: {
-              cacheName: 'images-cache',
+              cacheName: 'swdr-images-cache',
               expiration: {
                 maxEntries: 100,
                 maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
@@ -52,6 +41,20 @@ export default defineConfig({
                 statuses: [0, 200, 404]
               }
             }
+          },
+          {
+            urlPattern: new RegExp('^https://static.spythere.eu/images/*', 'i'),
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'spythere-images-cache',
+              expiration: {
+                maxEntries: 100,
+                maxAgeSeconds: 60 * 60 * 24 * 7 // <== 7 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
           }
         ]
       },
@@ -60,5 +63,14 @@ export default defineConfig({
         suppressWarnings: true
       }
     })
-  ]
+  ],
+  build: {
+    rollupOptions: {
+      output: {
+        entryFileNames: 'app-[name].js',
+        assetFileNames: 'app-[name].css',
+        chunkFileNames: 'chunk-[name].js'
+      }
+    }
+  }
 });