한서흔 / OSS-TongGilMut

Go to a project
Toggle navigation Toggle navigation pinning
SH
d4ca5fc9 1 parent e28513ab

ejs page

Inline Side-by-side
Showing 2 changed files with 632 additions and 0 deletions
1 +const express = require('express');
2 +const request = require('request');
3 +const http = require('http');
4 +const app = express();
5 +var bodyParser = require("body-parser");
6 +let path = require('path');
7 +let server = http.createServer(app);
8 +
9 +app.set('view engine','ejs');
10 +app.set('views', path.join(__dirname, 'views'));
11 +app.use(bodyParser.urlencoded({ extended : false }));
12 +
13 +request.post("/", function(req, res){
14 + //let sxv = req.render(sx)
15 + //let syv = req.render(sy)
16 + //let exv = req.render(ex)
17 + //let eyv = req.render(ey)
18 +});
19 +
20 +app.get('/', function (req, response) {
21 + let requestUrl = "https://api.odsay.com/v1/api/searchPubTransPath?SX=127.13973017022232&SY=37.47331630562443&EX=127.08011485487083&EY=37.24312944010195&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA"
22 +
23 + request.get(requestUrl, (err, res, body) => {
24 + if (err) {
25 + console.log(`err => ${err}`)
26 + }
27 + else {
28 + if (res.statusCode == 200) {
29 + var result = body
30 + var obj = JSON.parse(result);
31 + //console.log(`body data => ${result}`)
32 + //console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ')
33 + var time = (obj)["result"]["path"][0].info.totalTime
34 + var pay = (obj)["result"]["path"][0].info.payment
35 + var distance = (obj)["result"]["path"][0].info.totalDistance
36 + response.render('index', {
37 + time: time,
38 + pay: pay,
39 + distance: distance
40 + });
41 + }
42 + }
43 + })
44 +});
45 +
46 +server.listen('3000', 'localhost', function () {
47 + console.log('server listen on port:' + server.address().port);
48 +})
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +
4 +<head>
5 + <meta charset="UTF-8" />
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 + <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8 + <title>The Town HTML CSS Template</title>
9 + <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
10 + <link rel="stylesheet" href="slick/slick.css">
11 + <link rel="stylesheet" href="slick/slick-theme.css">
12 + <link rel="stylesheet" href="magnific-popup/magnific-popup.css">
13 + <link rel="stylesheet" href="css/bootstrap.min.css" />
14 + <link rel="stylesheet" href="css/templatemo-style.css" />
15 + <link rel="stylesheet" type="text/css"
16 + href="https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css">
17 +
18 + <script src="../../docs/js/jquery-1.9.1.js"></script>
19 + <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
20 + <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
21 + <!--Geocoding ncpClientId 변경-->
22 + <script type="text/javascript"
23 + src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nxquc56d3k&submodules=geocoder"></script>
24 + <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
25 +
26 + <!--
27 + The Town
28 + https://templatemo.com/tm-525-the-town
29 + -->
30 +
31 +
32 +
33 + <script type="text/css">
34 + window.onload = function(){
35 + document.getElementById('btn').onclick = function(){
36 + document.getElementById('frm').submit();
37 + return false;
38 + };
39 +};
40 +
41 +</script>
42 +
43 +</head>
44 +
45 +<body>
46 + <!-- Hero section -->
47 + <section id="hero" class="text-white tm-font-big tm-parallax">
48 + <video autoplay muted loop id="hero-video">
49 + <source src="img/main-video1.mp4" type="video/mp4">
50 + </video>
51 + <!-- Navigation -->
52 + <nav class="navbar navbar-expand-md tm-navbar" id="tmNav">
53 + <div class="container">
54 + <div class="tm-next">
55 + <a href="#hero" class="navbar-brand">뚜벅이</a>
56 + </div>
57 + </div>
58 + </nav>
59 +
60 + <div class="text-center tm-hero-text-container">
61 + <div class="tm-hero-text-container-inner">
62 + <h2 class="tm-hero-title">통학생은 길에서 몇시간을 보냈을까?</h2>
63 + <p class="tm-hero-subtitle">
64 + 매일 학교에 통학하시나요?<br>
65 + 뚜벅이님이 지금까지 몇시간을 길에서 보냈는지 보여드립니다.
66 + <br>-뚜벅이-
67 + </p>
68 + </div>
69 + </div>
70 +
71 + <div class="tm-next tm-intro-next">
72 + <a href="#contact" class="text-center tm-down-arrow-link">
73 + <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
74 + </a>
75 + </div>
76 + </section>
77 +
78 +
79 +
80 + <!-- Contact -->
81 + <section id="contact" class="tm-section-pad-top tm-parallax-2">
82 + <div class="container tm-container-contact">
83 + <div class="grid-container">
84 + <div class="question-field question-home">어디에 사나요?</div>
85 + <div class="input-field input-home">
86 + <label for="question-input-field"></label>
87 + <input type="text" id="start"></div>
88 + <div class="question-field question-school">무슨 학교에 다니나요?</div>
89 + <div class="input-school">
90 + <label for="question-input-field"></label>
91 + <input type="text" id="end">
92 + </div>
93 + <div class="question-field question-grade">몇학년인가요?</div>
94 + <div class="input-grade">
95 + <div class="custom-select" style="width:208px; margin-right:40px">
96 + <select id="semester">
97 + <option value="0">1학년 1학기</option>
98 + <option value="sem-1-1">1학년 1학기</option>
99 + <option value="sem-1-2">1학년 2학기</option>
100 + <option value="sem-2-1">2학년 1학기</option>
101 + <option value="sem-2-2">2학년 2학기</option>
102 + <option value="sem-3-1">3학년 1학기</option>
103 + <option value="sem-3-2">3학년 2학기</option>
104 + <option value="sem-4-1">4학년 1학기</option>
105 + <option value="sem-4-2">4학년 2학기</option>
106 + </select>
107 + </div>
108 + </div>
109 + </div>
110 + <a href="#result" class="text-center tm-down-arrow-link" onclick="semester();return false;">
111 + <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
112 + </a>
113 + </div>
114 + </section>
115 +
116 +
117 + <section id="result">
118 + <div id="map" style="width:700px;height:300px;"></div>
119 + <div class="answer-field">한번 갈 때마다 ...<br>
120 + <span class="answer-highlight" id="hour"><%= Math.floor(time/60) %></span> 시간
121 + <span class="answer-highlight" id="minute"><%= time%60 %></span> 분 <br>
122 + <span class="answer-highlight" id="pay"><%= pay %></span> 원 <br>
123 + <span class="answer-highlight" id="distance"><%= distance %></span> m <br>
124 + </div>
125 + <div class="row">
126 + <div id="list-answer">
127 + <div class="answer-field" id="answer-how-many-hours">
128 + 지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
129 + 졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
130 + </div>
131 + </div>
132 + </div>
133 + <div class="row">
134 + <div class="answer-detail-question">
135 + 이 시간에 알바를 했다면? <span id="salary">?</span>원<br>
136 + 교통비로 국밥 <span id="dish">?</span>그릇<br>
137 + 이 거리라면 에베레스트 등반을 <span id="everest">?</span>번이나...<br>
138 + 지구를 <span id="earth">?</span>바퀴나 돌아요<br><br><br>
139 + </div>
140 + </div>
141 + <footer class="text-center small tm-footer">
142 + <p class="mb-0">
143 + Copyright &copy; 2020 TongGilMut
144 +
145 + - Design: <a rel="nofollow" href="https://github.com/wjdwl001" class="tm-footer-link">Joung Jiwon</a>
146 + </p>
147 + </footer>
148 + </section>
149 +
150 +
151 +
152 + <script src="js/jquery-1.9.1.min.js"></script>
153 + <script src="slick/slick.min.js"></script>
154 + <script src="magnific-popup/jquery.magnific-popup.min.js"></script>
155 + <script src="js/jquery.singlePageNav.min.js"></script>
156 + <script src="js/bootstrap.min.js"></script>
157 + <script> //dropdown list
158 + var x, i, j, l, ll, selElmnt, a, b, c;
159 + /*look for any elements with the class "custom-select":*/
160 + x = document.getElementsByClassName("custom-select");
161 + l = x.length;
162 + for (i = 0; i < l; i++) {
163 + selElmnt = x[i].getElementsByTagName("select")[0];
164 + ll = selElmnt.length;
165 + /*for each element, create a new DIV that will act as the selected item:*/
166 + a = document.createElement("DIV");
167 + a.setAttribute("class", "select-selected");
168 + a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
169 + x[i].appendChild(a);
170 + /*for each element, create a new DIV that will contain the option list:*/
171 + b = document.createElement("DIV");
172 + b.setAttribute("class", "select-items select-hide");
173 + for (j = 1; j < ll; j++) {
174 + /*for each option in the original select element,
175 + create a new DIV that will act as an option item:*/
176 + c = document.createElement("DIV");
177 + c.innerHTML = selElmnt.options[j].innerHTML;
178 + c.addEventListener("click", function (e) {
179 + /*when an item is clicked, update the original select box,
180 + and the selected item:*/
181 + var y, i, k, s, h, sl, yl;
182 + s = this.parentNode.parentNode.getElementsByTagName("select")[0];
183 + sl = s.length;
184 + h = this.parentNode.previousSibling;
185 + for (i = 0; i < sl; i++) {
186 + if (s.options[i].innerHTML == this.innerHTML) {
187 + s.selectedIndex = i;
188 + h.innerHTML = this.innerHTML;
189 + y = this.parentNode.getElementsByClassName("same-as-selected");
190 + yl = y.length;
191 + for (k = 0; k < yl; k++) {
192 + y[k].removeAttribute("class");
193 + }
194 + this.setAttribute("class", "same-as-selected");
195 + break;
196 + }
197 + }
198 + h.click();
199 + });
200 + b.appendChild(c);
201 + }
202 + x[i].appendChild(b);
203 + a.addEventListener("click", function (e) {
204 + /*when the select box is clicked, close any other select boxes,
205 + and open/close the current select box:*/
206 + e.stopPropagation();
207 + closeAllSelect(this);
208 + this.nextSibling.classList.toggle("select-hide");
209 + this.classList.toggle("select-arrow-active");
210 + });
211 + }
212 + function closeAllSelect(elmnt) {
213 + /*a function that will close all select boxes in the document,
214 + except the current select box:*/
215 + var x, y, i, xl, yl, arrNo = [];
216 + x = document.getElementsByClassName("select-items");
217 + y = document.getElementsByClassName("select-selected");
218 + xl = x.length;
219 + yl = y.length;
220 + for (i = 0; i < yl; i++) {
221 + if (elmnt == y[i]) {
222 + arrNo.push(i)
223 + } else {
224 + y[i].classList.remove("select-arrow-active");
225 + }
226 + }
227 + for (i = 0; i < xl; i++) {
228 + if (arrNo.indexOf(i)) {
229 + x[i].classList.add("select-hide");
230 + }
231 + }
232 + }
233 + /*if the user clicks anywhere outside the select box,
234 + then close all select boxes:*/
235 + document.addEventListener("click", closeAllSelect);
236 + </script>
237 + <script> //API
238 + var btn = document.querySelector('button');
239 +
240 + btn.addEventListener('click', updateBtn);
241 +
242 + function updateBtn() {
243 + var start = document.getElementById('start').value;
244 + var end = document.getElementById('end').value;
245 + naver.maps.Service.geocode({
246 + address: start
247 +
248 + }, function (status, response) {
249 + if (status !== naver.maps.Service.Status.OK) {
250 + return alert('Something wrong!');
251 + }
252 + var result = response.result, // 검색 결과의 컨테이너
253 + items = result.items;
254 + var sx = result.items[0].point.x;
255 + var sy = result.items[0].point.y;
256 +
257 + naver.maps.Service.geocode({
258 + address: end
259 +
260 + }, function (status, response) {
261 + if (status !== naver.maps.Service.Status.OK) {
262 + return alert('Something wrong!');
263 + }
264 + var result = response.result, // 검색 결과의 컨테이너
265 + items = result.items;
266 + var ex = result.items[0].point.x;
267 + var ey = result.items[0].point.y;
268 +
269 +
270 + /*var sx = 127.0739547;
271 + var sy = 37.2407701;
272 + var ex = 126.921666;
273 + var ey = 37.1308333;
274 + */
275 +
276 +
277 + var mapOptions = {
278 + center: new naver.maps.LatLng(start, end),
279 + zoom: 10
280 + };
281 +
282 + var map = new naver.maps.Map('map', mapOptions);
283 +
284 +
285 +
286 + function searchPubTransPathAJAX() {
287 + var xhr = new XMLHttpRequest();
288 + //ODsay apiKey 입력
289 + var url = "https://api.odsay.com/v1/api/searchPubTransPath?SX=" + sx + "&SY=" + sy + "&EX=" + ex + "&EY=" + ey + "&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA";
290 + xhr.open("GET", url, true);
291 + xhr.send();
292 + xhr.onreadystatechange = function () {
293 + if (xhr.readyState == 4 && xhr.status == 200) {
294 + console.log(JSON.parse(xhr.responseText)); // <- xhr.responseText 로 결과를 가져올 수 있음
295 + //노선그래픽 데이터 호출
296 + callMapObjApiAJAX((JSON.parse(xhr.responseText))["result"]["path"][0].info.mapObj);
297 + }
298 + }
299 + }
300 +
301 + //길찾기 API 호출
302 + searchPubTransPathAJAX();
303 +
304 + function callMapObjApiAJAX(mabObj) {
305 + var xhr = new XMLHttpRequest();
306 + //ODsay apiKey 입력
307 + var url = "https://api.odsay.com/v1/api/loadLane?mapObject=0:0@" + mabObj + "&apiKey=D5/cqOgLNnn/iHrOs3rXewYFNPO6KVQvntHKQ/5muGA";
308 + xhr.open("GET", url, true);
309 + xhr.send();
310 + xhr.onreadystatechange = function () {
311 + if (xhr.readyState == 4 && xhr.status == 200) {
312 + var resultJsonData = JSON.parse(xhr.responseText);
313 + drawNaverMarker(sx, sy); // 출발지 마커 표시
314 + drawNaverMarker(ex, ey); // 도착지 마커 표시
315 + drawNaverPolyLine(resultJsonData); // 노선그래픽데이터 지도위 표시
316 + // boundary 데이터가 있을경우, 해당 boundary로 지도이동
317 + if (resultJsonData.result.boundary) {
318 + var boundary = new naver.maps.LatLngBounds(
319 + new naver.maps.LatLng(resultJsonData.result.boundary.top, resultJsonData.result.boundary.left),
320 + new naver.maps.LatLng(resultJsonData.result.boundary.bottom, resultJsonData.result.boundary.right)
321 + );
322 + map.panToBounds(boundary);
323 + }
324 + }
325 + }
326 + }
327 +
328 + // 지도위 마커 표시해주는 함수
329 + function drawNaverMarker(x, y) {
330 + var marker = new naver.maps.Marker({
331 + position: new naver.maps.LatLng(y, x),
332 + map: map
333 + });
334 + }
335 +
336 + // 노선그래픽 데이터를 이용하여 지도위 폴리라인 그려주는 함수
337 + function drawNaverPolyLine(data) {
338 + var lineArray;
339 +
340 + for (var i = 0; i < data.result.lane.length; i++) {
341 + for (var j = 0; j < data.result.lane[i].section.length; j++) {
342 + lineArray = null;
343 + lineArray = new Array();
344 + for (var k = 0; k < data.result.lane[i].section[j].graphPos.length; k++) {
345 + lineArray.push(new naver.maps.LatLng(data.result.lane[i].section[j].graphPos[k].y, data.result.lane[i].section[j].graphPos[k].x));
346 + }
347 +
348 + //지하철결과의 경우 노선에 따른 라인색상 지정하는 부분 (1,2호선의 경우만 예로 들음)
349 + if (data.result.lane[i].type == 1) {
350 + var polyline = new naver.maps.Polyline({
351 + map: map,
352 + path: lineArray,
353 + strokeWeight: 3,
354 + strokeColor: '#003499'
355 + });
356 + } else if (data.result.lane[i].type == 2) {
357 + var polyline = new naver.maps.Polyline({
358 + map: map,
359 + path: lineArray,
360 + strokeWeight: 3,
361 + strokeColor: '#37b42d'
362 + });
363 + } else {
364 + var polyline = new naver.maps.Polyline({
365 + map: map,
366 + path: lineArray,
367 + strokeWeight: 3
368 + });
369 + }
370 + }
371 + }
372 + }
373 + });
374 + });
375 + }
376 + </script>
377 + <script> //값 계산
378 + $('button-calculate').click(function () {
379 +
380 + })
381 +
382 + function semester() {
383 + var target = document.getElementById("semester").value;
384 + var input = 0
385 +
386 + var since, until, salary, dish, everest, earth
387 +
388 + // 임시값 지정
389 + var time = document.getElementById("hour").innerHTML
390 + var pay = document.getElementById("pay").innerHTML
391 + var distance = document.getElementById("distance").innerHTML
392 +
393 + function sum(sem) {
394 + since = sem * time * 150
395 + until = (8 - sem) * time * 150
396 + salary = sem * since * 8590
397 + dish = Math.floor((sem * pay * 150) / 6000)
398 + everest = Math.floor((sem * distance * 2) / 8846)
399 + earth = ((sem * distance * 2) / 40075000).toFixed(3)
400 + }
401 +
402 + if (target == 'sem-1-1') {
403 + input = 1
404 + sum(input)
405 + }
406 + else if (target == 'sem-1-2') {
407 + input = 2
408 + sum(input)
409 + }
410 + else if (target == 'sem-2-1') {
411 + input = 3
412 + sum(input)
413 + }
414 + else if (target == 'sem-2-2') {
415 + input = 4
416 + sum(input)
417 + }
418 + else if (target == 'sem-3-1') {
419 + input = 5
420 + sum(input)
421 + }
422 + else if (target == 'sem-3-2') {
423 + input = 6
424 + sum(input)
425 + }
426 + else if (target == 'sem-4-1') {
427 + input = 7
428 + sum(input)
429 + }
430 + else if (target == 'sem-4-2') {
431 + input = 8
432 + sum(input)
433 + }
434 +
435 + document.getElementById("since").innerHTML = since
436 + document.getElementById("until").innerHTML = until
437 + document.getElementById("salary").innerHTML = salary
438 + document.getElementById("dish").innerHTML = dish
439 + document.getElementById("everest").innerHTML = everest
440 + document.getElementById("earth").innerHTML = earth
441 + }
442 +
443 +
444 + function getOffSet() {
445 + var _offset = 450;
446 + var windowHeight = window.innerHeight;
447 +
448 + if (windowHeight > 500) {
449 + _offset = 400;
450 + }
451 + if (windowHeight > 680) {
452 + _offset = 300
453 + }
454 + if (windowHeight > 830) {
455 + _offset = 210;
456 + }
457 +
458 + return _offset;
459 + }
460 +
461 + function setParallaxPosition($doc, multiplier, $object) {
462 + var offset = getOffSet();
463 + var from_top = $doc.scrollTop(),
464 + bg_css = 'center ' + (multiplier * from_top - offset) + 'px';
465 + $object.css({ "background-position": bg_css });
466 + }
467 +
468 + // Parallax function
469 + // Adapted based on https://codepen.io/roborich/pen/wpAsm
470 + var background_image_parallax = function ($object, multiplier, forceSet) {
471 + multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
472 + multiplier = 1 - multiplier;
473 + var $doc = $(document);
474 + // $object.css({"background-attatchment" : "fixed"});
475 +
476 + if (forceSet) {
477 + setParallaxPosition($doc, multiplier, $object);
478 + } else {
479 + $(window).scroll(function () {
480 + setParallaxPosition($doc, multiplier, $object);
481 + });
482 + }
483 + };
484 +
485 + var background_image_parallax_2 = function ($object, multiplier) {
486 + multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
487 + multiplier = 1 - multiplier;
488 + var $doc = $(document);
489 + $object.css({ "background-attachment": "fixed" });
490 + $(window).scroll(function () {
491 + var firstTop = $object.offset().top,
492 + pos = $(window).scrollTop(),
493 + yPos = Math.round((multiplier * (firstTop - pos)) - 186);
494 +
495 + var bg_css = 'center ' + yPos + 'px';
496 +
497 + $object.css({ "background-position": bg_css });
498 + });
499 + };
500 +
501 + $(function () {
502 + // Hero Section - Background Parallax
503 + background_image_parallax($(".tm-parallax"), 0.30, false);
504 + background_image_parallax_2($("#contact"), 0.80);
505 +
506 + // Handle window resize
507 + window.addEventListener('resize', function () {
508 + background_image_parallax($(".tm-parallax"), 0.30, true);
509 + }, true);
510 +
511 + // Detect window scroll and update navbar
512 + $(window).scroll(function (e) {
513 + if ($(document).scrollTop() > 120) {
514 + $('.tm-navbar').addClass("scroll");
515 + } else {
516 + $('.tm-navbar').removeClass("scroll");
517 + }
518 + });
519 +
520 + // Close mobile menu after click
521 + $('#tmNav a').on('click', function () {
522 + $('.navbar-collapse').removeClass('show');
523 + })
524 +
525 + // Scroll to corresponding section with animation
526 + $('#tmNav').singlePageNav();
527 +
528 + // Add smooth scrolling to all links
529 + // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
530 + $("a").on('click', function (event) {
531 + $('html, body').animate({
532 + scrollTop: $("#contact").offset().top
533 + }, 400);
534 + });
535 +
536 + // Pop up
537 + $('.tm-gallery').magnificPopup({
538 + delegate: 'a',
539 + type: 'image',
540 + gallery: { enabled: true }
541 + });
542 +
543 + // Gallery
544 + $('.tm-gallery').slick({
545 + dots: true,
546 + infinite: false,
547 + slidesToShow: 5,
548 + slidesToScroll: 2,
549 + responsive: [
550 + {
551 + breakpoint: 1199,
552 + settings: {
553 + slidesToShow: 4,
554 + slidesToScroll: 2
555 + }
556 + },
557 + {
558 + breakpoint: 991,
559 + settings: {
560 + slidesToShow: 3,
561 + slidesToScroll: 2
562 + }
563 + },
564 + {
565 + breakpoint: 767,
566 + settings: {
567 + slidesToShow: 2,
568 + slidesToScroll: 1
569 + }
570 + },
571 + {
572 + breakpoint: 480,
573 + settings: {
574 + slidesToShow: 1,
575 + slidesToScroll: 1
576 + }
577 + }]
578 + });
579 + });
580 + </script>
581 +
582 +</body>
583 +
584 +</html>
...\ No newline at end of file ...\ No newline at end of file