Poprawki wyglądu appbaru, dodanie wsparcia dla niewpisanych scenerii

public/index.html

@@ -6,6 +6,8 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;700&display=swap"
+    rel="stylesheet">
   <title>Stacjownik</title>
 </head>
 

src/App.vue

@@ -7,16 +7,29 @@
           <img src="@/assets/trainlogo.png" alt="trainlogo" />
           <span>wnik</span>
         </div>
-        <span class="online">Scenerie online: {{stationCount}} | Maszyniści online: {{ trainCount }}</span>
       </header>
 
-      <div class="app-bar flex flex-spaced">
+      <div class="app-bar">
-        <div class="bar-content">
+        <div class="bar-content flex flex-spaced">
           <div class="bar-left">
             <Options />
           </div>
 
-          <div class="bar-right"></div>
+          <div class="bar-center">
+            <Clock />
+          </div>
+
+          <div class="bar-right">
+            <span class="counter dispatchers">
+              <img src="@/assets/icon-dispatcher.svg" alt="icon dispatcher" />
+              {{stationCount}}
+            </span>
+
+            <span class="counter trains">
+              {{trainCount}}
+              <img src="@/assets/icon-train.svg" alt="icon train" />
+            </span>
+          </div>
         </div>
       </div>
 
@@ -38,11 +51,12 @@ import { mapGetters, mapActions } from "vuex";
 import Error from "@/components/states/Error.vue";
 import Loading from "@/components/states/Loading.vue";
 import Options from "@/components/ui/Options.vue";
