홍용민 / BusTime

Go to a project
Toggle navigation Toggle navigation pinning
이의준
2da88701 1 parent 735e04dc

response로부터 table 구현 및 작동테스트서버 임시파일 추가

Inline Side-by-side
Showing 4 changed files with 146 additions and 5 deletions
1 body 1 body
2 { 2 {
3 - background-color: black; 3 + background-color: white;
4 - color: white; 4 + color: black;
5 +}
6 +
7 +p, h2{
8 + position: relative;
9 + left: 20px;
5 } 10 }
...\ No newline at end of file ...\ No newline at end of file
......
1 +var url = require('url');
2 +var request = require('request');
3 +var qs = require('querystring');
4 +var fs = require('fs');
5 +const { METHODS } = require('http');
6 +
7 +function makeTimetable(resFromServer){ // Timetable 표를 만드는 함수
8 + var busArrivalTime =
9 +`<table border="3" width="400">
10 + <th> Index</th>
11 + <th> 출발 예정시간</th>
12 + <th> 남은 시간</th>
13 +`;
14 + var lenRes = resFromServer.length;
15 +
16 + for (index = 0; index < lenRes; index+=2){
17 + let m = resFromServer[index];
18 + let M = resFromServer[index+1];
19 + busArrivalTime += `
20 + <tr align="center">
21 + <td>${(index+2)/2} 번째 버스</td>
22 + <td>${m} ~ ${M}</td>
23 + </tr>`;
24 + }
25 + busArrivalTime += `
26 +</table>`;
27 +
28 + return busArrivalTime;
29 +};
30 +
31 +function makeTTWebpage(busNum, busArrivalTime){ // Timetable 표를 바탕으로 TT 페이지를 만드는 함수
32 + var templateTimeTable =
33 + `
34 + <!doctype html>
35 + <html>
36 + <head>
37 + <title>Time Table</title>
38 + <meta charset="utf-8">
39 + <style type="text/css">
40 + a { text-decoration:none }
41 + </style>
42 + </head>
43 +
44 + <body>
45 + <h1><a href="/"><p style="text-align:center;">BTT</p></a></h1>
46 + <br> <div style="padding:0 0 0 20px;">
47 + <h2>${busNum} BUS Time Table</h2>
48 + </div>
49 + <div style="padding:0 0 0 20px;">
50 + ${busArrivalTime}
51 + </div>
52 + <br>
53 + <br>
54 + <p> <div style="padding:0 0 0 20px;">
55 + 버스의 평균 배차시간을 기준으로 최소 출발시간과 최대 출발시간을 제공합니다.
56 + </div> </p>
57 + <div style="padding:0 0 0 20px;">
58 + <script>
59 + var date = new Date();
60 + var yyyy = date.getFullYear();
61 + var mm = date.getMonth() + 1;
62 + var dd = date.getDate();
63 + var hh = date.getHours();
64 +
65 + document.write(yyyy+"년 "+mm+"월 "+dd+"일 ");
66 + document.write(hh+"시 "+mm+"분 기준");
67 + </script>
68 + </div>
69 + </body>
70 + </html>
71 + `;
72 +
73 + return templateTimeTable;
74 +};
75 +
76 +module.exports = function(app)
77 +{
78 + app.get('/', function (req, res) {
79 + res.render('Index.html');
80 + });
81 +
82 + app.get('/timetable', function (req, res){ // bus list의 특정 버스를 클릭하면, server에 요청
83 + var _url = req.url;
84 + var queryData = url.parse(_url, true).query;
85 + var busNum = queryData.busNum;
86 +
87 + // 서버로부터 응답받는 배열의 길이는 항상 짝수여야 한다. (버스 1대당 출발예정 최소 + 최대시간 1개씩)
88 + var resFromServer = ['1:30', '1:45', '2:00', '2:15', '2:30', '2:45'];
89 + var busArrivalTime = makeTimetable(resFromServer);
90 +
91 + // server 완성되면 해당 IP로 request
92 + // request.post(
93 + // {
94 + // url: 'http://34.206.171.225:23023/reqBusInfo',
95 + // body: {
96 + // 'busNum': busNum,
97 + // 'testVariable': 'test'
98 + // },
99 + // json: true
100 + // }, function (error, response, body){
101 + // response.json(body); // 이 부분을 resFromServer.push(body) 이런식으로 하면?
102 + // }
103 + // );
104 +
105 + var templateTimeTable = makeTTWebpage(busNum, busArrivalTime);
106 + res.send(templateTimeTable);
107 + });
108 +}
109 +
110 +// 목록 출력 기능 구현
111 +// var busArrivalTime = `<ul style="list-style-type:circle">`;
112 +
113 +// for (index = 0; index < lenRes; index++){
114 +// let t = resFromServer[index];
115 +// busArrivalTime += `
116 +// <li>${t}</li>`;
117 +// }
118 +// busArrivalTime += `
119 +// </ul>`;
120 +// console.log(busArrivalTime);
1 +var express = require('express');
2 +var app = express();
3 +var router = require('./router/test_main')(app); // router모듈인 main.js를 불러와서 app에 전달
4 +
5 +//__dirname : 현재 실행중인 폴더 경로
6 +app.set('views', __dirname + '/views'); //서버가 읽을 수 있도록 HTML 의 위치를 정의
7 +app.set('view engine', 'ejs'); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정
8 +app.engine('html', require('ejs').renderFile); //서버가 HTML 렌더링을 할 때, EJS 엔진을 사용하도록 설정
9 +
10 +var server = app.listen(23023, function () {
11 + var host = server.address().address
12 + var port = server.address().port
13 + console.log("app listening at http://%s:%s", host, port)
14 +})
15 +
16 +app.use(express.static(__dirname + '/public'));
...@@ -18,8 +18,8 @@ ...@@ -18,8 +18,8 @@
18 <p> 이곳에는 사색의 광장에서 출발하는 모든 버스의 정보가 있습니다.</p> 18 <p> 이곳에는 사색의 광장에서 출발하는 모든 버스의 정보가 있습니다.</p>
19 <br><br> 19 <br><br>
20 <h2> 버스별 시간표 조회</h2> 20 <h2> 버스별 시간표 조회</h2>
21 - 21 +
22 - <script> 22 + <div style="padding:0 0 0 20px;"><script>
23 var date = new Date(); 23 var date = new Date();
24 var yyyy = date.getFullYear(); 24 var yyyy = date.getFullYear();
25 var mm = date.getMonth() + 1; 25 var mm = date.getMonth() + 1;
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 28
29 document.write(yyyy+"년 "+mm+"월 "+dd+"일 오늘 운행하는 버스들 "); 29 document.write(yyyy+"년 "+mm+"월 "+dd+"일 오늘 운행하는 버스들 ");
30 document.write("( "+hh+"시 "+mm+"분 기준 )"); 30 document.write("( "+hh+"시 "+mm+"분 기준 )");
31 - </script> 31 + </script> </div>
32 32
33 <ul> 33 <ul>
34 <li><a href="http://localhost:23023/timetable?busNum=5100">5100</a></li> 34 <li><a href="http://localhost:23023/timetable?busNum=5100">5100</a></li>
......