mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Restrukturyzacja kodu w widoku scenerii.
This commit is contained in:
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="scenery-info">
|
||||
<div class="info-header">
|
||||
<div class="scenery-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="scenery-hash">#{{ stationInfo.stationHash }}</div>
|
||||
</div>
|
||||
|
||||
<section v-if="!timetableOnly">
|
||||
<div class="info-stats">
|
||||
<span class="likes">
|
||||
<img :src="likeIcon" alt="icon-like" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</span>
|
||||
<span class="users">
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
<span>{{ stationInfo.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ stationInfo.maxUsers }}</span>
|
||||
</span>
|
||||
<span class="spawns">
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
<span>{{ stationInfo.spawnString.length }}</span>
|
||||
</span>
|
||||
<span class="schedules">
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
<span v-if="stationInfo.scheduledTrains">
|
||||
<span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="info-brief">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="info-dispatcher">
|
||||
<div>
|
||||
<span
|
||||
class="level"
|
||||
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
|
||||
>{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
|
||||
|
||||
<span class="name">{{ stationInfo.dispatcherName }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(stationInfo.occupiedTo)"
|
||||
>{{ stationInfo.occupiedTo }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-lists">
|
||||
<div class="user-list">
|
||||
<h3 class="user-header">
|
||||
GRACZE ONLINE
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
class="user user-badge"
|
||||
:class="train.stopStatus"
|
||||
v-for="train in computedStationTrains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: { passedSearchedTrain: train.trainNo.toString() },
|
||||
}"
|
||||
>
|
||||
<span>{{ train.trainNo }}</span>
|
||||
|
|
||||
<span>{{ train.driverName }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span
|
||||
class="user offline"
|
||||
v-if="
|
||||
!stationInfo.stationTrains ||
|
||||
stationInfo.stationTrains.length == 0
|
||||
"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
<div class="spawn-list">
|
||||
<h3 class="spawn-header">
|
||||
OTWARTE SPAWNY
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawnString"
|
||||
:key="spawn + stationInfo.dispatcherName + i"
|
||||
>{{ spawn }}</span>
|
||||
</div>
|
||||
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
@Component
|
||||
export default class SceneryInfo extends styleMixin {
|
||||
@Prop() readonly stationInfo!: Station;
|
||||
@Prop() readonly timetableOnly!: boolean;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
|
||||
get computedStationTrains() {
|
||||
if (!this.stationInfo) return null;
|
||||
|
||||
return this.stationInfo.stationTrains.map((stationTrain) => {
|
||||
const scheduledData = this.stationInfo?.scheduledTrains.find(
|
||||
(scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
|
||||
);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable",
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/user_badge.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
img {
|
||||
width: 1.1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
&-header {
|
||||
padding: 1rem;
|
||||
|
||||
& > .scenery-name {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& > .scenery-hash {
|
||||
font-size: 1em;
|
||||
line-height: 0.8em;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
&-stats {
|
||||
font-size: 1.3em;
|
||||
padding: 1rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.6em;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.spawns {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
span > img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-brief {
|
||||
padding: 1rem 0;
|
||||
|
||||
img {
|
||||
width: 2.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-dispatcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.level {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
background: firebrick;
|
||||
|
||||
border-radius: 0.1em;
|
||||
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.6em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-lists {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
& > .user-list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
font-size: 0.85em;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn,
|
||||
.user.offline {
|
||||
padding: 0.3em 0.4em;
|
||||
background: #585858;
|
||||
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div class="scenery-timetable">
|
||||
<h3 class="timetable-header">
|
||||
<span>AKTYWNE ROZKŁADY JAZDY</span>
|
||||
|
||||
<a v-if="!timetableOnly" :href="currentURL + '&timetable_only=1'" target="_blank">
|
||||
<img :src="viewIcon" alt="icon-view" title="Wyodrębnij rozkłady jazdy" />
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<div class="select-box" v-if="stationInfo.checkpoints">
|
||||
<div class="option-container">
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(cp, i) in stationInfo.checkpoints"
|
||||
:key="i"
|
||||
@click="() => chooseOption(cp.checkpointName)"
|
||||
>
|
||||
<input type="option-radio" name="sort" />
|
||||
<label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="timetable-item loading" v-if="dataStatus == 0">Ładowanie...</span>
|
||||
|
||||
<span
|
||||
class="timetable-item empty"
|
||||
v-else-if="computedScheduledTrains.length == 0"
|
||||
>Brak aktywnych rozkładów!</span>
|
||||
|
||||
<transition-group name="list-anim">
|
||||
<div class="timetable-item" v-for="(scheduledTrain, i) in computedScheduledTrains" :key="i">
|
||||
<span class="timetable-general">
|
||||
<span class="general-info">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: {
|
||||
passedSearchedTrain: scheduledTrain.trainNo.toString(),
|
||||
},
|
||||
}"
|
||||
>
|
||||
<span>
|
||||
<strong>{{ scheduledTrain.category }}</strong>
|
||||
{{ scheduledTrain.trainNo }}
|
||||
</span>
|
||||
</router-link>|
|
||||
<span>
|
||||
<a
|
||||
:href="
|
||||
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
|
||||
"
|
||||
target="_blank"
|
||||
>{{ scheduledTrain.driverName }}</a>
|
||||
</span>
|
||||
|
||||
<div class="info-route">
|
||||
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="general-status">
|
||||
<span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="timetable-schedule">
|
||||
<span class="schedule-arrival">
|
||||
<span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
|
||||
ROZPOCZYNA
|
||||
<div>BIEG</div>
|
||||
</span>
|
||||
<span class="arrival-time" v-else>
|
||||
{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
|
||||
scheduledTrain.stopInfo.arrivalDelay
|
||||
}})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="schedule-stop">
|
||||
<span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
|
||||
{{ scheduledTrain.stopInfo.stopTime }}
|
||||
{{ scheduledTrain.stopInfo.stopType }}
|
||||
</span>
|
||||
<span class="stop-arrow arrow"></span>
|
||||
</span>
|
||||
<span class="schedule-departure">
|
||||
<span
|
||||
class="departure-time terminates"
|
||||
v-if="scheduledTrain.stopInfo.terminatesHere"
|
||||
>KOŃCZY BIEG</span>
|
||||
<span class="departure-time" v-else>
|
||||
{{ scheduledTrain.stopInfo.departureTimeString }} ({{
|
||||
scheduledTrain.stopInfo.departureDelay
|
||||
}})
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
|
||||
|
||||
@Component
|
||||
export default class SceneryTimetable extends Vue {
|
||||
@Prop() readonly stationInfo!: Station;
|
||||
@Prop() readonly timetableOnly!: boolean;
|
||||
@Prop() readonly dataStatus!: number;
|
||||
|
||||
viewIcon: string = require("@/assets/icon-view.svg");
|
||||
|
||||
listOpen: boolean = false;
|
||||
selectedOption: string = "";
|
||||
|
||||
activated() {
|
||||
if (!this.stationInfo) return;
|
||||
if (!this.stationInfo.checkpoints) return;
|
||||
|
||||
if (this.selectedOption == "")
|
||||
this.selectedOption = this.stationInfo.checkpoints[0].checkpointName;
|
||||
}
|
||||
|
||||
toggleOptionList() {
|
||||
this.listOpen = !this.listOpen;
|
||||
}
|
||||
|
||||
closeOptionList() {
|
||||
this.listOpen = false;
|
||||
}
|
||||
|
||||
chooseOption(name: string) {
|
||||
this.selectedOption = name;
|
||||
this.closeOptionList();
|
||||
}
|
||||
|
||||
get currentURL() {
|
||||
return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
|
||||
}
|
||||
|
||||
get computedScheduledTrains() {
|
||||
if (!this.stationInfo) return [];
|
||||
|
||||
let scheduledTrains: ScheduledTrain[] | undefined;
|
||||
|
||||
if (this.stationInfo.checkpoints)
|
||||
scheduledTrains = this.stationInfo.checkpoints.find(
|
||||
(cp) => cp.checkpointName === this.selectedOption
|
||||
)?.scheduledTrains;
|
||||
else scheduledTrains = this.stationInfo.scheduledTrains;
|
||||
|
||||
return (
|
||||
scheduledTrains?.sort((a, b) => {
|
||||
if (a.stopStatusID > b.stopStatusID) return 1;
|
||||
else if (a.stopStatusID < b.stopStatusID) return -1;
|
||||
|
||||
if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
|
||||
else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
|
||||
return -1;
|
||||
|
||||
return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
|
||||
? 1
|
||||
: -1;
|
||||
}) || []
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../styles/responsive.scss";
|
||||
@import "../../styles/variables.scss";
|
||||
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0.3em;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 1.2em;
|
||||
|
||||
img {
|
||||
width: 1.1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.list-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 250ms ease-out;
|
||||
}
|
||||
&-enter, &-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #444;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 10em;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-header {
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 1em auto;
|
||||
font-size: 0.8em;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
background: #555;
|
||||
|
||||
@include smallScreen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.loading,
|
||||
&.empty {
|
||||
padding: 1rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
color: $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&-general {
|
||||
padding: 0.5rem 0.3rem;
|
||||
border-radius: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
text-align: left;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 95%;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-schedule {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
||||
font-size: 1.2em;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
margin: 0.7em 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
margin-left: 50px;
|
||||
|
||||
position: relative;
|
||||
|
||||
transform: rotate(-45deg);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 55px;
|
||||
height: 3px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
||||
transform: translate(-100%, -1px) rotate(45deg);
|
||||
transform-origin: right bottom;
|
||||
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.general-info {
|
||||
span {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
.info-route {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.general-status {
|
||||
span.arriving {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.departed {
|
||||
color: lime;
|
||||
font-weight: bold;
|
||||
|
||||
&-away {
|
||||
font-weight: bold;
|
||||
color: rgb(0, 155, 0);
|
||||
}
|
||||
}
|
||||
|
||||
span.stopped {
|
||||
color: #ffa600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.online {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
span.terminated {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule {
|
||||
&-arrival,
|
||||
&-stop,
|
||||
&-departure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
&-stop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.stop-time {
|
||||
font-size: 0.7em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrival-time.begins,
|
||||
.departure-time.terminates {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
</style>
|
||||
+33
-754
@@ -9,338 +9,52 @@
|
||||
<router-link to="/">Wróć na stronę główną</router-link>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scenery-wrapper" v-if="stationInfo">
|
||||
<div class="scenery-header">
|
||||
<div class="station-name">
|
||||
<a
|
||||
v-if="stationInfo.stationURL"
|
||||
:href="stationInfo.stationURL"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>{{ stationInfo.stationName }}</a>
|
||||
<SceneryInfo :stationInfo="stationInfo" :timetableOnly="timetableOnly" />
|
||||
|
||||
<span v-else>{{ stationInfo.stationName }}</span>
|
||||
</div>
|
||||
<div class="station-hash">#{{ stationInfo.stationHash }}</div>
|
||||
</div>
|
||||
|
||||
<section v-if="!timetableOnly">
|
||||
<div class="scenery-stats">
|
||||
<span class="likes">
|
||||
<img :src="likeIcon" alt="icon-like" />
|
||||
<span>{{ stationInfo.dispatcherRate }}</span>
|
||||
</span>
|
||||
<span class="users">
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
<span>{{ stationInfo.currentUsers }}</span>
|
||||
/
|
||||
<span>{{ stationInfo.maxUsers }}</span>
|
||||
</span>
|
||||
<span class="spawns">
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
<span>{{ stationInfo.spawnString.length }}</span>
|
||||
</span>
|
||||
<span class="schedules">
|
||||
<img :src="timetableIcon" alt="icon-timetable" />
|
||||
<span v-if="stationInfo.scheduledTrains">
|
||||
<span style="color: #eee">{{stationInfo.scheduledTrains.length}}</span>
|
||||
/
|
||||
<span
|
||||
style="color: #bbb"
|
||||
>{{ stationInfo.scheduledTrains.filter(train => train.stopInfo.confirmed).length }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="scenery-brief">
|
||||
<img
|
||||
v-if="stationInfo.controlType"
|
||||
:src="require(`@/assets/icon-${stationInfo.controlType}.svg`)"
|
||||
:alt="stationInfo.controlType"
|
||||
:title="'Sterowanie ' + stationInfo.controlType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.signalType"
|
||||
:src="require(`@/assets/icon-${stationInfo.signalType}.svg`)"
|
||||
:alt="stationInfo.signalType"
|
||||
:title="'Sygnalizacja ' + stationInfo.signalType"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.SBL && stationInfo.SBL !== ''"
|
||||
:src="require(`@/assets/icon-SBL.svg`)"
|
||||
alt="SBL"
|
||||
title="Sceneria posiada SBL na przynajmniej jednym ze szlaków"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.default"
|
||||
:src="require(`@/assets/icon-td2.svg`)"
|
||||
alt="default-pack"
|
||||
title="Sceneria domyślnie dostępna w grze"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.nonPublic || !stationInfo.reqLevel"
|
||||
:src="require(`@/assets/icon-lock.svg`)"
|
||||
alt="non-public"
|
||||
title="Sceneria niepubliczna"
|
||||
/>
|
||||
|
||||
<img
|
||||
v-if="stationInfo.unavailable"
|
||||
:src="require(`@/assets/icon-unavailable.svg`)"
|
||||
alt="icon-unavailable"
|
||||
title="Sceneria niedostępna"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="scenery-dispatcher">
|
||||
<div>
|
||||
<span
|
||||
class="level"
|
||||
:style="calculateExpStyle(stationInfo.dispatcherExp, stationInfo.dispatcherIsSupporter)"
|
||||
>{{ stationInfo.dispatcherExp > 1 ? stationInfo.dispatcherExp : "L"}}</span>
|
||||
|
||||
<span class="name">{{ stationInfo.dispatcherName }}</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="status"
|
||||
:class="statusClasses(stationInfo.occupiedTo)"
|
||||
>{{ stationInfo.occupiedTo }}</span>
|
||||
</div>
|
||||
|
||||
<div class="scenery-info">
|
||||
<div class="user-list">
|
||||
<h3 class="user-header">
|
||||
GRACZE ONLINE
|
||||
<img :src="userIcon" alt="icon-user" />
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
class="user user-badge"
|
||||
:class="train.stopStatus"
|
||||
v-for="train in computedStationTrains"
|
||||
:key="train.trainNo + train.driverName"
|
||||
>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: { passedSearchedTrain: train.trainNo.toString() },
|
||||
}"
|
||||
>
|
||||
<span>{{ train.trainNo }}</span>
|
||||
|
|
||||
<span>{{ train.driverName }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<span
|
||||
class="user offline"
|
||||
v-if="
|
||||
!stationInfo.stationTrains ||
|
||||
stationInfo.stationTrains.length == 0
|
||||
"
|
||||
>BRAK</span>
|
||||
</div>
|
||||
<div class="spawn-list">
|
||||
<h3 class="spawn-header">
|
||||
OTWARTE SPAWNY
|
||||
<img :src="spawnIcon" alt="icon-spawn" />
|
||||
</h3>
|
||||
|
||||
<div>
|
||||
<span
|
||||
class="spawn"
|
||||
v-for="(spawn, i) in stationInfo.spawnString"
|
||||
:key="spawn + stationInfo.dispatcherName + i"
|
||||
>{{ spawn }}</span>
|
||||
</div>
|
||||
<span class="spawn" v-if="!stationInfo.spawnString">BRAK</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="scenery-timetables">
|
||||
<h3 class="timetable-header">
|
||||
<span>AKTYWNE ROZKŁADY JAZDY</span>
|
||||
<a v-if="!timetableOnly" :href="currentURL + '&timetable_only=1'" target="_blank">
|
||||
<img :src="viewIcon" alt="icon-view" title="Wyodrębnij rozkłady jazdy" />
|
||||
</a>
|
||||
</h3>
|
||||
|
||||
<div class="select-box" v-if="stationInfo.checkpoints">
|
||||
<div class="option-container">
|
||||
<div class="option-selected" @click="toggleOptionList">
|
||||
<span>{{ selectedOption }}</span>
|
||||
<img :src="require('@/assets/icon-select.svg')" alt="icon-select" />
|
||||
</div>
|
||||
|
||||
<ul class="option-list" :class="{ open: listOpen }">
|
||||
<li
|
||||
class="option-item"
|
||||
v-for="(cp, i) in stationInfo.checkpoints"
|
||||
:key="i"
|
||||
@click="() => chooseOption(cp.checkpointName)"
|
||||
>
|
||||
<input type="option-radio" name="sort" />
|
||||
<label :id="cp.checkpointName">{{ cp.checkpointName }}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="timetable-item loading" v-if="timetableDataStatus == 0">Ładowanie...</span>
|
||||
|
||||
<span
|
||||
class="timetable-item empty"
|
||||
v-else-if="computedScheduledTrains.length == 0"
|
||||
>Brak aktywnych rozkładów!</span>
|
||||
|
||||
<transition-group name="list-anim">
|
||||
<div
|
||||
class="timetable-item"
|
||||
v-for="(scheduledTrain, i) in computedScheduledTrains"
|
||||
:key="i"
|
||||
>
|
||||
<span class="timetable-general">
|
||||
<span class="general-info">
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'TrainsView',
|
||||
params: {
|
||||
passedSearchedTrain: scheduledTrain.trainNo.toString(),
|
||||
},
|
||||
}"
|
||||
>
|
||||
<span>
|
||||
<strong>{{ scheduledTrain.category }}</strong>
|
||||
{{ scheduledTrain.trainNo }}
|
||||
</span>
|
||||
</router-link>|
|
||||
<span>
|
||||
<a
|
||||
:href="
|
||||
'https://td2.info.pl/profile/?u=' + scheduledTrain.driverId
|
||||
"
|
||||
target="_blank"
|
||||
>{{ scheduledTrain.driverName }}</a>
|
||||
</span>
|
||||
|
||||
<div class="info-route">
|
||||
<strong>{{ scheduledTrain.beginsAt }} - {{ scheduledTrain.terminatesAt }}</strong>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<span class="general-status">
|
||||
<span :class="scheduledTrain.stopStatus">{{scheduledTrain.stopLabel}}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="timetable-schedule">
|
||||
<span class="schedule-arrival">
|
||||
<span class="arrival-time begins" v-if="scheduledTrain.stopInfo.beginsHere">
|
||||
ROZPOCZYNA
|
||||
<div>BIEG</div>
|
||||
</span>
|
||||
<span class="arrival-time" v-else>
|
||||
{{ scheduledTrain.stopInfo.arrivalTimeString }} ({{
|
||||
scheduledTrain.stopInfo.arrivalDelay
|
||||
}})
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="schedule-stop">
|
||||
<span class="stop-time" v-if="scheduledTrain.stopInfo.stopTime">
|
||||
{{ scheduledTrain.stopInfo.stopTime }}
|
||||
{{ scheduledTrain.stopInfo.stopType }}
|
||||
</span>
|
||||
<span class="stop-arrow arrow"></span>
|
||||
</span>
|
||||
<span class="schedule-departure">
|
||||
<span
|
||||
class="departure-time terminates"
|
||||
v-if="scheduledTrain.stopInfo.terminatesHere"
|
||||
>KOŃCZY BIEG</span>
|
||||
<span class="departure-time" v-else>
|
||||
{{ scheduledTrain.stopInfo.departureTimeString }} ({{
|
||||
scheduledTrain.stopInfo.departureDelay
|
||||
}})
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
<SceneryTimetable
|
||||
:stationInfo="stationInfo"
|
||||
:timetableOnly="timetableOnly"
|
||||
:dataStatus="timetableDataStatus"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Watch } from "vue-property-decorator";
|
||||
import { Vue, Component } from "vue-property-decorator";
|
||||
|
||||
import { Getter } from "vuex-class";
|
||||
|
||||
import styleMixin from "@/mixins/styleMixin";
|
||||
|
||||
import Station from "@/scripts/interfaces/Station";
|
||||
import Train from "@/scripts/interfaces/Train";
|
||||
|
||||
import StationTimetable from "@/components/StationsView/StationTimetable.vue";
|
||||
import ScheduledTrain from "@/scripts/interfaces/ScheduledTrain";
|
||||
import SceneryInfo from "@/components/SceneryView/SceneryInfo.vue";
|
||||
import SceneryTimetable from "@/components/SceneryView/SceneryTimetable.vue";
|
||||
|
||||
@Component
|
||||
export default class SceneryView extends styleMixin {
|
||||
@Component({
|
||||
components: { SceneryInfo, SceneryTimetable },
|
||||
})
|
||||
export default class SceneryView extends Vue {
|
||||
@Getter("getStationList") storeStationList!: Station[];
|
||||
@Getter("getTimetableDataStatus") timetableDataStatus!: number;
|
||||
@Getter("getDataStatus") dataStatus!: number;
|
||||
|
||||
likeIcon: string = require("@/assets/icon-like.svg");
|
||||
spawnIcon: string = require("@/assets/icon-spawn.svg");
|
||||
timetableIcon: string = require("@/assets/icon-timetable.svg");
|
||||
userIcon: string = require("@/assets/icon-user.svg");
|
||||
|
||||
viewIcon: string = require("@/assets/icon-view.svg");
|
||||
|
||||
listOpen: boolean = false;
|
||||
selectedOption: string = "";
|
||||
|
||||
timetableOnly: boolean = false;
|
||||
|
||||
activated() {
|
||||
this.timetableOnly =
|
||||
this.$route.query["timetable_only"] == "1" ? true : false;
|
||||
|
||||
this.selectedOption = "";
|
||||
}
|
||||
|
||||
toggleOptionList() {
|
||||
this.listOpen = !this.listOpen;
|
||||
}
|
||||
|
||||
closeOptionList() {
|
||||
this.listOpen = false;
|
||||
}
|
||||
|
||||
chooseOption(name: string) {
|
||||
this.selectedOption = name;
|
||||
this.closeOptionList();
|
||||
}
|
||||
|
||||
get currentPath() {
|
||||
return this.$route.path;
|
||||
}
|
||||
|
||||
get dataLoaded() {
|
||||
return this.storeStationList ? true : false;
|
||||
}
|
||||
|
||||
get currentURL() {
|
||||
return `${location.origin}/scenery?hash=${this.stationInfo?.stationHash}`;
|
||||
}
|
||||
// get dataLoaded() {
|
||||
// return this.storeStationList ? true : false;
|
||||
// }
|
||||
|
||||
get stationInfo(): Station | null {
|
||||
if (!this.$route.query.hash || !this.storeStationList) return null;
|
||||
@@ -350,83 +64,14 @@ export default class SceneryView extends styleMixin {
|
||||
(station) => station.stationHash === this.$route.query.hash.toString()
|
||||
) || null;
|
||||
|
||||
if (!info) return null;
|
||||
|
||||
if (!info.checkpoints) return info;
|
||||
|
||||
if (this.selectedOption == "")
|
||||
this.selectedOption = info.checkpoints[0].checkpointName;
|
||||
|
||||
return info;
|
||||
}
|
||||
|
||||
get computedDispatcherExp(): string {
|
||||
if (!this.stationInfo) return "";
|
||||
|
||||
return this.stationInfo.dispatcherExp < 2
|
||||
? "L"
|
||||
: `${this.stationInfo.dispatcherExp}`;
|
||||
}
|
||||
|
||||
get computedStationTrains() {
|
||||
if (!this.stationInfo) return null;
|
||||
|
||||
return this.stationInfo.stationTrains.map((stationTrain) => {
|
||||
const scheduledData = this.stationInfo?.scheduledTrains.find(
|
||||
(scheduledTrain) => scheduledTrain.trainNo === stationTrain.trainNo
|
||||
);
|
||||
|
||||
return {
|
||||
...stationTrain,
|
||||
stopStatus: scheduledData?.stopStatus || "no-timetable",
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
get computedScheduledTrains() {
|
||||
if (!this.stationInfo) return [];
|
||||
|
||||
let scheduledTrains: ScheduledTrain[] | undefined;
|
||||
|
||||
if (this.stationInfo.checkpoints)
|
||||
scheduledTrains = this.stationInfo.checkpoints.find(
|
||||
(cp) => cp.checkpointName === this.selectedOption
|
||||
)?.scheduledTrains;
|
||||
else scheduledTrains = this.stationInfo.scheduledTrains;
|
||||
|
||||
return (
|
||||
scheduledTrains?.sort((a, b) => {
|
||||
if (a.stopStatusID > b.stopStatusID) return 1;
|
||||
else if (a.stopStatusID < b.stopStatusID) return -1;
|
||||
|
||||
if (a.stopInfo.arrivalTimestamp > b.stopInfo.arrivalTimestamp) return 1;
|
||||
else if (a.stopInfo.arrivalTimestamp < b.stopInfo.arrivalTimestamp)
|
||||
return -1;
|
||||
|
||||
return a.stopInfo.departureTimestamp > b.stopInfo.departureTimestamp
|
||||
? 1
|
||||
: -1;
|
||||
}) || []
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/responsive.scss";
|
||||
@import "../styles/variables.scss";
|
||||
@import "../styles/user_badge.scss";
|
||||
|
||||
.list-anim {
|
||||
&-enter-active,
|
||||
&-leave-active {
|
||||
transition: all 250ms ease-out;
|
||||
}
|
||||
&-enter, &-leave-to /* .list-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0.5em 0;
|
||||
@@ -444,100 +89,7 @@ h3 {
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.option {
|
||||
&-container {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(#868686, 0.85);
|
||||
}
|
||||
|
||||
transition: background 150ms ease-in;
|
||||
}
|
||||
|
||||
&-selected,
|
||||
&-list {
|
||||
background: #444;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
&-selected {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.5rem 1rem;
|
||||
min-width: 10em;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
&-list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
z-index: 10;
|
||||
|
||||
background-color: rgba(#222, 0.95);
|
||||
overflow: hidden;
|
||||
|
||||
max-height: 0;
|
||||
|
||||
&.open {
|
||||
max-height: 250px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
|
||||
.scenery {
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-view {
|
||||
min-height: 100%;
|
||||
|
||||
@@ -556,6 +108,22 @@ h3 {
|
||||
}
|
||||
}
|
||||
|
||||
&-offline {
|
||||
align-self: center;
|
||||
font-size: 2em;
|
||||
text-align: center;
|
||||
padding: 0 1em;
|
||||
|
||||
color: $warningCol;
|
||||
|
||||
display: inline-block;
|
||||
|
||||
.button {
|
||||
margin: 1rem auto;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
}
|
||||
|
||||
&-wrapper {
|
||||
// background: #555;
|
||||
max-width: 950px;
|
||||
@@ -576,294 +144,5 @@ h3 {
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 1rem;
|
||||
|
||||
& > .station-name {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
color: $accentCol;
|
||||
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& > .station-hash {
|
||||
font-size: 1em;
|
||||
line-height: 0.8em;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
&-stats {
|
||||
font-size: 1.3em;
|
||||
padding: 1rem 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
& > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.6em;
|
||||
}
|
||||
|
||||
.likes,
|
||||
.spawns {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
span > img {
|
||||
width: 1.2em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-brief {
|
||||
padding: 1rem 0;
|
||||
|
||||
img {
|
||||
width: 2.5em;
|
||||
margin: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-dispatcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.level {
|
||||
display: inline-block;
|
||||
margin-right: 0.3em;
|
||||
background: firebrick;
|
||||
|
||||
border-radius: 0.1em;
|
||||
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 1.6em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 1em;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
&-info {
|
||||
display: flex;
|
||||
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
& > .user-list {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-timetables {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
font-size: 0.85em;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.spawn,
|
||||
.user.offline {
|
||||
padding: 0.3em 0.4em;
|
||||
background: #585858;
|
||||
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
font-size: 0.8em;
|
||||
text-align: center;
|
||||
|
||||
@include smallScreen() {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.timetable {
|
||||
&-header {
|
||||
a {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
margin: 1em auto;
|
||||
font-size: 0.8em;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
||||
background: #555;
|
||||
|
||||
@include smallScreen() {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.loading,
|
||||
&.empty {
|
||||
padding: 1rem;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
color: $accentCol;
|
||||
}
|
||||
}
|
||||
|
||||
&-general {
|
||||
padding: 0.5rem 0.3rem;
|
||||
border-radius: 10px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
text-align: left;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 95%;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&-schedule {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
|
||||
font-size: 1.2em;
|
||||
|
||||
@include smallScreen() {
|
||||
width: 100%;
|
||||
margin: 0.7em 0;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
display: inline-block;
|
||||
padding: 2px;
|
||||
margin-left: 50px;
|
||||
|
||||
position: relative;
|
||||
|
||||
transform: rotate(-45deg);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 55px;
|
||||
height: 3px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
||||
transform: translate(-100%, -1px) rotate(45deg);
|
||||
transform-origin: right bottom;
|
||||
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
|
||||
.general-info {
|
||||
span {
|
||||
color: $accentCol;
|
||||
}
|
||||
|
||||
.info-route {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.general-status {
|
||||
span.arriving {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.departed {
|
||||
color: lime;
|
||||
font-weight: bold;
|
||||
|
||||
&-away {
|
||||
font-weight: bold;
|
||||
color: rgb(0, 155, 0);
|
||||
}
|
||||
}
|
||||
|
||||
span.stopped {
|
||||
color: #ffa600;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
span.online {
|
||||
color: gold;
|
||||
}
|
||||
|
||||
span.terminated {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.schedule {
|
||||
&-arrival,
|
||||
&-stop,
|
||||
&-departure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin: 0 0.3rem;
|
||||
}
|
||||
|
||||
&-stop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.stop-time {
|
||||
font-size: 0.7em;
|
||||
margin: 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.arrival-time.begins,
|
||||
.departure-time.terminates {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user