Migracja projektu z React na Vue

src/App.vue

@@ -9,12 +9,15 @@
         </div>
       </header>
 
-      <div class="app-info"></div>
+      <div
+        class="app-info"
+      >Scenerie online: {{stations.length}} | Maszyniści online: {{ trainCount }}</div>
 
       <main class="app-main">
         <Loading v-if="connectionState == 0" />
         <Error v-else-if="connectionState == 1" :error="errorMessage" />
         <router-view v-else />
+        <!-- <router-view /> -->
       </main>
 
       <footer class="app-footer">&copy; Spythere 2020</footer>
@@ -32,7 +35,10 @@ import Loading from "@/components/states/Loading.vue";
 export default Vue.extend({
   name: "App",
   components: { Error, Loading },
-  computed: mapGetters({ stations: "getStations" }),
+  computed: mapGetters({
+    stations: "getStations",
+    trainCount: "getTrainCount"
+  }),
 
   methods: {
     ...mapActions(["fetchStations"])
@@ -44,7 +50,7 @@ export default Vue.extend({
 
   mounted() {
     this.fetchStations()
-      .then(result => console.log(result))
+      .then(() => (this.connectionState = 2))
       .catch(err => {
         this.connectionState = 1;
         this.errorMessage = err.message;
@@ -93,54 +99,16 @@ a {
   }
 }
 
-ul {
-  list-style: none;
-  padding: 0;
-}
-
-.hour {
-  padding: 0.4em;
-  border-radius: 1rem;
-
-  &.ending {
-    background-color: $accentCol;
-    color: black;
-    font-size: 0.9em;
-  }
-
-  &.no-limit {
-    // background-color: #57ae00;
-    font-size: 0.85em;
-  }
-
-  &.not-signed {
-    background-color: $accent2Col;
-    font-size: 0.8em;
-  }
-
-  &.unavailable {
-    background-color: $accent2Col;
-    font-size: 0.9em;
-  }
-}
-
-.text {
-  &--title {
-    color: #fdc62f;
-    font-size: 1em;
-  }
-
-  &--content {
-    font-size: 0.8em;
-  }
-}
-
 .app {
+  color: white;
+  overflow: hidden;
+
   &-container {
     display: grid;
     grid-template-rows: auto auto 1fr auto;
     grid-template-columns: minmax(0, 1fr);
 
+    min-width: 0;
     min-height: 100vh;
   }
 
@@ -152,8 +120,6 @@ ul {
     flex-direction: column;
     background: #333;
 
-    color: white;
-
     & > .brand-name {
       font-size: calc(1rem + 3.5vw);
 

src/components/ui/Card.vue

@@ -1,11 +1,360 @@
-<template></template>
+<template>
+  <div class="card" v-if="stationInfo">
+    <div class="card-exit" @click="closeCard">X</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"
+        />
+      </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">BRAK</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
 
 <script lang="ts">
 import Vue from "vue";
 export default Vue.extend({
-  name: "Card"
+  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;
+  }
+}
+
+.card {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  flex-direction: column;
+
+  z-index: 2;
+
+  transform: translate(-50%, -50%);
+  background: #474747;
+
+  max-height: 95%;
+
+  overflow: auto;
+
+  width: 70%;
+  max-width: 550px;
+
+  box-shadow: 0 0 15px 5px #474747;
+
+  font-size: calc(0.6rem + 0.5vw);
+
+  @include smallScreen {
+    width: 85%;
+  }
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    padding: 1rem;
+
+    font-size: calc(1rem + 0.7vw);
+
+    cursor: pointer;
+  }
+
+  &-content {
+    display: grid;
+    grid-template-areas: "dispatcher dispatcher" "rating rating" "hours hours" "users spawns";
+    grid-template-columns: repeat(2, 1fr);
+
+    align-items: center;
+    text-align: center;
+
+    padding: 1em;
+
+    & > div {
+      text-align: center;
+      padding: 0.2em;
+    }
+  }
+
+  &-upper {
+    background: #959595;
+    text-align: center;
+
+    padding: 0.2em;
+  }
+}
+
+.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 {
+    padding: 0.5rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    & > img {
+      width: 2.5em;
+      margin: 0 0.5em;
+    }
+  }
+}
+
+.dispatcher {
+  grid-area: dispatcher;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include smallScreen() {
+    flex-direction: column;
+  }
+
+  &-exp {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 2px solid #ffbb00;
+    border-radius: 50%;
+    font-size: 1.3em;
+
+    width: 2em;
+    height: 2em;
+  }
+
+  &-name {
+    font-size: 1.4em;
+    font-weight: 600;
+
+    margin-left: 0.6rem;
+
+    @include smallScreen() {
+      margin-left: 0;
+      margin-top: 0.2em;
+    }
+
+    text-align: center;
+  }
+}
+
+.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;
+
+      &--no-border {
+        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/components/ui/List.vue

@@ -1,11 +1,304 @@
-<template></template>
+<template>
+  <div class="list">
+    <Card :stationInfo="focusedStationInfo" :closeCard="closeCard" />
+    <div class="table-wrapper">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Stacja</th>
+            <th>Dyżurny</th>
+            <th>Poziom</th>
+            <th>Maszyniści</th>
+            <th>Zajęta do</th>
+            <th>
+              Informacje
+              <div>ogólne</div>
+            </th>
+            <th>
+              Szlaki
+              <div>2-torowe</div>
+            </th>
+            <th>
+              Szlaki
+              <div>1-torowe</div>
+            </th>
+          </tr>
+        </thead>
+
+        <tr
+          class="table-item"
+          v-for="(station, i) in computedStations"
+          :key="i + station.stationHash"
+          @click="() => { setFocusedStation(station.stationName) }"
+        >
+          <td
+            class="station-name"
+            :class="station.default && 'default-station'"
+          >{{station.stationName}}</td>
+
+          <td class="disptacher-name">{{station.dispatcherName}}</td>
+          <td class="dispatcher-exp">
+            <span :style="calculateStyle(station.dispatcherExp)">{{station.dispatcherExp}}</span>
+          </td>
+          <td class="users">{{station.currentUsers}}/{{station.maxUsers}}</td>
+          <td class="hours">
+            <span class="hour" :class="occupationClasses(station.occupiedTo)">{{station.occupiedTo}}</span>
+          </td>
+          <td class="info">
+            <img
+              v-if="station.controlType"
+              :src="require(`@/assets/icon-${station.controlType}.svg`)"
+              :alt="station.controlType"
+              :title="'Sterowanie ' + station.controlType"
+            />
+
+            <img
+              v-if="station.signalType"
+              :src="require(`@/assets/icon-${station.signalType}.svg`)"
+              :alt="station.signalType"
+              :title="'Sygnalizacja ' + station.signalType"
+            />
+
+            <img
+              v-if="station.SBL && station.SBL !== ''"
+              :src="require(`@/assets/icon-SBL.svg`)"
+              alt="SBL"
+              title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
+            />
+          </td>
+
+          <td class="tracks twoway">
+            <span
+              v-if="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.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="tracks oneway">
+            <span
+              v-if="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.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>
+  </div>
+</template>
 
 <script lang="ts">
 import Vue from "vue";
+import { mapGetters } from "vuex";
+
+import Card from "@/components/ui/Card.vue";
+
 export default Vue.extend({
-  name: "List"
+  name: "List",
+  components: {
+    Card
+  },
+  data: () => ({
+    focusedStationName: ""
+  }),
+  computed: {
+    ...mapGetters({ stations: "getStations" }),
+    computedStations() {
+      return this.stations.sort((a: any, b: any) =>
+        a.stationName < b.stationName ? -1 : 1
+      );
+    },
+    focusedStationInfo() {
+      console.log(this.focusedStationName);
+
+      return this.stations.find(
+        (station: any) => station.stationName === this.focusedStationName
+      );
+    }
+  },
+  methods: {
+    calculateStyle: (exp: string | number) => {
+      const bgColor =
+        exp === "L" ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+      const fontColor = exp > 15 ? "white" : "black";
+
+      return `backgroundColor: ${bgColor}; color: ${fontColor}`;
+    },
+
+    occupationClasses: (occupiedTo: string) => {
+      let className = "";
+
+      switch (occupiedTo) {
+        case "KOŃCZY":
+          className = "ending";
+          break;
+        case "NIEZALOGOWANY":
+          className = "not-signed";
+          break;
+        case "BEZ LIMITU":
+          className = "no-limit";
+          break;
+        case "NIEDOSTĘPNY":
+          className = "unavailable";
+          break;
+        default:
+          break;
+      }
+
+      return className;
+    },
+
+    setFocusedStation(name: string) {
+      this.focusedStationName = name;
+    },
+
+    closeCard() {
+      this.focusedStationName = "";
+    }
+  }
 });
 </script>
 
 <style lang="scss" scoped>
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+.hour {
+  padding: 0.4em;
+  border-radius: 1rem;
+
+  &.ending {
+    background-color: $accentCol;
+    color: black;
+    font-size: 0.9em;
+  }
+
+  &.no-limit {
+    // background-color: #57ae00;
+    font-size: 0.85em;
+  }
+
+  &.not-signed {
+    background-color: $accent2Col;
+    font-size: 0.8em;
+  }
+
+  &.unavailable {
+    background-color: $accent2Col;
+    font-size: 0.9em;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}
+
+.default-station {
+  color: $secondaryCol;
+}
+
+.table {
+  &-wrapper {
+    display: flex;
+    justify-content: center;
+
+    overflow-x: auto;
+  }
+
+  display: block;
+  overflow-y: hidden;
+
+  white-space: nowrap;
+  border-collapse: collapse;
+
+  font-size: calc(0.6rem + 0.5vw);
+  cursor: pointer;
+
+  thead th {
+    padding: 0.8rem;
+    background-color: #444;
+  }
+
+  tr {
+    background-color: #5c5b5b;
+
+    &:nth-child(even) {
+      background-color: rgb(102, 101, 101);
+      color: white;
+
+      a {
+        color: white;
+      }
+    }
+
+    &:hover,
+    &:focus {
+      background-color: #818181;
+      // transform: scale(1.2);
+    }
+
+    & > td {
+      padding: 0.3rem 1rem;
+      margin: 0 3rem;
+      text-align: center;
+      vertical-align: middle;
+
+      @include smallScreen() {
+        margin: 0;
+        padding: 0.1rem 0.5rem;
+      }
+    }
+
+    .dispatcher-exp {
+      & > span {
+        display: block;
+        width: 2em;
+        height: 2em;
+        line-height: 2em;
+        margin: 0 auto;
+      }
+    }
+
+    .info,
+    .tracks {
+      img {
+        width: 2.2em;
+        margin: 0 0.2em;
+        vertical-align: middle;
+      }
+    }
+
+    .no-catenary {
+      background-color: #939393;
+    }
+
+    .catenary {
+      background-color: #009dce;
+    }
+
+    .track {
+      margin: 0 0.3rem;
+      padding: 0.5em;
+    }
+  }
+}
 </style>

src/styles/responsive.scss

@@ -1,5 +1,5 @@
-@mixin midScreen() {
+@mixin smallScreen() {
-    @media only screen and (min-width: 850px) {
+    @media only screen and (max-width: 850px) {
         @content;
     }
 }

src/styles/variables.scss

@@ -1,5 +1,5 @@
 $primaryCol: #333;
-$secondaryCol: #fdad17;
+$secondaryCol: #01e733;
 
 $bgCol: #525252;
 

src/views/Home.vue

@@ -1,15 +1,25 @@
 <template>
-  <div class="home">Hello Vue!</div>
+  <div class="home">
+    <List />
+  </div>
 </template>
 
 <script lang="ts">
 import { Vue, Component } from "vue-property-decorator";
 
-@Component
+import List from "@/components/ui/List.vue";
+
+@Component({
+  components: { List }
+})
 export default class Home extends Vue {
   mounted() {}
 }
 </script>
 
 <style lang="scss" scoped>
+.home {
+  overflow: auto;
+  padding: 1rem;
+}
 </style>