chore: filters & stats fixes

src/components/JournalView/JournalOptions.vue

@@ -301,6 +301,6 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/dropdown.scss';
+@import '../../styles/dropdown';
-@import '../../styles/dropdown_filters.scss';
+@import '../../styles/dropdown_filters';
 </style>

src/components/StationsView/StationFilterCard.vue

@@ -1,9 +1,9 @@
 <template>
   <section class="filter-card" v-click-outside="closeCard" @keydown.esc="closeCard">
     <div class="card_controls">
-      <button class="btn--filled btn--image" @click="toggleCard">
+      <button class="card-button btn--filled btn--image" @click="toggleCard">
         <img class="button_icon" src="/images/icon-filter2.svg" alt="filter icon" />
-        [F] {{ $t('options.filters') }}
+        <p>[F] {{ $t('options.filters') }}</p>
         <span class="active-indicator" v-if="!filterStore.areFiltersAtDefault"></span>
       </button>
 
@@ -327,9 +327,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import '../../styles/responsive.scss';
+@import '../../styles/responsive';
-@import '../../styles/card.scss';
+@import '../../styles/card';
-@import '../../styles/animations.scss';
+@import '../../styles/animations';
 
 h3.section-header {
   text-align: center;
@@ -582,4 +582,10 @@ h3.section-header {
     }
   }
 }
+
+@include smallScreen {
+  .card_controls > button.card-button > p {
+    display: none;
+  }
+}
 </style>

src/components/StationsView/StationStats.vue

@@ -1,29 +1,54 @@
 <template>
   <div class="station-stats">
     <div class="separator" />
-    <div>
+
-      {{ $t('station-stats.u-factor') }}
+    <div class="stats-row">
-      <a
+      <div>
-        href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
+        &bull;
-        target="_blank"
+        <span
-        :data-tooltip="$t('station-stats.u-factor-tooltip')"
+          >{{ $t('station-stats.u-factor') }}
-        >(?)</a
+          <a
-      >:
+            href="https://td2.info.pl/dyskusje/wspolczynnik-ugla-czy-to-ma-sens/msg81011/#msg81011"
-      <b :style="calculateFactorStyle()">
+            target="_blank"
-        {{ uFactor.toFixed(2) }}
+            :data-tooltip="$t('station-stats.u-factor-tooltip')"
-      </b>
+            >(?)</a
-      | {{ $t('station-stats.avg-timetable-count') }}
+          >:
-      <b>{{ avgTimetableCount.toFixed(2) }}</b>
+        </span>
-    </div>
+
-    <div>
+        <b class="u-factor" :style="calculateFactorStyle()">
-      {{ $t('station-stats.single-track-count') }}
+          {{ uFactor.toFixed(2) }}
-      <b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
+        </b>
-      <b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }} |
+      </div>
-      {{ $t('station-stats.double-track-count') }} <b>{{ trackCount.twoWayElectric }}</b>
+
-      {{ $t('station-stats.electrified') }} / <b>{{ trackCount.twoWayOther }}</b>
+      <div>
-      {{ $t('station-stats.not-electrified') }} | {{ $t('station-stats.open-spawns') }}
+        &bull;
-      <b>{{ spawnCount.passenger }}</b> - PAS / <b>{{ spawnCount.freight }}</b> - TOW /
+        {{ $t('station-stats.med-timetable-count') }}
-      <b>{{ spawnCount.loco }}</b> - LUZ / <b>{{ spawnCount.all }}</b> - ALL
+        <b>{{ medTimetableCount }}</b>
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.single-track-count') }}
+        <b>{{ trackCount.oneWayElectric }}</b> {{ $t('station-stats.electrified') }} /
+        <b>{{ trackCount.oneWayOther }}</b> {{ $t('station-stats.not-electrified') }}
+      </div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.double-track-count') }}
+        <b>{{ trackCount.twoWayElectric }}</b> {{ $t('station-stats.electrified') }} /
+        <b>{{ trackCount.twoWayOther }}</b>
+        {{ $t('station-stats.not-electrified') }}
+      </div>
+
+      <div>&bull; {{ $t('station-stats.cross-sceneries') }} <b>test</b></div>
+
+      <div>
+        &bull;
+        {{ $t('station-stats.open-spawns') }} <b>{{ spawnCount.passenger }}</b> - PAS /
+        <b>{{ spawnCount.freight }}</b> - TOW / <b>{{ spawnCount.loco }}</b> - LUZ /
+        <b>{{ spawnCount.all }}</b> - ALL
+      </div>
     </div>
   </div>
 </template>
