Zmiany wyglądu i działania filtra stacji, poprawki

src/assets/icon-real.svg

@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="60" fill="#898989"/>
+<rect x="8" y="19" width="44" height="22" fill="#FF0F0F"/>
+<rect x="8" y="19" width="44" height="11" fill="white"/>
+</svg>

src/components/SceneryView/SceneryInfo.vue

@@ -7,7 +7,8 @@
           :href="stationInfo.stationURL"
           target="_blank"
           rel="noopener noreferrer"
-        >{{ stationInfo.stationName }}</a>
+          >{{ stationInfo.stationName }}</a
+        >
 
         <span v-else>{{ stationInfo.stationName }}</span>
       </div>
@@ -33,11 +34,15 @@
         <span class="schedules">
           <img :src="timetableIcon" alt="icon-timetable" />
           <span v-if="stationInfo.scheduledTrains">
-            <span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
+            <span style="color: #eee">{{
+              stationInfo.scheduledTrains.length
+            }}</span>
             /
-            <span
+            <span style="color: #bbb">{{
-              style="color: #bbb"
+              stationInfo.scheduledTrains.filter(
-            >{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+                (train) => train.stopInfo.confirmed
+              ).length
+            }}</span>
           </span>
         </span>
       </div>
@@ -84,22 +89,39 @@
           alt="icon-unavailable"
           title="Sceneria niedostępna"
         />
+
+        <img
+          v-if="stationInfo.stationLines && stationInfo.stationLines != ''"
+          :src="require('@/assets/icon-real.svg')"
+          alt="real"
+          title="Sceneria realna / półrealna"
+        />
       </div>
 
       <div class="info-dispatcher">
         <div>
           <span
             class="level"
-            :style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
+            :style="
-          >{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
+              calculateExpStyle(
+                stationInfo.dispatcherExp,
+                stationInfo.dispatcherIsSupporter
+              )
+            "
+          >
+            {{
+              stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"
+            }}
+          </span>
 
           <span class="name">{{ stationInfo.dispatcherName }}</span>
         </div>
 
         <span
-          class="status"
+          class="status-badge"
           :class="statusClasses(stationInfo.occupiedTo)"
-        >{{ stationInfo.occupiedTo }}</span>
+          >{{ stationInfo.occupiedTo }}
+        </span>
       </div>
 
       <div class="info-lists">
@@ -123,7 +145,9 @@
           <div
             class="user offline"
             v-if="!computedStationTrains || computedStationTrains.length == 0"
-          >BRAK AKTYWNYCH GRACZY</div>
+          >
+            BRAK AKTYWNYCH GRACZY
+          </div>
         </div>
 
         <div class="spawn-list">
@@ -144,7 +168,8 @@
           <span
             class="spawn none"
             v-if="!stationInfo.spawns || stationInfo.spawns.length == 0"
-          >BRAK OTWARTYCH SPAWNÓW</span>
+            >BRAK OTWARTYCH SPAWNÓW</span
+          >
         </div>
       </div>
     </section>
@@ -264,6 +289,9 @@ h3 {
     img {
       width: 2.5em;
       margin: 0 0.5rem;
+
+      border: 2px solid #4e4e4e;
+      border-radius: 0.5em;
     }
   }
 

src/components/StationsView/FilterCard.vue

@@ -1,7 +1,7 @@
 <template>
-  <section class="filter-card">
+  <section class="card">
     <div class="card-exit" @click="exit">
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+      <!-- <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" /> -->
     </div>
 
     <div class="card-title flex">FILTRUJ STACJE</div>
@@ -21,7 +21,8 @@
           <span
             class="option-content"
             :class="option.section + (option.value ? ' checked' : '')"
-          >{{ option.content }}</span>
+            >{{ option.content }}</span
+          >
         </label>
       </div>
     </div>
@@ -46,10 +47,12 @@
     </div>
 
     <div class="card-save">
-      <div class="option save">
+      <div class="option">
-        <label class="option-label">
+        <label>
-          <input class="option-input" type="checkbox" v-model="saveOptions" @change="saveFilters" />
+          <input type="checkbox" v-model="saveOptions" @change="saveFilters" />
-          <span class="option-content save" :class="{ checked: saveOptions }">ZAPISZ FILTRY</span>
+          <span class="save" :class="{ checked: saveOptions }">
+            ZAPISZ FILTRY
+          </span>
         </label>
       </div>
     </div>
@@ -106,9 +109,6 @@ export default class FilterCard extends Vue {
   saveFilters(): void {
     if (!this.saveOptions) {
       StorageManager.unregisterStorage(this.STORAGE_KEY);
-
-      console.log(this.saveOptions);
-
       return;
     }
 
@@ -145,52 +145,31 @@ export default class FilterCard extends Vue {
 
 <style lang="scss" scoped>
 @import "../../styles/responsive";
-@import "../../styles/variables";
+@import "../../styles/card";
-
-.filter-card {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  z-index: 3;
-
-  overflow: auto;
-  max-height: 95vh;
-
-  padding: 0.5em;
-  max-width: 600px;
-  width: 65%;
-
-  background: #262a2e;
-
-  font-size: 1.5em;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  @include smallScreen() {
-    width: 95%;
-  }
-
-  @include bigScreen {
-    font-size: 1.1rem;
-  }
-}
 
 .card {
+  font-size: 1.5em;
+
   &-title {
     font-size: 2em;
     font-weight: 700;
     color: $accentCol;
 
     margin: 0.5em 0;
-    margin-top: 1em;
+
+    text-align: center;
   }
 
   &-options {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
+    grid-template-columns: repeat(4, minmax(0, 1fr));
-    padding: 0 1.5em;
+    grid-template-rows: repeat(4, 1fr);
+    gap: 0.5em;
+
+    @include smallScreen() {
+      grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+      grid-template-rows: auto;
+    }
   }
 
   &-sliders {
@@ -202,6 +181,7 @@ export default class FilterCard extends Vue {
 
     button {
       margin: 0 0.3em;
+      border: 1px solid white;
     }
   }
 
@@ -210,8 +190,8 @@ export default class FilterCard extends Vue {
     justify-content: center;
 
     .option {
-      width: 30%;
+      width: 7em;
-      font-size: 0.9em;
+      font-size: 1.1em;
     }
   }
 
@@ -223,13 +203,11 @@ export default class FilterCard extends Vue {
 }
 
 .option {
-  margin: 0.3em;
+  input {
-
-  &-input {
     display: none;
   }
 
-  &-content {
+  span {
     user-select: none;
     -moz-user-select: none;
     -webkit-user-select: none;
@@ -239,21 +217,16 @@ export default class FilterCard extends Vue {
 
     cursor: pointer;
 
-    padding: 0.6em 0.5em;
+    padding: 0.45em 0.4em;
-    border-radius: 0.4em;
 
-    font-size: 0.65em;
+    font-size: 0.8em;
-
-    background-color: #333;
 
     display: inline-block;
     position: relative;
 
     transition: all 0.2s;
 
-    &.save {
+    border-radius: 0.5em;
-      font-size: 0.8em;
-    }
 
     &:not(.checked) {
       background-color: #585858;
@@ -313,7 +286,7 @@ export default class FilterCard extends Vue {
         width: 100%;
         height: 100%;
 
-        border-radius: inherit;
+        border-radius: 0.5em;
       }
     }
   }
@@ -321,8 +294,7 @@ export default class FilterCard extends Vue {
 
 .slider {
   display: flex;
-
+  margin: 1em 0;
-  padding: 0.5em;
 
   &-value {
     display: flex;
@@ -333,7 +305,6 @@ export default class FilterCard extends Vue {
     margin-right: 0.3em;
     padding: 0.1em 0.2em;
 
-    font-size: 1.1em;
     font-weight: 500;
 
     border-radius: 0.2em;
@@ -343,7 +314,7 @@ export default class FilterCard extends Vue {
     display: flex;
     align-items: center;
 
-    font-size: 0.75em;
+    font-size: 0.8em;
   }
 
   &-input {

src/components/StationsView/StationTable.vue

@@ -4,7 +4,11 @@
       <table>
         <thead>
           <tr>
-            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+            <th
+              v-for="(head, i) in headTitles"
+              :key="i"
+              @click="() => changeSorter(i)"
+            >
               <span class="header_wrapper">
                 <div class="header_item">
                   <div v-if="head[0].includes('.svg')">
@@ -38,35 +42,51 @@
             <td
               class="station_name"
               :class="{
-              'default-station': station.default,
+                'default-station': station.default,
-              online: station.online,
+                online: station.online,
-              'station-unavailable': station.unavailable,
+                'station-unavailable': station.unavailable,
-            }"
+              }"
-            >{{ station.stationName }}</td>
+            >
+              {{ station.stationName }}
+            </td>
 
             <td class="station_level">
               <span
                 v-if="station.reqLevel"
                 :style="calculateExpStyle(station.reqLevel)"
-              >{{ station.reqLevel && station.reqLevel > -1 ? parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L" : "?" }}</span>
+              >
+                {{
+                  station.reqLevel && station.reqLevel > -1
+                    ? parseInt(station.reqLevel) >= 2
+                      ? station.reqLevel
+                      : "L"
+                    : "?"
+                }}
+              </span>
 
               <span v-else>?</span>
             </td>
 
             <td class="station_status">
               <span
-                class="status"
+                class="status-badge"
                 :class="statusClasses(station.occupiedTo)"
-              >{{ station.occupiedTo}}</span>
+                >{{ station.occupiedTo }}</span
+              >
             </td>
 
-            <td class="station_dispatcher-name">{{ station.online ? station.dispatcherName : "" }}</td>
+            <td class="station_dispatcher-name">
+              {{ station.online ? station.dispatcherName : "" }}
+            </td>
 
             <td class="station_dispatcher-exp">
               <span
                 v-if="station.online"
                 :style="calculateExpStyle(station.dispatcherExp)"
-              >{{ 2 > station.dispatcherExp ? "L" : station.dispatcherExp }}</span>
+                >{{
+                  2 > station.dispatcherExp ? "L" : station.dispatcherExp
+                }}</span
+              >
             </td>
 
             <td class="station_tracks twoway">
@@ -74,13 +94,17 @@
                 v-if="station.routes && station.routes.twoWay.catenary > 0"
                 class="track catenary"
                 :title="`Liczba zelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.catenary}`"
-              >{{ station.routes.twoWay.catenary }}</span>
+              >
+                {{ station.routes.twoWay.catenary }}
+              </span>
 
               <span
                 v-if="station.routes && station.routes.twoWay.noCatenary > 0"
                 class="track no-catenary"
                 :title="`Liczba niezelektryfikowanych szlaków dwutorowych: ${station.routes.twoWay.noCatenary}`"
-              >{{ station.routes.twoWay.noCatenary }}</span>
+              >
+                {{ station.routes.twoWay.noCatenary }}
+              </span>
 
               <span class="separator"></span>
 
@@ -88,13 +112,17 @@
                 v-if="station.routes && station.routes.oneWay.catenary > 0"
                 class="track catenary"
                 :title="`Liczba zelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.catenary}`"
-              >{{ station.routes.oneWay.catenary }}</span>
+              >
+                {{ station.routes.oneWay.catenary }}
+              </span>
 
               <span
                 v-if="station.routes && station.routes.oneWay.noCatenary > 0"
                 class="track no-catenary"
                 :title="`Liczba niezelektryfikowanych szlaków jednotorowych: ${station.routes.oneWay.noCatenary}`"
-              >{{ station.routes.oneWay.noCatenary }}</span>
+              >
+                {{ station.routes.oneWay.noCatenary }}
+              </span>
             </td>
 
             <td class="station_info">
@@ -131,7 +159,7 @@
               />
             </td>
 
-            <td class="station_users" :class="{inactive: !station.online }">
+            <td class="station_users" :class="{ inactive: !station.online }">
               <span>
                 <span class="highlight">{{ station.currentUsers }}</span>
                 /
@@ -139,16 +167,23 @@
               </span>
             </td>
 
-            <td class="station_spawns" :class="{inactive: !station.online }">
+            <td class="station_spawns" :class="{ inactive: !station.online }">
               <span class="highlight">{{ station.spawns.length }}</span>
             </td>
 
-            <td class="station_schedules" :class="{inactive: !station.online }">
+            <td
-              <span class="highlight">{{station.scheduledTrains.length}} &nbsp;</span>
+              class="station_schedules"
+              :class="{ inactive: !station.online }"
+            >
+              <span class="highlight">
+                {{ station.scheduledTrains.length }} &nbsp;
+              </span>
               /
-              <span
+              <span style="color: #bbb">{{
-                style="color: #bbb"
+                station.scheduledTrains.filter(
-              >{{ station.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
+                  (train) => train.stopInfo.confirmed
+                ).length
+              }}</span>
             </td>
             <!-- 
             <td class="station_stats">
@@ -159,7 +194,9 @@
       </table>
     </div>
 
-    <div class="no-stations" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div>
+    <div class="no-stations" v-if="stations.length == 0">
+      Ups! Brak stacji do wyświetlenia!
+    </div>
   </section>
 </template>
 

src/data/options.json

@@ -1,7 +1,9 @@
 {
-  "options": [{
+  "options": [
-      "id": "is-default",
+    {
+      "id": "default",
       "name": "default",
+      "iconName": "td2",
       "section": "access",
       "value": true,
       "defaultValue": true,
@@ -10,22 +12,35 @@
     {
       "id": "not-default",
       "name": "notDefault",
+      "iconName": "",
       "section": "access",
       "value": true,
       "defaultValue": true,
       "content": "POZA PACZKĄ"
     },
     {
-      "id": "non-public",
+      "id": "real",
-      "name": "nonPublic",
+      "name": "real",
+      "iconName": "lock",
       "section": "access",
       "value": true,
       "defaultValue": true,
-      "content": "NIEPUBLICZNA"
+      "content": "REALNA"
     },
+    {
+      "id": "fictional",
+      "name": "fictional",
+      "iconName": "user",
+      "section": "access",
+      "value": true,
+      "defaultValue": true,
+      "content": "FIKCYJNA"
+    },
+
     {
       "id": "SPK",
       "name": "SPK",
+      "iconName": "SPK",
       "section": "control",
       "value": true,
       "defaultValue": true,
@@ -34,6 +49,7 @@
     {
       "id": "SCS",
       "name": "SCS",
+      "iconName": "SCS",
       "section": "control",
       "value": true,
       "defaultValue": true,
@@ -42,6 +58,7 @@
     {
       "id": "by-hand",
       "name": "ręczne",
+      "iconName": "ręczne",
       "section": "control",
       "value": true,
       "defaultValue": true,
@@ -50,14 +67,17 @@
     {
       "id": "levers",
       "name": "mechaniczne",
+      "iconName": "mechaniczne",
       "section": "control",
       "value": true,
       "defaultValue": true,
       "content": "MECHANICZNE"
     },
+
     {
       "id": "modern",
       "name": "współczesna",
+      "iconName": "współczesna",
       "section": "signals",
       "value": true,
       "defaultValue": true,
@@ -66,6 +86,7 @@
     {
       "id": "semaphore",
       "name": "kształtowa",
+      "iconName": "kształtowa",
       "section": "signals",
       "value": true,
       "defaultValue": true,
@@ -74,6 +95,7 @@
     {
       "id": "mixed",
       "name": "mieszana",
+      "iconName": "mieszana",
       "section": "signals",
       "value": true,
       "defaultValue": true,
@@ -82,14 +104,18 @@
     {
       "id": "historic",
       "name": "historyczna",
+      "iconName": "historyczna",
       "section": "signals",
       "value": true,
       "defaultValue": true,
       "content": "HISTORYCZNA"
     },
+
     {
       "id": "free",
       "name": "free",
+      "iconName": "",
+
       "section": "status",
       "value": false,
       "defaultValue": false,
@@ -98,21 +124,16 @@
     {
       "id": "occupied",
       "name": "occupied",
+      "iconName": "",
+
       "section": "status",
       "value": true,
       "defaultValue": true,
       "content": "ZAJĘTA"
-    },
-    {
-      "id": "ending",
-      "name": "ending",
-      "section": "status",
-      "value": true,
-      "defaultValue": true,
-      "content": "KOŃCZY"
     }
   ],
-  "sliders": [{
+  "sliders": [
+    {
       "id": "min-level",
       "name": "minLevel",
       "minRange": 0,
@@ -158,4 +179,4 @@
       "content": "SZLAKI DWUTOROWE NIEZELEKTR. (MINIMUM)"
     }
   ]
-}
+}

src/mixins/styleMixin.ts

@@ -5,12 +5,12 @@ import Component from 'vue-class-component';
 @Component
 export default class styleMixin extends Vue {
   calculateExpStyle(exp: string | number, isSupporter: boolean = false): string {
-    const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  65%, 50%)`) : '#888';
+    const bgColor = exp > -1 ? (exp < 2 ? '#26B0D9' : `hsl(${-exp * 5 + 100},  85%, 50%)`) : '#666';
 
-    const fontColor = exp > 15 ? 'white' : 'black';
+    const fontColor = exp > 15 || exp == -1 ? 'white' : 'black';
-    const boxShadow = isSupporter ? `box-shadow: 0 0 10px 2px ${bgColor}` : '';
+    const boxShadow = isSupporter ? `0 0 10px 2px ${bgColor}` : '';
 
-    return `backgroundColor: ${bgColor}; color: ${fontColor}; ${boxShadow};`;
+    return `backgroundColor: ${bgColor}; color: ${fontColor}; box-shadow: ${boxShadow};`;
   }
 
   statusClasses(occupiedTo: string) {

src/scripts/interfaces/Filter.ts

@@ -1,23 +1,24 @@
 export default interface Filter {
-    "default": false,
+  default: boolean;
-    "notDefault": false,
+  notDefault: boolean;
-    "nonPublic": false,
+  real: boolean;
-    "SPK": false,
+  fictional: boolean;
-    "SCS": false,
+  SPK: boolean;
-    "ręczne": false,
+  SCS: boolean;
-    "mechaniczne": false,
+  ręczne: boolean;
-    "współczesna": false,
+  mechaniczne: boolean;
-    "kształtowa": false,
+  współczesna: boolean;
-    "historyczna": false,
+  kształtowa: boolean;
-    "mieszana": false,
+  historyczna: boolean;
-    "minLevel": 0,
+  mieszana: boolean;
-    "minOneWayCatenary": 0,
+  minLevel: number;
-    "minOneWay": 0,
+  minOneWayCatenary: number;
-    "minTwoWayCatenary": 0,
+  minOneWay: number;
-    "minTwoWay": 0,
+  minTwoWayCatenary: number;
-    "no-1track": false,
+  minTwoWay: number;
-    "no-2track": false,
+  'no-1track': boolean;
-    "free": true,
+  'no-2track': boolean;
-    "occupied": false,
+  free: boolean;
-    "ending": false
+  occupied: boolean;
-}
+  ending: boolean;
+}

src/scripts/interfaces/Station.ts

@@ -21,7 +21,7 @@ export default interface Station {
   stationProject: string;
 
   reqLevel: string;
-  supportersOnly: string;
+  supportersOnly: boolean;
 
   SBL: string;
   TWB: string;

src/scripts/stationFilterManager.ts

@@ -1,10 +1,12 @@
 import Station from '@/scripts/interfaces/Station';
+import Filter from '@/scripts/interfaces/Filter';
 
 export default class StationFilterManager {
-  private filterInitStates = {
+  private filterInitStates: Filter = {
     default: false,
     notDefault: false,
-    nonPublic: false,
+    real: false,
+    fictional: false,
     SPK: false,
     SCS: false,
     ręczne: false,
@@ -25,11 +27,11 @@ export default class StationFilterManager {
     ending: false,
   };
 
-  private filters = { ...this.filterInitStates };
+  private filters: Filter = { ...this.filterInitStates };
 
   private sorter: { index: number; dir: number } = { index: 0, dir: 1 };
 
-  filteredStationList(stationList: Station[]): Station[] {
+  private filteredStationList(stationList: Station[]): Station[] {
     return stationList
       .filter(station => {
         if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
@@ -42,6 +44,9 @@ export default class StationFilterManager {
         if (station.default && this.filters['default']) return false;
         if (!station.default && this.filters['notDefault']) return false;
 
+        if (this.filters['real'] && station.stationLines != '') return false;
+        if (this.filters['fictional'] && station.stationLines == '') return false;
+
         if (station.reqLevel == '-1') return true;
         if (parseInt(station.reqLevel) < this.filters['minLevel']) return false;
 

src/store/store.ts

@@ -266,7 +266,9 @@ export default class Store extends VuexModule {
           const statusLabel = getStatusLabel(stationStatus);
           const statusTimestamp = getStatusTimestamp(stationStatus);
 
-          const stationTrains = onlineTrainsData.filter(train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName);
+          const stationTrains = onlineTrainsData.filter(
+            train => train.region === 'eu' && train.isOnline && train.station.stationName === station.stationName
+          );
 
           acc.push({
             stationName: station.stationName,
@@ -363,7 +365,7 @@ export default class Store extends VuexModule {
       stationLines: station[2] as string,
       stationProject: station[3] as string,
       reqLevel: station[4] as string,
-      supportersOnly: station[5] as string,
+      supportersOnly: station[5] == 'TAK',
       signalType: station[6] as string,
       controlType: station[7] as string,
       SBL: station[8] as string,
@@ -522,86 +524,89 @@ export default class Store extends VuexModule {
   private updateTimetableData(timetableList: ITimetableData[]) {
     this.stationList = this.stationList.map(station => {
       const stationName = station.stationName.toLowerCase();
-      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce((acc: Station['scheduledTrains'], timetableData: ITimetableData, index) => {
+      const scheduledTrains: Station['scheduledTrains'] = timetableList.reduce(
-        if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
+        (acc: Station['scheduledTrains'], timetableData: ITimetableData, index) => {
+          if (!timetableData.followingSceneries.includes(station.stationHash)) return acc;
 
-        const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
+          const stopInfoIndex = timetableData.followingStops.findIndex(stop => {
-          const stopName = stop.stopNameRAW.toLowerCase();
+            const stopName = stop.stopNameRAW.toLowerCase();
 
-          if (stationName === stopName) return true;
+            if (stationName === stopName) return true;
-          if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
+            if (stopName.includes(stationName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
-          if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
+            if (stationName.includes(stopName) && !stop.stopName.includes('po.') && !stop.stopName.includes('podg.')) return true;
-          if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) return true;
+            if (stopName.includes('podg.') && stopName.split(', podg.')[0] && stationName.includes(stopName.split(', podg.')[0])) return true;
 
-          if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
+            if (station.stops && station.stops.includes(stop.stopNameRAW)) return true;
 
-          return false;
+            return false;
-        });
+          });
 
-        if (stopInfoIndex == -1) return acc;
+          if (stopInfoIndex == -1) return acc;
 
-        const stopInfo = timetableData.followingStops[stopInfoIndex];
+          const stopInfo = timetableData.followingStops[stopInfoIndex];
 
-        let stopStatus = '';
+          let stopStatus = '';
-        let stopLabel = '';
+          let stopLabel = '';
-        let stopStatusID = 0;
+          let stopStatusID = 0;
-        let nearestStop = '';
+          let nearestStop = '';
 
-        if (stopInfo.terminatesHere && stopInfo.confirmed) {
+          if (stopInfo.terminatesHere && stopInfo.confirmed) {
-          stopStatus = 'terminated';
+            stopStatus = 'terminated';
-          stopLabel = 'Skończył bieg';
+            stopLabel = 'Skończył bieg';
-          stopStatusID = 5;
+            stopStatusID = 5;
-        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
+          } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName == station.stationName) {
-          stopStatus = 'departed';
+            stopStatus = 'departed';
-          stopLabel = 'Odprawiony';
+            stopLabel = 'Odprawiony';
-          stopStatusID = 2;
+            stopStatusID = 2;
-        } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
+          } else if (!stopInfo.terminatesHere && stopInfo.confirmed && timetableData.currentStationName != station.stationName) {
-          stopStatus = 'departed-away';
+            stopStatus = 'departed-away';
-          stopLabel = 'Odjechał';
+            stopLabel = 'Odjechał';
-          stopStatusID = 4;
+            stopStatusID = 4;
-        } else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
+          } else if (timetableData.currentStationName == station.stationName && !stopInfo.stopped) {
-          stopStatus = 'online';
+            stopStatus = 'online';
-          stopLabel = 'Na stacji';
+            stopLabel = 'Na stacji';
-          stopStatusID = 0;
+            stopStatusID = 0;
-        } else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
+          } else if (timetableData.currentStationName == station.stationName && stopInfo.stopped) {
-          stopStatus = 'stopped';
+            stopStatus = 'stopped';
-          stopLabel = 'Postój';
+            stopLabel = 'Postój';
-          stopStatusID = 1;
+            stopStatusID = 1;
-        } else if (timetableData.currentStationName != station.stationName) {
+          } else if (timetableData.currentStationName != station.stationName) {
-          stopStatus = 'arriving';
+            stopStatus = 'arriving';
-          stopLabel = 'W drodze';
+            stopLabel = 'W drodze';
-          stopStatusID = 3;
+            stopStatusID = 3;
-        }
+          }
 
-        if (stopInfoIndex < timetableData.followingStops.length - 2) {
+          if (stopInfoIndex < timetableData.followingStops.length - 2) {
-          for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
+            for (let i = stopInfoIndex + 1; i < timetableData.followingStops.length - 1; i++) {
-            const stop = timetableData.followingStops[i];
+              const stop = timetableData.followingStops[i];
 
-            if (stop.mainStop && stop.stopType.includes('ph')) {
+              if (stop.mainStop && stop.stopType.includes('ph')) {
-              nearestStop = stop.stopNameRAW;
+                nearestStop = stop.stopNameRAW;
-              break;
+                break;
+              }
             }
           }
-        }
 
-        acc.push({
+          acc.push({
-          trainNo: timetableData.trainNo,
+            trainNo: timetableData.trainNo,
-          driverName: timetableData.driverName,
+            driverName: timetableData.driverName,
-          driverId: timetableData.driverId,
+            driverId: timetableData.driverId,
-          currentStationName: timetableData.currentStationName,
+            currentStationName: timetableData.currentStationName,
-          currentStationHash: timetableData.currentStationHash,
+            currentStationHash: timetableData.currentStationHash,
-          category: timetableData.category,
+            category: timetableData.category,
-          beginsAt: timetableData.followingStops[0].stopNameRAW,
+            beginsAt: timetableData.followingStops[0].stopNameRAW,
-          terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
+            terminatesAt: timetableData.followingStops[timetableData.followingStops.length - 1].stopNameRAW,
-          nearestStop,
+            nearestStop,
-          stopInfo,
+            stopInfo,
-          stopLabel,
+            stopLabel,
-          stopStatus,
+            stopStatus,
-          stopStatusID,
+            stopStatusID,
-        });
+          });
 
-        return acc;
+          return acc;
-      }, []);
+        },
+        []
+      );
 
       if (station.checkpoints) {
         station.checkpoints.forEach(cp => (cp.scheduledTrains.length = 0));
@@ -673,7 +678,9 @@ export default class Store extends VuexModule {
       const timetableData = timetableList.find(data => data && data.trainNo === train.trainNo);
 
       if (timetableData) {
-        const trainData = this.stationList.find(station => station.stationName === train.currentStationName)?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
+        const trainData = this.stationList
+          .find(station => station.stationName === train.currentStationName)
+          ?.scheduledTrains.find(stationTrain => stationTrain.trainNo === train.trainNo);
 
         acc.push({ ...train, timetableData, stopStatus: trainData?.stopStatus || '', stopLabel: trainData?.stopLabel || '' });
       }

src/styles/card.scss

@@ -0,0 +1,45 @@
+@import './variables.scss';
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 4;
+
+  overflow: auto;
+  background: $primaryCol;
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  width: 75%;
+  max-width: 650px;
+  max-height: 95%;
+
+  padding: 0.5em 1em;
+
+
+  @include smallScreen {
+    width: 95%;
+  }
+
+  @include bigScreen {
+    font-size: 1.4rem;
+  }
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.3em 0em;
+
+    img {
+      width: 1.6em;
+    }
+
+    cursor: pointer;
+  }
+}

src/styles/global.scss

@@ -1,3 +1,16 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  width: 100%;
+  margin: 0;
+  // font-family: "Open Sans", sans-serif;
+  font-family: "Quicksand", sans-serif;
+
+  overflow-x: hidden;
+}
+
 :root {
   font-size: 16px;
 }
@@ -67,18 +80,6 @@
   }
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
-body {
-  width: 100%;
-  margin: 0;
-  // font-family: "Open Sans", sans-serif;
-  font-family: "Quicksand", sans-serif;
-
-  overflow-x: hidden;
-}
 
 button,
 input,
@@ -119,49 +120,6 @@ input {
   color: $accentCol;
 }
 
-.card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 4;
-
-  overflow: auto;
-  background: #262a2e;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 75%;
-  max-width: 750px;
-  max-height: 95%;
-
-  // font-size: calc(0.6rem + 0.5vw);
-  font-size: calc(0.45rem + 0.35vw);
-
-  @include smallScreen {
-    width: 95%;
-  }
-
-  @include bigScreen {
-    font-size: 1.4rem;
-  }
-
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0.3em 0em;
-
-    img {
-      width: 1.6em;
-    }
-
-    cursor: pointer;
-  }
-}
 
 .title {
   color: $accentCol;

src/styles/scenery_status.scss

@@ -1,17 +1,17 @@
 $free: #8a8a8a;
 $ending: #e6c300;
-$no-limit: #0077ae;
+$no-limit: #117fc9;
 $unav: #ff3d5d;
 $brb: #e6a100;
 $no-space: #222;
 $taken: #09a116;
 
-.status {
+.status-badge {
   border-radius: 1rem;
   font-weight: 500;
 
   font-size: 0.9em;
-  padding: 0.2em 0.45em;
+  padding: 0.2em 0.6em;
 
   background-color: $taken;
 
@@ -34,7 +34,7 @@ $taken: #09a116;
   &.not-signed,
   &.unavailable {
     background-color: $unav;
-    font-size: 0.8em;
+    font-size: 0.85em;
   }
 
   &.brb {