Poprawki interfejsu

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stacjownik",
-  "version": "0.1.0",
+  "version": "1.4.7",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/StationsView/StationTable.vue

@@ -80,10 +80,8 @@
             </td>
 
             <td class="station_status">
-              <span
+              <span class="status-badge" :class="station.statusID"
-                class="status-badge"
+                >{{ $t(`status.${station.statusID}`) }}
-                :class="station.statusID"
-              >{{ $t(`status.${station.statusID}`) }}
                 {{
                   station.statusID == "online" ? station.statusTimeString : ""
                 }}
@@ -98,9 +96,10 @@
               <span
                 v-if="station.online"
                 :style="calculateExpStyle(station.dispatcherExp)"
-              >{{
+                >{{
                   2 > station.dispatcherExp ? "L" : station.dispatcherExp
-                }}</span>
+                }}</span
+              >
             </td>
 
             <td class="station_tracks twoway">
@@ -183,10 +182,7 @@
               />
             </td>
 
-            <td
+            <td class="station_users" :class="{ inactive: !station.online }">
-              class="station_users"
-              :class="{ inactive: !station.online }"
-            >
               <span>
                 <span class="highlight">{{ station.currentUsers }}</span>
                 /
@@ -194,10 +190,7 @@
               </span>
             </td>
 
-            <td
+            <td class="station_spawns" :class="{ inactive: !station.online }">
-              class="station_spawns"
-              :class="{ inactive: !station.online }"
-            >
               <span class="highlight">{{ station.spawns.length }}</span>
             </td>
 
@@ -206,7 +199,7 @@
               :class="{ inactive: !station.online }"
             >
               <span class="highlight">
-                {{ station.scheduledTrains.length }} &nbsp;
+                {{ station.scheduledTrains.length }}
               </span>
               /
               <span style="color: #bbb">{{
@@ -220,17 +213,11 @@
       </table>
     </div>
 
-    <div
+    <div class="no-stations" v-if="stations.length == 0 && isDataLoaded">
-      class="no-stations"
-      v-if="stations.length == 0 && isDataLoaded"
-    >
       {{ $t("sceneries.no-stations") }}
     </div>
 
-    <div
+    <div class="no-stations" v-else-if="!isDataLoaded">
-      class="no-stations"
-      v-else-if="!isDataLoaded"
-    >
       {{ $t("app.loading") }}
     </div>
   </section>

src/components/TrainsView/TrainTable.vue

@@ -45,19 +45,22 @@
 
             <div class="info_timetable" v-else>
               <div class="timetable_general">
-                <span class="warning twr" v-if="train.timetableData.TWR">
+                <span class="timetable_hero">
-                  TWR
+                  <span class="timetable_warnings">
-                </span>
+                    <span class="warning twr" v-if="train.timetableData.TWR">
+                      TWR
+                    </span>
+                    <span class="warning skr" v-if="train.timetableData.SKR">
+                      SKR
+                    </span>
+                  </span>
 
-                <span class="warning skr" v-if="train.timetableData.SKR">
+                  <span>
-                  SKR
+                    <strong>{{ train.timetableData.category }}</strong>
-                </span>
+                    {{ train.trainNo }} |
-
+                    <span style="color: gold">
-                <span>
+                      {{ train.timetableData.routeDistance }} km
-                  <strong>{{ train.timetableData.category }}</strong>
+                    </span>
-                  {{ train.trainNo }} |
-                  <span style="color: gold">
-                    {{ train.timetableData.routeDistance }} km
                   </span>
                 </span>
 
@@ -423,6 +426,10 @@ img.train-image {
 
 .info {
   .timetable {
+    &_hero {
+      display: flex;
+    }
+
     &_general {
       display: flex;
       justify-content: space-between;
@@ -441,6 +448,8 @@ img.train-image {
       display: flex;
       align-items: center;
 
+      font-weight: bold;
+
       margin: 5px 0;
 
       font-size: 1.1em;
@@ -450,6 +459,26 @@ img.train-image {
       margin-bottom: 10px;
       font-size: 0.7em;
     }
+
+    &_warnings {
+      display: flex;
+      color: black;
+
+      .warning {
+        padding: 0.1em 0.65em;
+        margin-right: 0.35em;
+
+        font-weight: bold;
+
+        &.twr {
+          background: var(--clr-twr);
+        }
+
+        &.skr {
+          background: var(--clr-skr);
+        }
+      }
+    }
   }
 }
 
@@ -537,25 +566,6 @@ img.train-image {
   }
 }
 
-.warning {
-  padding: 0.1em 0.8em;
-  margin-right: 0.5em;
-
-  display: flex;
-  align-items: center;
-  color: black;
-
-  font-weight: bold;
-
-  &.twr {
-    background: var(--clr-twr);
-  }
-
-  &.skr {
-    background: var(--clr-skr);
-  }
-}
-
 @include smallScreen() {
   .info-bottom {
     text-align: center;

src/i18n.ts

@@ -1,27 +0,0 @@
-import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'
-
-/**
- * Load locale messages
- * 
- * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
- * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
- */
-function loadLocaleMessages(): LocaleMessages<VueMessageType> {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages: LocaleMessages<VueMessageType> = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
-}
-
-export default createI18n({
-  legacy: false,
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
-  messages: loadLocaleMessages()
-})

src/locales/en.json

@@ -113,8 +113,8 @@
     "cars": "Car count",
     "EZT": "EMU",
     "SZT": "DMU",
-    "loco-electric": "ELECTRIC LOCO",
+    "loco-electric": "Electric loco",
-    "loco-diesel": "DIESEL LOCO"
+    "loco-diesel": "Diesel loco"
   },
   "journal": {
     "title": "SCENERY ACTIVITY JOURNAL",

src/router/index.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 import StationsView from "@/views/StationsView.vue";
 
@@ -24,7 +24,7 @@ const routes: Array<RouteRecordRaw> = [
 ]
 
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(),
   routes,
 })
 

src/views/SceneryView.vue

@@ -11,14 +11,8 @@
       </action-button>
     </div>
 
-    <div
+    <div class="scenery-wrapper" v-if="stationInfo">
-      class="scenery-wrapper"
+      <SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
-      v-if="stationInfo"
-    >
-      <SceneryInfo
-        :stationInfo="stationInfo"
-        :timetableOnly="timetableOnly"
-      />
 
       <SceneryTimetable
         :stationInfo="stationInfo"