chore: added active train's rolling stock vmax

This commit is contained in:
2024-06-03 20:09:15 +02:00
parent 26b1ec246d
commit dbd73d448d
4 changed files with 50 additions and 8 deletions
+1
View File
@@ -226,6 +226,7 @@ export default defineComponent({
min-height: 100vh;
overflow: hidden;
position: relative;
}
.app_main {
+2 -5
View File
@@ -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) {
+34
View File
@@ -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({
+13 -3
View File
@@ -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%;
}
}