136 lines
3.8 KiB
Vue
136 lines
3.8 KiB
Vue
<template>
|
|
<div class="results">
|
|
<li class="journey" v-for="connection in this.connections" :key="connections.indexOf(connection)">
|
|
<h2>{{ toTime(connection.legs[0].departure) }} - {{ toTime(connection.legs[connection.legs.length -1].arrival) }}</h2>
|
|
<div class="leg" v-for="leg in connection.legs" :key="connection.legs.indexOf(leg)" :class="leg.walking ? 'walking' : null" :style="{backgroundColor:getTimeColor(leg.arrival), background:getGradient(leg.departure, leg.arrival)}" >
|
|
<div class="linename" >
|
|
<div class="linenameinner" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.line?.name }}</div>
|
|
<div class="linenameinner" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.direction }}</div>
|
|
</div>
|
|
<div class="lineinfo">
|
|
<div class="station" v-if="leg.departurePlatform">{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<br/> Gleis {{ leg.departurePlatform }}</div>
|
|
<div class="line">
|
|
<p class="operator" v-if="!getOperatorLogo(leg.line?.operator)">{{ leg.line?.operator?.name }}</p>
|
|
<img class="operator-logo" :src="getOperatorLogo(leg.line?.operator)" v-if="getOperatorLogo(leg.line?.operator)">
|
|
</div>
|
|
<div class="station" v-if="leg.arrivalPlatform">{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }}<br/> Gleis {{ leg.arrivalPlatform }}</div>
|
|
</div>
|
|
<hr/>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import timefunctions from '@/lib/time.js'
|
|
import routefunctions from '@/lib/routes.js'
|
|
import operatorfunctions from '@/lib/operators.js'
|
|
|
|
export default {
|
|
name: 'RoutingBahn',
|
|
props: {
|
|
connections: Array
|
|
},
|
|
components: {
|
|
},
|
|
data() {
|
|
return {
|
|
from: {name:"", id:null},
|
|
to: {name:"", id:null},
|
|
}
|
|
},
|
|
methods: {
|
|
toDate(string){
|
|
return new Date(string).toLocaleDateString("de-DE");
|
|
},
|
|
toTime(string){
|
|
return new Date(string).toLocaleTimeString("de-DE", {timeStyle: 'short'});
|
|
},
|
|
getGradient(time1, time2){
|
|
return "linear-gradient(0deg,"+timefunctions.getTimeColor(time2)+","+timefunctions.getTimeColor(time1)+")";
|
|
},
|
|
getTimeColor(string) {
|
|
timefunctions.getTimeColor(string)
|
|
},
|
|
getLineColors(line){
|
|
return routefunctions.getLineColors(line)
|
|
},
|
|
getOperatorLogo(line){
|
|
return operatorfunctions.getOperatorLogo(line)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
h3 {
|
|
margin: 40px 0 0;
|
|
}
|
|
ul {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
display: inline-block;
|
|
margin: 0 10px;
|
|
}
|
|
a {
|
|
color: #42b983;
|
|
}
|
|
.journey {
|
|
margin: 40px;
|
|
width: 450px;
|
|
}
|
|
.station {
|
|
margin: 4px;
|
|
display: inline-block;
|
|
width:150px;
|
|
vertical-align: text-top;
|
|
}
|
|
.line {
|
|
margin: 4px;
|
|
display: inline-block;
|
|
width:100px;
|
|
vertical-align: text-top;
|
|
align-content: center;
|
|
}
|
|
.linename {
|
|
width:100px;
|
|
font-family:"Raveo-display-bold";
|
|
align-content: center;
|
|
display:inline-flex;
|
|
width:max-content;
|
|
}
|
|
.linenameinner {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
margin: 15px;
|
|
}
|
|
|
|
.operator {
|
|
font-size: 10px;
|
|
}
|
|
.operator-logo {
|
|
max-width:100px;
|
|
max-height:20px;
|
|
}
|
|
.results {
|
|
display: inline-flex;
|
|
}
|
|
div {
|
|
font-family:"Raveo-display-medium";
|
|
}
|
|
.walking > div {
|
|
font-size: 12px;
|
|
}
|
|
@font-face {
|
|
font-family: "Raveo-display-bold";
|
|
src: url("../assets/Raveo Display Bold.woff2") format("opentype");
|
|
}
|
|
@font-face {
|
|
font-family: "Raveo-display-medium";
|
|
src: url("../assets/Raveo Display Medium.woff2") format("opentype");
|
|
}
|
|
</style>
|