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

<template>
  <div class="search">
    <v-select
      v-model="selectedService"
      prepend-icon="fa-regular fa-calendar"
      :items="services"
      item-title="name"
      item-value="id"
      density="compact"
      label="Service"
      class="inputTextField"
    ></v-select>
    <v-text-field
      v-model="date.value"
      :active="date.menu"
      label="date"
      prepend-icon="fa-regular fa-calendar"
      readonly
      class="inputTextField"
    >
      <v-menu
        v-model="date.menu"
        :close-on-content-click="false"
        activator="parent"
        transition="scale-transition"
      >
      </v-menu>
    </v-text-field>
    <v-text-field
      v-model="time.value"
      :active="time.menu"
      label="time"
      prepend-icon="fa-regular fa-clock"
      readonly
      class="inputTextField"
    >
      <v-menu
        v-model="time.menu"
        :close-on-content-click="false"
        activator="parent"
        transition="scale-transition"
      >
      </v-menu>
    </v-text-field>
    <v-text-field       
      prepend-icon="fa-regular fa-circle-play"
      :active="from.menu" 
      label="from" 
      type="text" 
      v-model="fromName" 
      class="inputTextField"
      @change="loadChoicesFrom()"
    >
      <v-menu
        v-model="from.menu"
        :close-on-content-click="false"
        activator="parent"
        transition="scale-transition"
      >
        <div v-if="from.menu">
          <div v-for="choice in from.choices" :key="from.choices.indexOf(choice)" @click="chooseFrom(choice)">
            {{ choice.name }}
          </div>
        </div>
      </v-menu>
    </v-text-field>
    <v-text-field       
      prepend-icon="fa-solid fa-bullseye"
      :active="to.menu" 
      label="to" 
      type="text" 
      v-model="toName" 
      class="inputTextField"
    >
      <v-menu
        v-model="to.menu"
        :close-on-content-click="false"
        activator="parent"
        transition="scale-transition"
      >
        <div v-if="to.menu">
          <div v-for="choice in to.choices" :key="to.choices.indexOf(choice)" @click="chooseTo(choice)">
            {{ choice.name }}
          </div>
        </div>
      </v-menu>
    </v-text-field>
    <v-btn @click="searchConnection()">find connection</v-btn>
  </div>
</template>
<script>
  import axios from 'axios';

  const client = axios.create({
    baseURL: process.env.VUE_APP_BASE_URL
  });
  const services = [
    {id:"db", name:"Deutsche Bahn"},
    {id:"vbb", name:"Verkehrsverbund Berlin-Brandenburg"},
    {id:"pkp", name:"Polskie Koleje Państwowe"},
    {id:"irish", name:"Iarnród Éireann"},
    {id:"oebb", name:"Österreichische Bundesbahnen"},
    {id:"lu", name:"Mobilitéitszentral (Luxembourg)"}
  ]
  export default {
    name: 'SearchBahn',
    props: {
    },
    components: {
    },
    data() {
        return {
            from: {name:"", id:null, choices:[], menu:false, update:null},
            to: {name:"", id:null, choices:[], menu:false, update:null},
            fromName : "",
            toName : "",
            connections: [],
            showRouting: false,
            time: {value:new Date().toLocaleTimeString(), menu:false},
            date: {value:new Date(), menu:false},
            services: services,
            selectedService: services[0].id,
        }
    },
    methods: {
      searchStationFrom() {
        client.get("/searchStation", {params: {text: this.fromName, service:this.selectedService}}).then(res => this.from = {name: res.data.name, id: res.data.id});
      },
      searchStationTo() {
        client.get("/searchStation", {params: {text: this.toName, service:this.selectedService}}).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, service:this.selectedService, date:this.getSelectedDate()}}).then(res => {this.connections = res.data;console.log(this.connections)});
          this.showRouting = true;
        }
      },
      getSelectedDate(){
        let timeArray = this.time.value.split(":");
        if (timeArray.length <= 1){
          return new Date(this.date.value.getFullYear(), this.date.value.getMonth(), this.date.value.getDate())
        }
        console.log(this.date.value.getFullYear()+" "+this.date.value.getMonth()+" "+this.date.value.getDate()+" "+timeArray[0]+" "+timeArray[1])
        console.log(new Date(this.date.value.getFullYear(), this.date.value.getMonth(), this.date.value.getDate(), timeArray[0], timeArray[1]))
        return new Date(this.date.value.getFullYear(), this.date.value.getMonth(), this.date.value.getDate(), timeArray[0], timeArray[1])
      },
      timeLoadChoicesFrom(){
        if (this.from.menu){
          let time = Date.now()
          this.from.update = time;
          console.log("timeLoadChoicesFrom")
          let timer = setInterval(() => {
            if (time == this.from.update){
              this.loadChoicesFrom();
            } else {
              console.log("nicht laden")
            }
            clearInterval(timer);
          }, 500);
        }
      },
      timeLoadChoicesTo(){
        if (this.to.menu){
          let time = Date.now()
          this.to.update = time;
          console.log("timeLoadChoicesTo")
          let timer = setInterval(() => {
            if (time == this.to.update){
              this.loadChoicesTo();
            } else {
              console.log("nicht laden")
            }
            clearInterval(timer);
          }, 500);
        }
      },
      loadChoicesFrom(){
        client.get("/searchStations", {params: {text: this.fromName, service: this.selectedService}}).then(res => this.from.choices = res.data);
      },
      loadChoicesTo(){
        client.get("/searchStations", {params: {text: this.toName, service: this.selectedService}}).then(res => this.to.choices = res.data);
      },
      chooseFrom(choice){
        this.fromName = choice.name;
        this.from.id = choice.id;
        this.from.menu = false;
      },
      chooseTo(choice){
        this.toName = choice.name;
        this.to.id = choice.id;
        this.to.menu = false;
      },
      testAlert(){
        alert("testAlert")
      }
    },
    watch: {
      fromName: function() {
        this.timeLoadChoicesFrom();
      },
      toName: function() {
        this.timeLoadChoicesTo();
      }
    }
  }
</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;
  }
  .search {
    display: inline-flex;
    vertical-align:middle;
    bottom: 0;
  }
  .search > * {
    padding: 10px;
  }
  div {
    font-family:"Raveo-display-medium";
  }
  .walking > div {
    font-size: 12px;
  }
  .inputTextField{
    width: 300pt;
  }
  @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>