Dodano tłumaczenie na angielski; poprawki w wyglądzie

src/App.vue

@@ -10,9 +10,31 @@
       <header class="app_header">
         <div class="header_body">
           <span class="header_brand">
-            <span>Stacj</span>
+            <span>
-            <img src="@/assets/trainlogo.png" alt="trainlogo" />
+              <span>Stacj</span>
-            <span>wnik</span>
+              <img src="@/assets/trainlogo.png" alt="trainlogo" />
+              <span>wnik</span>
+            </span>
+
+            <span class="brand_lang">
+              <span
+                class="lang pl"
+                @click="changeLang('en')"
+                :class="{ current: currentLang == 'pl' }"
+                v-if="currentLang == 'pl'"
+              >
+                <img :src="iconPL" alt="icon-pl" />
+              </span>
+
+              <span
+                class="lang en"
+                @click="changeLang('pl')"
+                :class="{ current: currentLang == 'en' }"
+                v-if="currentLang == 'en'"
+              >
+                <img :src="iconEN" alt="icon-en" />
+              </span>
+            </span>
           </span>
 
           <span class="header_info">
@@ -27,20 +49,19 @@
 
           <span class="header_links">
             <router-link class="route" active-class="route-active" to="/" exact
-              >{{ $t("app.sceneries") }} </router-link
+              >{{ $t("app.sceneries") }}
-            >/
+            </router-link>
-            <router-link
+            /
-              class="route"
+            <router-link class="route" active-class="route-active" to="/trains"
-              active-class="route-active"
+              >{{ $t("app.trains") }}
-              to="/trains"
+            </router-link>
-              >{{ $t("app.trains") }}</router-link
+
-            >/
+            <!-- <router-link
-            <router-link
               class="route"
               active-class="route-active"
               to="/history"
               >{{ $t("app.journal") }}</router-link
-            >
+            > -->
           </span>
         </div>
       </header>
@@ -58,7 +79,11 @@
         <a href="https://td2.info.pl/profile/?u=20777" target="_blank">
           Spythere
         </a>
-        2021 | v{{ VERSION }}
+        2021 | v{{ VERSION }} | [<a
+          target="_blank"
+          href="https://paypal.me/spythere"
+          >{{ $t("app.support") }}!</a
+        >]
       </footer>
     </div>
   </div>
