Poprawki w headerze i stopce

src/App.scss

@@ -91,6 +91,11 @@ footer.app_footer {
   max-width: 100%;
   padding: 0.5em;
 
+  img {
+    width: 1.1em;
+    vertical-align: text-bottom;
+  }
+
   z-index: 10;
 
   background: #111;

src/App.vue

@@ -23,6 +23,8 @@
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
       {{ new Date().getUTCFullYear() }} |
       <a :href="releaseURL" target="_blank">v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a>
+      <br />
+      <a href="https://discord.gg/x2mpNN3svk"><img :src="getIcon('discord', 'png')" alt="">&nbsp;<b>Discord Stacjownika</b></a>
 
       <div style="display: none">&int; ukryta taktyczna całka do programowania w HTMLu</div>
     </footer>

src/components/App/AppHeader.vue

@@ -6,16 +6,6 @@
           <img :src="getIcon('pl')" alt="icon-pl" @click="changeLang('en')" v-if="currentLang == 'pl'" />
           <img :src="getIcon('en', 'jpg')" alt="icon-en" @click="changeLang('pl')" v-else />
         </span>
-
-        <span class="icons-bottom">
-          <a href="https://www.paypal.com/paypalme/spythere" target="_blank">
-            <img :src="getIcon('dollar')" alt="icon paypal" />
-          </a>
-
-          <a href="https://discord.gg/x2mpNN3svk" target="_blank">
-            <img :src="getIcon('discord', 'png')" alt="icon discord" />
-          </a>
-        </span>
       </div>
 
       <div class="header_body">
@@ -33,6 +23,12 @@
           <div class="info_counter">
             <img :src="getIcon('dispatcher')" alt="icon dispatcher" />
             <span class="text--primary">{{ onlineDispatchersCount }}</span>
+
+            <!-- <span class="g-tooltip">
+              <b class="text--primary">{{ factorU }}U</b>
+              <div class="content">Test</div>
+            </span> -->
+
             <span class="text--grayed"> / </span>
             <span class="text--primary">{{ onlineTrainsCount }}</span>
             <img :src="getIcon('train')" alt="icon train" />
@@ -98,11 +94,17 @@ export default defineComponent({
     onlineTrainsCount() {
       return this.store.trainList.filter((train) => train.online).length;
     },
+
     onlineDispatchersCount() {
       return this.store.stationList.filter(
         (station) => station.onlineInfo && station.onlineInfo.region == this.store.region.id
       ).length;
     },
+
+    factorU() {
+      return this.onlineDispatchersCount == 0 ? '-' : (this.onlineTrainsCount / this.onlineDispatchersCount).toFixed(2);
+    },
+
     computedRegions() {
       return options.regions.map((region) => {
         const regionStationCount =
@@ -135,22 +137,19 @@ export default defineComponent({
 
 .header {
   &_body {
-    max-width: 21em;
     position: relative;
-
-    @include smallScreen {
-      max-width: 18em;
-    }
   }
 
   &_container {
     display: flex;
     justify-content: center;
-    position: relative;
 
-    width: 1350px;
-    padding: 0.5em 0.3em 0 0.3em;
     border-radius: 0 0 1em 1em;
+
+    @include smallScreen {
+      position: relative;
+      margin-top: 0.5em;
+    }
   }
 
   &_brand {
@@ -158,6 +157,8 @@ export default defineComponent({
 
     img {
       width: 100%;
+      max-width: 20em;
+
       margin: 0 auto;
     }
   }
@@ -165,9 +166,7 @@ export default defineComponent({
   &_info {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
-    max-width: 100%;
+    font-size: 1.15em;
-
-    font-size: 1.2em;
   }
 
   &_links {
@@ -184,57 +183,20 @@ export default defineComponent({
     position: absolute;
     right: 0;
     top: 0;
-    height: 100%;
 
-    display: flex;
+    padding: 0.5em;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    padding: 0.5em 0.5em;
 
-    @include smallScreen() {
+    @include smallScreen {
-      right: auto;
+      transform: translateX(70%);
-      left: 0.75em;
-      padding: 0;
-
-      align-items: center;
     }
   }
 }
 
 // ICONS
-.icons {
+.icons-top {
-  position: relative;
+  img {
-
+    width: 2.5em;
-  &-top {
+    cursor: pointer;
-    img {
-      width: 2.5em;
-
-      cursor: pointer;
-    }
-
-    margin-bottom: 0.5em;
-  }
-
-  &-bottom {
-    display: flex;
-
-    a {
-      margin-left: 0.6em;
-      user-select: none;
-    }
-
-    img {
-      width: 1.9em;
-    }
-
-    @include smallScreen() {
-      flex-direction: column;
-
-      a {
-        margin: 0.25em 0;
-      }
-    }
   }
 }
 

src/components/App/StatusIndicator.vue

@@ -303,9 +303,11 @@ export default defineComponent({
 
 .status-indicator {
   position: absolute;
-  left: 110%;
   bottom: 0;
+  right: 0;
   z-index: 100;
+
+  transform: translateX(1.5em);
 }
 
 .indicator {
@@ -330,7 +332,7 @@ export default defineComponent({
     background-color: #171717;
     border-radius: 0.75em;
 
-    min-width: 13em;
+    width: 13em;
     text-align: center;
     overflow: none;
 
@@ -354,22 +356,16 @@ export default defineComponent({
     }
 
     @include midScreen() {
-      left: 50%;
+      left: auto;
-      top: 100%;
+      right: 200%;
-
-      transform: translate(-50%, 0);
-      margin-left: 0;
-      margin-top: 0.75em;
 
       &::before {
-        border-left: 10px solid transparent;
         border-right: 10px solid transparent;
-        border-bottom: 10px solid #171717;
+        border-left: 12px solid #171717;
+        right: 0;
+        left: auto;
 
-        top: 0;
+        transform: translate(100%, -50%);
-        left: 50%;
-
-        transform: translate(-50%, -100%);
       }
     }
 
@@ -379,3 +375,4 @@ export default defineComponent({
   }
 }
 </style>
+

src/components/Global/SelectBox.vue

@@ -3,6 +3,10 @@
     <div class="select-box_content">
       <button class="selected" @click="toggleBox">
         <span>{{ computedSelectedItem.selectedValue || computedSelectedItem.value }}</span>
+
+        <div class="arrow">
+          <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
+        </div>
       </button>
 
       <ul class="options" :ref="(el) => (listRef = el as Element)">
@@ -21,10 +25,6 @@
         </li>
       </ul>
     </div>
-
-    <div class="arrow">
-      <img :src="listOpen ? getIcon('arrow-asc') : getIcon('arrow-desc')" alt="arrow-icon" />
-    </div>
   </div>
 </template>
 
@@ -129,46 +129,22 @@ export default defineComponent({
 }
 
 .select-box {
-  position: relative;
+  display: flex;
-  width: auto;
+  align-items: center;
 }
 
 .arrow {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  padding: 0;
-
   img {
     vertical-align: middle;
     width: 1.35em;
   }
-
-  transform: translateY(-50%);
-
-  pointer-events: none;
 }
 
 button.selected {
-  background-color: transparent;
   color: paleturquoise;
 
-  font-size: 1em;
   font-weight: bold;
-
   padding: 0.1em 0.5em;
-  margin-right: 2em;
-
-  display: flex;
-
-
-  width: 100%;
-  cursor: pointer;
-
-  border: none;
-  outline: none;
-
-  text-align: left;
 
   &:focus {
     background-color: #262626;

src/components/JournalView/JournalTimetablesList.vue

@@ -1,7 +1,7 @@
 <template>
   <transition-group class="journal-list" tag="ul" name="list-anim">
     <li
-      v-for="{ timetable, sceneryList, revesedHistory, ...item } in computedTimetableHistory"
+      v-for="{ timetable, sceneryList, stockHistoryComp, ...item } in computedTimetableHistory"
       class="journal_item"
       :key="timetable.id"
       @click="item.showExtra.value = !item.showExtra.value"
@@ -130,7 +130,7 @@
         </button>
 
         <!-- Dodatkowe informacje -->
-        <div class="info-extended" v-if="timetable.stockString && item.showExtra.value">
+        <div class="info-extended" v-if="timetable.stockString && timetable.stockMass && item.showExtra.value">
           <hr />
 
           <div class="stock-specs">
@@ -140,35 +140,44 @@
             </span>
             <span class="badge specs-badge">
               <span>{{ $t('journal.stock-length') }}</span>
-              <span>{{ timetable.stockLength }}m</span>
+              <span>
+                {{
+                  item.currentHistoryIndex.value == 0
+                    ? timetable.stockLength
+                    : stockHistoryComp[item.currentHistoryIndex.value].stockLength || timetable.stockLength
+                }}m
+              </span>
             </span>
             <span class="badge specs-badge">
               <span>{{ $t('journal.stock-mass') }}</span>
-              <span>{{ Math.floor(timetable.stockMass! / 1000) }}t</span>
+              <span>
+                {{
+                  Math.floor(
+                    (item.currentHistoryIndex.value == 0
+                      ? timetable.stockMass!
+                      : stockHistoryComp[item.currentHistoryIndex.value].stockMass || timetable.stockMass) / 1000
+                  )
+                }}t
+              </span>
             </span>
           </div>
 
-          <div class="stock-history" v-if="revesedHistory.length > 1">
+          <div class="stock-history" v-if="stockHistoryComp.length > 1">
             <button
               class="btn--action"
-              v-for="(sh, i) in revesedHistory"
+              v-for="(sh, i) in stockHistoryComp"
               :data-checked="i == item.currentHistoryIndex.value"
               @click.stop="item.currentHistoryIndex.value = i"
             >
-              {{
+              {{ sh.updatedAt }}
-                new Date(Number(sh.split('@')[0])).toLocaleTimeString($i18n.locale, {
-                  hour: '2-digit',
-                  minute: '2-digit',
-                })
-              }}
             </button>
           </div>
 
           <ul class="stock-list">
             <li
-              v-for="(car, i) in (revesedHistory.length <= 1
+              v-for="(car, i) in (item.currentHistoryIndex.value == 0
                 ? timetable.stockString
-                : revesedHistory[item.currentHistoryIndex.value].split('@')[1]
+                : stockHistoryComp[item.currentHistoryIndex.value].stockString
               ).split(';')"
               :key="i"
             >
@@ -209,7 +218,22 @@ export default defineComponent({
       return this.timetableHistory.map((timetable) => ({
         timetable,
         sceneryList: this.getSceneryList(timetable),
-        revesedHistory: timetable.stockHistory.slice().reverse(),
+        stockHistoryComp: timetable.stockHistory
+          .slice()
+          .reverse()
+          .map((h) => {
+            const historyData = h.split('@');
+
+            return {
+              updatedAt: new Date(Number(historyData[0])).toLocaleTimeString(this.$i18n.locale, {
+                hour: '2-digit',
+                minute: '2-digit',
+              }),
+              stockString: historyData[1],
+              stockMass: Number(historyData[2]) || undefined,
+              stockLength: Number(historyData[3]) || undefined,
+            };
+          }),
         showExtra: ref(false),
         currentHistoryIndex: ref(0),
       }));
@@ -362,8 +386,8 @@ ul.stock-list {
   flex-wrap: wrap;
   gap: 0.5em;
   margin-top: 1em;
-  
+
-  button[data-checked=true] {
+  button[data-checked='true'] {
     color: $accentCol;
   }
 }

src/components/StationsView/StationTable.vue

@@ -54,9 +54,7 @@
             </td>
 
             <td>
-              <b>
+              {{ station.generalInfo?.abbr }}
-                {{ station.generalInfo?.abbr }}
-              </b>
             </td>
 
             <td class="station_level">

src/scripts/utils/apiURLs.ts

@@ -1,7 +1,7 @@
 export const URLs = {
   stacjownikAPI:
     import.meta.env.VITE_APP_API_DEV == 1 && !import.meta.env.PROD
-      ? 'http://localhost:3000'
+      ? 'http://localhost:3001'
       : 'https://spythere.pl',
   stacjownikAPIDev: 'localhost:3000',
 };