Adds mobile toggle, changesin line number

This commit is contained in:
sperwing 2024-12-01 13:31:19 +01:00
parent f3c3f35d95
commit 17683c51af
6 changed files with 156 additions and 60 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="398mm" height="176mm" viewBox="0 0 398 176" version="1.1" id="svg13968" inkscape:version="0.92.1 r15371" sodipodi:docname="Logo RGTR Luxembourg.svg">
<defs id="defs13962"/>
<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="311.22051" inkscape:cy="-192.90662" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0" inkscape:window-width="1920" inkscape:window-height="1017" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1"/>
<metadata id="metadata13965">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(101.24257,78.206541)">
<path inkscape:connector-curvature="0" id="path1016" d="m -28.647418,23.728833 c -0.682981,0 -1.365961,-0.135472 -2.003343,-0.363793 -0.728579,-0.27425 -1.365961,-0.819444 -1.821281,-1.548023 l -44.394812,-43.802995 c -0.683972,-0.455651 -1.229167,-1.048095 -1.731407,-1.730415 -0.545194,-0.865042 -0.865703,-1.775683 -0.865703,-2.777519 0,-1.502755 0.50224,-2.823118 1.457157,-3.824856 0.954917,-1.046773 2.230342,-1.59362 3.596964,-1.59362 h 23.677312 c 2.413396,0 4.689931,-0.455651 6.78447,-1.365961 2.048941,-0.865042 3.915853,-2.140137 5.463975,-3.642661 1.548022,-1.548023 2.777519,-3.369436 3.688193,-5.464008 0.91064,-2.048941 1.36596,-4.32574 1.36596,-6.64784 0,-2.322199 -0.45532,-4.598966 -1.36596,-6.64794 -0.910641,-2.048941 -2.140138,-3.870321 -3.688193,-5.41841 -1.548023,-1.548022 -3.414968,-2.777519 -5.463975,-3.688259 -2.094539,-0.91031 -4.371206,-1.36596 -6.78447,-1.36596 h -31.281292 c -0.330421,0 -4.872059,0.09252 -5.190915,0.22799 -0.330421,0.135473 -0.637713,0.317204 -0.911962,0.592115 -0.231295,0.274249 -0.409722,0.546847 -0.591454,0.865042 -0.132168,0.317204 -0.231295,0.592115 -0.231295,0.865042 v 87.332765 h -10.791219 v -95.210135 c 0,-1.411559 0.545192,-2.686323 1.685145,-3.779158 1.093694,-1.092372 2.369119,-1.639219 3.779026,-1.639219 h 43.529968 c 3.870321,0 7.512982,0.728579 10.882451,2.140138 3.369469,1.457157 6.329149,3.506164 8.833477,6.010458 2.458663,2.504261 4.462237,5.50954 5.96486,8.878976 1.411558,3.369435 2.140137,7.012096 2.140137,10.836951 0,3.824756 -0.728579,7.512982 -2.140137,10.928016 -1.502755,3.369403 -3.506065,6.374582 -5.96486,8.878877 -2.504262,2.504261 -5.464008,4.5534 -8.787945,6.010458 -3.415001,1.502755 -7.057662,2.231333 -10.927983,2.231333 h -9.744084 l 35.789128,35.606934 c 0.91064,0.864712 1.411559,2.094539 1.411559,3.688259 0,1.502755 -0.500919,2.823117 -1.548023,3.870288 -0.956239,1.001176 -2.276601,1.548023 -3.824789,1.548023" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1018" d="m 225.51936,23.728833 c -0.68298,0 -1.36596,-0.135472 -2.00334,-0.363793 -0.72858,-0.27425 -1.36596,-0.819444 -1.82128,-1.548023 L 177.2543,-21.985978 c -0.63739,-0.455651 -1.2295,-1.048095 -1.73009,-1.730415 -0.54618,-0.865042 -0.81977,-1.775683 -0.81977,-2.777519 0,-1.502755 0.50092,-2.823118 1.45715,-3.824856 0.95624,-1.046773 2.23101,-1.59362 3.59713,-1.59362 H 203.436 c 2.4134,0 4.68993,-0.455651 6.73891,-1.365961 2.09454,-0.865042 3.91588,-2.140137 5.46401,-3.642661 1.59362,-1.548023 2.82311,-3.369436 3.73372,-5.464008 0.91064,-2.048941 1.32036,-4.32574 1.32036,-6.64784 0,-2.322199 -0.40972,-4.598966 -1.32036,-6.64794 -0.91064,-2.048941 -2.14014,-3.870321 -3.73372,-5.41841 -1.54803,-1.548022 -3.36944,-2.777519 -5.46398,-3.688259 -2.04894,-0.91031 -4.32567,-1.36596 -6.73894,-1.36596 h -31.28136 c -0.3172,0 -4.87205,0.09252 -5.19078,0.22799 -0.3172,0.135473 -0.63738,0.317204 -0.86504,0.592115 -0.27425,0.274249 -0.45532,0.546847 -0.63738,0.865042 -0.13548,0.317204 -0.18173,0.592115 -0.18173,0.865042 v 87.332765 h -10.88259 v -95.210135 c 0,-1.411559 0.59212,-2.686323 1.68482,-3.779158 1.1383,-1.092372 2.3678,-1.639219 3.82479,-1.639219 h 43.52993 c 3.82479,0 7.51299,0.728579 10.88245,2.140138 3.36947,1.457157 6.32915,3.506164 8.78795,6.010458 2.50426,2.504261 4.50777,5.50954 5.91933,8.878976 1.50242,3.369435 2.231,7.012096 2.231,10.836951 0,3.824756 -0.72858,7.512982 -2.231,10.928016 -1.41156,3.369403 -3.415,6.374582 -5.91933,8.878877 -2.45866,2.504261 -5.41848,4.5534 -8.74241,6.010458 -3.415,1.502755 -7.1032,2.231333 -10.92799,2.231333 h -9.74411 l 35.74363,35.606934 c 0.95623,0.864712 1.45715,2.094539 1.45715,3.688259 0,1.502755 -0.54618,2.823117 -1.50242,3.870288 -1.00184,1.001176 -2.3678,1.548023 -3.87036,1.548023" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1020" d="M 109.81929,23.683367 H 98.84578 v -87.150801 c 0,-0.637713 -0.227991,-1.229167 -0.774177,-1.775683 -0.409722,-0.546517 -0.91064,-0.773846 -1.502755,-0.773846 H 73.52905 c -1.593621,0 -2.868716,-0.546847 -3.961418,-1.593621 -1.047104,-1.047765 -1.548023,-2.322199 -1.548023,-3.915886 0,-1.548023 0.500919,-2.823118 1.593621,-3.870321 1.047104,-1.047765 2.322199,-1.548353 3.915919,-1.548353 h 61.970801 c 1.54802,0 2.91398,0.592114 3.96138,1.730415 1.04711,1.047765 1.59362,2.322199 1.59362,3.688226 0,1.548022 -0.54618,2.868385 -1.63922,3.915886 -1.0471,1.046774 -2.41339,1.593621 -3.91585,1.593621 h -23.13086 c -0.40972,0 -1.00184,0.09252 -1.73009,0.819444 -0.59211,0.546847 -0.81977,1.092372 -0.81977,1.730084 z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1022" d="m 65.105626,-20.711643 v -10.836853 l -30.461782,-0.04626 c -0.728578,0 -1.411559,0.135473 -2.140137,0.363794 -0.728579,0.227991 -1.411559,0.637713 -1.958075,1.183899 -1.092703,1.138961 -1.639219,2.413395 -1.639219,3.77929 0,1.36596 0.546186,2.595457 1.548022,3.642661 0.546186,0.773846 1.229497,1.320362 2.048941,1.548022 0.728579,0.27425 1.411559,0.363794 2.140138,0.363794 H 54.131781 V 9.7029876 c -1.047104,0.4556514 -2.048941,0.9103104 -3.096376,1.3203634 -4.280142,1.59362 -8.879009,2.413395 -13.614471,2.413395 -5.555039,0 -10.836919,-1.046774 -15.708977,-3.141643 C 16.88543,8.2461611 12.605321,5.4229444 8.9626608,1.8713145 5.4110639,-1.6801832 2.4969153,-5.9148926 0.44794126,-10.741386 c -2.04894096,-4.780928 -3.09637576,-9.97181 -3.09637576,-15.435785 0,-5.41841 1.0471044,-10.609192 3.09637576,-15.39022 2.09453914,-4.872091 4.96312264,-9.106669 8.51471954,-12.658299 3.6426602,-3.597062 7.9228022,-6.511211 12.7493292,-8.60575 4.872058,-2.094539 10.153938,-3.141643 15.708977,-3.141643 3.278438,0 6.465745,0.363793 9.561989,1.183898 v -0.04626 c 0.546186,0.181732 1.138301,0.317204 1.730415,0.317204 3.050778,0 5.555072,-2.458663 5.555072,-5.463974 0,-2.458994 -1.639219,-4.507803 -3.824789,-5.190783 0,0 -0.04626,0 -0.04626,0 -0.274249,-0.135473 -0.546186,-0.181732 -0.865042,-0.227991 -3.915754,-0.955908 -7.968203,-1.502755 -12.111716,-1.502755 -4.735496,0 -9.288797,0.592115 -13.614472,1.821281 -4.325674,1.229497 -8.423655,2.959582 -12.15738,5.099719 -3.7337242,2.185735 -7.2398221,4.826493 -10.3360657,7.922836 -3.1419739,3.096045 -5.782732,6.556777 -8.0138672,10.290468 -2.1401373,3.68826 -3.9158541,7.786241 -5.0997191,12.066383 -1.183899,4.325608 -1.821281,8.879009 -1.821281,13.523308 0,6.921066 1.320362,13.52344 4.0069504,19.6249289 C -6.9741418,-0.45346202 -3.331613,4.96508 1.2672533,9.4728826 5.8661198,14.071749 11.330094,17.71441 17.522614,20.3553 c 6.147021,2.641056 12.840427,3.961352 19.898089,3.961352 6.921032,0 13.523374,-1.320362 19.715894,-3.961352 2.777519,-1.229496 5.418476,-2.640725 7.968335,-4.280142 V 2.1875605 h -0.04626 V -20.71574 Z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1024" d="M 80.632475,97.037504 H 148.75026 V 40.621676 H 80.632475 Z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1026" d="m 154.3964,97.037504 h 68.11778 V 40.621676 H 154.3964 Z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1028" d="M 6.8685512,40.621676 V 63.20622 L 40.927428,97.037504 H 74.986339 V 40.621676 Z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
<path inkscape:connector-curvature="0" id="path1030" d="M 296.27811,97.037504 V 74.498459 L 262.21923,40.621676 h -34.05891 v 56.415828 z m 0,0" style="fill:#3f3f3f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:11.65652084"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 9.3 KiB

