Ekran ładowania dla każdego widoku, poprawki w UI

src/App.vue

@@ -28,9 +28,7 @@
       </header>
 
       <main class="app-main">
-        <Loading v-if="connectionState == 0" />
+        <transition name="view-anim" mode="out-in">
-        <Error v-else-if="connectionState == 1" :error="errorMessage" />
-        <transition name="view-anim" mode="out-in" v-else>
           <keep-alive>
             <router-view />
           </keep-alive>
@@ -39,7 +37,6 @@
 
       <footer class="app-footer flex">
         <span>&copy; Spythere 2020</span>
-        <span>Sprawdź, co nowego w Stacjowniku!</span>
       </footer>
     </div>
   </div>
@@ -56,12 +53,6 @@ import Loading from "@/components/states/Loading.vue";
 import Clock from "@/components/ui/Clock.vue";
 import Options from "@/components/ui/Options.vue";
 
-enum ConnState {
-  Loading = 0,
-  Error = 1,
-  Connected = 2,
-}
-
 @Component({
   components: { Error, Loading, Clock, Options },
 })
@@ -73,15 +64,9 @@ export default class App extends Vue {
   @Action("initStations") initStations;
 
   errorMessage: string = "";
-  connectionState: ConnState = ConnState.Loading;
 
   mounted() {
     this.initStations();
-
-    this.$store.watch(
-      (state, getters) => getters.getConnectionState,
-      (state: ConnState) => (this.connectionState = state)
-    );
   }
 }
 </script>
