mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Cleanup kodu
This commit is contained in:
@@ -1,16 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="train-table">
|
<div class="train-table">
|
||||||
<div
|
<div class="traffic-warning" v-if="distanceLimitExceeded">
|
||||||
class="traffic-warning"
|
|
||||||
v-if="distanceLimitExceeded"
|
|
||||||
>
|
|
||||||
{{ $t("trains.distance-exceeded") }}
|
{{ $t("trains.distance-exceeded") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div class="no-trains" v-if="computedTrains.length == 0 && timetableLoaded">
|
||||||
class="no-trains"
|
|
||||||
v-if="computedTrains.length == 0 && timetableLoaded"
|
|
||||||
>
|
|
||||||
{{ $t("trains.no-trains") }}
|
{{ $t("trains.no-trains") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -26,134 +20,39 @@
|
|||||||
class="train-row"
|
class="train-row"
|
||||||
v-for="(train, i) in computedTrains"
|
v-for="(train, i) in computedTrains"
|
||||||
:key="i"
|
:key="i"
|
||||||
:ref="train.timetableData && (el => { elList[train.timetableData.timetableId] = el })"
|
:ref="
|
||||||
|
train.timetableData &&
|
||||||
|
((el) => {
|
||||||
|
elList[train.timetableData.timetableId] = el;
|
||||||
|
})
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="wrapper no-timetable"
|
|
||||||
v-if="!train.timetableData"
|
|
||||||
>
|
|
||||||
<span class="info">
|
|
||||||
<div class="info-category">
|
|
||||||
<span>
|
|
||||||
{{ train.trainNo }} |
|
|
||||||
<span style="color: gold">
|
|
||||||
{{ $t("trains.no-timetable") }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="driver">
|
|
||||||
<div class="driver-info">
|
|
||||||
<span class="driver-name">
|
|
||||||
<a
|
|
||||||
:href="'https://td2.info.pl/profile/?u=' + train.driverId"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
{{ train.driverName }}
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
<span class="driver-type">
|
|
||||||
{{ train.locoType }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="driver-loco">
|
|
||||||
<img
|
|
||||||
:src="train.locoURL"
|
|
||||||
@error="onImageError"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="stats">
|
|
||||||
<div class="stats-main">
|
|
||||||
<span class="mass">
|
|
||||||
<img
|
|
||||||
:src="massIcon"
|
|
||||||
alt="icon-mass"
|
|
||||||
/>
|
|
||||||
{{ train.mass / 1000 }}t
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="speed">
|
|
||||||
<img
|
|
||||||
:src="speedIcon"
|
|
||||||
alt="icon-speed"
|
|
||||||
/>
|
|
||||||
{{ train.speed }} km/h
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="length">
|
|
||||||
<img
|
|
||||||
:src="lengthIcon"
|
|
||||||
alt="icon-length"
|
|
||||||
/>
|
|
||||||
{{ train.length }}m
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stats-position">
|
|
||||||
<span class="station">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="sceneryIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.currentStationName || "---" }}
|
|
||||||
</span>
|
|
||||||
<span class="track">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="routeIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.connectedTrack || "---" }}
|
|
||||||
</span>
|
|
||||||
<span class="signal">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="signalIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.signal || "---" }}
|
|
||||||
</span>
|
|
||||||
<span class="distance">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="distanceIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.distance || "0" }}m
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
v-else
|
|
||||||
class="wrapper"
|
class="wrapper"
|
||||||
@click="changeScheduleShowState(train.timetableData.timetableId)"
|
@click="changeScheduleShowState(train.timetableData?.timetableId)"
|
||||||
>
|
>
|
||||||
<span class="info">
|
<span class="info">
|
||||||
<div class="info-main">
|
<div class="info_timetable" v-if="!train.timetableData">
|
||||||
<span class="info-general">
|
<div class="timetable_general">
|
||||||
<span
|
<span>
|
||||||
class="warning twr"
|
{{ train.trainNo }} |
|
||||||
v-if="train.timetableData.TWR"
|
<span style="color: gold">
|
||||||
>
|
{{ $t("trains.no-timetable") }}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="info_timetable" v-else>
|
||||||
|
<div class="timetable_general">
|
||||||
|
<span class="warning twr" v-if="train.timetableData.TWR">
|
||||||
TWR
|
TWR
|
||||||
</span>
|
</span>
|
||||||
<span
|
|
||||||
class="warning skr"
|
<span class="warning skr" v-if="train.timetableData.SKR">
|
||||||
v-if="train.timetableData.SKR"
|
|
||||||
>
|
|
||||||
SKR
|
SKR
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<strong>{{ train.timetableData.category }}</strong>
|
<strong>{{ train.timetableData.category }}</strong>
|
||||||
{{ train.trainNo }} |
|
{{ train.trainNo }} |
|
||||||
@@ -161,42 +60,40 @@
|
|||||||
{{ train.timetableData.routeDistance }} km
|
{{ train.timetableData.routeDistance }} km
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="info-srjp g-tooltip">
|
<span class="timetable_srjp g-tooltip">
|
||||||
<span class="activator">
|
<span class="activator">
|
||||||
SRJP
|
SRJP
|
||||||
|
|
||||||
<img
|
<img
|
||||||
:src="
|
:src="
|
||||||
showedSchedule == train.timetableData.timetableId
|
showedSchedule == train.timetableData.timetableId
|
||||||
? ascSVG
|
? ascSVG
|
||||||
: descSVG
|
: descSVG
|
||||||
"
|
"
|
||||||
alt="arrow-icon"
|
alt="arrow-icon"
|
||||||
/>
|
/>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span class="content">
|
||||||
|
{{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<span class="content">
|
<div class="timetable_route">
|
||||||
{{ $t("trains.detailed-timetable") }} {{ train.trainNo }}
|
{{ train.timetableData.route.replace("|", " - ") }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="timetable_stops">
|
||||||
|
<span v-if="train.timetableData.followingStops.length > 2">
|
||||||
|
{{ $t("trains.via-title") }}
|
||||||
|
|
||||||
|
<span
|
||||||
|
v-html="displayStopList(train.timetableData.followingStops)"
|
||||||
|
></span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-route">
|
|
||||||
<span class="info-route-text">
|
|
||||||
<strong>
|
|
||||||
{{ train.timetableData.route.replace("|", " - ") }}
|
|
||||||
</strong>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-stops">
|
|
||||||
<span v-if="train.timetableData.followingStops.length > 2">
|
|
||||||
{{ $t("trains.via-title") }}
|
|
||||||
|
|
||||||
<span v-html="generateStopList(train.timetableData.followingStops)"></span>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@@ -214,87 +111,48 @@
|
|||||||
<span class="driver-type">
|
<span class="driver-type">
|
||||||
{{ train.locoType }}
|
{{ train.locoType }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- <div>{{ train.cars.length }} wagonów</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span class="driver-loco">
|
<span class="driver-loco">
|
||||||
<div class="driver-cars">
|
<div class="driver-cars">
|
||||||
<span v-if="train.cars.length > 0">{{ $t("trains.cars") }}: <span class="count">{{ train.cars.length }}</span></span>
|
<span v-if="train.cars.length > 0">
|
||||||
|
{{ $t("trains.cars") }}:
|
||||||
|
<span class="count">{{ train.cars.length }}</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
<span v-else>{{ displayLocoInfo(train.locoType) }}</span>
|
<span v-else>{{ displayLocoInfo(train.locoType) }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<img
|
<img
|
||||||
class="train-image"
|
class="train-image"
|
||||||
:src="train.locoURL"
|
:src="train.locoURL"
|
||||||
@error="onImageError"
|
@error="onImageError"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span class="stats">
|
<span class="stats">
|
||||||
<div class="stats-main">
|
<div class="stats-main">
|
||||||
<span class="mass">
|
<span v-for="stat in stats.main" :key="stat.name">
|
||||||
<img
|
<img
|
||||||
:src="massIcon"
|
:src="require(`@/assets/icon-${stat.name}.svg`)"
|
||||||
alt="icon-mass"
|
:alt="stat.name"
|
||||||
/>
|
/>
|
||||||
{{ train.mass / 1000 }}t
|
{{
|
||||||
</span>
|
`${~~(train[stat.name] * (stat.multiplier || 1))}${stat.unit}`
|
||||||
|
}}
|
||||||
<span class="speed">
|
|
||||||
<img
|
|
||||||
:src="speedIcon"
|
|
||||||
alt="icon-speed"
|
|
||||||
/>
|
|
||||||
{{ train.speed }} km/h
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<span class="length">
|
|
||||||
<img
|
|
||||||
:src="lengthIcon"
|
|
||||||
alt="icon-length"
|
|
||||||
/>
|
|
||||||
{{ train.length }}m
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stats-position">
|
<div class="stats-position">
|
||||||
<span class="station">
|
<span v-for="stat in stats.position" :key="stat.name">
|
||||||
<div class="stat-icon">
|
<div>
|
||||||
<img
|
<img
|
||||||
:src="sceneryIcon"
|
:src="require(`@/assets/icon-${stat.name}.svg`)"
|
||||||
alt="icon-scenery"
|
:alt="stat.name"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{{ train.currentStationName || "---" }}
|
{{ (train[stat.prop] || "---") + (stat.unit || "") }}
|
||||||
</span>
|
|
||||||
<span class="track">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="routeIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.connectedTrack || "---" }}
|
|
||||||
</span>
|
|
||||||
<span class="signal">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="signalIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.signal || "---" }}
|
|
||||||
</span>
|
|
||||||
<span class="distance">
|
|
||||||
<div class="stat-icon">
|
|
||||||
<img
|
|
||||||
:src="distanceIcon"
|
|
||||||
alt="icon-scenery"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{{ train.distance || "0" }}m
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
@@ -357,14 +215,43 @@ export default defineComponent({
|
|||||||
ascSVG: require("@/assets/icon-arrow-asc.svg"),
|
ascSVG: require("@/assets/icon-arrow-asc.svg"),
|
||||||
descSVG: require("@/assets/icon-arrow-desc.svg"),
|
descSVG: require("@/assets/icon-arrow-desc.svg"),
|
||||||
|
|
||||||
speedIcon: require("@/assets/icon-speed.svg"),
|
stats: {
|
||||||
massIcon: require("@/assets/icon-mass.svg"),
|
main: [
|
||||||
lengthIcon: require("@/assets/icon-length.svg"),
|
{
|
||||||
|
name: "mass",
|
||||||
|
unit: "t",
|
||||||
|
multiplier: 0.001,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "speed",
|
||||||
|
unit: "km/h",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "length",
|
||||||
|
unit: "m",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
distanceIcon: require("@/assets/icon-distance.svg"),
|
position: [
|
||||||
sceneryIcon: require("@/assets/icon-scenery.svg"),
|
{
|
||||||
signalIcon: require("@/assets/icon-signal.svg"),
|
name: "scenery",
|
||||||
routeIcon: require("@/assets/icon-route.svg"),
|
prop: "currentStationName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "route",
|
||||||
|
prop: "connectedTrack",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "signal",
|
||||||
|
prop: "signal",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "distance",
|
||||||
|
prop: "distance",
|
||||||
|
unit: "m",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
|
|
||||||
setup(props) {
|
setup(props) {
|
||||||
@@ -403,8 +290,8 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
changeScheduleShowState(timetableId: number) {
|
changeScheduleShowState(timetableId: number | undefined) {
|
||||||
if (timetableId < 0) return;
|
if (!timetableId || timetableId < 0) return;
|
||||||
|
|
||||||
this.showedSchedule =
|
this.showedSchedule =
|
||||||
this.showedSchedule == timetableId ? 0 : timetableId;
|
this.showedSchedule == timetableId ? 0 : timetableId;
|
||||||
@@ -425,7 +312,7 @@ export default defineComponent({
|
|||||||
imageEl.src = this.defaultLocoImage;
|
imageEl.src = this.defaultLocoImage;
|
||||||
},
|
},
|
||||||
|
|
||||||
generateStopList(stops: TrainStop[]): string | undefined {
|
displayStopList(stops: TrainStop[]): string | undefined {
|
||||||
if (!stops) return "";
|
if (!stops) return "";
|
||||||
|
|
||||||
return stops
|
return stops
|
||||||
@@ -535,12 +422,13 @@ img.train-image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
&-main {
|
.timetable {
|
||||||
display: flex;
|
&_general {
|
||||||
justify-content: space-between;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.info-srjp .activator {
|
&_srjp .activator {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
@@ -548,37 +436,19 @@ img.train-image {
|
|||||||
border-radius: 0.5em;
|
border-radius: 0.5em;
|
||||||
padding: 0.1em 0.35em;
|
padding: 0.1em 0.35em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&-general {
|
&_route {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
|
||||||
&-route {
|
margin: 5px 0;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
margin: 5px 0;
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
|
||||||
font-size: 1.1em;
|
&_stops {
|
||||||
}
|
margin-bottom: 10px;
|
||||||
|
font-size: 0.7em;
|
||||||
&-stops {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
font-size: 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-bottom {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-left: 10px;
|
|
||||||
border-radius: 0.7em;
|
|
||||||
padding: 0.2em 0.5em;
|
|
||||||
|
|
||||||
border: 1px solid white;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -594,7 +464,6 @@ img.train-image {
|
|||||||
padding: 2em 0;
|
padding: 2em 0;
|
||||||
|
|
||||||
&-info {
|
&-info {
|
||||||
margin-bottom: 1em;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
@@ -609,7 +478,7 @@ img.train-image {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-cars {
|
&-cars {
|
||||||
margin-bottom: 0.5em;
|
margin: 0.65em 0;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user