Added layouting, dockerfiles

back/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:19-alpine
+RUN mkdir -p /home/node/app/node_modules && chown -R node:node /home/node/app
+WORKDIR /home/node/app
+COPY package*.json ./
+USER node
+RUN npm install
+COPY --chown=node:node . .
+EXPOSE 8080
+CMD [ "node", "app.js" ]

back/dist/app.js

@@ -18,9 +18,12 @@ app.get('/', (req, res) => {
 });
 app.get('/searchStation', (req, res) => {
     let query = req.query;
-    console.log(query);
     client.locations(query.text, { results: 1 }).then(result => res.send({ name: result[0].name, id: result[0].id }));
 });
+app.get('/searchConnection', (req, res) => {
+    let query = req.query;
+    client.journeys(query.from, query.to, { results: 5 }).then(result => res.send(result.journeys)).catch(error => res.sendStatus(500));
+});
 app.listen(port, () => {
     return console.log(`Express is listening at http://localhost:${port}`);
 });

back/dist/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AACzC,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,4BAA4B,CAAA;AAC/D,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;AACtB,MAAM,IAAI,GAAG,IAAI,CAAC;AAElB,0EAA0E;AAC1E,MAAM,SAAS,GAAG,sBAAsB,CAAA;AAExC,iDAAiD;AACjD,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEjD,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;IACvB,GAAG,CAAC,MAAM,CAAC,6BAA6B,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD,GAAG,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;IAClE,GAAG,CAAC,MAAM,CAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC;IAC3D,IAAI,EAAE,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAC,OAAO,EAAE,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACzF,CAAC,CAAC,CAAC;AACH,GAAG,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;IACnC,IAAI,KAAK,GAAQ,GAAG,CAAC,KAAK,CAAC;IAC3B,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACnB,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAC,CAAC,CAAC,CAAC;AAChH,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE;IACpB,OAAO,OAAO,CAAC,GAAG,CAAC,4CAA4C,IAAI,EAAE,CAAC,CAAC;AACzE,CAAC,CAAC,CAAC"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../src/app.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,SAAS,CAAC;AAC9B,OAAO,EAAC,YAAY,EAAC,MAAM,cAAc,CAAA;AACzC,OAAO,EAAC,OAAO,IAAI,SAAS,EAAC,MAAM,4BAA4B,CAAA;AAC/D,MAAM,GAAG,GAAG,OAAO,EAAE,CAAC;AACtB,MAAM,IAAI,GAAG,IAAI,CAAC;AAElB,0EAA0E;AAC1E,MAAM,SAAS,GAAG,sBAAsB,CAAA;AAExC,iDAAiD;AACjD,MAAM,MAAM,GAAG,YAAY,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEjD,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;IACvB,GAAG,CAAC,MAAM,CAAC,6BAA6B,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IACjD,GAAG,CAAC,MAAM,CAAC,8BAA8B,EAAE,qBAAqB,CAAC,CAAC;IAClE,GAAG,CAAC,MAAM,CAAC,8BAA8B,EAAE,cAAc,CAAC,CAAC;IAC3D,IAAI,EAAE,CAAC;AACX,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;IACtB,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,SAAS,EAAE,EAAC,OAAO,EAAE,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACzF,CAAC,CAAC,CAAC;AACH,GAAG,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;IACnC,IAAI,KAAK,GAAQ,GAAG,CAAC,KAAK,CAAC;IAC3B,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,EAAC,OAAO,EAAC,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,EAAC,CAAC,CAAC,CAAC;AAChH,CAAC,CAAC,CAAC;AACH,GAAG,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;IACtC,IAAI,KAAK,GAAQ,GAAG,CAAC,KAAK,CAAC;IAC3B,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAC,EAAC,OAAO,EAAC,CAAC,EAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AACpI,CAAC,CAAC,CAAC;AAEH,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE,GAAG,EAAE;IACpB,OAAO,OAAO,CAAC,GAAG,CAAC,4CAA4C,IAAI,EAAE,CAAC,CAAC;AACzE,CAAC,CAAC,CAAC"}

back/src/app.ts

@@ -24,6 +24,10 @@ app.get('/searchStation', (req, res) => {
     let query: any = req.query;
     client.locations(query.text, {results:1}).then(result => res.send({name: result[0].name, id:result[0].id}));
 });
+app.get('/searchConnection', (req, res) => {
+    let query: any = req.query;
+    client.journeys(query.from, query.to,{results:5}).then(result => res.send(result.journeys)).catch(error => res.sendStatus(500));
+});
 
 app.listen(port, () => {
   return console.log(`Express is listening at http://localhost:${port}`);

front/Dockerfile

@@ -0,0 +1,4 @@
+FROM nginx
+COPY bahnui.front/dist/. /var/www/html/
+COPY default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

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

@@ -1,16 +1,53 @@
 <template>
-    <div class="hello">
+  <div class="search">
-        <input type="text" v-model="from.name">
+      <input type="text" v-model="from.name">
-        <button @click="searchStationFrom()">search</button>
+      <button @click="searchStationFrom()">search</button>
-        <br/>
+      <br/>
-        <input type="text" v-model="to.name">
+      <input type="text" v-model="to.name">
-        <button @click="searchStationTo()">search</button>
+      <button @click="searchStationTo()">search</button>
-    </div>
+      <br/>
-  </template>
+      <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/>{{ leg.line?.name }}<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>
+<script>
   import axios from 'axios';
-
+  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: {
@@ -19,7 +56,8 @@
     data() {
         return {
             from: {name:"", id:null},
-            to: {name:"", id:null}
+            to: {name:"", id:null},
+            connections: []
         }
     },
     methods: {
@@ -28,14 +66,60 @@
         },
         searchStationTo() {
             axios.get("http://localhost:3000/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("http://localhost:3000/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;
+          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) {
+              color2 = timecolors[i+1];
+            } else {
+              color2 = timecolors[0];
+            }
+          }
+          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)+")";
         }
 
     }
   }
-  </script>
+</script>
 
-  <!-- Add "scoped" attribute to limit CSS to this component only -->
+<!-- Add "scoped" attribute to limit CSS to this component only -->
-  <style scoped>
+<style scoped>
   h3 {
     margin: 40px 0 0;
   }
@@ -50,5 +134,31 @@
   a {
     color: #42b983;
   }
-  </style>
+  .journey {
-  
+    margin: 40px;
+  }
+  .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:Verdana, Geneva, Tahoma, sans-serif;
+  }
+  .walking > div {
+    font-size: 12px;
+  }
+</style>

front/default.conf

@@ -0,0 +1,8 @@
+server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+    root /var/www/html/;
+    index index.html index.htm index.nginx-debian.html;
+
+    server_name _;
+}