bahnui/front/bahnui-front/src/components/routing.vue

<template>
  <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)[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" >{{ leg.origin.name }}<br/>{{ timeWithDelay(leg.departure, leg.departureDelay) }}<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">{{ leg.destination.name }}<br/>{{ timeWithDelay(leg.arrival, leg.arrivalDelay) }} <p v-if="leg.arrivalPlatform">Gleis {{ leg.arrivalPlatform }}</p></div>
        </div>
        <div>
          <p v-for="remark in leg.remarks" :key="leg.remarks.indexOf(remark)">{{remark.text}}</p>
        </div>
      </div>
      <hr/>
    </div></div>
  </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,
      isMobile: Boolean,
    },
    components: {
    },
    data() {
        return {
            from: {name:"", id:null},
            to: {name:"", id:null},
        }
    },
    methods: {
      getDisplayClass(){
        return this.isMobile ? "displaytall" : "displaywide";
      },
      toDate(string){
        return new Date(string).toLocaleDateString("de-DE");
      },
      timeWithDelay(actual, delay){
        let time = this.toTime(actual);
        if (delay > 30){
          return time + " +" + Math.ceil(delay/60.0);
        }
        return time;
      },
      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)
      },
      getRouteNumber(leg){
        return routefunctions.getRouteNumber(leg)
      },
      getOperatorLogo(line){
        return operatorfunctions.getOperatorLogo(line)
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .displaywide {
    display: inline-flex;
  }
  .displaytall {
    display: block;
  }
  .journey {
    margin-left: auto;
    margin-right: auto;
    flex: 1;
  }
  .journey > div{
    margin: 40px;
  }
  .station {
    margin: 4px;
    display: inline-block;
    width:150px;
    vertical-align: text-top;
  }
  .line {
    margin: 4px;
    display: inline-block;
    width:120px;
    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;
    margin:10px;
  }
  .operator-logo {
    margin:10px;
    max-width:100px;
    max-height:40px;
  }
  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>