+import Clock from "@/components/ui/Clock.vue";
 // import ListFilter from "@/components/utils/ListFilter.vue";
 
 export default Vue.extend({
   name: "App",
-  components: { Error, Loading, Options },
+  components: { Error, Loading, Options, Clock },
   computed: mapGetters({
     stations: "getStations",
     trainCount: "getTrainCount",
@@ -79,6 +93,19 @@ export default Vue.extend({
   font-size: 16px;
 }
 
+::-webkit-scrollbar {
+  width: 15px;
+
+  &-track {
+    background: #222;
+  }
+
+  &-thumb {
+    border-radius: 1rem;
+    background: #777;
+  }
+}
+
 html {
   scroll-behavior: smooth;
 }
@@ -171,6 +198,8 @@ ul {
   align-items: center;
   justify-content: center;
 
+  width: 100%;
+
   &-spaced {
     justify-content: space-between;
   }
@@ -183,8 +212,8 @@ ul {
 .app {
   background: $bgCol;
   color: white;
-  width: 100%;
+
-  overflow: hidden;
+  font-size: calc(1rem + 2.1vw);
 
   &-container {
     display: grid;
@@ -197,29 +226,52 @@ ul {
 
   &-header {
     background: #333;
-    padding: 0.4rem;
+    padding: 0.1em;
 
     & > .brand-name {
-      font-size: calc(1rem + 3.5vw);
+      font-size: 1.1em;
 
       img {
-        width: calc(1rem + 2.3vw);
+        width: 0.8em;
       }
     }
 
     .online {
-      font-size: calc(0.3rem + 0.8vw);
+      font-size: 0.35em;
     }
   }
 
   &-bar {
+    display: flex;
+    justify-content: space-between;
+
     position: sticky;
-    font-size: calc(0.8rem + 0.2vw);
     top: 0;
+    font-size: 0.3em;
     background: #222;
   }
 }
 
+.bar {
+  &-right {
+    font-size: 1.35em;
+    display: flex;
+  }
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  color: $accentCol;
+
+  margin: 0 0.3em;
+
+  img {
+    width: 1.4em;
+    margin: 0 0.1em;
+  }
+}
+
 footer {
   background: #111;
   padding: 0.3rem;

src/assets/icon-dispatcher.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>

src/assets/icon-train.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="18px" height="18px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2c-4.42 0-8 .5-8 4v9.5C4 17.43 5.57 19 7.5 19L6 20.5v.5h12v-.5L16.5 19c1.93 0 3.5-1.57 3.5-3.5V6c0-3.5-3.58-4-8-4zM7.5 17c-.83 0-1.5-.67-1.5-1.5S6.67 14 7.5 14s1.5.67 1.5 1.5S8.33 17 7.5 17zm3.5-6H6V6h5v5zm5.5 6c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm1.5-6h-5V6h5v5z"/></svg>

src/components/ui/Card.vue

@@ -1,7 +1,9 @@
 <template>
   <transition name="card-anim">
     <div class="card" v-if="stationInfo">
-      <div class="card-exit" @click="closeCard">X</div>
+      <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">
@@ -190,8 +192,11 @@ export default Vue.extend({
     position: absolute;
     top: 0;
     right: 0;
-    padding: 1rem;
+    margin: 0.8em;
-    font-size: calc(1rem + 0.7vw);
+
+    img {
+      width: 1.3em;
+    }
 
     cursor: pointer;
   }

src/components/ui/Clock.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="clock">{{ formattedDate }}</section>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue";
+export default Vue.extend({
+  name: "clock",
+  data: () => ({
+    timestamp: Date.now()
+  }),
+  computed: {
+    formattedDate() {
+      return new Date(this.timestamp).toLocaleString("pl-PL");
+    }
+  },
+  mounted() {
+    setInterval(() => (this.timestamp = Date.now()), 1000);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.clock {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font-size: 1.25em;
+}
+</style>

src/components/ui/Options.vue

@@ -37,7 +37,7 @@ export default Vue.extend({
 }
 
 .button {
-  font-size: 0.9em;
+  font-size: 0.75em;
 
   img {
     width: 1.3em;

src/components/utils/ListFilter.vue

@@ -14,6 +14,7 @@
               class="option-input"
               type="checkbox"
               :name="option.name"
+              :defaultValue="option.defaultValue"
               :id="option.id"
               v-model="option.value"
               @change="handleChange"
@@ -150,8 +151,8 @@ export default Vue.extend({
         id: "free",
         name: "free",
         section: "status",
-        value: true,
+        value: false,
-        defaultValue: true,
+        defaultValue: false,
         content: "WOLNA"
       },
       {
@@ -189,7 +190,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH ZELEKTRYFIKOWANYCH"
+        content: "SZLAKI JEDNOTOROWE ZELEKTR. (MINIMUM)"
       },
       {
         id: "min-oneway-ne",
@@ -198,7 +199,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW JEDNOTOROWYCH NIEZELEKTRYFIKOWANYCH"
+        content: "SZLAKI JEDNOTOROWE NIEZELEKTR. (MINIMUM)"
       },
       {
         id: "min-twoway-e",
@@ -207,7 +208,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH ZELEKTRYFIKOWANYCH"
+        content: "SZLAKI DWUTOROWE ZELEKTR. (MINIMUM)"
       },
       {
         id: "min-twoway-ne",
@@ -216,7 +217,7 @@ export default Vue.extend({
         maxRange: 5,
         value: 0,
         defaultValue: 0,
-        content: "MINIMALNA LICZBA SZLAKÓW DWUTOROWYCH NIEZELEKTRYFIKOWANYCH"
+        content: "SZLAKI DWUTOROWE NIEELEKTR. (MINIMUM)"
       }
     ]
   }),
@@ -224,7 +225,10 @@ export default Vue.extend({
   methods: {
     ...mapActions(["setFilter", "resetFilters"]),
     handleChange(e: any) {
-      this.setFilter({ filterName: e.target.name, value: !e.target.checked });
+      this.setFilter({
+        filterName: e.target.name,
+        value: !e.target.checked
+      });
     },
     handleInput(e: any) {
       this.setFilter({
@@ -429,7 +433,7 @@ export default Vue.extend({
     display: flex;
     align-items: center;
 
-    font-size: 0.6em;
+    font-size: 0.75em;
   }
 
   &-input {

src/data/stations.json

@@ -1647,5 +1647,28 @@
         },
         "default": false,
         "nonPublic": false
+    },
+    {
+        "stationName": "Sulechów",
+        "stationURL": "https://td2.info.pl/scenerie/sulechow/",
+        "stationLines": "358,379",
+        "reqLevel": "0",
+        "supportersOnly": "NIE",
+        "signalType": "mieszana",
+        "controlType": "SPK",
+        "SBL": "",
+        "twoWayBlock": "",
+        "routes": {
+            "oneWay": {
+                "catenary": 2,
+                "noCatenary": 1
+            },
+            "twoWay": {
+                "catenary": 0,
+                "noCatenary": 0
+            }
+        },
+        "default": false,
+        "nonPublic": false
     }
 ]

src/store/modules/store.ts

@@ -50,7 +50,7 @@ class Store extends VuexModule {
         "minTwoWay": 0,
         "no-1track": false,
         "no-2track": false,
-        "free": false,
+        "free": true,
         "occupied": false,
         "ending": false
     } as const;
@@ -182,7 +182,7 @@ class Store extends VuexModule {
             })
 
         this.context.commit('updateStations', mappedStations);
-        this.context.commit('setStationCount');
+        this.context.commit('setStationCount', mappedStations.length);
         this.context.commit('filterStations');
     }
 
@@ -192,9 +192,9 @@ class Store extends VuexModule {
             if ((station.nonPublic || !station.reqLevel) && this.filters['nonPublic']) return false;
             if (!station.reqLevel) return true;
 
+            if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
             if (station.online && this.filters['occupied']) return false;
             if (!station.online && this.filters['free']) return false;
-            if (station.online && station.occupiedTo == "KOŃCZY" && this.filters['ending']) return false;
 
             if (station.default && this.filters['default']) return false;
             if (!station.default && this.filters['notDefault']) return false;
@@ -249,7 +249,7 @@ class Store extends VuexModule {
     }
 
     @Mutation
-    private updateStations(updatedStations: []) {
+    private updateStations(updatedStations: any) {
         for (let i = 0; i < this.stations.length; i++) {
             const toUpdate: any = updatedStations.find((updated: any) => updated.stationName === this.stations[i].stationName);
 
@@ -261,7 +261,19 @@ class Store extends VuexModule {
 
             this.stations[i] = { ...this.stations[i], ...toUpdate }
             this.stations[i].online = true;
+
+            updatedStations = updatedStations.filter((updated: any) => updated.stationName !== this.stations[i].stationName);
+
         }
+
+        // Dodawanie do listy online potencjalnych scenerii niewpisanych do bazy 
+        updatedStations.forEach((updated: any) => {
+            const toUpdate: any = this.stations.find(station => station.stationName === updated.stationName);
+
+            if (!toUpdate) {
+                this.stations.push({ ...updated, online: true });
+            }
+        })
     }
 
     @Mutation
@@ -270,8 +282,8 @@ class Store extends VuexModule {
     }
 
     @Mutation
-    private setStationCount() {
+    private setStationCount(count: number) {
-        this.stationCount = this.stations.filter(station => station.online).length;
+        this.stationCount = count;
     }
 
     @Mutation

src/views/Home.vue

@@ -21,5 +21,7 @@ export default class Home extends Vue {
 <style lang="scss" scoped>
 .home {
   padding: 1rem;
+
+  max-height: 100%;
 }
 </style>