From dbd73d448d3f7253434340dc17343b80ee7dbb3f Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Mon, 3 Jun 2024 20:09:15 +0200
Subject: [PATCH] chore: added active train's rolling stock vmax

---
 src/App.vue                             |  1 +
 src/components/Tooltip/Tooltip.vue      |  7 ++---
 src/components/TrainsView/TrainInfo.vue | 34 +++++++++++++++++++++++++
 src/styles/global.scss                  | 16 +++++++++---
 4 files changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 36cf3e5..63d6a30 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -226,6 +226,7 @@ export default defineComponent({
 
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .app_main {
diff --git a/src/components/Tooltip/Tooltip.vue b/src/components/Tooltip/Tooltip.vue
index 0433a4b..060d312 100644
--- a/src/components/Tooltip/Tooltip.vue
+++ b/src/components/Tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tooltip" v-show="tooltipStore.type" ref="preview">
+  <div class="tooltip" ref="preview">
     <component v-if="tooltipStore.type" :is="tooltipStore.type" />
   </div>
 </template>
@@ -35,10 +35,7 @@ export default defineComponent({
           let translateX = '0',
             translateY = '30px';
 
-          if (clientWidth < 500) {
-            previewEl.style.left = '50%';
-            translateX = '-50%';
-          } else if (val[0] <= boxWidth / 2) {
+          if (val[0] <= boxWidth / 2) {
             previewEl.style.left = '0';
             translateX = '0px';
           } else if (val[0] >= clientWidth - boxWidth / 2) {
diff --git a/src/components/TrainsView/TrainInfo.vue b/src/components/TrainsView/TrainInfo.vue
index 66edfb0..eea0c4e 100644
--- a/src/components/TrainsView/TrainInfo.vue
+++ b/src/components/TrainsView/TrainInfo.vue
@@ -131,6 +131,18 @@
         <div>
           <img src="/images/icon-speed.svg" alt="speed icon" />
           {{ train.speed }} km/h
+
+          <span v-if="maxSpeed != Infinity">
+            &bull;
+            <em
+              class="text--grayed"
+              style="text-decoration: underline dotted"
+              tabindex="0"
+              data-tooltip="Maksymalna prędkość na podstawie pojazdów w składzie - nie bierze pod uwagę masy hamowania"
+            >
+              {{ maxSpeed }} km/h
+            </em>
+          </span>
         </div>
       </div>
 
@@ -191,6 +203,28 @@ export default defineComponent({
     };
   },
 
+  computed: {
+    maxSpeed() {
+      return this.train.stockList.reduce((acc, stockName) => {
+        const stockVehicleInfo = this.apiStore.vehiclesData?.vehicleList.find(
+          (v) => v[0] == stockName.split(':')[0]
+        );
+
+        if (!stockVehicleInfo) return acc;
+
+        const stockVehicleProps = this.apiStore.vehiclesData?.vehicleProps.find(
+          (v) => v.type == stockVehicleInfo[1]
+        );
+
+        if (!stockVehicleProps) return acc;
+
+        if (stockVehicleProps.speed < acc) return stockVehicleProps.speed;
+
+        return acc;
+      }, Infinity);
+    }
+  },
+
   methods: {
     navigateToJournal() {
       this.$router.push({
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 12fa47c..9342ec8 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -302,14 +302,15 @@ a.a-button {
 [data-tooltip]:hover::after,
 [data-tooltip]:focus::after {
   position: absolute;
-  transform: translate(10px, -50%);
+  transform: translate(0, -50%);
 
   content: attr(data-tooltip);
   color: white;
-  background-color: #171717;
+  background-color: #333;
+  box-shadow: 0 0 5px 2px #aaa;
   border-radius: 0.5em;
   padding: 0.5em;
-  margin: 0 0.25em;
+  margin: 0 0.5em;
   max-width: 300px;
   z-index: 100;
 }
@@ -317,3 +318,12 @@ a.a-button {
 [data-tooltip] {
   cursor: help;
 }
+
+@include smallScreen {
+  [data-tooltip]:hover::after,
+  [data-tooltip]:focus::after {
+    transform: translate(-50%, 2em);
+    left: 50%;
+    width: 100%;
+  }
+}