Redesign karty stacji, małe zmiany w wyglądzie listy

src/App.vue

@@ -124,6 +124,119 @@ input {
   box-sizing: border-box;
 }
 
+.status {
+  padding: 0.3em 0.7em;
+  border-radius: 1.3rem;
+  font-weight: 500;
+
+  background-color: #00be19;
+
+  &.free {
+    background-color: #8a8a8a;
+    font-size: 0.95em;
+  }
+
+  &.ending {
+    background-color: $accentCol;
+    color: black;
+    font-size: 0.9em;
+  }
+
+  &.no-limit {
+    background-color: #0077ae;
+    font-size: 0.9em;
+  }
+
+  &.not-signed {
+    background-color: $accent2Col;
+    font-size: 0.8em;
+  }
+
+  &.unavailable {
+    background-color: $accent2Col;
+    font-size: 0.9em;
+  }
+
+  &.brb {
+    background-color: $accentCol;
+    color: black;
+    font-size: 0.95em;
+  }
+
+  &.no-space {
+    background-color: #222;
+    color: white;
+    font-size: 0.85em;
+  }
+}
+
+.default-station {
+  font-weight: bold;
+  color: $accentCol;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+
+  overflow: auto;
+  // background: #474747;
+  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.55rem + 0.35vw);
+
+  @include smallScreen {
+    width: 95%;
+  }
+
+  &-exit {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.8em;
+
+    img {
+      width: 1.5em;
+    }
+
+    cursor: pointer;
+  }
+
+  // &-content {
+  //   display: grid;
+  //   grid-template-areas: "dispatcher dispatcher" "rating rating" "hours hours" "users spawns";
+  //   grid-template-columns: repeat(2, minmax(0, 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;
+  // }
+}
+
 .button {
   display: flex;
   align-items: center;

src/components/ui/Card.vue

@@ -151,65 +151,6 @@ export default Vue.extend({
   }
 }
 
-.card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-
-  overflow: auto;
-  background: #474747;
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 65%;
-  max-width: 650px;
-  max-height: 95%;
-
-  font-size: calc(0.6rem + 0.5vw);
-
-  @include smallScreen {
-    width: 85%;
-  }
-
-  &-exit {
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin: 0.8em;
-
-    img {
-      width: 1.3em;
-    }
-
-    cursor: pointer;
-  }
-
-  &-content {
-    display: grid;
-    grid-template-areas: "dispatcher dispatcher" "rating rating" "hours hours" "users spawns";
-    grid-template-columns: repeat(2, minmax(0, 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;

src/components/ui/LegendCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="legend-card">
+  <section class="legend-card card">
     <div class="card-exit" @click="exit">
       <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
     </div>
@@ -67,32 +67,6 @@ export default class LegendCard extends Vue {
 @import "../../styles/variables.scss";
 @import "../../styles/responsive.scss";
 
-.legend-card {
-  display: flex;
-  flex-direction: column;
-
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
-
-  overflow: auto;
-  background: #262a2e;
-
-  box-shadow: 0 0 15px 5px #474747;
-
-  width: 65%;
-  max-width: 650px;
-  max-height: 95%;
-
-  font-size: calc(0.6rem + 0.5vw);
-
-  @include smallScreen {
-    width: 85%;
-  }
-}
-
 .card {
   &-exit {
     position: absolute;
@@ -109,14 +83,11 @@ export default class LegendCard extends Vue {
   }
 
   &-title {
-    font-size: 2em;
+    font-size: 3em;
     font-weight: 700;
     color: $accentCol;
 
-    margin: 0.5em 0;
+    margin: 0.3em 0;
-  }
-
-  &-icons {
   }
 }
 
@@ -127,12 +98,13 @@ export default class LegendCard extends Vue {
   padding: 0.5em;
 
   img {
-    width: 2em;
+    width: 2.5em;
     margin-right: 0.5em;
   }
 
   span {
-    font-size: 0.9em;
+    font-size: 1.1em;
+    text-align: start;
   }
 }
 </style>

src/components/ui/List.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="list flex">
     <transition name="card-anim">
-      <Card v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :closeCard="closeCard" />
+      <StationCard v-if="focusedStationInfo" :stationInfo="focusedStationInfo" :exit="closeCard" />
     </transition>
     <!-- <div class="info" v-if="stations.length == 0">Ups! Brak stacji do wyświetlenia!</div> -->
 
@@ -41,8 +41,11 @@
 
             <td class="item-station-level">
               <span
+                v-if="station.reqLevel"
                 :style="calculateStyle(station.reqLevel)"
-              >{{ station.reqLevel ? (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="item-station-status">
@@ -63,13 +66,6 @@
               class="item-users"
             >{{station.online ? (station.currentUsers + "/" + station.maxUsers) : ""}}</td>
             <td class="item-info">
-              <!-- <img
-                v-if="station.default"
-                :src="require(`@/assets/icon-td2.svg`)"
-                alt="default"
-                title="Sceneria domyślnie dostępna w grze"
-              />-->
-
               <img
                 class="icon-info"
                 v-if="station.controlType"
@@ -141,7 +137,9 @@
 import Vue from "vue";
 import { mapGetters } from "vuex";
 
-import Card from "@/components/ui/Card.vue";
+import styleMixin from "@/mixins/styleMixin";
+
+import StationCard from "@/components/ui/StationCard.vue";
 
 const ascSVG = require("@/assets/icon-arrow-asc.svg");
 const descSVG = require("@/assets/icon-arrow-desc.svg");
@@ -149,7 +147,7 @@ const descSVG = require("@/assets/icon-arrow-desc.svg");
 export default Vue.extend({
   name: "List",
   components: {
-    Card
+    StationCard
   },
   data: () => ({
     focusedStationName: "",
@@ -201,6 +199,9 @@ export default Vue.extend({
             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;
@@ -261,13 +262,18 @@ export default Vue.extend({
 
       this.sorterActive.index = index;
     },
-    calculateStyle: (exp: string | number) => {
+    calculateStyle(exp: string | number): string {
-      const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+      const bgColor =
+        exp > -1
+          ? exp < 2
+            ? "#26B0D9"
+            : `hsl(${-exp * 5 + 100},  65%, 50%)`
+          : "#888";
+
       const fontColor = exp > 15 ? "white" : "black";
 
       return `backgroundColor: ${bgColor}; color: ${fontColor}`;
     },
-
     occupationClasses: (occupiedTo: string) => {
       let className = "";
 
@@ -329,57 +335,6 @@ export default Vue.extend({
   }
 }
 
-.status {
-  padding: 0.4em;
-  border-radius: 1rem;
-  font-weight: bold;
-
-  background-color: #00be19;
-
-  &.free {
-    background-color: #8a8a8a;
-    font-size: 0.95em;
-  }
-
-  &.ending {
-    background-color: $accentCol;
-    color: black;
-    font-size: 0.9em;
-  }
-
-  &.no-limit {
-    background-color: #0077ae;
-    font-size: 0.85em;
-  }
-
-  &.not-signed {
-    background-color: $accent2Col;
-    font-size: 0.8em;
-  }
-
-  &.unavailable {
-    background-color: $accent2Col;
-    font-size: 0.9em;
-  }
-
-  &.brb {
-    background-color: $accentCol;
-    color: black;
-    font-size: 0.95em;
-  }
-
-  &.no-space {
-    background-color: #222;
-    color: white;
-    font-size: 0.85em;
-  }
-}
-
-.default-station {
-  font-weight: bold;
-  color: $accentCol;
-}
-
 .table {
   &-wrapper {
     overflow: auto;
@@ -389,7 +344,7 @@ export default Vue.extend({
   white-space: nowrap;
   border-collapse: collapse;
 
-  font-size: calc(0.55rem + 0.35vw);
+  font-size: calc(0.7rem + 0.2vw);
 
   @include smallScreen() {
     font-size: 0.75rem;

src/components/ui/StationCard.vue

@@ -0,0 +1,374 @@
+<template>
+  <section class="card station-card">
+    <div class="card-exit" @click="exit">
+      <img :src="require('@/assets/icon-exit.svg')" alt="exit icon" />
+    </div>
+
+    <div class="card-content">
+      <div class="main">
+        <div class="main-content">
+          <span
+            class="main-level flex"
+            v-if="stationInfo.reqLevel > -1"
+          >{{parseInt(stationInfo.reqLevel) < 2 ? "L" : stationInfo.reqLevel}}</span>
+          <span class="main-general">
+            <div class="main-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="main-hash">{{stationInfo.stationHash}}</div>
+          </span>
+        </div>
+      </div>
+
+      <div class="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"
+        />
+      </div>
+
+      <div class="dispatcher">
+        <div
+          class="dispatcher-level flex"
+          :style="calculateStyle(stationInfo.dispatcherExp)"
+        >{{computedExp}}</div>
+        <div class="dispatcher-info">
+          <div class="dispatcher-name">
+            <a
+              :href="'https://td2.info.pl/profile/?u=' + stationInfo.dispatcherId"
+              target="_blank"
+              rel="noopener noreferrer"
+            >{{stationInfo.dispatcherName}}</a>
+          </div>
+
+          <div class="dispatcher-rate">
+            <img :src="require(`@/assets/icon-like.svg`)" alt="like-icon" />
+            <span>{{stationInfo.dispatcherRate}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="hours">
+        <div class="hours-title title">STATUS</div>
+        <span
+          class="status"
+          :class="statusClasses(stationInfo.occupiedTo)"
+        >{{stationInfo.occupiedTo}}</span>
+      </div>
+
+      <div class="spawns flex flex-column">
+        <h3 class="spawns-title title">OTWARTE SPAWNY</h3>
+        <div class="spawns-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 flex flex-column">
+        <h3 class="users-title title">GRACZE NA STACJI</h3>
+        <div class="users-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>
+  </section>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-property-decorator";
+
+@Component
+export default class StationCard extends Vue {
+  @Prop() stationInfo;
+  @Prop() exit!: void;
+
+  calculateStyle(exp: number): string {
+    const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+    const fontColor = exp > 15 ? "white" : "black";
+
+    return `backgroundColor: ${bgColor}; color: ${fontColor}`;
+  }
+
+  statusClasses(status: string) {
+    let className = "";
+
+    switch (status) {
+      case "WOLNA":
+        className = "free";
+        break;
+      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;
+      case "Z/W":
+        className = "brb";
+        break;
+      case "BRAK MIEJSCA":
+        className = "no-space";
+        break;
+      default:
+        break;
+    }
+
+    return className;
+  }
+
+  get computedExp(): string {
+    return this.stationInfo.dispatcherExp < 2
+      ? "L"
+      : `${this.stationInfo.dispatcherExp}`;
+  }
+}
+</script>
+
+<style lang="scss">
+@import "../../styles/variables.scss";
+@import "../../styles/responsive.scss";
+
+.title {
+  color: $accentCol;
+  font-weight: 600;
+  margin: 0.5em 0;
+}
+
+.card {
+  padding: 2em;
+  text-align: center;
+
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+
+  &-content {
+    display: grid;
+    grid-template-areas: "main main" "icons icons" "dispatcher hours" "users spawns";
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    min-width: 200px;
+
+    gap: 1.5em;
+
+    @include smallScreen() {
+      grid-template-areas: "main main" "icons icons" "dispatcher dispatcher" "hours hours" "users spawns";
+    }
+  }
+}
+
+.main {
+  grid-area: main;
+  text-align: center;
+
+  &-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include smallScreen() {
+      flex-direction: column;
+    }
+  }
+
+  &-level {
+    background: $accentCol;
+    color: black;
+
+    font-size: 2.5em;
+    font-weight: 600;
+
+    border-radius: 50%;
+    width: 1.7em;
+    height: 1.7em;
+    margin: 0.3em 0.5em;
+  }
+
+  &-hash {
+    color: #9d9d9d;
+  }
+
+  &-name {
+    color: $accentCol;
+    font-weight: 600;
+    font-size: 2.3em;
+    text-transform: uppercase;
+  }
+}
+
+.icons {
+  grid-area: icons;
+
+  display: flex;
+  justify-content: center;
+
+  img {
+    max-width: 3em;
+    margin: 0 0.4em;
+  }
+}
+
+.dispatcher {
+  grid-area: dispatcher;
+
+  display: flex;
+  justify-content: center;
+
+  &-level {
+    font-size: 2.5em;
+    font-weight: bold;
+
+    max-width: 2em;
+
+    background: forestgreen;
+  }
+
+  &-info {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+
+    padding: 0.5em;
+  }
+
+  &-name {
+    font-size: 1.35em;
+    font-weight: bold;
+    padding-bottom: 0.5em;
+  }
+
+  &-rate {
+    display: flex;
+    font-size: 1.3em;
+
+    span {
+      margin: 0 0.3em;
+      color: $accentCol;
+    }
+
+    img {
+      width: 1.2em;
+    }
+  }
+}
+
+.hours {
+  grid-area: hours;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: column;
+
+  .status {
+    font-size: 1.1em;
+  }
+}
+
+.users {
+  grid-area: users;
+
+  &-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    & > .user {
+      padding: 0.3rem;
+      margin: 0.3rem;
+      border: 1px solid white;
+      border-radius: 0.4em;
+
+      &.borderless {
+        border: none;
+      }
+    }
+  }
+}
+
+.spawns {
+  grid-area: spawns;
+
+  overflow: hidden;
+
+  &-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    & > .spawn {
+      padding: 0.3em 0.4em;
+      margin: 0.3em;
+      background: #585858;
+
+      text-align: center;
+    }
+  }
+}
+</style>

src/mixins/styleMixin.ts

@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+// You can declare mixins as the same style as components.
+@Component
+export default class styleMixin extends Vue {
+    calculateStyle(exp: string | number): string {
+        const bgColor = exp < 2 ? "#26B0D9" : `hsl(${-exp * 5 + 100},  65%, 50%)`;
+        const fontColor = exp > 15 ? "white" : "black";
+
+        return `backgroundColor: ${bgColor}; color: ${fontColor}`;
+    }
+}

src/store/modules/store.ts

@@ -167,7 +167,7 @@ class Store extends VuexModule {
                                 if (statusTimestamp - Date.now() > 21000000)
                                     statusLabel = "BEZ LIMITU";
                                 else
-                                    statusLabel = new Date(statusTimestamp)
+                                    statusLabel = "DO " + new Date(statusTimestamp)
                                         .toLocaleTimeString('en-US',
                                             { hour12: false, hour: '2-digit', minute: '2-digit' });
                                 break;
@@ -226,7 +226,7 @@ class Store extends VuexModule {
     private filterStations() {
         this.filteredStations = this.stations.filter(station => {
             if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
-            if (!station.reqLevel) return true;
+            if (!station.reqLevel || station.reqLevel == "-1") return true;
 
             if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
             if (station.online && this.filters['occupied']) return false;
@@ -302,7 +302,7 @@ class Store extends VuexModule {
             const toUpdate: any = this.stations.find(station => station.stationName === updated.stationName);
 
             if (!toUpdate) {
-                this.stations.push({ ...updated, online: true });
+                this.stations.push({ ...updated, online: true, reqLevel: "-1" });
             }
         })