View File

@ -1,23 +1,24 @@
<template>
<div class="results">
<li class="journey" v-for="connection in this.connections" :key="connections.indexOf(connection)">
<div class="results" :class="getDisplayClass()">
<div class="journey" v-for="connection in this.connections" :key="connections.indexOf(connection)"><div>
<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 class="linenameinner" :style="{backgroundColor:getLineColors(leg)[1], color:getLineColors(leg)[0]}">{{ getRouteNumber(leg) }}</div>
<div class="linenameinner" :style="{backgroundColor:getLineColors(leg)[1], color:getLineColors(leg)[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="station" >{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<p v-if="leg.departurePlatform"> Gleis {{ leg.departurePlatform }} </p></div>
<div class="line">
<p class="zugnummer">{{ leg.line?.fahrtNr }}</p>
<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 class="station">{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }} <p v-if="leg.arrivalPlatform">Gleis {{ leg.arrivalPlatform }}</p></div>
</div>
<hr/>
</div>
</li>
</div></div>
</div>
</template>
@ -29,7 +30,8 @@
export default {
name: 'RoutingBahn',
props: {
connections: Array
connections: Array,
isMobile: Boolean,
},
components: {
},
@ -40,6 +42,9 @@
}
},
methods: {
getDisplayClass(){
return this.isMobile ? "displaytall" : "displaywide";
},
toDate(string){
return new Date(string).toLocaleDateString("de-DE");
},
@ -55,6 +60,9 @@
getLineColors(line){
return routefunctions.getLineColors(line)
},
getRouteNumber(leg){
return routefunctions.getRouteNumber(leg)
},
getOperatorLogo(line){
return operatorfunctions.getOperatorLogo(line)
},
@ -64,23 +72,19 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
.displaywide {
display: inline-flex;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
.displaytall {
display: block;
}
.journey {
margin-left: auto;
margin-right: auto;
width: 600px;
}
.journey > div{
margin: 40px;
width: 450px;
}
.station {
margin: 4px;
@ -110,13 +114,12 @@
.operator {
font-size: 10px;
margin:10px;
}
.operator-logo {
margin:10px;
max-width:100px;
max-height:20px;
}
.results {
display: inline-flex;
max-height:40px;
}
div {
font-family:"Raveo-display-medium";

View File

@ -1,12 +1,13 @@
<template>
<div class="search">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div class="search" :class="getDisplayClass()">
<v-switch label="Mobile" v-model="isMobile"></v-switch>
<v-select
v-model="selectedService"
prepend-icon="fa-regular fa-calendar"
prepend-icon="mdi mdi-dots-triangle"
:items="services"
item-title="name"
item-value="id"
density="compact"
label="Service"
class="inputTextField"
></v-select>
@ -14,7 +15,7 @@
v-model="date.value"
:active="date.menu"
label="date"
prepend-icon="fa-regular fa-calendar"
prepend-icon="mdi mdi-calendar-month"
readonly
class="inputTextField"
>
@ -37,7 +38,7 @@
v-model="time.value"
:active="time.menu"
label="time"
prepend-icon="fa-regular fa-clock"
prepend-icon="mdi mdi-clock-outline"
readonly
class="inputTextField"
>
@ -57,7 +58,7 @@
</v-menu>
</v-text-field>
<v-text-field
prepend-icon="fa-regular fa-circle-play"
prepend-icon="mdi mdi-ray-start-arrow"
:active="from.menu"
label="from"
type="text"
@ -79,7 +80,7 @@
</v-menu>
</v-text-field>
<v-text-field
prepend-icon="fa-solid fa-bullseye"
prepend-icon="mdi mdi-bullseye"
:active="to.menu"
label="to"
type="text"
@ -101,7 +102,7 @@
</v-text-field>
<v-btn @click="searchConnection()">find connection</v-btn>
</div>
<routing v-if="showRouting" :connections="connections"></routing>
<routing v-if="showRouting" :connections="connections" :isMobile="isMobile"></routing>
</template>
<script>
import routing from './routing';
@ -141,9 +142,13 @@
date: {value:new Date(), menu:false},
services: services,
selectedService: services[0].id,
isMobile: false,
}
},
methods: {
getDisplayClass(){
return this.isMobile ? "displaytall" : "displaywide";
},
searchStationFrom() {
client.get("/searchStation", {params: {text: this.fromName, service:this.selectedService}}).then(res => this.from = {name: res.data.name, id: res.data.id});
},
@ -228,24 +233,15 @@
<!-- 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;
}
.search {
.displaywide {
display: inline-flex;
vertical-align:middle;
bottom: 0;
}
.displaytall {
display: block;
}
.search > * {
padding: 10px;
@ -258,6 +254,8 @@
}
.inputTextField{
width: 300pt;
margin-left: auto;
margin-right: auto;
}
@font-face {
font-family: "Raveo-display-bold";
@ -267,4 +265,5 @@
font-family: "Raveo-display-medium";
src: url("../assets/Raveo Display Medium.woff2") format("opentype");
}
</style>

View File

@ -78,7 +78,7 @@ let operatorfunctions = {
return new URL('../assets/logos/zsrbije.png', import.meta.url);
} else if (operator.id === "sncb"){
return new URL('../assets/logos/sncb.svg', import.meta.url);
} else if (operator.id === "cfl"){
} else if (operator.id === "cfl" || operator.id ==="chemins-de-fer-luxembourgeois"){
return new URL('../assets/logos/cfl.svg', import.meta.url);
} else if (operator.id.startsWith("s-bahn-berlin")){
return new URL('../assets/logos/sbahnberlin.svg', import.meta.url);
@ -162,6 +162,10 @@ let operatorfunctions = {
return new URL('../assets/logos/molli.svg', import.meta.url);
} else if (operator.id === "berliner-verkehrsbetriebe"){
return new URL('../assets/logos/bvg_berlin.svg', import.meta.url);
} else if (operator.id === "ville-de-luxembourg-service-autobus"){
return new URL('../assets/logos/avl_lux.svg', import.meta.url);
} else if (operator.id === "regime-general-des-transports-routiers"){
return new URL('../assets/logos/rgtr.svg', import.meta.url);
} else {
console.log(operator.id);
return (null);

View File

@ -1,22 +1,65 @@
let routefunctions = {
getLineColors(line){
getLineColors(leg){
let line = leg?.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"){
} else if (line.productName === "RE" || line.productName === "RB" || line.productName === "R"){
return (['white', 'red']);
} else if (line.productName === "IC" || line.productName === "ICE"){
} else if (line.productName === "IR"){
return (['green', 'white']);
} else if (line.productName === "IC" || line.productName === "ICE" || line.productName === "RJ" || line.productName === "RJX"){
return (['red', 'white']);
} else if (line.productName === "EC" || line.productName === "ECE"){
return (['blue', 'white']);
} else if (line.productName === "MEX"){
return (['black', 'yellow']);
} else if (line.productName === "EST"){
return (['yellow', 'blue']);
} else if (line.productName === "TGV"){
return (['IndianRed', 'white']);
} else if (line.productName === "EN"){
return (['white', 'navy']);
} else {
console.log(line.productName)
return (['black', 'white']);
}
},
getRouteNumber(leg){
if (!leg) {
console.log(leg)
return ""
} else if (leg.walking){
return "";
} else if (leg.line){
if (leg.line.name) {
if (leg.line.fahrtNr && leg.line.name.endsWith(leg.line.fahrtNr)){
return leg.line.name.replace(leg.line.fahrtNr, "").trim();
} else {
return leg.line.name;
}
} else if(leg.line.product){
if (leg.line.product === 'regionalExpress'){
return "REX"
} else if (leg.line.product === 'regional'){
return "REG"
} else if (leg.line.product === 'national'){
return "NAT"
} else {
console.log(leg)
return ""
}
} else {
console.log(leg)
return ""
}
} else {
console.log(leg)
return ""
}
}
}
export default routefunctions;