Restrukturyzacja kodu

src/App.vue

@@ -48,13 +48,13 @@ import { Action, Getter } from "vuex-class";
 
 import { mapGetters, mapActions } from "vuex";
 
-import Error from "@/components/states/Error.vue";
+import Error from "@/components/App/Error.vue";
-import Loading from "@/components/states/Loading.vue";
+import Loading from "@/components/App/Loading.vue";
-import Clock from "@/components/ui/Clock.vue";
+
-import Options from "@/components/ui/Options.vue";
+import Clock from "@/components/App/Clock.vue";
 
 @Component({
-  components: { Error, Loading, Clock, Options },
+  components: { Error, Loading, Clock },
 })
 export default class App extends Vue {
   @Getter("getStations") stations;
@@ -78,12 +78,10 @@ export default class App extends Vue {
 
 .view-anim {
   &-enter {
-    // transform: translateX(-5%);
     opacity: 0.02;
   }
 
   &-leave-to {
-    // transform: translateX(5%);
     opacity: 0.02;
   }
 

src/components/StationsView/Options.vue

@@ -34,8 +34,8 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
-import OptionCard from "@/components/ui/OptionCard.vue";
+import OptionCard from "@/components/StationsView/OptionCard.vue";
-import LegendCard from "@/components/ui/LegendCard.vue";
+import LegendCard from "@/components/StationsView/LegendCard.vue";
 
 @Component({
   components: { OptionCard, LegendCard },
@@ -71,6 +71,11 @@ export default class Options extends Vue {
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
+.options {
+  display: flex;
+  z-index: 5;
+}
+
 .card-anim {
   &-enter-active,
   &-leave-active {

src/components/StationsView/StationTable.vue

@@ -0,0 +1,330 @@
+<template>
+  <section class="station-table">
+    <div class="table-wrapper">
+      <table class="table">
+        <thead class="table-head">
+          <tr>
+            <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
+              <span>
+                <div>
+                  <div>{{head[0]}}</div>
+                  <div v-if="head.length > 1">{{head[1]}}</div>
+                </div>
+
+                <img
+                  class="sort-icon"
+                  v-if="sorterActive.index == i"
+                  :src="sorterActive.dir == 1 ? icons.ascSVG : icons.descSVG"
+                  alt
+                />
+              </span>
+            </th>
+          </tr>
+        </thead>
+
+        <tr
+          class="table-item"
+          v-for="(station, i) in computedStations"
+          :key="i + station.stationHash"
+          @click="() => {  setFocusedStation(station.stationName) }"
+        >
+          <td
+            class="item-station-name"
+            :class="{'default-station': station.default, 'online': station.online}"
+          >{{station.stationName}}</td>
+
+          <td class="item-station-level">
+            <span
+              v-if="station.reqLevel"
+              :style="calculateExpStyle(station.reqLevel)"
+            >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
+
+            <span v-else>?</span>
+          </td>
+
+          <td class="item-station-status">
+            <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+          </td>
+
+          <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
+          <td class="item-dispatcher-exp">
+            <span
+              v-if="station.online"
+              :style="calculateExpStyle(station.dispatcherExp)"
+            >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
+          </td>
+          <td
+            class="item-users"
+          >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
+          <td class="item-info">
+            <img
+              class="icon-info"
+              v-if="station.controlType"
+              :src="require(`@/assets/icon-${station.controlType}.svg`)"
+              :alt="station.controlType"
+              :title="'Sterowanie ' + station.controlType"
+            />
+
+            <img
+              class="icon-info"
+              v-if="station.signalType"
+              :src="require(`@/assets/icon-${station.signalType}.svg`)"
+              :alt="station.signalType"
+              :title="'Sygnalizacja ' + station.signalType"
+            />
+
+            <img
+              class="icon-info"
+              v-if="station.SBL && station.SBL !== ''"
+              :src="require(`@/assets/icon-SBL.svg`)"
+              alt="SBL"
+              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+            />
+
+            <img
+              class="icon-info"
+              v-if="!station.reqLevel || station.nonPublic"
+              :src="require(`@/assets/icon-lock.svg`)"
+              alt="non-public"
+              title="Sceneria niepubliczna"
+            />
+          </td>
+
+          <td class="item-tracks twoway">
+            <span
+              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>
+
+            <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>
+          </td>
+
+          <td class="item-tracks oneway">
+            <span
+              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>
+
+            <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>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Component, Prop } from "vue-property-decorator";
+
+import Station from "@/scripts/interfaces/Station";
+import styleMixin from "@/mixins/styleMixin";
+
+import Options from "@/components/StationsView/Options.vue";
+
+const ascSVG = require("@/assets/icon-arrow-asc.svg");
+const descSVG = require("@/assets/icon-arrow-desc.svg");
+
+@Component({
+  components: { Options },
+})
+export default class StationTable extends styleMixin {
+  @Prop() readonly stations!: Station[];
+  @Prop() readonly setFocusedStation!: () => void;
+
+  icons: { ascSVG; descSVG } = { ascSVG, descSVG };
+  sorterActive: { index: number; dir: number } = { index: 0, dir: 1 };
+
+  headTitles: string[][] = [
+    ["Stacja"],
+    ["Wymagany poz.", "dyżurnego"],
+    ["Status"],
+    ["Dyżurny"],
+    ["Poziom", "dyżurnego"],
+    ["Maszyniści"],
+    ["Informacje", "ogólne"],
+    ["Szlaki", "dwutorowe"],
+    ["Szlaki", "jednotorowe"],
+  ];
+
+  changeSorter(index: number) {
+    if (index > 5) return;
+
+    if (index == this.sorterActive.index)
+      this.sorterActive.dir = -1 * this.sorterActive.dir;
+    else this.sorterActive.dir = 1;
+
+    this.sorterActive.index = index;
+  }
+
+  get computedStations() {
+    const dir: number = this.sorterActive.dir;
+
+    return this.stations.sort((a, b) => {
+      switch (this.sorterActive.index) {
+        case 1:
+          if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return dir;
+          if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -dir;
+          break;
+
+        case 2:
+          if (a.statusTimestamp > b.statusTimestamp) return dir;
+          if (a.statusTimestamp < b.statusTimestamp) return -dir;
+          break;
+
+        case 3:
+          if (a.dispatcherName > b.dispatcherName) return dir;
+          if (a.dispatcherName < b.dispatcherName) return -dir;
+          break;
+
+        case 4:
+          if (a.dispatcherExp > b.dispatcherExp) return dir;
+          if (a.dispatcherExp < b.dispatcherExp) return -dir;
+          break;
+
+        case 5:
+          if (a.currentUsers > b.currentUsers) return dir;
+          if (a.currentUsers < b.currentUsers) return -dir;
+          if (a.maxUsers > b.maxUsers) return dir;
+          if (a.maxUsers < b.maxUsers) return -dir;
+          break;
+
+        default:
+          break;
+      }
+
+      if (a.stationName >= b.stationName) return dir;
+      return -dir;
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../styles/responsive.scss";
+@import "../../styles/variables.scss";
+@import "../../styles/global.scss";
+
+.table {
+  &-wrapper {
+    overflow: auto;
+  }
+
+  white-space: nowrap;
+  border-collapse: collapse;
+
+  font-size: calc(0.6rem + 0.3vw);
+
+  @include smallScreen() {
+    font-size: 0.6rem;
+  }
+
+  &-head th {
+    padding: 0.3rem;
+    background-color: #444;
+    min-width: 120px;
+
+    position: sticky;
+    top: 0;
+    z-index: 2;
+
+    cursor: pointer;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+
+    span {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      & > img {
+        width: 1.5em;
+      }
+    }
+  }
+
+  &-item {
+    background-color: #5c5b5b;
+
+    &:nth-child(even) {
+      background-color: rgb(102, 101, 101);
+      color: white;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: #818181;
+    }
+
+    & > td {
+      padding: 0.3rem 1rem;
+      margin: 0 3rem;
+      text-align: center;
+      vertical-align: middle;
+
+      cursor: pointer;
+
+      @include smallScreen() {
+        margin: 0;
+        padding: 0.1rem 0.5rem;
+      }
+    }
+  }
+}
+
+.item {
+  &-station-level,
+  &-dispatcher-exp {
+    span {
+      display: block;
+
+      width: 2em;
+      height: 2em;
+      line-height: 2em;
+      margin: 0 auto;
+    }
+  }
+
+  &-station-level {
+    span {
+      background-color: #888;
+      border-radius: 50%;
+    }
+  }
+
+  &-info,
+  &-tracks {
+    img {
+      width: 2.2em;
+      margin: 0 0.2em;
+      vertical-align: middle;
+    }
+  }
+
+  &-tracks {
+    .no-catenary {
+      background-color: #939393;
+    }
+
+    .catenary {
+      background-color: #009dce;
+    }
+
+    .track {
+      margin: 0 0.3rem;
+      padding: 0.5em;
+    }
+  }
+}
+</style>

src/components/StationsView/Table.vue

@@ -1,370 +0,0 @@
-<template>
-  <div class="table-wrapper">
-    <table class="table">
-      <thead class="table-head">
-        <tr>
-          <th v-for="(head, i) in headTitles" :key="i" @click="() => changeSorter(i)">
-            <span>
-              <div>
-                <div>{{head[0]}}</div>
-                <div v-if="head.length > 1">{{head[1]}}</div>
-              </div>
-
-              <img
-                class="icon"
-                v-if="sorterActive.index == i"
-                :src="sorterActive.type == 1 ? icons.ascSVG : icons.descSVG"
-                alt
-              />
-            </span>
-          </th>
-        </tr>
-      </thead>
-
-      <tr
-        class="table-item"
-        v-for="(station, i) in computedStations"
-        :key="i + station.stationHash"
-        @click="() => {  setFocusedStation(station.stationName) }"
-      >
-        <td
-          class="item-station-name"
-          :class="{'default-station': station.default, 'online': station.online}"
-        >{{station.stationName}}</td>
-
-        <td class="item-station-level">
-          <span
-            v-if="station.reqLevel"
-            :style="calculateExpStyle(station.reqLevel)"
-          >{{ (station.reqLevel && station.reqLevel > -1) ? (parseInt(station.reqLevel) >= 2 ? station.reqLevel : "L") : "?" }}</span>
-
-          <span v-else>?</span>
-        </td>
-
-        <td class="item-station-status">
-          <span class="status" :class="statusClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
-        </td>
-
-        <td class="item-dispatcher-name">{{station.online ? station.dispatcherName : ""}}</td>
-        <td class="item-dispatcher-exp">
-          <span
-            v-if="station.online"
-            :style="calculateExpStyle(station.dispatcherExp)"
-          >{{station.dispatcherExp < 2 ? 'L' : station.dispatcherExp}}</span>
-        </td>
-        <td
-          class="item-users"
-        >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
-        <td class="item-info">
-          <img
-            class="icon-info"
-            v-if="station.controlType"
-            :src="require(`@/assets/icon-${station.controlType}.svg`)"
-            :alt="station.controlType"
-            :title="'Sterowanie ' + station.controlType"
-          />
-
-          <img
-            class="icon-info"
-            v-if="station.signalType"
-            :src="require(`@/assets/icon-${station.signalType}.svg`)"
-            :alt="station.signalType"
-            :title="'Sygnalizacja ' + station.signalType"
-          />
-
-          <img
-            class="icon-info"
-            v-if="station.SBL && station.SBL !== ''"
-            :src="require(`@/assets/icon-SBL.svg`)"
-            alt="SBL"
-            title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-          />
-
-          <img
-            class="icon-info"
-            v-if="!station.reqLevel || station.nonPublic"
-            :src="require(`@/assets/icon-lock.svg`)"
-            alt="non-public"
-            title="Sceneria niepubliczna"
-          />
-        </td>
-
-        <td class="item-tracks twoway">
-          <span
-            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>
-
-          <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>
-        </td>
-
-        <td class="item-tracks oneway">
-          <span
-            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>
-
-          <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>
-        </td>
-      </tr>
-    </table>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-import { Component, Prop } from "vue-property-decorator";
-
-import Station from "@/scripts/interfaces/Station";
-import styleMixin from "@/mixins/styleMixin";
-
-const ascSVG = require("@/assets/icon-arrow-asc.svg");
-const descSVG = require("@/assets/icon-arrow-desc.svg");
-
-@Component({})
-export default class Table extends styleMixin {
-  @Prop() readonly stations!: Station[];
-  @Prop() readonly setFocusedStation!: () => void;
-
-  icons: { ascSVG; descSVG } = { ascSVG, descSVG };
-  sorterActive: { index: number; type: number } = { index: 0, type: 1 };
-
-  headTitles: string[][] = [
-    ["Stacja"],
-    ["Wymagany poz.", "dyżurnego"],
-    ["Status"],
-    ["Dyżurny"],
-    ["Poziom", "dyżurnego"],
-    ["Maszyniści"],
-    ["Informacje", "ogólne"],
-    ["Szlaki", "dwutorowe"],
-    ["Szlaki", "jednotorowe"],
-  ];
-
-  changeSorter(index: number) {
-    if (index > 5) return;
-
-    if (index == this.sorterActive.index)
-      this.sorterActive.type = this.sorterActive.type == 1 ? -1 : 1;
-    else this.sorterActive.type = 1;
-
-    this.sorterActive.index = index;
-  }
-
-  get computedStations() {
-    const type: number = this.sorterActive.type;
-
-    const sortByName = (a: Station, b: Station) => {
-      if (a.stationName >= b.stationName) return type;
-      return -type;
-    };
-
-    if (this.sorterActive.index == 0)
-      return this.stations.sort((a, b) => {
-        if (a.stationName >= b.stationName) return type;
-        return -type;
-      });
-
-    let currentSort;
-
-    switch (this.sorterActive.index) {
-      case 0:
-      default:
-        return (currentSort = sortByName);
-        break;
-
-      case 1:
-        currentSort = (a, b) => {
-          if (parseInt(a.reqLevel) > parseInt(b.reqLevel)) return type;
-          if (parseInt(a.reqLevel) < parseInt(b.reqLevel)) return -type;
-
-          return sortByName(a, b);
-        };
-        break;
-
-      case 2:
-        currentSort = (a, b) => {
-          if (a.statusTimestamp > b.statusTimestamp) return type;
-          if (a.statusTimestamp < b.statusTimestamp) return -type;
-
-          if (a.occupiedTo > b.occupiedTo) return type;
-          if (a.occupiedTo < b.occupiedTo) return -type;
-
-          return sortByName(a, b);
-        };
-        break;
-
-      case 3:
-        currentSort = (a, b) => {
-          if (a.dispatcherName > b.dispatcherName) return type;
-          if (a.dispatcherName < b.dispatcherName) return -type;
-
-          return sortByName(a, b);
-        };
-        break;
-
-      case 4:
-        currentSort = (a, b) => {
-          if (a.dispatcherExp > b.dispatcherExp) return type;
-          if (a.dispatcherExp < b.dispatcherExp) return -type;
-
-          return sortByName(a, b);
-        };
-        break;
-
-      case 5:
-        currentSort = (a, b) => {
-          if (a.currentUsers > b.currentUsers) return type;
-          if (a.currentUsers < b.currentUsers) return -type;
-
-          return sortByName(a, b);
-        };
-        break;
-
-      case 6:
-        currentSort = (a, b) => {
-          if (a.currentUsers > b.currentUsers) return type;
-          if (a.currentUsers < b.currentUsers) return -type;
-
-          if (a.maxUsers > b.maxUsers) return type;
-          if (a.maxUsers < b.maxUsers) return -type;
-        };
-        break;
-    }
-
-    return this.stations.sort(currentSort);
-  }
-
-  mounted() {}
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-@import "../../styles/variables.scss";
-@import "../../styles/global.scss";
-
-.table {
-  &-wrapper {
-    overflow: auto;
-  }
-
-  display: block;
-  white-space: nowrap;
-  border-collapse: collapse;
-
-  font-size: calc(0.6rem + 0.3vw);
-
-  @include smallScreen() {
-    font-size: 0.6rem;
-  }
-
-  &-head th {
-    padding: 0.3rem;
-    background-color: #444;
-    min-width: 120px;
-
-    position: sticky;
-    top: 0;
-    z-index: 2;
-
-    cursor: pointer;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
-
-    span {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      & > img {
-        width: 1.5em;
-      }
-    }
-  }
-
-  &-item {
-    background-color: #5c5b5b;
-
-    &:nth-child(even) {
-      background-color: rgb(102, 101, 101);
-      color: white;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: #818181;
-    }
-
-    & > td {
-      padding: 0.3rem 1rem;
-      margin: 0 3rem;
-      text-align: center;
-      vertical-align: middle;
-
-      cursor: pointer;
-
-      @include smallScreen() {
-        margin: 0;
-        padding: 0.1rem 0.5rem;
-      }
-    }
-  }
-}
-
-.item {
-  &-station-level,
-  &-dispatcher-exp {
-    span {
-      display: block;
-
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-      margin: 0 auto;
-    }
-  }
-
-  &-station-level {
-    span {
-      background-color: #888;
-      border-radius: 50%;
-    }
-  }
-
-  &-info,
-  &-tracks {
-    img {
-      width: 2.2em;
-      margin: 0 0.2em;
-      vertical-align: middle;
-    }
-  }
-
-  &-tracks {
-    .no-catenary {
-      background-color: #939393;
-    }
-
-    .catenary {
-      background-color: #009dce;
-    }
-
-    .track {
-      margin: 0 0.3rem;
-      padding: 0.5em;
-    }
-  }
-}
-</style>

src/components/ui/AppBar.vue

@@ -1,46 +0,0 @@
-<template>
-  <div class="app-bar">
-    <Options />
-  </div>
-</template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from "vue-property-decorator";
-
-import Options from "@/components/ui/Options.vue";
-
-@Component({
-  components: { Options },
-})
-export default class AppBar extends Vue {}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/responsive.scss";
-
-.app-bar {
-  display: flex;
-  justify-content: space-between;
-
-  position: sticky;
-  top: 0;
-  font-size: 0.35em;
-  background: #222;
-}
-
-.counter {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-
-  span {
-    margin: 0 0.3em;
-  }
-}
-
-@include smallScreen {
-  .app-bar {
-    font-size: 0.8rem;
-  }
-}
-</style>

src/components/ui/Card.vue

@@ -1,325 +0,0 @@
-<template>
-  <div class="card">
-    <div class="card-exit" @click="closeCard">
-      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
-    </div>
-
-    <div class="card-upper">
-      <div class="station-name">
-        <a
-          v-if="stationInfo.stationURL"
-          :href="stationInfo.stationURL"
-          target="_blank"
-          rel="noopener noreferrer"
-        >{{stationInfo.stationName}}</a>
-        <span v-else>{{stationInfo.stationName}}</span>
-      </div>
-
-      <div class="station-hash">{{stationInfo.stationHash}}</div>
-
-      <div class="station-icons">
-        <img
-          v-if="stationInfo.controlType"
-          :src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
-          :alt="stationInfo.controlType"
-          :title="'Sterowanie ' + stationInfo.controlType"
-        />
-
-        <img
-          v-if="stationInfo.signalType"
-          :src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
-          :alt="stationInfo.signalType"
-          :title="'Sygnalizacja ' + stationInfo.signalType"
-        />
-
-        <img
-          v-if="stationInfo.SBL && stationInfo.SBL !== ''"
-          :src="require(`@/assets/icon-SBL.svg`)"
-          alt="SBL"
-          title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
-        />
-
-        <img
-          v-if="stationInfo.default"
-          :src="require(`@/assets/icon-td2.svg`)"
-          alt="default-pack"
-          title="Sceneria domyślnie dostępna w grze"
-        />
-
-        <img
-          v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
-          :src="require(`@/assets/icon-lock.svg`)"
-          alt="non-public"
-          title="Sceneria niepubliczna"
-        />
-
-        <span
-          v-if="stationInfo.reqLevel"
-          :title="'Wymagany poziom dyżurnego: ' +  stationInfo.reqLevel"
-        >{{(parseInt(stationInfo.reqLevel) < 2) ? "L" : stationInfo.reqLevel}}</span>
-      </div>
-
-      <div class="station-info"></div>
-    </div>
-
-    <div class="card-content">
-      <div class="dispatcher">
-        <div class="dispatcher-exp">{{stationInfo.dispatcherExp}}</div>
-        <div class="dispatcher-name">
-          <a
-            :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
-            target="_blank"
-            rel="noopener noreferrer"
-          >{{stationInfo.dispatcherName}}</a>
-        </div>
-      </div>
-
-      <div class="rating">
-        <div class="rating-content">
-          <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
-          {{stationInfo.dispatcherRate}}
-        </div>
-      </div>
-
-      <div class="occupation">
-        <div class="occupation-title text--title">SCENERIA ZAJĘTA DO</div>
-        <div class="occupation-content text--content">{{stationInfo.occupiedTo}}</div>
-      </div>
-
-      <div class="spawns">
-        <div class="spawns-title text--title">OTWARTE SPAWNY</div>
-        <div class="spawns-content text--content">
-          <span
-            class="spawn"
-            v-for="(spawn, i) in stationInfo.spawnString"
-            :key="spawn + stationInfo.dispatcherName + i"
-          >{{spawn}}</span>
-
-          <span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
-        </div>
-      </div>
-
-      <div class="users">
-        <div class="users-title text--title">GRACZE NA STACJI</div>
-        <div class="users-content text--content">
-          <div
-            class="user"
-            v-for="train in stationInfo.trains"
-            :key="train.trainNo + train.driverName"
-          >
-            <a
-              :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span>{{train.trainNo}}</span>
-              |
-              <span>{{train.driverName}}</span>
-            </a>
-          </div>
-
-          <span
-            class="user borderless"
-            v-if="!stationInfo.trains || stationInfo.trains.length == 0"
-          >BRAK</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import Vue from "vue";
-export default Vue.extend({
-  name: "Card",
-  props: ["stationInfo", "closeCard"],
-});
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.text {
-  &--title {
-    color: #fdc62f;
-    font-size: 1em;
-  }
-
-  &--content {
-    font-size: 0.8em;
-  }
-}
-
-.station {
-  &-name {
-    color: #2f2f2f;
-    font-size: 2.2em;
-    font-weight: 600;
-
-    a {
-      color: black;
-
-      &:hover,
-      &:focus {
-        color: #ffbb00;
-      }
-    }
-  }
-
-  &-hash {
-    color: #e7e7e7;
-    font-size: 0.7em;
-  }
-
-  &-icons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.5rem;
-
-    img,
-    span {
-      margin: 0 0.5em;
-      width: 2.5em;
-      height: 2.5em;
-    }
-
-    span {
-      background-color: #898989;
-
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      font-weight: bold;
-
-      user-select: none;
-      -moz-user-select: none;
-      -webkit-user-select: none;
-    }
-  }
-}
-
-.dispatcher {
-  grid-area: dispatcher;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  text-align: center;
-
-  @include smallScreen() {
-    flex-direction: column;
-  }
-
-  &-exp {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 2em;
-    height: 2em;
-
-    font-size: 1.3em;
-    border: 2px solid #ffbb00;
-    border-radius: 50%;
-  }
-
-  &-name {
-    font-size: 1.4em;
-    font-weight: 600;
-
-    margin-left: 0.6rem;
-
-    @include smallScreen() {
-      margin-left: 0;
-      margin-top: 0.2em;
-    }
-  }
-}
-
-.rating {
-  grid-area: rating;
-  color: #00e000;
-
-  &-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  font-size: 1.2em;
-
-  img {
-    margin-right: 0.5rem;
-    width: 1.1em;
-  }
-}
-
-.occupation {
-  grid-area: hours;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  &-content {
-    color: white;
-
-    font-size: 1.2em;
-  }
-}
-
-.users {
-  grid-area: users;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    & > .user {
-      padding: 0.3rem;
-      margin: 0.3rem;
-      border: 1px solid white;
-
-      &.borderless {
-        border: none;
-      }
-    }
-  }
-}
-
-.spawns {
-  grid-area: spawns;
-
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: column;
-
-  overflow: hidden;
-
-  &-content {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    & > .spawn {
-      padding: 0.3rem;
-    }
-  }
-}
-
-.region {
-  grid-area: reg;
-}
-</style>

src/views/StationsView.vue

@@ -3,21 +3,21 @@
     <Loading v-if="connectionState == 0" message="Ładowanie scenerii..." />
     <Error v-if="connectionState == 1" />
 
-    <div class="list flex" v-if="connectionState == 2">
+    <transition name="card-anim">
-      <transition name="card-anim">
+      <StationCard
-        <StationCard
+        v-if="focusedStationInfo"
-          v-if="focusedStationInfo"
+        :stationInfo="focusedStationInfo"
-          :stationInfo="focusedStationInfo"
+        :dispatcherHistory="dispatcherHistory()"
-          :dispatcherHistory="dispatcherHistory()"
+        :exit="closeCard"
-          :exit="closeCard"
+      />
-        />
+    </transition>
-      </transition>
+    <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
-      <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
-      <section class="list-body">
+    <div class="stations-wrapper" v-if="connectionState == 2">
+      <div class="stations-body">
         <Options />
-        <Table :stations="stations" :setFocusedStation="setFocusedStation" />
+        <StationTable :stations="stations" :setFocusedStation="setFocusedStation" />
-      </section>
+      </div>
     </div>
   </div>
 </template>
@@ -28,11 +28,12 @@ import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 
-import Table from "@/components/StationsView/Table.vue";
+import Loading from "@/components/App/Loading.vue";
-import StationCard from "@/components/ui/StationCard.vue";
+import Error from "@/components/App/Error.vue";
-import Options from "@/components/ui/Options.vue";
+
-import Loading from "@/components/states/Loading.vue";
+import StationTable from "@/components/StationsView/StationTable.vue";
-import Error from "@/components/states/Error.vue";
+import StationCard from "@/components/StationsView/StationCard.vue";
+import Options from "@/components/StationsView/Options.vue";
 
 import db from "@/scripts/firebase/firebaseInit";
 
@@ -45,10 +46,10 @@ enum ConnState {
 @Component({
   components: {
     StationCard,
-    Options,
+    StationTable,
-    Table,
     Loading,
     Error,
+    Options,
   },
 })
 export default class StationsView extends Vue {
@@ -89,25 +90,11 @@ export default class StationsView extends Vue {
       (station) => station.stationName === this.focusedStationName
     );
   }
-
-  async mounted() {
-    // docs.forEach((doc) => {
-    //   console.log(doc.data());
-    // });
-    // this.$store.watch(
-    //   (state, getters) => getters.getConnectionState,
-    //   (state: ConnState) => {
-    //     this.connectionState = state;
-    //     console.log("Najs");
-    //   }
-    // );
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .stations-view {
-  position: relative;
   padding: 1rem 0;
   min-height: 100%;
 }
@@ -128,9 +115,12 @@ export default class StationsView extends Vue {
   }
 }
 
-.list-body {
+.stations-wrapper {
-  overflow: auto;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
+}
+
+.stations-body {
+  overflow: auto;
 }
 </style>

src/views/TrainsView.vue

@@ -29,7 +29,8 @@ import { Getter } from "vuex-class";
 import Station from "@/scripts/interfaces/Station";
 import Train from "@/scripts/interfaces/Train";
 
-import Loading from "@/components/states/Loading.vue";
+import Loading from "@/components/App/Loading.vue";
+
 import TrainSorter from "@/components/TrainsView/TrainSorter.vue";
 import TrainTable from "@/components/TrainsView/TrainTable.vue";