sperwing/bahnui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed backend links, added line colors

Browse Source
This commit is contained in:
sperwing 2024-11-17 18:53:35 +01:00
parent 60461d329c
commit 6c1454060c
4 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/bahnui-front/src/assets/Raveo Display Bold.woff2 Normal file
View File

Binary file not shown.

BIN
front/bahnui-front/src/assets/Raveo Display Medium.woff2 Normal file
View File

Binary file not shown.

BIN
front/bahnui-front/src/assets/Raveo Display Regular.woff2 Normal file
View File

Binary file not shown.

51
front/bahnui-front/src/components/routing.vue
View File

@ -13,7 +13,10 @@
<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/>{{ leg.line?.name }}<br/><p class="operator">{{ leg.line?.operator?.name }}</p></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>
@ -69,11 +72,11 @@
client.get("/searchStation", {params: {text: this.from.name}}).then(res => this.from = {name: res.data.name, id: res.data.id});
},
searchStationTo() {
axios.get("/searchStation", {params: {text: this.to.name}}).then(res => this.to = {name: res.data.name, id: res.data.id});
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){
axios.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
client.get("/searchConnection", {params: {from: this.from.id, to:this.to.id}}).then(res => {this.connections = res.data;console.log(this.connections)});
}
},
toDate(string){
@ -87,13 +90,11 @@
let color1;
let color2;
let minutes;
console.log(this.toTime(string));
let i = 0;
color1 = timecolors[i];
color2 = timecolors[i+1];
while (color1.h < date.getHours() && i+1 < timecolors.length){
console.log(color2.h +"<"+ date.getHours());
i++;
color1 = timecolors[i];
if (i+2 < timecolors.length) {
@ -103,19 +104,35 @@
}
}
minutes = (date.getHours()-color1.h) * 60 + date.getMinutes();
console.log(color1.h+" - "+color2.h);
console.log(minutes);
let maxMinutes = color2.h == 0 ? (24 - color1.h)*60 : (color2.h - color1.h)*60
console.log("max:"+maxMinutes);
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+")"
console.log(color);
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']);
}
}
}
@ -140,6 +157,7 @@
}
.journey {
margin: 40px;
width: 450px;
}
.station {
margin: 4px;
@ -160,9 +178,22 @@
display: inline-flex;
}
div {
font-family:Verdana, Geneva, Tahoma, sans-serif;
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>