Added layouting, dockerfiles
This commit is contained in:
parent
83ddc9fa87
commit
3b6c8a142a
9
back/Dockerfile
Normal file
9
back/Dockerfile
Normal file
@ -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" ]
|
||||
5
back/dist/app.js
vendored
5
back/dist/app.js
vendored
@ -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}`);
|
||||
});
|
||||
|
||||
2
back/dist/app.js.map
vendored
2
back/dist/app.js.map
vendored
@ -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"}
|
||||
@ -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}`);
|
||||
|
||||
4
front/Dockerfile
Normal file
4
front/Dockerfile
Normal file
@ -0,0 +1,4 @@
|
||||
FROM nginx
|
||||
COPY bahnui.front/dist/. /var/www/html/
|
||||
COPY default.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
@ -1,16 +1,53 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<input type="text" v-model="from.name">
|
||||
<button @click="searchStationFrom()">search</button>
|
||||
<br/>
|
||||
<input type="text" v-model="to.name">
|
||||
<button @click="searchStationTo()">search</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
<div class="search">
|
||||
<input type="text" v-model="from.name">
|
||||
<button @click="searchStationFrom()">search</button>
|
||||
<br/>
|
||||
<input type="text" v-model="to.name">
|
||||
<button @click="searchStationTo()">search</button>
|
||||
<br/>
|
||||
<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>
|
||||
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>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<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>
|
||||
|
||||
8
front/default.conf
Normal file
8
front/default.conf
Normal file
@ -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 _;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user