@@ -63,18 +88,28 @@ export default defineComponent({
       return activeDispatchers.length != 0 ? activeTrains.length / activeDispatchers.length : 0;
     },
 
-    avgTimetableCount() {
+    medTimetableCount() {
-      const scheduledTrainsTotal = this.mainStore.activeSceneryList.reduce<number>((acc, sc) => {
+      const scheduledTrainsArr = this.mainStore.activeSceneryList
-        if (sc.region != this.mainStore.region.id) return acc;
+        .reduce<number[]>((acc, sc) => {
+          if (sc.region != this.mainStore.region.id) return acc;
 
-        acc += sc.scheduledTrainCount.all;
+          acc.push(sc.scheduledTrainCount.all);
 
-        return acc;
+          return acc;
-      }, 0);
+        }, [])
+        .sort((a, b) => Math.sign(a - b));
 
-      return this.mainStore.activeSceneryList.length != 0
+      if (scheduledTrainsArr.length == 0) return 0;
-        ? scheduledTrainsTotal / this.mainStore.activeSceneryList.length
+
-        : 0;
+      let v1 = scheduledTrainsArr[scheduledTrainsArr.length / 2];
+
+      if (scheduledTrainsArr.length % 2 == 0) {
+        let v2 = scheduledTrainsArr[scheduledTrainsArr.length / 2 - 1];
+
+        return (v1 + v2) / 2;
+      }
+
+      return v1;
     },
 
     trackCount() {
@@ -133,19 +168,30 @@ export default defineComponent({
   color: #ddd;
 }
 
-[data-factor-low='true'] {
+.stats-row {
-  color: #ddd;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  text-wrap: pretty;
+  gap: 0.25em;
+  margin-top: 0.25em;
 }
 
-[data-factor-mediocre='true'] {
+.u-factor {
-  color: lightgreen;
+  [data-factor-low='true'] {
-}
+    color: #ddd;
+  }
 
-[data-factor-high='true'] {
+  [data-factor-mediocre='true'] {
-  color: greenyellow;
+    color: lightgreen;
-}
+  }
 
-[data-factor-highest='true'] {
+  [data-factor-high='true'] {
-  color: rgb(22, 245, 22);
+    color: greenyellow;
+  }
+
+  [data-factor-highest='true'] {
+    color: rgb(22, 245, 22);
+  }
 }
 </style>

src/components/StationsView/StationTable.vue

@@ -406,7 +406,7 @@ $rowCol: #424242;
 
 .station_table {
   height: 80vh;
-  min-height: 550px;
+  min-height: 700px;
   overflow: auto;
   font-weight: 500;
 }

src/components/TrainsView/TrainOptions.vue

@@ -81,7 +81,6 @@
           </div>
 
           <div class="filter-actions">
-            <div></div>
             <button class="btn--action" @click="resetAllFilters">
               {{ $t('options.filter-reset') }}
             </button>
@@ -223,9 +222,6 @@ export default defineComponent({
 
 .filter-actions {
   display: flex;
-  gap: 0.5em;
-  width: 100%;
-
   margin-top: 1em;
 
   > * {

src/locales/en.json

@@ -299,9 +299,10 @@
   "station-stats": {
     "u-factor": "U-factor",
     "u-factor-tooltip": "(?) Current server traffic factor (driver count divided by dispatcher count)",
-    "avg-timetable-count": "Average timetable count for one dispatcher:",
+    "med-timetable-count": "Median of scenery timetables:",
-    "single-track-count": "Available single track routes:",
+    "single-track-count": "Single track routes:",
-    "double-track-count": "Available double track routes:",
+    "double-track-count": "Double track routes:",
+    "cross-sceneries": "Cross-track sceneries (1-track <-> 2-track)",
     "electrified": "(electrified)",
     "not-electrified": "(not electr.)",
     "open-spawns": "Open spawns:"

src/locales/pl.json

@@ -108,8 +108,8 @@
     "filters": "FILTRY",
     "donate": "WESPRZYJ",
 
-    "search-button": "Szukaj",
+    "search-button": "SZUKAJ",
-    "reset-button": "Zresetuj",
+    "reset-button": "ZRESETUJ",
 
     "sort-title": "SORTUJ WG:",
     "filter-title": "FILTRUJ WG:",
@@ -292,9 +292,10 @@
   "station-stats": {
     "u-factor": "Współczynnik Ugla",
     "u-factor-tooltip": "(?) Współczynnik ruchu na serwerze (liczba maszynistów online dzielona na liczbę dyżurnych ruchu)",
-    "avg-timetable-count": "Średnia liczba rozkładów jazdy na dyżurnego:",
+    "med-timetable-count": "Mediana rozkładów jazdy na sceneriach:",
-    "single-track-count": "Dostępne szlaki jednotorowe:",
+    "single-track-count": "Szlaki jednotorowe:",
-    "double-track-count": "Dostępne szlaki dwutorowe:",
+    "double-track-count": "Szlaki dwutorowe:",
+    "cross-sceneries": "Scenerie przejściowe (1-tor <-> 2-tor):",
     "electrified": "(zelektr.)",
     "not-electrified": "(niezelektr.)",
     "open-spawns": "Otwarte spawny:"

src/styles/global.scss

@@ -121,8 +121,6 @@ input {
   height: 7px;
   background-color: lightgreen;
   border-radius: 50%;
-
-  margin-left: 10px;
 }
 
 a {

src/views/StationsView.vue

@@ -84,6 +84,7 @@ export default defineComponent({
 .stations-options {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   gap: 0.5em;
 
   margin-bottom: 0.5em;