200 lines
6.4 KiB
Vue
200 lines
6.4 KiB
Vue
<template>
|
|
<div class="search">
|
|
<input type="text" v-model="from.name">
|
|
<button @click="searchStationFrom()">search</button>
|
|
<br/>
|
|
<input type="text" v-model="to.name">
|
|
<button @click="searchStationTo()">search</button>
|
|
<br/>
|
|
<button @click="searchConnection()">find connection</button>
|
|
</div>
|
|
<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="station" >{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<br/> Gleis {{ leg.departurePlatform }}</div>
|
|
<div class="line">
|
|
{{ leg.line?.product }}<br/>
|
|
<div class="linename" :style="{backgroundColor:getLineColors(leg.line)[1], color:getLineColors(leg.line)[0]}">{{ leg.line?.name }}</div><br/>
|
|
<p class="operator">{{ leg.line?.operator?.name }}</p></div>
|
|
<div class="station" >{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }}<br/> Gleis {{ leg.arrivalPlatform }}</div>
|
|
<hr/>
|
|
</div>
|
|
</li>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
const client = axios.create({
|
|
baseURL: process.env.VUE_APP_BASE_URL
|
|
});
|
|
const timecolors = [
|
|
{r:147, g:147, b:147, h:0},
|
|
{r:156, g:151, b:146, h:1},
|
|
{r:166, g:155, b:145, h:2},
|
|
{r:175, g:163, b:149, h:3},
|
|
{r:201, g:177, b:153, h:4},
|
|
{r:235, g:212, b:165, h:5},
|
|
{r:249, g:230, b:176, h:6},
|
|
{r:250, g:249, b:196, h:7},
|
|
{r:248, g:255, b:208, h:8},
|
|
{r:237, g:255, b:226, h:9},
|
|
{r:239, g:255, b:242, h:10},
|
|
{r:231, g:255, b:251, h:11},
|
|
{r:220, g:249, b:255, h:12},
|
|
{r:220, g:236, b:255, h:13},
|
|
{r:224, g:219, b:254, h:14},
|
|
{r:243, g:209, b:254, h:15},
|
|
{r:247, g:190, b:236, h:16},
|
|
{r:243, g:175, b:203, h:17},
|
|
{r:234, g:163, b:183, h:18},
|
|
{r:226, g:163, b:190, h:19},
|
|
{r:206, g:160, b:200, h:20},
|
|
{r:178, g:153, b:190, h:21},
|
|
{r:159, g:152, b:178, h:22},
|
|
{r:146, g:146, b:167, h:23}]
|
|
export default {
|
|
name: 'HelloWorld',
|
|
props: {
|
|
msg: String
|
|
},
|
|
data() {
|
|
return {
|
|
from: {name:"", id:null},
|
|
to: {name:"", id:null},
|
|
connections: []
|
|
}
|
|
},
|
|
methods: {
|
|
searchStationFrom() {
|
|
client.get("/searchStation", {params: {text: this.from.name}}).then(res => this.from = {name: res.data.name, id: res.data.id});
|
|
},
|
|
searchStationTo() {
|
|
client.get("/searchStation", {params: {text: this.to.name}}).then(res => this.to = {name: res.data.name, id: res.data.id});
|
|
},
|
|
searchConnection() {
|
|
if (this.from.id && this.to.id){
|
|
client.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
|
|
}
|
|
},
|
|
toDate(string){
|
|
return new Date(string).toLocaleDateString("de-DE");
|
|
},
|
|
toTime(string){
|
|
return new Date(string).toLocaleTimeString("de-DE", {timeStyle: 'short'});
|
|
},
|
|
getTimeColor(string){
|
|
let date = new Date(string);
|
|
let color1;
|
|
let color2;
|
|
let minutes;
|
|
|
|
let i = 0;
|
|
color1 = timecolors[i];
|
|
color2 = timecolors[i+1];
|
|
while (color1.h < date.getHours() && i+1 < timecolors.length){
|
|
i++;
|
|
color1 = timecolors[i];
|
|
if (i+2 < timecolors.length) {
|
|
color2 = timecolors[i+1];
|
|
} else {
|
|
color2 = timecolors[0];
|
|
}
|
|
}
|
|
minutes = (date.getHours()-color1.h) * 60 + date.getMinutes();
|
|
let maxMinutes = color2.h == 0 ? (24 - color1.h)*60 : (color2.h - color1.h)*60
|
|
let r = (color2.r * minutes + color1.r * (maxMinutes-minutes))/maxMinutes;
|
|
let g = (color2.g * minutes + color1.g * (maxMinutes-minutes))/maxMinutes;
|
|
let b = (color2.r * minutes + color1.b * (maxMinutes-minutes))/maxMinutes;
|
|
let color = "rgb("+r+","+g+","+b+")"
|
|
return color;
|
|
},
|
|
getGradient(time1, time2){
|
|
return "linear-gradient(0deg,"+this.getTimeColor(time2)+","+this.getTimeColor(time1)+")";
|
|
},
|
|
getLineColors(line){
|
|
console.log(line);
|
|
if (!line){
|
|
return (['black', 'white']);
|
|
} else if (line.productName === "STB"){
|
|
return (['white', 'blue']);
|
|
} else if (line.productName === "S"){
|
|
return (['white', 'green']);
|
|
} else if (line.productName === "RE" || line.productName === "RB"){
|
|
return (['white', 'red']);
|
|
} else if (line.productName === "IC" || line.productName === "ICE"){
|
|
return (['red', 'white']);
|
|
} else if (line.productName === "EC" || line.productName === "ECE"){
|
|
return (['blue', 'white']);
|
|
} else if (line.productName === "MEX"){
|
|
return (['black', 'yellow']);
|
|
} else {
|
|
return (['black', 'white']);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
.operator {
|
|
font-size: 10px;
|
|
}
|
|
.results {
|
|
display: inline-flex;
|
|
}
|
|
div {
|
|
font-family:"Raveo-display-medium";
|
|
}
|
|
.walking > div {
|
|
font-size: 12px;
|
|
}
|
|
.linename {
|
|
width:100px;
|
|
font-family:"Raveo-display-bold";
|
|
align-content: center;
|
|
}
|
|
@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>
|