@@ -80,11 +105,16 @@ export default class App extends Vue {
   @Action("synchronizeData") synchronizeData;
   @Getter("getAllData") data;
 
-  private VERSION = "1.4.2";
+  private VERSION = "1.4.3";
 
   hasReleaseNotes = false;
   updateModalVisible = false;
 
+  currentLang = "pl";
+
+  iconEN = require("@/assets/icon-en.svg");
+  iconPL = require("@/assets/icon-pl.svg");
+
   mounted() {
     this.synchronizeData();
 
@@ -98,6 +128,8 @@ export default class App extends Vue {
           this.$i18n.locale = "en";
           break;
       }
+
+      this.currentLang = this.$i18n.locale;
     }
 
     if (StorageManager.getStringValue("version") != this.VERSION) {
@@ -112,6 +144,13 @@ export default class App extends Vue {
       !StorageManager.getBooleanValue("version_notes_read");
   }
 
+  changeLang(lang: string) {
+    this.$i18n.locale = lang;
+    this.currentLang = lang;
+
+    console.log("Switched to: " + lang);
+  }
+
   toggleUpdateModal() {
     this.updateModalVisible = !this.updateModalVisible;
     StorageManager.setBooleanValue("version_notes_read", true);
@@ -178,7 +217,7 @@ export default class App extends Vue {
   }
 
   @include smallScreen {
-    font-size: 0.65rem;
+    font-size: 0.6rem;
   }
 }
 
@@ -220,6 +259,7 @@ export default class App extends Vue {
 
 .header {
   &_brand {
+    position: relative;
     width: 100%;
     font-size: 4.5em;
 
@@ -228,6 +268,19 @@ export default class App extends Vue {
     img {
       width: 0.8em;
     }
+
+    .brand_lang {
+      position: absolute;
+      right: 0;
+
+      transform: translate(110%, -40%);
+
+      img {
+        width: 0.5em;
+      }
+
+      cursor: pointer;
+    }
   }
 
   &_info {
@@ -268,7 +321,6 @@ export default class App extends Vue {
 
 // FOOTER
 footer.app_footer {
-  font-size: calc(0.5rem + 0.5vw);
   max-width: 100%;
   padding: 0.3rem;
 

src/assets/icon-pl.svg

@@ -0,0 +1,4 @@
+<svg width="39" height="23" viewBox="0 0 39 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="39" height="23" fill="#FF0F0F"/>
+<rect width="39" height="11.5" fill="white"/>
+</svg>

src/components/SceneryView/SceneryInfo.vue

@@ -207,6 +207,8 @@ export default class SceneryInfo extends styleMixin {
   }
 
   navigateToTrain(trainNo: number) {
+    console.log(trainNo);
+
     this.$router.push({
       name: "TrainsView",
       params: { queryTrain: trainNo.toString() },

src/components/SceneryView/SceneryTimetable.vue

@@ -100,9 +100,8 @@
             <span
               class="arrival-time begins"
               v-if="scheduledTrain.stopInfo.beginsHere"
+              v-html="$t('timetables.begins')"
             >
-              ROZPOCZYNA
-              <div>BIEG</div>
             </span>
             <span class="arrival-time" v-else>
               {{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
@@ -122,8 +121,9 @@
             <span
               class="departure-time terminates"
               v-if="scheduledTrain.stopInfo.terminatesHere"
-              >KOŃCZY BIEG</span
+              v-html="$t('timetables.terminates')"
             >
+            </span>
             <span class="departure-time" v-else>
               {{ scheduledTrain.stopInfo.departureTimeString }} ({{
                 scheduledTrain.stopInfo.departureDelay

src/components/StationsView/StationTable.vue

@@ -80,9 +80,12 @@
             </td>
 
             <td class="station_status">
-              <span class="status-badge" :class="station.statusID">{{
+              <span class="status-badge" :class="station.statusID"
-                $t(`status.${station.statusID}`)
+                >{{ $t(`status.${station.statusID}`) }}
-              }}</span>
+                {{
+                  station.statusID == "online" ? station.statusTimeString : ""
+                }}
+              </span>
             </td>
 
             <td class="station_dispatcher-name">

src/components/TrainsView/TrainTable.vue

@@ -333,7 +333,7 @@ export default class TrainTable extends Vue {
   &-stops {
     margin-bottom: 10px;
 
-    font-size: 0.9em;
+    font-size: 0.85em;
   }
 
   &-bottom {

src/lang/en.json

@@ -3,12 +3,14 @@
     "sceneries": "SCENERIES",
     "trains": "TRAINS",
     "journal": "JOURNAL",
-    "loading": "Loading data..."
+    "loading": "Loading data...",
+    "support": "Support the project"
   },
   "descs": {},
   "status": {
+    "online": "UNTIL ",
     "free": "FREE",
-    "ending": "ENDING",
+    "ending": "ENDS SOON",
     "not-signed": "NOT SIGNED IN",
     "no-limit": "NO LIMIT",
     "unavailable": "UNAVAILABLE",
@@ -99,6 +101,8 @@
     "departed-away": "Departed",
     "arriving": "En route",
     "stopped": "Stopped",
-    "terminated": "Terminated"
+    "terminated": "Terminated",
+    "begins": "BEGINS HERE",
+    "terminates": "TERMINATES <br /> HERE"
   }
 }

src/lang/pl.json

@@ -3,10 +3,12 @@
     "sceneries": "SCENERIE",
     "trains": "POCIĄGI",
     "journal": "DZIENNIK",
-    "loading": "Pobieranie danych..."
+    "loading": "Pobieranie danych...",
+    "support": "Wspomóż projekt"
   },
   "descs": {},
   "status": {
+    "online": "DO ",
     "free": "WOLNA",
     "ending": "KOŃCZY",
     "not-signed": "NIEZALOGOWANY",
@@ -99,6 +101,8 @@
     "departed-away": "Odjechał",
     "arriving": "W drodze",
     "stopped": "Postój",
-    "terminated": "Skończył bieg"
+    "terminated": "Skończył bieg",
+    "begins": "ROZPOCZYNA <br /> BIEG",
+    "terminates": "KOŃCZY BIEG"
   }
 }

src/scripts/interfaces/Station.ts

@@ -49,6 +49,7 @@ export default interface Station {
   online: boolean;
   // occupiedTo: string;
   statusTimestamp: number;
+  statusTimeString: string;
   statusID: string;
 
   stationTrains: Train[];

src/store/store.ts

@@ -30,6 +30,25 @@ interface ITimetableData {
   followingSceneries: string[];
 }
 
+interface IOnlineStationData {
+  dispatcherId: number;
+  dispatcherName: string;
+  dispatcherIsSupporter: boolean;
+  stationName: string;
+  stationHash: string;
+  region: string;
+  maxUsers: number;
+  currentUsers: number;
+  spawn: number;
+  lastSeen: number;
+  dispatcherExp: number;
+  nameFromHeader: string;
+  spawnString: string;
+  networkConnectionString: string;
+  isOnline: number;
+  dispatcherRate: number;
+}
+
 const URLs = {
   stations: 'https://api.td2.info.pl:9640/?method=getStationsOnline',
   trains: 'https://api.td2.info.pl:9640/?method=getTrainsOnline',
@@ -68,39 +87,6 @@ const getStatusID = (stationStatus: any) => {
   return 'unavailable';
 };
 
-const getStatusLabel = (stationStatus: any) => {
-  if (!stationStatus) return 'NIEZALOGOWANY';
-
-  const statusCode = stationStatus[2];
-  const statusTimestamp = stationStatus[3];
-
-  switch (statusCode) {
-    case 0:
-      if (statusTimestamp - Date.now() > 21000000) return 'BEZ LIMITU';
-
-      return `DO ${new Date(statusTimestamp).toLocaleTimeString('en-US', {
-        hour12: false,
-        hour: '2-digit',
-        minute: '2-digit',
-      })}`;
-
-    case 1:
-      return 'Z/W';
-
-    case 2:
-      if (statusTimestamp == 0) return 'KOŃCZY';
-      break;
-
-    case 3:
-      return 'BRAK MIEJSCA';
-
-    default:
-      break;
-  }
-
-  return 'NIEDOSTĘPNY';
-};
-
 const getStatusTimestamp = (stationStatus: any) => {
   if (!stationStatus) return -2;
 
@@ -138,7 +124,8 @@ const parseSpawns = (spawnString: string) => {
 };
 
 const getTimestamp = (date: string) => (date ? new Date(date).getTime() : 0);
-const timestampToTime = (timestamp: number) =>
+
+const timestampToString = (timestamp: number) =>
   new Date(timestamp).toLocaleTimeString('pl-PL', {
     hour: '2-digit',
     minute: '2-digit',
@@ -190,22 +177,6 @@ export default class Store extends VuexModule {
   //ACTIONS
   @Action
   async synchronizeData() {
-    // axios
-    //   .get(URLs.sceneryInfo)
-    //   .then(response => {
-    //     const data: ISceneryInfoData[] = response.data;
-
-    //     this.context.commit('setSceneryData', data);
-    //     this.context.commit('setSceneryDataStatus', Status.Loaded);
-
-    //     this.context.dispatch('fetchOnlineData');
-    //     setInterval(() => this.context.dispatch('fetchOnlineData'), 20000);
-    //   })
-    //   .catch(err => {
-    //     this.context.commit('setSceneryDataStatus', Status.Error);
-    //     console.error('Ups! Coś poszło nie tak!', err);
-    //   });
-
     this.context.commit('setSceneryData');
     this.context.commit('setSceneryDataStatus', Status.Loaded);
 
@@ -237,16 +208,16 @@ export default class Store extends VuexModule {
           mainStop: point.pointName.includes('strong'),
 
           arrivalLine: point.arrivalLine,
-          arrivalTimeString: timestampToTime(point.arrivalTime),
+          arrivalTimeString: timestampToString(point.arrivalTime),
           arrivalTimestamp: arrivalTimestamp,
-          arrivalRealTimeString: timestampToTime(point.arrivalRealTime),
+          arrivalRealTimeString: timestampToString(point.arrivalRealTime),
           arrivalRealTimestamp: arrivalRealTimestamp,
           arrivalDelay: point.arrivalDelay,
 
           departureLine: point.departureLine,
-          departureTimeString: timestampToTime(point.departureTime),
+          departureTimeString: timestampToString(point.departureTime),
           departureTimestamp: departureTimestamp,
-          departureRealTimeString: timestampToTime(point.departureRealTime),
+          departureRealTimeString: timestampToString(point.departureRealTime),
           departureRealTimestamp: departureRealTimestamp,
           departureDelay: point.departureDelay,
 
@@ -285,7 +256,7 @@ export default class Store extends VuexModule {
   async fetchOnlineData() {
     Promise.all([axios.get(URLs.stations), axios.get(URLs.trains), axios.get(URLs.dispatchers)])
       .then(async response => {
-        const onlineStationsData = response[0].data.message;
+        const onlineStationsData: IOnlineStationData[] = response[0].data.message;
         const onlineTrainsData = await response[1].data.message;
         const onlineDispatchersData = await response[2].data.message;
 
@@ -315,10 +286,11 @@ export default class Store extends VuexModule {
             stationTrains,
             statusTimestamp,
             statusID,
+            statusTimeString: timestampToString(statusTimestamp),
           });
 
           return acc;
-        }, []);
+        }, [] as any);
 
         let updatedTrainList = await Promise.all(
           onlineTrainsData
@@ -429,63 +401,16 @@ export default class Store extends VuexModule {
       online: false,
       statusTimestamp: -3,
       statusID: 'free',
+      statusTimeString: '',
       stationTrains: [],
       scheduledTrains: [],
       spawns: [],
     }));
   }
 
-  // @Mutation setSceneryData(data: ISceneryInfoData[]) {
-  //   this.sceneryData = data;
-
-  //   this.stationList = data.map(scenery => ({
-  //     stationName: scenery.stationName,
-  //     stationURL: scenery.stationURL,
-  //     stationLines: scenery.stationLines,
-  //     stationProject: scenery.stationProject,
-  //     reqLevel: scenery.reqLevel,
-  //     supportersOnly: scenery.supportersOnly,
-  //     signalType: scenery.signalType,
-  //     controlType: scenery.controlType,
-  //     SBL: scenery.SBL,
-  //     TWB: scenery.twoWayBlock,
-  //     routes: {
-  //       oneWay: {
-  //         catenary: scenery.routesOneWayCatenary,
-  //         noCatenary: scenery.routesOneWayOther,
-  //       },
-  //       twoWay: {
-  //         catenary: scenery.routesTwoWayCatenary,
-  //         noCatenary: scenery.routesToWayOther,
-  //       },
-  //     },
-  //     checkpoints: scenery.checkpoints.length ? scenery.checkpoints.map(cp => ({ checkpointName: cp, scheduledTrains: [] })) : null,
-  //     stops: scenery.stops,
-
-  //     default: scenery.default,
-  //     nonPublic: scenery.nonPublic,
-  //     unavailable: scenery.unavailable,
-
-  //     stationHash: '',
-  //     maxUsers: 0,
-  //     currentUsers: 0,
-  //     dispatcherName: '',
-  //     dispatcherRate: 0,
-  //     dispatcherExp: -1,
-  //     dispatcherId: 0,
-  //     dispatcherIsSupporter: false,
-  //     online: false,
-  //     occupiedTo: 'WOLNA',
-  //     statusTimestamp: -3,
-  //     stationTrains: [],
-  //     scheduledTrains: [],
-  //     spawns: [],
-  //   }));
-  // }
-
   @Mutation
   private updateOnlineStations(updatedStationList: any[]) {
-    this.stationList = this.stationList.reduce((acc, station) => {
+    this.stationList = this.stationList.reduce((acc: Station[], station) => {
       const onlineStationData = updatedStationList.find(updatedStation => updatedStation.stationName === station.stationName);
       const registeredStation = JSONStationData.find(data => data[0] === station.stationName);
 
@@ -510,6 +435,7 @@ export default class Store extends VuexModule {
           online: false,
           statusID: 'free',
           statusTimestamp: -3,
+          statusTimeString: '',
           stationTrains: [],
           scheduledTrains: [],
           checkpoints: null,

src/styles/global.scss

@@ -136,7 +136,7 @@ input {
   background: #333;
   border: none;
 
-  color: #e0e0e0;
+  color: #bdbdbd;
   font-size: 0.9em;
 
   outline: none;
@@ -151,7 +151,7 @@ input {
   }
 
   &:hover {
-    background: rgba(#e0e0e0, 0.4);
+    background: #5c5c5c;
   }
 }
 

src/views/StationsView.vue

@@ -243,8 +243,6 @@ export default class StationsView extends Vue {
 .stations_view {
   position: relative;
 
-  font-size: 0.9em;
-
   padding: 1rem 0;
   min-height: 100%;
 }
@@ -267,13 +265,9 @@ export default class StationsView extends Vue {
 .bar_actions {
   display: flex;
 
-  @include smallScreen() {
-    justify-content: center;
-  }
-
   width: 100%;
 
-  font-size: 1.25em;
+  font-size: 1.15em;
 
   button {
     margin-right: 0.5em;