@@ -93,18 +78,19 @@ export default class App extends Vue {
 
 .view-anim {
   &-enter {
-    transform: translateX(-10%);
+    // transform: translateX(-5%);
-    opacity: 0;
+    opacity: 0.02;
   }
 
   &-leave-to {
-    transform: translateX(10%);
+    // transform: translateX(5%);
-    opacity: 0;
+    opacity: 0.02;
   }
 
   &-enter-active,
   &-leave-active {
     transition: all $animDuration $animType;
+    min-height: 100%;
   }
 }
 

src/components/StationsView/Table.vue

@@ -0,0 +1,370 @@
+<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 stations"
+        :key="i + station.stationHash"
+        @click="() => { if(station.online) 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/states/Error.vue

@@ -9,7 +9,7 @@
 
 <script>
 export default {
-  props: ["error"]
+  props: ["error"],
 };
 </script>
 
@@ -19,10 +19,16 @@ export default {
   justify-content: center;
   align-items: center;
 
-  min-height: 100%;
-
   flex-direction: column;
 
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
+  text-align: center;
+
   font-size: calc(1rem + 1.5vw);
   font-weight: 550;
 

src/components/states/Loading.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="loading">Stój, pobieranie danych...</div>
+  <div class="loading">{{message}}</div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
+import { Vue, Component, Prop } from "vue-property-decorator";
-export default Vue.extend({});
+
+@Component
+export default class Loading extends Vue {
+  @Prop() readonly message!: string;
+}
 </script>
 
 <style lang="scss" scoped>
@@ -15,6 +19,12 @@ export default Vue.extend({});
 
   min-height: 100%;
 
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+
   font-size: calc(0.75rem + 1vw);
 
   color: #fdc62f;

src/components/ui/List.vue

@@ -1,418 +0,0 @@
-<template>
-  <div class="list flex">
-    <transition name="card-anim">
-      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
-    </transition>
-    <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
-
-    <section class="list-body">
-      <Options />
-
-      <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="() => { if(station.online) 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>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component } from "vue-property-decorator";
-import { Getter } from "vuex-class";
-
-import styleMixin from "@/mixins/styleMixin";
-
-import StationCard from "@/components/ui/StationCard.vue";
-import Options from "@/components/ui/Options.vue";
-
-import Station from "@/scripts/interfaces/Station";
-
-const ascSVG = require("@/assets/icon-arrow-asc.svg");
-const descSVG = require("@/assets/icon-arrow-desc.svg");
-
-@Component({
-  components: { StationCard, Options },
-})
-export default class List extends styleMixin {
-  focusedStationName: string = "";
-  icons: { ascSVG; descSVG } = { ascSVG, descSVG };
-  sorterActive: { index: number; type: number } = { index: 0, type: 1 };
-
-  @Getter("getStations") stations!: Station[];
-
-  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;
-  }
-
-  setFocusedStation(name: string) {
-    if (this.focusedStationName == name) this.focusedStationName = "";
-    else this.focusedStationName = name;
-  }
-
-  closeCard() {
-    this.focusedStationName = "";
-  }
-
-  get focusedStationInfo() {
-    return this.stations.find(
-      (station) => station.stationName === this.focusedStationName
-    );
-  }
-
-  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);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "../../styles/variables.scss";
-@import "../../styles/responsive.scss";
-
-.card-anim {
-  &-enter-active,
-  &-leave-active {
-    transition: all 0.25s ease-in-out;
-  }
-
-  &-enter,
-  &-leave-to {
-    transform: translate(-45%, -50%);
-    opacity: 0;
-  }
-}
-
-.list-body {
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.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/styles/variables.scss

@@ -9,5 +9,5 @@ $warningCol: #ff975b;
 $accentCol: #ffc014;
 $accent2Col: #ff3d5d;
 
-$animDuration: 200ms;
+$animDuration: 100ms;
 $animType: ease-out;

src/views/StationsView.vue

@@ -1,27 +1,108 @@
 <template>
   <div class="stations-view">
-    <List />
+    <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">
+        <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
+      </transition>
+      <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
+
+      <section class="list-body">
+        <Options />
+        <Table :stations="stations" :setFocusedStation="setFocusedStation" />
+      </section>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
+import { Getter } from "vuex-class";
 
-// import Options from "@/components/ui/Options.vue";
+import Station from "@/scripts/interfaces/Station";
-import List from "@/components/ui/List.vue";
+
+import Table from "@/components/StationsView/Table.vue";
+import StationCard from "@/components/ui/StationCard.vue";
+import Options from "@/components/ui/Options.vue";
+import Loading from "@/components/states/Loading.vue";
+import Error from "@/components/states/Error.vue";
+
+enum ConnState {
+  Loading = 0,
+  Error = 1,
+  Connected = 2,
+}
 
 @Component({
-  components: { List },
+  components: {
+    StationCard,
+    Options,
+    Table,
+    Loading,
+    Error,
+  },
 })
-export default class Home extends Vue {
+export default class StationsView extends Vue {
-  mounted() {}
+  focusedStationName: string = "";
+
+  @Getter("getStations") stations!: Station[];
+  @Getter("getConnectionState") connectionState!: ConnState;
+
+  closeCard() {
+    this.focusedStationName = "";
+  }
+
+  setFocusedStation(name: string) {
+    if (this.focusedStationName == name) this.focusedStationName = "";
+    else this.focusedStationName = name;
+  }
+
+  get focusedStationInfo() {
+    return this.stations.find(
+      (station) => station.stationName === this.focusedStationName
+    );
+  }
+
+  mounted() {
+    // 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%;
+}
 
-  max-height: 100%;
+@import "../styles/variables.scss";
+@import "../styles/responsive.scss";
+
+.card-anim {
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.25s ease-in-out;
+  }
+
+  &-enter,
+  &-leave-to {
+    transform: translate(-45%, -50%);
+    opacity: 0;
+  }
+}
+
+.list-body {
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/views/TrainsView.vue

@@ -1,6 +1,8 @@
 <template>
   <section class="trains-view">
-    <ul class="list" v-if="listLoaded">
+    <Loading v-if="!listLoaded" message="Liczenie pociągów..." />
+
+    <ul class="list" v-else>
       <li class="item" v-for="train in computedTrains" :key="train.timetableId">
         <a :href="'https://rj.td2.info.pl/train#' + train.trainNo + ';eu'" target="_blank">
           <span class="info">
@@ -88,11 +90,17 @@ import { Getter } from "vuex-class";
 
 import Station from "@/scripts/interfaces/Station";
 
+import Loading from "@/components/states/Loading.vue";
+
 import axios from "axios";
 
 const unknownTrainImage = require("@/assets/unknown.png");
 
-@Component
+@Component({
+  components: {
+    Loading,
+  },
+})
 export default class TrainsView extends Vue {
   speedIcon: string = require("@/assets/icon-speed.svg");
   massIcon: string = require("@/assets/icon-mass.svg");
@@ -269,20 +277,27 @@ export default class TrainsView extends Vue {
 
 .trains-view {
   display: flex;
-  align-items: center;
+  justify-content: center;
-  flex-direction: column;
+
+  position: relative;
+  min-height: 100%;
 }
 
 .list {
   margin: 2rem 0;
   overflow: auto;
 
-  max-width: 2000px;
+  width: 90%;
+  max-width: 1024px;
+
+  @include smallScreen() {
+    width: 100%;
+  }
 }
 
 .item {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
 
   font-size: calc(0.5rem + 0.5vw);
 
@@ -299,8 +314,8 @@ export default class TrainsView extends Vue {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(3, 1fr);
 
-    font-size: 0.9rem;
+    font-size: 0.8rem;
-    gap: 0.2em 0;
+    gap: 0.4em 0;
     // grid-template-columns: repeat(3, 1fr);
   }
 }
@@ -350,12 +365,14 @@ export default class TrainsView extends Vue {
   }
 
   &-loco img {
-    max-width: 12em;
+    width: 13em;
+    max-width: 190px;
   }
 }
 
 .stats {
   width: 100%;
+
   &-general {
     display: flex;
 
@@ -370,6 +387,7 @@ export default class TrainsView extends Vue {
 
     img {
       margin: 0 0.3em;
+      width: 1.8em;
     }
   }