김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
min1925k@gmail.com
262b7808 2 parents 9fd8293e dd9be627

Merge branch 'master' of http://khuhub.khu.ac.kr/2018102164/rest_stop_list

Inline Side-by-side
Showing 3 changed files with 388 additions and 39 deletions
...@@ -250,8 +250,8 @@ ...@@ -250,8 +250,8 @@
250 <div class="row gx-5 align-items-center justify-content-center"> 250 <div class="row gx-5 align-items-center justify-content-center">
251 <div class="col-lg-8 col-xl-7 col-xxl-6"> 251 <div class="col-lg-8 col-xl-7 col-xxl-6">
252 <div class="my-5 text-center text-xl-start"> 252 <div class="my-5 text-center text-xl-start">
253 - <h1 class="display-5 fw-bolder text-white mb-2">각 고속도로별 휴게소 지도 오픈 API 삽입 >></h1> 253 + <h1 class="display-5 fw-bolder text-white mb-2">고속도로선택시 경로와 휴게소가 지도에 표시됩니다.</h1>
254 - <p class="lead fw-normal text-white-50 mb-4">적당히 텍스트 삽입</p> 254 + <p class="lead fw-normal text-white-50 mb-4">고속도로를 선택해주세요</p>
255 <div class="dropdown"> 255 <div class="dropdown">
256 <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown"> 256 <button class ="btn btn-primary dropdown-toggle " data-bs-toggle="dropdown">
257 고속도로 선택 257 고속도로 선택
...@@ -312,7 +312,9 @@ ...@@ -312,7 +312,9 @@
312 </div> 312 </div>
313 </div> 313 </div>
314 </header> 314 </header>
315 - <!-- Features section--> 315 +
316 + <!--
317 +
316 318
317 <section class="py-5" id="features"> 319 <section class="py-5" id="features">
318 <div class="container px-5 my-5"> 320 <div class="container px-5 my-5">
...@@ -345,19 +347,37 @@ ...@@ -345,19 +347,37 @@
345 </div> 347 </div>
346 </div> 348 </div>
347 </section> 349 </section>
350 + -->
348 <!-- Testimonial section--> 351 <!-- Testimonial section-->
349 <div class="py-5 bg-light"> 352 <div class="py-5 bg-light">
350 <div class="container px-5 my-5"> 353 <div class="container px-5 my-5">
351 <div class="row gx-5 justify-content-center"> 354 <div class="row gx-5 justify-content-center">
352 <div class="col-lg-10 col-xl-7"> 355 <div class="col-lg-10 col-xl-7">
353 <div class="text-center"> 356 <div class="text-center">
354 - <div class="fs-4 mb-4 fst-italic" id ="testArea">이 아래는 그다지 필요하지 않을것 같으니 일단 두고 나중에 전부삭제</div> 357 + <div class="fs-4 mb-4 fst-italic" id ="testArea">Developed by ...</div>
355 <div class="d-flex align-items-center justify-content-center"> 358 <div class="d-flex align-items-center justify-content-center">
356 <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." /> 359 <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
357 <div class="fw-bold"> 360 <div class="fw-bold">
358 - Tom Ato 361 + 지창언
362 + <span class="fw-bold text-primary mx-1">/</span>
363 + 2018110536
364 + <span class="fw-bold text-primary mx-1"> </span>
365 + </div>
366 + <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
367 + <div class="fw-bold">
368 + 김민규
359 <span class="fw-bold text-primary mx-1">/</span> 369 <span class="fw-bold text-primary mx-1">/</span>
360 - CEO, Pomodoro 370 + 2018102164
371 + <span class="fw-bold text-primary mx-1"> </span>
372 +
373 + </div>
374 + <img class="rounded-circle me-3" src="https://dummyimage.com/40x40/ced4da/6c757d" alt="..." />
375 + <div class="fw-bold">
376 + 이서현
377 + <span class="fw-bold text-primary mx-1">/</span>
378 + 2021105623
379 + <span class="fw-bold text-primary mx-1"> </span>
380 +
361 </div> 381 </div>
362 </div> 382 </div>
363 </div> 383 </div>
...@@ -365,7 +385,7 @@ ...@@ -365,7 +385,7 @@
365 </div> 385 </div>
366 </div> 386 </div>
367 </div> 387 </div>
368 - <!-- Blog preview section--> 388 + <!-- Blog preview section
369 <section class="py-5"> 389 <section class="py-5">
370 <div class="container px-5 my-5"> 390 <div class="container px-5 my-5">
371 <div class="row gx-5 justify-content-center"> 391 <div class="row gx-5 justify-content-center">
...@@ -440,8 +460,9 @@ ...@@ -440,8 +460,9 @@
440 </div> 460 </div>
441 </div> 461 </div>
442 </div> 462 </div>
443 - </div> 463 + </div>-->
444 - <!-- Call to action--> 464 +
465 + <!-- Call to action
445 <aside class="bg-primary bg-gradient rounded-3 p-4 p-sm-5 mt-5"> 466 <aside class="bg-primary bg-gradient rounded-3 p-4 p-sm-5 mt-5">
446 <div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start"> 467 <div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start">
447 <div class="mb-4 mb-xl-0"> 468 <div class="mb-4 mb-xl-0">
...@@ -458,7 +479,7 @@ ...@@ -458,7 +479,7 @@
458 </div> 479 </div>
459 </aside> 480 </aside>
460 </div> 481 </div>
461 - </section> 482 + </section>-->
462 </main> 483 </main>
463 <!-- Footer--> 484 <!-- Footer-->
464 <footer class="bg-dark py-4 mt-auto"> 485 <footer class="bg-dark py-4 mt-auto">
......
...@@ -54,9 +54,24 @@ ...@@ -54,9 +54,24 @@
54 <div class="text-center my-5"> 54 <div class="text-center my-5">
55 <h1 class="fw-bolder mb-3">휴게소 메뉴 정보</h1> 55 <h1 class="fw-bolder mb-3">휴게소 메뉴 정보</h1>
56 <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out what kind of food there is at the rest area.</p> 56 <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out what kind of food there is at the rest area.</p>
57 - <p><h3>검색할 휴게소의 이름을 입력하세요</h3></p>
58 57
59 - <input type="text" placeholder="내용을 입력하세요" id="menuname"><input type="button" onclick="Showmenu()" value="확인"> 58 + <div class="dropdown">
59 +
60 + <button class ="btn btn-primary dropdown-toggle " id="highway" data-bs-toggle="dropdown">
61 + 고속도로 선택
62 + </button>
63 + <div class ="dropdown-menu">
64 + <a class="dropdown-item" onclick="addReststop('0010')">경부선</a>
65 + <a class="dropdown-item" onclick="addReststop('0550')">중앙선</a>
66 + <a class="dropdown-item" onclick="addReststop('0500')">영동선</a>
67 + </div>
68 + <button class ="btn btn-primary dropdown-toggle " id = "rest_stop" data-bs-toggle="dropdown">
69 + 휴게소 선택
70 + </button>
71 + <div class ="dropdown-menu" id = "select_restStop">
72 + </div>
73 + </div>
74 + <!--<input type="text" placeholder="내용을 입력하세요" id="menuname"><input type="button" onclick="Showmenu()" value="확인">-->
60 </a> 75 </a>
61 </div> 76 </div>
62 </div> 77 </div>
...@@ -257,14 +272,153 @@ ...@@ -257,14 +272,153 @@
257 </div> 272 </div>
258 </div> 273 </div>
259 </footer> 274 </footer>
260 - 275 +
276 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
261 <!--fetch로 오픈 api 데이터 끌어오기--> 277 <!--fetch로 오픈 api 데이터 끌어오기-->
262 - <script> 278 + <script>
279 +
280 + // 모든 자식요소들을 삭제하는 함수
281 + function removeAllchild(div) {
282 + while (div.hasChildNodes()) {
283 + div.removeChild(div.firstChild);
284 + }
285 + }
286 +
287 +
288 + var serviceAreaCode= "";
289 +
263 290
264 - function Showmenu() { 291 + // 각 고속도로에 존재하는 휴게소 리스트를 작성하여 드랍다운 메뉴에 추가합니다.
265 - menuname = document.getElementById('menuname').value 292 + function addReststop(lineNumber){
266 293
267 - fetch('http://data.ex.co.kr/openapi/restinfo/restBestfoodList?key=6806352377&type=json&numOfRows=1000' + '&stdRestNm='+menuname).then(function(response){ 294 + // 아래 조건문은 각 고속도로 선택시 해당 고속도로 이름이 버튼(html)에 기록되도록 하기 위함입니다.
295 + let highway_Area = document.getElementById('highway');
296 + if(lineNumber==='0010'){
297 + highway_Area.innerHTML = '경부선';
298 + }
299 + else if(lineNumber==='0550'){
300 + highway_Area.innerHTML = '중앙선';
301 + }
302 + else if(lineNumber==='0500'){
303 + highway_Area.innerHTML = '영동선';
304 + }
305 + let tagArea = document.getElementById('select_restStop'); // 드랍다운 메뉴 추가할 태그 아이디 저장
306 + removeAllchild(tagArea); // 고속도로 선택시마다 새로운 휴게소를 불러와야 하므로 현재 드랍다운 메뉴에 존재하는 자식요소 싹다 삭제합니다.
307 +
308 +
309 +
310 +
311 + // 아래의 ajax 문을 통해서 휴게소표준 api를 불러옵니다. 각 고속도로에 대한 모든 휴게소이름과 휴게소 코드를 가져오기 위함입니다.
312 + // 여기서 가져오게되는 휴게소 코드(serviceAreaCode)는 추후에 휴게소별 날씨정보 api에 있는 unitCode와 상응하는 데이터입니다.
313 + var routeCodes = [];
314 + var svarAddrs = [];
315 + var rest_names = [];
316 + var serviceAreaCodes = [];
317 + // 페이지 1
318 + $.ajax({
319 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
320 + async:false,
321 + success: function(data){
322 + //변수 설정
323 + userData = data;
324 + },
325 + }).done(function() {
326 + var routeCode = "";
327 + var svarAddr = "";
328 + var rest_name = "";
329 + var data_count = userData["list"].length // 데이터 개수 얻기
330 +
331 + for (var i =0; i<data_count; i++){
332 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]); // 고속도로 번호를 가져옵니다.
333 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름을 가져옵니다.
334 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]); // 휴게소코드를 가져옵니다.
335 +
336 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
337 + rest_names.push(rest_name); //휴게소 이름을 저장해둡니다...
338 + serviceAreaCodes.push(serviceCode); // 휴게소 코드를 저장해둡니다.
339 + }
340 + }
341 + // 아래 forEach문은 저장한 모든 휴게소에 대해, 드랍다운 버튼을 생성하기 위함입니다.
342 + rest_names.forEach(function(addr,index){
343 + let new_A_Button = document.createElement('a'); // a 속성 생성
344 + new_A_Button.setAttribute('class','dropdown-item');
345 + new_A_Button.setAttribute('onclick',"Showmenu("+rest_names[index]+")");
346 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
347 + tagArea.appendChild(new_A_Button);
348 + })
349 + })
350 + /*
351 + // 페이지 2, 페이지 1과 모든 과정이 동일하며, 오픈 api 데이터 가져오는 특성상 페이지를 나누었습니다.
352 + $.ajax({
353 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
354 + async:false,
355 + success: function(data){
356 + //변수 설정
357 + userData = data;
358 + },
359 + }).done(function() {
360 + var routeCode = "";
361 + var svarAddr = "";
362 + var rest_name = "";
363 + var data_count = userData["list"].length // 데이터 개수 얻기
364 +
365 + for (var i =0; i<data_count; i++){
366 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
367 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름...
368 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]);
369 +
370 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
371 + rest_names.push(rest_name); //휴게소 이름...
372 + serviceAreaCodes.push(serviceCode);
373 + }
374 + }
375 + rest_names.forEach(function(addr,index){
376 + let new_A_Button = document.createElement('a'); // a 속성 생성
377 + new_A_Button.setAttribute('class','dropdown-item');
378 + new_A_Button.setAttribute('onclick',"Showweather("+serviceAreaCodes[index]+","+rest_names[index]+")");
379 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
380 + tagArea.appendChild(new_A_Button);
381 + })
382 + })
383 + // 페이지 3
384 + $.ajax({
385 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
386 + async:false,
387 + success: function(data){
388 + //변수 설정
389 + userData = data;
390 + },
391 + }).done(function() {
392 + var routeCode = "";
393 + var svarAddr = "";
394 + var rest_name = "";
395 + var data_count = userData["list"].length // 데이터 개수 얻기
396 +
397 + for (var i =0; i<data_count; i++){
398 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
399 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름...
400 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]);
401 +
402 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
403 + rest_names.push(rest_name); //휴게소 이름...
404 + serviceAreaCodes.push(serviceCode);
405 + }
406 + }
407 + rest_names.forEach(function(addr,index){
408 + let new_A_Button = document.createElement('a'); // a 속성 생성
409 + new_A_Button.setAttribute('class','dropdown-item');
410 + new_A_Button.setAttribute('onclick',"Showweather("+serviceAreaCodes[index]+","+rest_names[index]+")");
411 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
412 + tagArea.appendChild(new_A_Button);
413 + })
414 + })*/
415 +
416 + }
417 +
418 + function Showmenu(rest_name) {
419 +
420 + console.log(rest_name);
421 + fetch('http://data.ex.co.kr/openapi/restinfo/restBestfoodList?key=6806352377&type=json&numOfRows=1000' + '&stdRestNm='+rest_name).then(function(response){
268 method: 'GET'; 422 method: 'GET';
269 body: JSON.stringify(this.obj) 423 body: JSON.stringify(this.obj)
270 response.text().then(function(text){ 424 response.text().then(function(text){
......
1 +<!--
2 + 휴게소 표준정보의 service area code 의 우측끝 3자리 == 휴게소 날씨 표준정보의 unitCode
3 +-->
1 <!DOCTYPE html> 4 <!DOCTYPE html>
2 <html lang="en"> 5 <html lang="en">
3 <head> 6 <head>
...@@ -11,7 +14,7 @@ ...@@ -11,7 +14,7 @@
11 <!-- Bootstrap icons--> 14 <!-- Bootstrap icons-->
12 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" /> 15 <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
13 <!-- Core theme CSS (includes Bootstrap)--> 16 <!-- Core theme CSS (includes Bootstrap)-->
14 - <link href="css/styles.css" rel="stylesheet" /> 17 + <link href="css/styles.css" rel="stylesheet" />
15 </head> 18 </head>
16 19
17 20
...@@ -28,7 +31,7 @@ ...@@ -28,7 +31,7 @@
28 <li class="nav-item"><a class="nav-link" href="/menu">휴게소 메뉴</a></li> 31 <li class="nav-item"><a class="nav-link" href="/menu">휴게소 메뉴</a></li>
29 <li class="nav-item"><a class="nav-link" href="/weather">날씨</a></li> 32 <li class="nav-item"><a class="nav-link" href="/weather">날씨</a></li>
30 <li class="nav-item"><a class="nav-link" href="/lpg">LPG</a></li> 33 <li class="nav-item"><a class="nav-link" href="/lpg">LPG</a></li>
31 - <li class="nav-item"><a class="nav-link" href="/post">Board</a></li> 34 + <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
32 <li class="nav-item dropdown"> 35 <li class="nav-item dropdown">
33 <a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a> 36 <a class="nav-link dropdown-toggle" id="navbarDropdownBlog" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Blog</a>
34 <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog"> 37 <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdownBlog">
...@@ -56,11 +59,26 @@ ...@@ -56,11 +59,26 @@
56 <div class="text-center my-5"> 59 <div class="text-center my-5">
57 <h1 class="fw-bolder mb-3">휴게소 날씨</h1> 60 <h1 class="fw-bolder mb-3">휴게소 날씨</h1>
58 <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out the weather of the rest area.</p> 61 <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out the weather of the rest area.</p>
59 - 62 + <div class="dropdown">
60 - <!--검색 버튼으로 검색할 휴게소 이름 입력 받기--> 63 +
61 - <p><input type="text" placeholder="휴게소 이름" id="name"><input type="button" onclick="Showweather()" value="확인"></p> 64 + <button class ="btn btn-primary dropdown-toggle " id="highway" data-bs-toggle="dropdown">
62 - 65 + 고속도로 선택
66 + </button>
67 + <div class ="dropdown-menu">
68 + <a class="dropdown-item" onclick="addReststop('0010')">경부선</a>
69 + <a class="dropdown-item" onclick="addReststop('0550')">중앙선</a>
70 + <a class="dropdown-item" onclick="addReststop('0500')">영동선</a>
71 + </div>
72 + <button class ="btn btn-primary dropdown-toggle " id = "rest_stop" data-bs-toggle="dropdown">
73 + 휴게소 선택
74 + </button>
75 + <div class ="dropdown-menu" id = "select_restStop">
76 + </div>
77 + </div>
63 </div> 78 </div>
79 +
80 +
81 +
64 </div> 82 </div>
65 </div> 83 </div>
66 </div> 84 </div>
...@@ -124,8 +142,9 @@ ...@@ -124,8 +142,9 @@
124 </div> 142 </div>
125 </section> 143 </section>
126 144
127 - 145 + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
128 <script> 146 <script>
147 +
129 //날씨 오픈 api는 조회 방식이나 끌어오는 데이터가 복잡해서 주석을 자세히 작성함 148 //날씨 오픈 api는 조회 방식이나 끌어오는 데이터가 복잡해서 주석을 자세히 작성함
130 149
131 //* 휴게소 날씨 오픈 api 주의 사항 () 150 //* 휴게소 날씨 오픈 api 주의 사항 ()
...@@ -141,7 +160,7 @@ ...@@ -141,7 +160,7 @@
141 let present_date = present.getDate(); 160 let present_date = present.getDate();
142 let present_time = ('0'+(present.getHours())).slice(-2); 161 let present_time = ('0'+(present.getHours())).slice(-2);
143 162
144 - //현재 년도, 월, 날짜를 YYYYMMDD형태로 변형 163 + //현재 년도, 월, 날짜를 YYYYMMDD형태로 변형
145 //날씨 오픈 api의 연일월 입력타입이 YYYYMMDD 164 //날씨 오픈 api의 연일월 입력타입이 YYYYMMDD
146 let YYYYMMDD = String(present_year)+String(present_month)+String(present_date); 165 let YYYYMMDD = String(present_year)+String(present_month)+String(present_date);
147 166
...@@ -155,11 +174,152 @@ ...@@ -155,11 +174,152 @@
155 174
156 console.log(yesterday_YYYYMMDD) 175 console.log(yesterday_YYYYMMDD)
157 console.log(YYYYMMDD) 176 console.log(YYYYMMDD)
177 +
178 +
158 179
180 + // 모든 자식요소들을 삭제하는 함수
181 + function removeAllchild(div) {
182 + while (div.hasChildNodes()) {
183 + div.removeChild(div.firstChild);
184 + }
185 + }
186 +
187 + var serviceAreaCode= "";
188 +
159 189
160 - //검색창에 휴게소 이름을 입력하면 실행되는 함수 Showweather() 190 + // 각 고속도로에 존재하는 휴게소 리스트를 작성하여 드랍다운 메뉴에 추가합니다.
161 - function Showweather() { 191 + function addReststop(lineNumber){
162 192
193 + // 아래 조건문은 각 고속도로 선택시 해당 고속도로 이름이 버튼(html)에 기록되도록 하기 위함입니다.
194 + let highway_Area = document.getElementById('highway');
195 + if(lineNumber==='0010'){
196 + highway_Area.innerHTML = '경부선';
197 + }
198 + else if(lineNumber==='0550'){
199 + highway_Area.innerHTML = '중앙선';
200 + }
201 + else if(lineNumber==='0500'){
202 + highway_Area.innerHTML = '영동선';
203 + }
204 + let tagArea = document.getElementById('select_restStop'); // 드랍다운 메뉴 추가할 태그 아이디 저장
205 + removeAllchild(tagArea); // 고속도로 선택시마다 새로운 휴게소를 불러와야 하므로 현재 드랍다운 메뉴에 존재하는 자식요소 싹다 삭제합니다.
206 +
207 +
208 +
209 +
210 + // 아래의 ajax 문을 통해서 휴게소표준 api를 불러옵니다. 각 고속도로에 대한 모든 휴게소이름과 휴게소 코드를 가져오기 위함입니다.
211 + // 여기서 가져오게되는 휴게소 코드(serviceAreaCode)는 추후에 휴게소별 날씨정보 api에 있는 unitCode와 상응하는 데이터입니다.
212 + var routeCodes = [];
213 + var svarAddrs = [];
214 + var rest_names = [];
215 + var serviceAreaCodes = [];
216 + // 페이지 1
217 + $.ajax({
218 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=1",
219 + async:false,
220 + success: function(data){
221 + //변수 설정
222 + userData = data;
223 + },
224 + }).done(function() {
225 + var routeCode = "";
226 + var svarAddr = "";
227 + var rest_name = "";
228 + var data_count = userData["list"].length // 데이터 개수 얻기
229 +
230 + for (var i =0; i<data_count; i++){
231 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]); // 고속도로 번호를 가져옵니다.
232 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름을 가져옵니다.
233 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]); // 휴게소코드를 가져옵니다.
234 +
235 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
236 + rest_names.push(rest_name); //휴게소 이름을 저장해둡니다...
237 + serviceAreaCodes.push(serviceCode); // 휴게소 코드를 저장해둡니다.
238 + }
239 + }
240 + // 아래 forEach문은 저장한 모든 휴게소에 대해, 드랍다운 버튼을 생성하기 위함입니다.
241 + rest_names.forEach(function(addr,index){
242 + let new_A_Button = document.createElement('a'); // a 속성 생성
243 + new_A_Button.setAttribute('class','dropdown-item');
244 + new_A_Button.setAttribute('onclick',"Showweather("+serviceAreaCodes[index]+","+rest_names[index]+")");
245 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
246 + tagArea.appendChild(new_A_Button);
247 + })
248 + })
249 +
250 + // 페이지 2, 페이지 1과 모든 과정이 동일하며, 오픈 api 데이터 가져오는 특성상 페이지를 나누었습니다.
251 + $.ajax({
252 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=2",
253 + async:false,
254 + success: function(data){
255 + //변수 설정
256 + userData = data;
257 + },
258 + }).done(function() {
259 + var routeCode = "";
260 + var svarAddr = "";
261 + var rest_name = "";
262 + var data_count = userData["list"].length // 데이터 개수 얻기
263 +
264 + for (var i =0; i<data_count; i++){
265 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
266 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름...
267 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]);
268 +
269 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
270 + rest_names.push(rest_name); //휴게소 이름...
271 + serviceAreaCodes.push(serviceCode);
272 + }
273 + }
274 + rest_names.forEach(function(addr,index){
275 + let new_A_Button = document.createElement('a'); // a 속성 생성
276 + new_A_Button.setAttribute('class','dropdown-item');
277 + new_A_Button.setAttribute('onclick',"Showweather("+serviceAreaCodes[index]+","+rest_names[index]+")");
278 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
279 + tagArea.appendChild(new_A_Button);
280 + })
281 + })
282 + // 페이지 3
283 + $.ajax({
284 + url: "http://data.ex.co.kr/openapi/business/conveniServiceArea?key=1817997939&type=json&numOfRows=99&pageNo=3",
285 + async:false,
286 + success: function(data){
287 + //변수 설정
288 + userData = data;
289 + },
290 + }).done(function() {
291 + var routeCode = "";
292 + var svarAddr = "";
293 + var rest_name = "";
294 + var data_count = userData["list"].length // 데이터 개수 얻기
295 +
296 + for (var i =0; i<data_count; i++){
297 + routeCode = JSON.stringify(userData["list"][i]["routeCode"]);
298 + rest_name = JSON.stringify(userData["list"][i]["serviceAreaName"]); // 휴게소 이름...
299 + serviceCode = JSON.stringify(userData["list"][i]["serviceAreaCode"]);
300 +
301 + if(routeCode.substring(1,5) === lineNumber){ // 고속도로 코드가 같다면
302 + rest_names.push(rest_name); //휴게소 이름...
303 + serviceAreaCodes.push(serviceCode);
304 + }
305 + }
306 + rest_names.forEach(function(addr,index){
307 + let new_A_Button = document.createElement('a'); // a 속성 생성
308 + new_A_Button.setAttribute('class','dropdown-item');
309 + new_A_Button.setAttribute('onclick',"Showweather("+serviceAreaCodes[index]+","+rest_names[index]+")");
310 + new_A_Button.innerHTML = rest_names[index].substring(1,rest_names[index].length-1);
311 + tagArea.appendChild(new_A_Button);
312 + })
313 + })
314 +
315 + }
316 +
317 + //검색창에 휴게소 이름을 입력하면 실행되는 함수 Showweather() serviceCode = 휴게소 코드, rest_name = 휴게소 이름
318 + function Showweather(serviceCode,rest_name) {
319 +
320 + serviceCode = serviceCode.substring(3,serviceCode.length); //가져온 휴게소코드를 여기서 사용하는 휴게소코드인 unitCode와 동일한포맷으로 바꿉니다.
321 + let rest_stop = document.getElementById('rest_stop'); // 해당 줄과 바로 아랫줄은 드랍다운 버튼선택시 해당 휴게소이름을 html에 적용하기 위함입니다.
322 + rest_stop.innerHTML =rest_name;
163 //휴게소 이름을 검색하기 전까지는 기타 html 구성 요소들은 숨기기 위하여 innerHTML사용 323 //휴게소 이름을 검색하기 전까지는 기타 html 구성 요소들은 숨기기 위하여 innerHTML사용
164 //휴게소 이름 검색시 화면에 표시 324 //휴게소 이름 검색시 화면에 표시
165 //bar 325 //bar
...@@ -177,9 +337,9 @@ ...@@ -177,9 +337,9 @@
177 document.querySelector('exp6').innerHTML = '지금으로부터 9시간 전부터 3시간 전까지의 풍속을 조회합니다. '; 337 document.querySelector('exp6').innerHTML = '지금으로부터 9시간 전부터 3시간 전까지의 풍속을 조회합니다. ';
178 338
179 //사용자가 입력한 휴게소 이름의 값을 name 변수에 할당 339 //사용자가 입력한 휴게소 이름의 값을 name 변수에 할당
180 - name = document.getElementById('name').value 340 + name = rest_name
181 //bar부분에 휴게소 이름 출력 341 //bar부분에 휴게소 이름 출력
182 - document.querySelector('reststop_name').innerHTML = name; 342 + document.querySelector('reststop_name').innerHTML = rest_name;
183 343
184 344
185 345
...@@ -192,7 +352,7 @@ ...@@ -192,7 +352,7 @@
192 var ttempdata = new Array(10); 352 var ttempdata = new Array(10);
193 var hhumidata = new Array(10); 353 var hhumidata = new Array(10);
194 var wwinddata = new Array(10); 354 var wwinddata = new Array(10);
195 - 355 +
196 for(let k=5; k>1; k--){ 356 for(let k=5; k>1; k--){
197 //present_time-k가 음수인 경우 방지 357 //present_time-k가 음수인 경우 방지
198 if(present_time-k <0){ 358 if(present_time-k <0){
...@@ -205,30 +365,40 @@ ...@@ -205,30 +365,40 @@
205 } 365 }
206 366
207 //fetch 367 //fetch
368 + // 아래 fetch 상황 0602일 11:19 분 기준, 데이터 가져올 수 없음..
208 fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=6806352377&type=json&sdate='+ date1 +'&stdHour=' + ('0'+ String(time1)).slice(-2)).then(function(response){ 369 fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=6806352377&type=json&sdate='+ date1 +'&stdHour=' + ('0'+ String(time1)).slice(-2)).then(function(response){
209 //testing 370 //testing
210 //fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=test&type=json&sdate='+ "20220316" +'&stdHour='+ ('0'+ String(16)).slice(-2)).then(function(response){ 371 //fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=test&type=json&sdate='+ "20220316" +'&stdHour='+ ('0'+ String(16)).slice(-2)).then(function(response){
211 method: 'GET'; 372 method: 'GET';
212 body: JSON.stringify(this.obj) 373 body: JSON.stringify(this.obj)
213 response.text().then(function(text){ 374 response.text().then(function(text){
214 - 375 + console.log(text)
215 //불필요한 데이터들을 정리하고 split을 이용하여 text data를 array data로 변환 376 //불필요한 데이터들을 정리하고 split을 이용하여 text data를 array data로 변환
216 //{}로 구성된 한 세트의 데이터가 어레이의 원소 하나가 되도록 split을 사용 377 //{}로 구성된 한 세트의 데이터가 어레이의 원소 하나가 되도록 split을 사용
217 index1=text.indexOf('[') 378 index1=text.indexOf('[')
218 index2=text.indexOf(']') 379 index2=text.indexOf(']')
219 ndata=text.substr(index1+1, index2-index1+1) 380 ndata=text.substr(index1+1, index2-index1+1)
220 nndata=ndata.split('},'); 381 nndata=ndata.split('},');
221 - 382 +
222 383
223 //ReststopName (휴게소 이름) 데이터 추출 384 //ReststopName (휴게소 이름) 데이터 추출
224 for(let i=0; i<nndata.length; i++){ 385 for(let i=0; i<nndata.length; i++){
386 + // 아래 두줄의 코드를 통해서 휴게소코드를 가져옵니다.
387 + let index1forUnitCode = nndata[i].indexOf('"unitCode":"');
388 + unitCode = nndata[i].substr(index1forUnitCode+12,3);
389 +
225 index3=nndata[i].indexOf('"unitName":"') 390 index3=nndata[i].indexOf('"unitName":"')
226 index4=nndata[i].indexOf('"unitCode":"') 391 index4=nndata[i].indexOf('"unitCode":"')
227 ReststopName=nndata[i].substr(index3+12, index4-index3-14) 392 ReststopName=nndata[i].substr(index3+12, index4-index3-14)
228 393
229 //데이터에서 추출한 휴게소 이름 ReststopName이 검색창을 통해서 사용자에게 입력받은 이름 name과 일치하는 경우 394 //데이터에서 추출한 휴게소 이름 ReststopName이 검색창을 통해서 사용자에게 입력받은 이름 name과 일치하는 경우
230 //그 데이터 셋에서 weather, temperature, humidity, wind를 추출하도록 함. 395 //그 데이터 셋에서 weather, temperature, humidity, wind를 추출하도록 함.
231 - if(ReststopName == name){ 396 +
397 + // 해당 함수의 매개변수로 가져온 휴게소 코드와, 함수 안에서 fetch를 통해 가져온 오픈 api의 휴게소코드가 동일한지 비교합니다.
398 + //fawfe
399 + if(serviceCode == unitCode){
400 + console.log("unitCode access");
401 +
232 //Weather 402 //Weather
233 index5=nndata[i].indexOf('"weatherContents":"') 403 index5=nndata[i].indexOf('"weatherContents":"')
234 index6=nndata[i].indexOf('"statusNo":"') 404 index6=nndata[i].indexOf('"statusNo":"')
...@@ -253,8 +423,9 @@ ...@@ -253,8 +423,9 @@
253 ttempdata[k]=bar_temperature; 423 ttempdata[k]=bar_temperature;
254 hhumidata[k]=bar_humidity; 424 hhumidata[k]=bar_humidity;
255 wwinddata[k]=bar_wind; 425 wwinddata[k]=bar_wind;
256 - } 426 + }
257 - } 427 + }
428 +
258 //innerhtml을 이용해서 html화면에 데이터 표기 429 //innerhtml을 이용해서 html화면에 데이터 표기
259 //5시간 전, 4시간 전, 3시간 전, 2시간 전의 데이터 중 가장 최근의 데이터를 출력하도록 함 430 //5시간 전, 4시간 전, 3시간 전, 2시간 전의 데이터 중 가장 최근의 데이터를 출력하도록 함
260 for(let o=5; o>1; o-- ){ 431 for(let o=5; o>1; o-- ){
...@@ -299,7 +470,7 @@ ...@@ -299,7 +470,7 @@
299 }) 470 })
300 }) 471 })
301 } 472 }
302 - 473 +
303 474
304 //그래프 그리기 475 //그래프 그리기
305 //온도, 습도, 풍속 데이터를 array에 저장하여 그래프에 넘겨줌 476 //온도, 습도, 풍속 데이터를 array에 저장하여 그래프에 넘겨줌
...@@ -307,7 +478,7 @@ ...@@ -307,7 +478,7 @@
307 var humidata = new Array(10); 478 var humidata = new Array(10);
308 var winddata = new Array(10); 479 var winddata = new Array(10);
309 480
310 - name = document.getElementById('name').value 481 + name = rest_name
311 482
312 for(let j=0; j<7; j++){ 483 for(let j=0; j<7; j++){
313 //present_time-3-j가 음수인 경우 방지 484 //present_time-3-j가 음수인 경우 방지
...@@ -321,7 +492,7 @@ ...@@ -321,7 +492,7 @@
321 date2 = YYYYMMDD 492 date2 = YYYYMMDD
322 } 493 }
323 494
324 - name = document.getElementById('name').value 495 + name = rest_name
325 fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=6806352377&type=json&sdate='+ date2 +'&stdHour=' + ('0'+String(time2)).slice(-2)).then(function(response){ 496 fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=6806352377&type=json&sdate='+ date2 +'&stdHour=' + ('0'+String(time2)).slice(-2)).then(function(response){
326 //testing 497 //testing
327 // fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=test&type=json&sdate='+ "20220524" +'&stdHour='+ ('0'+ String(22-j)).slice(-2)).then(function(response){ 498 // fetch('http://data.ex.co.kr/openapi/restinfo/restWeatherList?key=test&type=json&sdate='+ "20220524" +'&stdHour='+ ('0'+ String(22-j)).slice(-2)).then(function(response){
...@@ -337,12 +508,15 @@ ...@@ -337,12 +508,15 @@
337 508
338 //ReststopName (휴게소 이름) 509 //ReststopName (휴게소 이름)
339 for(let i=0; i<nndata.length; i++){ 510 for(let i=0; i<nndata.length; i++){
511 + let index1forUnitCode = nndata[i].indexOf('"unitCode":"');
512 + unitCode = nndata[i].substr(index1forUnitCode+12,3);
513 +
340 index3=nndata[i].indexOf('"unitName":"') 514 index3=nndata[i].indexOf('"unitName":"')
341 index4=nndata[i].indexOf('"unitCode":"') 515 index4=nndata[i].indexOf('"unitCode":"')
342 ReststopName=nndata[i].substr(index3+12, index4-index3-14) 516 ReststopName=nndata[i].substr(index3+12, index4-index3-14)
343 517
344 518
345 - if(ReststopName == name){ 519 + if(serviceCode == unitCode){
346 //Weather 520 //Weather
347 index5=nndata[i].indexOf('"weatherContents":"') 521 index5=nndata[i].indexOf('"weatherContents":"')
348 index6=nndata[i].indexOf('"statusNo":"') 522 index6=nndata[i].indexOf('"statusNo":"')
......