mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 05:18:11 +00:00
format & lint
This commit is contained in:
@@ -1,261 +1,283 @@
|
||||
<template>
|
||||
<div class="train-info">
|
||||
<section class="train-route">
|
||||
<div class="train_general">
|
||||
<b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
|
||||
<span class="timetable-id" v-if="train.timetableData">#{{ train.timetableData.timetableId }}</span>
|
||||
|
||||
<span class="timetable_warnings" v-if="train.timetableData?.TWR || train.timetableData?.SKR">
|
||||
<span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')">TWR</span>
|
||||
<span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')">SKR</span>
|
||||
</span>
|
||||
|
||||
<strong>
|
||||
<span v-if="train.timetableData" class="text--primary">{{ train.timetableData.category }} </span>
|
||||
<span class="train-number">{{ train.trainNo }}</span>
|
||||
</strong>
|
||||
<span>•</span>
|
||||
<b class="level-badge driver" :style="calculateExpStyle(train.driverLevel, train.isSupporter)">
|
||||
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
|
||||
</b>
|
||||
<span>{{ train.driverName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="timetable_route" v-if="train.timetableData">
|
||||
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
|
||||
<img
|
||||
v-if="getSceneriesWithComments(train.timetableData).length > 0"
|
||||
class="image-warning"
|
||||
:src="getIcon('warning')"
|
||||
:title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(train.timetableData)})`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 0.25em 0" />
|
||||
|
||||
<div class="timetable_stops" v-if="train.timetableData">
|
||||
<span v-if="train.timetableData.followingStops.length > 2">
|
||||
{{ $t('trains.via-title') }}
|
||||
<span v-html="displayStopList(train.timetableData.followingStops)"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
|
||||
<ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
|
||||
|
||||
<span class="timetable_progress-distance">
|
||||
{{ currentDistance(train.timetableData.followingStops) }} km /
|
||||
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
|
||||
|
|
||||
<span v-html="currentDelay(train.timetableData.followingStops)"></span>
|
||||
</span>
|
||||
|
||||
<div class="train-status-badges">
|
||||
<div v-if="!train.currentStationHash" class="train-badge offline">{{ $t('trains.scenery-offline') }}</div>
|
||||
<div v-if="!train.online" class="train-badge offline">Offline {{ lastSeenMessage(train.lastSeen) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="driver_position text--grayed" style="margin-top: 0.25em">
|
||||
{{ displayTrainPosition(train) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="train-stats">
|
||||
<TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />
|
||||
|
||||
<div class="text--grayed">
|
||||
{{ train.locoType }}
|
||||
<span v-if="train.stockList.length > 1">
|
||||
• {{ $t('trains.cars') }}:
|
||||
<span class="count">{{ train.stockList.length - 1 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span v-for="(stat, i) in STATS.main" :key="stat.name">
|
||||
<span v-if="i > 0"> • </span>
|
||||
<span>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }} </span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import styleMixin from '../../mixins/styleMixin';
|
||||
import trainInfoMixin from '../../mixins/trainInfoMixin';
|
||||
import Train from '../../scripts/interfaces/Train';
|
||||
import ProgressBar from '../Global/ProgressBar.vue';
|
||||
import TrainThumbnail from '../Global/TrainThumbnail.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
train: {
|
||||
type: Object as () => Train,
|
||||
required: true,
|
||||
},
|
||||
extended: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
mixins: [trainInfoMixin, imageMixin, styleMixin],
|
||||
components: { ProgressBar, TrainThumbnail },
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Global style for TrainThumbnail -->
|
||||
<style lang="scss">
|
||||
.train-stats .train-thumbnail {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/badge.scss';
|
||||
|
||||
.image-warning {
|
||||
height: 1em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.train-info {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
background-color: #1a1a1a;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.timetable-id {
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
.warning-timeout {
|
||||
background-color: #be3728;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
.timetable_stops {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.train_general {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.train-status-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.train-driver {
|
||||
&.supporter {
|
||||
color: orange;
|
||||
text-shadow: orange 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable_route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.timetable_warnings {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.timetable_progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.timetable_progress-distance {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.comments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
img {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.train-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1em 0;
|
||||
text-align: center;
|
||||
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.train_general {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.train-status-badges {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timetable_route {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timetable_progress {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comments {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="train-info">
|
||||
<section class="train-route">
|
||||
<div class="train_general">
|
||||
<b class="warning-timeout" v-if="train.isTimeout" :title="$t('trains.timeout')">?</b>
|
||||
<span class="timetable-id" v-if="train.timetableData"
|
||||
>#{{ train.timetableData.timetableId }}</span
|
||||
>
|
||||
|
||||
<span
|
||||
class="timetable_warnings"
|
||||
v-if="train.timetableData?.TWR || train.timetableData?.SKR"
|
||||
>
|
||||
<span class="train-badge twr" v-if="train.timetableData?.TWR" :title="$t('general.TWR')"
|
||||
>TWR</span
|
||||
>
|
||||
<span class="train-badge skr" v-if="train.timetableData?.SKR" :title="$t('general.SKR')"
|
||||
>SKR</span
|
||||
>
|
||||
</span>
|
||||
|
||||
<strong>
|
||||
<span v-if="train.timetableData" class="text--primary"
|
||||
>{{ train.timetableData.category }} </span
|
||||
>
|
||||
<span class="train-number">{{ train.trainNo }}</span>
|
||||
</strong>
|
||||
<span>•</span>
|
||||
<b
|
||||
class="level-badge driver"
|
||||
:style="calculateExpStyle(train.driverLevel, train.isSupporter)"
|
||||
>
|
||||
{{ train.driverLevel < 2 ? 'L' : `${train.driverLevel}` }}
|
||||
</b>
|
||||
<span>{{ train.driverName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="timetable_route" v-if="train.timetableData">
|
||||
<strong>{{ train.timetableData.route.replace('|', ' - ') }}</strong>
|
||||
<img
|
||||
v-if="getSceneriesWithComments(train.timetableData).length > 0"
|
||||
class="image-warning"
|
||||
:src="getIcon('warning')"
|
||||
:title="`${$t('trains.timetable-comments')} (${getSceneriesWithComments(
|
||||
train.timetableData
|
||||
)})`"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr style="margin: 0.25em 0" />
|
||||
|
||||
<div class="timetable_stops" v-if="train.timetableData">
|
||||
<span v-if="train.timetableData.followingStops.length > 2">
|
||||
{{ $t('trains.via-title') }}
|
||||
<span v-html="displayStopList(train.timetableData.followingStops)"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="timetable_progress" style="margin-top: 0.5em" v-if="train.timetableData">
|
||||
<ProgressBar :progressPercent="confirmedPercentage(train.timetableData.followingStops)" />
|
||||
|
||||
<span class="timetable_progress-distance">
|
||||
{{ currentDistance(train.timetableData.followingStops) }} km /
|
||||
<span class="text--primary"> {{ train.timetableData.routeDistance }} km </span>
|
||||
|
|
||||
<span v-html="currentDelay(train.timetableData.followingStops)"></span>
|
||||
</span>
|
||||
|
||||
<div class="train-status-badges">
|
||||
<div v-if="!train.currentStationHash" class="train-badge offline">
|
||||
{{ $t('trains.scenery-offline') }}
|
||||
</div>
|
||||
<div v-if="!train.online" class="train-badge offline">
|
||||
Offline {{ lastSeenMessage(train.lastSeen) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="driver_position text--grayed" style="margin-top: 0.25em">
|
||||
{{ displayTrainPosition(train) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="train-stats">
|
||||
<TrainThumbnail :name="train.locoType" :onlyFirstSegment="true" />
|
||||
|
||||
<div class="text--grayed">
|
||||
{{ train.locoType }}
|
||||
<span v-if="train.stockList.length > 1">
|
||||
• {{ $t('trains.cars') }}:
|
||||
<span class="count">{{ train.stockList.length - 1 }}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span v-for="(stat, i) in STATS.main" :key="stat.name">
|
||||
<span v-if="i > 0"> • </span>
|
||||
<span
|
||||
>{{ `${~~((train as any)[stat.name] * (stat.multiplier || 1))}${stat.unit}` }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import styleMixin from '../../mixins/styleMixin';
|
||||
import trainInfoMixin from '../../mixins/trainInfoMixin';
|
||||
import Train from '../../scripts/interfaces/Train';
|
||||
import ProgressBar from '../Global/ProgressBar.vue';
|
||||
import TrainThumbnail from '../Global/TrainThumbnail.vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
train: {
|
||||
type: Object as () => Train,
|
||||
required: true
|
||||
},
|
||||
extended: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
mixins: [trainInfoMixin, imageMixin, styleMixin],
|
||||
components: { ProgressBar, TrainThumbnail }
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Global style for TrainThumbnail -->
|
||||
<style lang="scss">
|
||||
.train-stats .train-thumbnail {
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/badge.scss';
|
||||
|
||||
.image-warning {
|
||||
height: 1em;
|
||||
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.train-info {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr;
|
||||
grid-template-rows: 1fr;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
background-color: #1a1a1a;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.timetable-id {
|
||||
color: #d2d2d2;
|
||||
}
|
||||
|
||||
.warning-timeout {
|
||||
background-color: #be3728;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
padding: 0 0.25em;
|
||||
}
|
||||
|
||||
.timetable_stops {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
.train_general {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.train-status-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.train-driver {
|
||||
&.supporter {
|
||||
color: orange;
|
||||
text-shadow: orange 0 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable_route {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.timetable_warnings {
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
}
|
||||
|
||||
.timetable_progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.timetable_progress-distance {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.comments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
font-size: 0.9em;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
img {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.train-info {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1em 0;
|
||||
text-align: center;
|
||||
|
||||
font-size: 1.15em;
|
||||
}
|
||||
|
||||
.train-stats {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.train_general {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.train-status-badges {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timetable_route {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.timetable_progress {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.comments {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,226 +1,229 @@
|
||||
<template>
|
||||
<div class="filters-options" @keydown.esc="showOptions = false">
|
||||
<div class="bg" v-if="showOptions" @click="showOptions = false"></div>
|
||||
|
||||
<button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
|
||||
<img :src="getIcon('filter2')" alt="Open filters" />
|
||||
{{ $t('options.filters') }} [F]
|
||||
<span class="active-indicator" v-if="currentOptionsActive"></span>
|
||||
</button>
|
||||
|
||||
<transition name="options-anim">
|
||||
<div class="options_wrapper" v-if="showOptions">
|
||||
<div class="options_content">
|
||||
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
|
||||
<div class="search_content">
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
ref="initFocusedElement"
|
||||
@focus="preventKeyDown = true"
|
||||
@blur="preventKeyDown = false"
|
||||
:placeholder="$t(`options.search-train`)"
|
||||
v-model="searchedTrain"
|
||||
/>
|
||||
<button class="search-exit">
|
||||
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
@focus="preventKeyDown = true"
|
||||
@blur="preventKeyDown = false"
|
||||
:placeholder="$t(`options.search-driver`)"
|
||||
v-model="searchedDriver"
|
||||
/>
|
||||
<button class="search-exit">
|
||||
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="option-title">{{ $t('options.sort-title') }}</h1>
|
||||
<div class="options_sorters">
|
||||
<button
|
||||
v-for="opt in translatedSorterOptions"
|
||||
class="sort-option btn--option"
|
||||
:data-selected="opt.id == sorterActive.id"
|
||||
@click="onSorterChange(opt)"
|
||||
>
|
||||
{{ opt.value.toUpperCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 class="option-title" v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
|
||||
|
||||
<div class="options_filters">
|
||||
<div v-for="section in Object.keys(TrainFilterSection)">
|
||||
<button
|
||||
class="btn--option"
|
||||
v-for="filter in trainFilterList.filter((f) => f.section == section)"
|
||||
:data-inactive="!filter.isActive"
|
||||
@click="onFilterChange(filter)"
|
||||
>
|
||||
{{ $t(`options.filter-${filter.id}`) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<div></div>
|
||||
<button class="btn--action" @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, PropType } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import keyMixin from '../../mixins/keyMixin';
|
||||
import ActionButton from '../Global/ActionButton.vue';
|
||||
import SelectBox from '../Global/SelectBox.vue';
|
||||
import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
|
||||
import { TrainFilter } from '../../scripts/interfaces/Trains/TrainFilter';
|
||||
|
||||
export default defineComponent({
|
||||
components: { SelectBox, ActionButton },
|
||||
mixins: [imageMixin, keyMixin],
|
||||
|
||||
props: {
|
||||
sorterOptionIds: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
required: true,
|
||||
},
|
||||
|
||||
currentOptionsActive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showOptions: false,
|
||||
lastSelectedFilter: null as TrainFilter | null,
|
||||
TrainFilterSection,
|
||||
};
|
||||
},
|
||||
|
||||
setup() {
|
||||
return {
|
||||
searchedTrain: inject('searchedTrain') as string,
|
||||
searchedDriver: inject('searchedDriver') as string,
|
||||
|
||||
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
||||
trainFilterList: inject('filterList') as TrainFilter[],
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
translatedSorterOptions() {
|
||||
return this.$props.sorterOptionIds.map((id) => ({
|
||||
id,
|
||||
value: this.$t(`options.sort-${id}`),
|
||||
}));
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Override keyMixin function
|
||||
onKeyDownFunction() {
|
||||
this.toggleShowOptions();
|
||||
},
|
||||
|
||||
toggleShowOptions() {
|
||||
this.showOptions = !this.showOptions;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
|
||||
});
|
||||
},
|
||||
|
||||
onSorterChange(item: { id: string | number; value: string }) {
|
||||
this.sorterActive.id = item.id;
|
||||
this.sorterActive.dir = -1;
|
||||
},
|
||||
|
||||
onFilterChange(filter: TrainFilter) {
|
||||
// if (this.lastSelectedFilter?.id === filter.id)
|
||||
// this.trainFilterList.forEach((tf) => (tf.isActive = filter.id === tf.id));
|
||||
|
||||
filter.isActive = !filter.isActive;
|
||||
this.lastSelectedFilter = filter;
|
||||
},
|
||||
|
||||
clearAllFilters() {
|
||||
this.trainFilterList.forEach((filter) => {
|
||||
filter.isActive = false;
|
||||
});
|
||||
},
|
||||
|
||||
resetAllFilters() {
|
||||
this.trainFilterList.forEach((filter) => {
|
||||
filter.isActive = true;
|
||||
});
|
||||
},
|
||||
|
||||
onInputClear(id: 'driver' | 'train') {
|
||||
if (id == 'driver') this.searchedDriver = '';
|
||||
if (id == 'train') this.searchedTrain = '';
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/filters_options.scss';
|
||||
|
||||
.search_content > div {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.search_content > button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.options_sorters {
|
||||
display: flex;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.options_filters > div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
gap: 0.5em;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
color: springgreen;
|
||||
font-weight: bold;
|
||||
|
||||
&[data-inactive='true'] {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="filters-options" @keydown.esc="showOptions = false">
|
||||
<div class="bg" v-if="showOptions" @click="showOptions = false"></div>
|
||||
|
||||
<button class="filter-button btn--filled btn--image" @click="toggleShowOptions" ref="button">
|
||||
<img :src="getIcon('filter2')" alt="Open filters" />
|
||||
{{ $t('options.filters') }} [F]
|
||||
<span class="active-indicator" v-if="currentOptionsActive"></span>
|
||||
</button>
|
||||
|
||||
<transition name="options-anim">
|
||||
<div class="options_wrapper" v-if="showOptions">
|
||||
<div class="options_content">
|
||||
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
|
||||
<div class="search_content">
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
ref="initFocusedElement"
|
||||
@focus="preventKeyDown = true"
|
||||
@blur="preventKeyDown = false"
|
||||
:placeholder="$t(`options.search-train`)"
|
||||
v-model="searchedTrain"
|
||||
/>
|
||||
<button class="search-exit">
|
||||
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
@focus="preventKeyDown = true"
|
||||
@blur="preventKeyDown = false"
|
||||
:placeholder="$t(`options.search-driver`)"
|
||||
v-model="searchedDriver"
|
||||
/>
|
||||
<button class="search-exit">
|
||||
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="option-title">{{ $t('options.sort-title') }}</h1>
|
||||
<div class="options_sorters">
|
||||
<button
|
||||
v-for="opt in translatedSorterOptions"
|
||||
:key="opt.id"
|
||||
class="sort-option btn--option"
|
||||
:data-selected="opt.id == sorterActive.id"
|
||||
@click="onSorterChange(opt)"
|
||||
>
|
||||
{{ opt.value.toUpperCase() }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1 class="option-title" v-if="trainFilterList.length != 0">
|
||||
{{ $t('options.filter-title') }}
|
||||
</h1>
|
||||
|
||||
<div class="options_filters">
|
||||
<div v-for="section in Object.keys(TrainFilterSection)" :key="section">
|
||||
<button
|
||||
class="btn--option"
|
||||
v-for="filter in trainFilterList.filter((f) => f.section == section)"
|
||||
:key="filter.id"
|
||||
:data-inactive="!filter.isActive"
|
||||
@click="onFilterChange(filter)"
|
||||
>
|
||||
{{ $t(`options.filter-${filter.id}`) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-actions">
|
||||
<div></div>
|
||||
<button class="btn--action" @click="resetAllFilters">
|
||||
{{ $t('options.filter-reset') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, inject, PropType } from 'vue';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import keyMixin from '../../mixins/keyMixin';
|
||||
import { TrainFilterSection } from '../../scripts/enums/TrainFilterType';
|
||||
import { TrainFilter } from '../../scripts/interfaces/Trains/TrainFilter';
|
||||
|
||||
export default defineComponent({
|
||||
mixins: [imageMixin, keyMixin],
|
||||
|
||||
props: {
|
||||
sorterOptionIds: {
|
||||
type: Array as PropType<Array<string>>,
|
||||
required: true
|
||||
},
|
||||
|
||||
currentOptionsActive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showOptions: false,
|
||||
lastSelectedFilter: null as TrainFilter | null,
|
||||
TrainFilterSection
|
||||
};
|
||||
},
|
||||
|
||||
setup() {
|
||||
return {
|
||||
searchedTrain: inject('searchedTrain') as string,
|
||||
searchedDriver: inject('searchedDriver') as string,
|
||||
|
||||
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
||||
trainFilterList: inject('filterList') as TrainFilter[]
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
translatedSorterOptions() {
|
||||
return this.$props.sorterOptionIds.map((id) => ({
|
||||
id,
|
||||
value: this.$t(`options.sort-${id}`)
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// Override keyMixin function
|
||||
onKeyDownFunction() {
|
||||
this.toggleShowOptions();
|
||||
},
|
||||
|
||||
toggleShowOptions() {
|
||||
this.showOptions = !this.showOptions;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.showOptions) (this.$refs['button'] as HTMLButtonElement)?.focus();
|
||||
});
|
||||
},
|
||||
|
||||
onSorterChange(item: { id: string | number; value: string }) {
|
||||
this.sorterActive.id = item.id;
|
||||
this.sorterActive.dir = -1;
|
||||
},
|
||||
|
||||
onFilterChange(filter: TrainFilter) {
|
||||
// if (this.lastSelectedFilter?.id === filter.id)
|
||||
// this.trainFilterList.forEach((tf) => (tf.isActive = filter.id === tf.id));
|
||||
|
||||
filter.isActive = !filter.isActive;
|
||||
this.lastSelectedFilter = filter;
|
||||
},
|
||||
|
||||
clearAllFilters() {
|
||||
this.trainFilterList.forEach((filter) => {
|
||||
filter.isActive = false;
|
||||
});
|
||||
},
|
||||
|
||||
resetAllFilters() {
|
||||
this.trainFilterList.forEach((filter) => {
|
||||
filter.isActive = true;
|
||||
});
|
||||
},
|
||||
|
||||
onInputClear(id: 'driver' | 'train') {
|
||||
if (id == 'driver') this.searchedDriver = '';
|
||||
if (id == 'train') this.searchedTrain = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/filters_options.scss';
|
||||
|
||||
.search_content > div {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.search_content > button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.options_sorters {
|
||||
display: flex;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.options_filters > div {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
gap: 0.5em;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
color: springgreen;
|
||||
font-weight: bold;
|
||||
|
||||
&[data-inactive='true'] {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
width: 100%;
|
||||
|
||||
margin-top: 1em;
|
||||
|
||||
> * {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -13,7 +13,12 @@
|
||||
|
||||
<div class="schedule-wrapper" v-if="train.timetableData">
|
||||
<ul class="stop_list">
|
||||
<li v-for="(stop, i) in train.timetableData.followingStops" :key="i" class="stop" :class="addClasses(stop, i)">
|
||||
<li
|
||||
v-for="(stop, i) in train.timetableData.followingStops"
|
||||
:key="i"
|
||||
class="stop"
|
||||
:class="addClasses(stop, i)"
|
||||
>
|
||||
<span class="stop_info">
|
||||
<div class="indicator"></div>
|
||||
|
||||
@@ -37,7 +42,12 @@
|
||||
<b>{{ stop.stopNameRAW }} </b>: <span v-html="stop.comments"></span>
|
||||
</div>
|
||||
|
||||
<span v-if="stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine && !/sbl/gi.test(stop.departureLine!)">
|
||||
<span
|
||||
v-if="
|
||||
stop.departureLine == train.timetableData!.followingStops[i + 1].arrivalLine &&
|
||||
!/sbl/gi.test(stop.departureLine!)
|
||||
"
|
||||
>
|
||||
{{ stop.departureLine }}
|
||||
</span>
|
||||
|
||||
@@ -59,23 +69,22 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType } from '@vue/runtime-core';
|
||||
import { computed, defineComponent, PropType } from 'vue';
|
||||
import dateMixin from '../../mixins/dateMixin';
|
||||
import imageMixin from '../../mixins/imageMixin';
|
||||
import Train from '../../scripts/interfaces/Train';
|
||||
import TrainStop from '../../scripts/interfaces/TrainStop';
|
||||
import { useStore } from '../../store/store';
|
||||
import StopDate from '../Global/StopDate.vue';
|
||||
import TrainThumbnail from '../Global/TrainThumbnail.vue';
|
||||
import StockList from '../Global/StockList.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { StopDate, TrainThumbnail, StockList },
|
||||
components: { StopDate, StockList },
|
||||
props: {
|
||||
train: {
|
||||
type: Object as PropType<Train>,
|
||||
required: true,
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [dateMixin, imageMixin],
|
||||
@@ -97,15 +106,21 @@ export default defineComponent({
|
||||
);
|
||||
|
||||
const activeMinorStopList: number[] = [];
|
||||
if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length) return activeMinorStopList;
|
||||
if (lastMajorConfirmed + 1 >= props.train.timetableData!.followingStops.length)
|
||||
return activeMinorStopList;
|
||||
|
||||
for (let i = lastMajorConfirmed + 1; i < props.train.timetableData!.followingStops.length; i++) {
|
||||
if (/po\.|sbl/gi.test(props.train.timetableData!.followingStops[i].stopNameRAW)) activeMinorStopList.push(i);
|
||||
for (
|
||||
let i = lastMajorConfirmed + 1;
|
||||
i < props.train.timetableData!.followingStops.length;
|
||||
i++
|
||||
) {
|
||||
if (/po\.|sbl/gi.test(props.train.timetableData!.followingStops[i].stopNameRAW))
|
||||
activeMinorStopList.push(i);
|
||||
else break;
|
||||
}
|
||||
|
||||
return activeMinorStopList;
|
||||
}),
|
||||
})
|
||||
};
|
||||
},
|
||||
|
||||
@@ -122,17 +137,18 @@ export default defineComponent({
|
||||
end: stop.terminatesHere,
|
||||
delayed: stop.departureDelay > 0,
|
||||
sbl: /sbl/gi.test(stop.stopName),
|
||||
[stop.stopType.replaceAll(', ', '-')]: stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
|
||||
[stop.stopType.replaceAll(', ', '-')]:
|
||||
stop.stopType.match(new RegExp('ph|pm|pt')) && !stop.confirmed && !stop.beginsHere,
|
||||
'minor-stop-active': this.activeMinorStops.includes(index),
|
||||
'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere,
|
||||
'last-confirmed': index == this.lastConfirmed && !stop.terminatesHere
|
||||
};
|
||||
},
|
||||
|
||||
onImageError(e: Event) {
|
||||
const imageEl = e.target as HTMLImageElement;
|
||||
imageEl.src = this.getImage('unknown.png');
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,207 +1,210 @@
|
||||
<template>
|
||||
<div class="train-table">
|
||||
<transition name="anim" mode="out-in">
|
||||
<div :key="store.dataStatuses.trains">
|
||||
<div class="table-info" v-if="store.isOffline">
|
||||
{{ $t('app.offline') }}
|
||||
</div>
|
||||
|
||||
<Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
|
||||
|
||||
<div class="table-info no-trains" v-else-if="trains.length == 0 && store.dataStatuses.trains != 0">
|
||||
{{ $t('trains.no-trains') }}
|
||||
</div>
|
||||
|
||||
<transition-group name="list-anim" tag="ul" class="train-list" v-else>
|
||||
<li
|
||||
class="train-row"
|
||||
v-for="train in currentTrains"
|
||||
:key="train.trainId"
|
||||
tabindex="0"
|
||||
@click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
>
|
||||
<TrainInfo :train="train" />
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, PropType, Ref } from 'vue';
|
||||
import modalTrainMixin from '../../mixins/modalTrainMixin';
|
||||
import returnBtnMixin from '../../mixins/returnBtnMixin';
|
||||
import Train from '../../scripts/interfaces/Train';
|
||||
import { useStore } from '../../store/store';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import TrainInfo from './TrainInfo.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Loading, TrainInfo },
|
||||
|
||||
props: {
|
||||
trains: {
|
||||
type: Array as PropType<Train[]>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [returnBtnMixin, modalTrainMixin],
|
||||
|
||||
setup(props) {
|
||||
const store = useStore();
|
||||
const searchedTrain = inject('searchedTrain') as Ref<string>;
|
||||
const searchedDriver = inject('searchedDriver') as Ref<string>;
|
||||
const currentTrains = computed(() => {
|
||||
return props.trains;
|
||||
});
|
||||
|
||||
return {
|
||||
searchedTrain,
|
||||
searchedDriver,
|
||||
currentTrains,
|
||||
store,
|
||||
sorterActive: inject('sorterActive') as {
|
||||
id: string | number;
|
||||
dir: number;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
activated() {
|
||||
const query = this.$route.query;
|
||||
if (query.trainNo && query.driverName) {
|
||||
this.searchedDriver = query.driverName.toString();
|
||||
this.searchedTrain = query.trainNo.toString();
|
||||
setTimeout(() => {
|
||||
this.selectModalTrain(query.driverName! + query.trainNo!.toString());
|
||||
}, 20);
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/animations.scss';
|
||||
|
||||
.anim {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transition: all 100ms ease-out;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transition: all 100ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.table-info {
|
||||
text-align: center;
|
||||
|
||||
padding: 1em 0;
|
||||
|
||||
font-size: 1.5em;
|
||||
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
img.train-image {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.traffic-warning {
|
||||
padding: 1em 0;
|
||||
margin-bottom: 0.5em;
|
||||
background: var(--clr-warning);
|
||||
}
|
||||
|
||||
.timeouts-warning {
|
||||
background-color: #333;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 1.05em;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.warning-timeout {
|
||||
background-color: #be3728;
|
||||
color: white;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.train {
|
||||
&-list {
|
||||
position: relative;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
background-color: var(--clr-secondary);
|
||||
margin-bottom: 1em;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&_cars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.paginator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&_item {
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0 0.5em;
|
||||
outline: 2px solid salmon;
|
||||
|
||||
min-width: 30px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.page-number {
|
||||
font-weight: bold;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
outline: 2px solid lightgray;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.info-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="train-table">
|
||||
<transition name="anim" mode="out-in">
|
||||
<div :key="store.dataStatuses.trains">
|
||||
<div class="table-info" v-if="store.isOffline">
|
||||
{{ $t('app.offline') }}
|
||||
</div>
|
||||
|
||||
<Loading v-else-if="trains.length == 0 && store.dataStatuses.trains == 0" />
|
||||
|
||||
<div
|
||||
class="table-info no-trains"
|
||||
v-else-if="trains.length == 0 && store.dataStatuses.trains != 0"
|
||||
>
|
||||
{{ $t('trains.no-trains') }}
|
||||
</div>
|
||||
|
||||
<transition-group name="list-anim" tag="ul" class="train-list" v-else>
|
||||
<li
|
||||
class="train-row"
|
||||
v-for="train in currentTrains"
|
||||
:key="train.trainId"
|
||||
tabindex="0"
|
||||
@click.stop="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
@keydown.enter="selectModalTrain(train.trainId, $event.currentTarget)"
|
||||
>
|
||||
<TrainInfo :train="train" />
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, inject, PropType, Ref } from 'vue';
|
||||
import modalTrainMixin from '../../mixins/modalTrainMixin';
|
||||
import returnBtnMixin from '../../mixins/returnBtnMixin';
|
||||
import Train from '../../scripts/interfaces/Train';
|
||||
import { useStore } from '../../store/store';
|
||||
import Loading from '../Global/Loading.vue';
|
||||
import TrainInfo from './TrainInfo.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Loading, TrainInfo },
|
||||
|
||||
props: {
|
||||
trains: {
|
||||
type: Array as PropType<Train[]>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [returnBtnMixin, modalTrainMixin],
|
||||
|
||||
setup(props) {
|
||||
const store = useStore();
|
||||
const searchedTrain = inject('searchedTrain') as Ref<string>;
|
||||
const searchedDriver = inject('searchedDriver') as Ref<string>;
|
||||
const currentTrains = computed(() => {
|
||||
return props.trains;
|
||||
});
|
||||
|
||||
return {
|
||||
searchedTrain,
|
||||
searchedDriver,
|
||||
currentTrains,
|
||||
store,
|
||||
sorterActive: inject('sorterActive') as {
|
||||
id: string | number;
|
||||
dir: number;
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
activated() {
|
||||
const query = this.$route.query;
|
||||
if (query.trainNo && query.driverName) {
|
||||
this.searchedDriver = query.driverName.toString();
|
||||
this.searchedTrain = query.trainNo.toString();
|
||||
setTimeout(() => {
|
||||
this.selectModalTrain(query.driverName! + query.trainNo!.toString());
|
||||
}, 20);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/animations.scss';
|
||||
|
||||
.anim {
|
||||
&-enter-from,
|
||||
&-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-enter-active {
|
||||
transition: all 100ms ease-out;
|
||||
}
|
||||
|
||||
&-leave-active {
|
||||
transition: all 100ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
.table-info {
|
||||
text-align: center;
|
||||
|
||||
padding: 1em 0;
|
||||
|
||||
font-size: 1.5em;
|
||||
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
img.train-image {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.traffic-warning {
|
||||
padding: 1em 0;
|
||||
margin-bottom: 0.5em;
|
||||
background: var(--clr-warning);
|
||||
}
|
||||
|
||||
.timeouts-warning {
|
||||
background-color: #333;
|
||||
|
||||
font-weight: bold;
|
||||
font-size: 1.05em;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.warning-timeout {
|
||||
background-color: #be3728;
|
||||
color: white;
|
||||
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.train {
|
||||
&-list {
|
||||
position: relative;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-row {
|
||||
background-color: var(--clr-secondary);
|
||||
margin-bottom: 1em;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&_cars {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.paginator {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&_item {
|
||||
padding: 0.25em 0.5em;
|
||||
margin: 0 0.5em;
|
||||
outline: 2px solid salmon;
|
||||
|
||||
min-width: 30px;
|
||||
|
||||
text-align: center;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&.page-number {
|
||||
font-weight: bold;
|
||||
color: gold;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
outline: 2px solid lightgray;
|
||||
color: lightgray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
.info-bottom {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user