Added layouting, dockerfiles

This commit is contained in:
sperwing 2024-11-16 23:44:14 +01:00
parent 83ddc9fa87
commit 3b6c8a142a
7 changed files with 158 additions and 20 deletions

9
back/Dockerfile Normal file
View 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
View File

@ -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}`);
});

View File

@ -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"}

View File

@ -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
View 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

View File

@ -1,16 +1,53 @@
<template>
<div class="hello">
<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>
</template>
<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 -->
<style scoped>
<!-- 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
View 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 _;
}