김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
af91b43e 1 parent c2790bca

conflict

Inline Side-by-side
Showing 1 changed file with 194 additions and 21 deletions
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){
...@@ -219,17 +379,26 @@ ...@@ -219,17 +379,26 @@
219 index2=text.indexOf(']') 379 index2=text.indexOf(']')
220 ndata=text.substr(index1+1, index2-index1+1) 380 ndata=text.substr(index1+1, index2-index1+1)
221 nndata=ndata.split('},'); 381 nndata=ndata.split('},');
222 - 382 +
223 383
224 //ReststopName (휴게소 이름) 데이터 추출 384 //ReststopName (휴게소 이름) 데이터 추출
225 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 +
226 index3=nndata[i].indexOf('"unitName":"') 390 index3=nndata[i].indexOf('"unitName":"')
227 index4=nndata[i].indexOf('"unitCode":"') 391 index4=nndata[i].indexOf('"unitCode":"')
228 ReststopName=nndata[i].substr(index3+12, index4-index3-14) 392 ReststopName=nndata[i].substr(index3+12, index4-index3-14)
229 393
230 //데이터에서 추출한 휴게소 이름 ReststopName이 검색창을 통해서 사용자에게 입력받은 이름 name과 일치하는 경우 394 //데이터에서 추출한 휴게소 이름 ReststopName이 검색창을 통해서 사용자에게 입력받은 이름 name과 일치하는 경우
231 //그 데이터 셋에서 weather, temperature, humidity, wind를 추출하도록 함. 395 //그 데이터 셋에서 weather, temperature, humidity, wind를 추출하도록 함.
232 - if(ReststopName == name){ 396 +
397 + // 해당 함수의 매개변수로 가져온 휴게소 코드와, 함수 안에서 fetch를 통해 가져온 오픈 api의 휴게소코드가 동일한지 비교합니다.
398 + //fawfe
399 + if(serviceCode == unitCode){
400 + console.log("unitCode access");
401 +
233 //Weather 402 //Weather
234 index5=nndata[i].indexOf('"weatherContents":"') 403 index5=nndata[i].indexOf('"weatherContents":"')
235 index6=nndata[i].indexOf('"statusNo":"') 404 index6=nndata[i].indexOf('"statusNo":"')
...@@ -254,8 +423,9 @@ ...@@ -254,8 +423,9 @@
254 ttempdata[k]=bar_temperature; 423 ttempdata[k]=bar_temperature;
255 hhumidata[k]=bar_humidity; 424 hhumidata[k]=bar_humidity;
256 wwinddata[k]=bar_wind; 425 wwinddata[k]=bar_wind;
257 - } 426 + }
258 - } 427 + }
428 +
259 //innerhtml을 이용해서 html화면에 데이터 표기 429 //innerhtml을 이용해서 html화면에 데이터 표기
260 //5시간 전, 4시간 전, 3시간 전, 2시간 전의 데이터 중 가장 최근의 데이터를 출력하도록 함 430 //5시간 전, 4시간 전, 3시간 전, 2시간 전의 데이터 중 가장 최근의 데이터를 출력하도록 함
261 for(let o=5; o>1; o-- ){ 431 for(let o=5; o>1; o-- ){
...@@ -300,7 +470,7 @@ ...@@ -300,7 +470,7 @@
300 }) 470 })
301 }) 471 })
302 } 472 }
303 - 473 +
304 474
305 //그래프 그리기 475 //그래프 그리기
306 //온도, 습도, 풍속 데이터를 array에 저장하여 그래프에 넘겨줌 476 //온도, 습도, 풍속 데이터를 array에 저장하여 그래프에 넘겨줌
...@@ -308,7 +478,7 @@ ...@@ -308,7 +478,7 @@
308 var humidata = new Array(10); 478 var humidata = new Array(10);
309 var winddata = new Array(10); 479 var winddata = new Array(10);
310 480
311 - name = document.getElementById('name').value 481 + name = rest_name
312 482
313 for(let j=0; j<7; j++){ 483 for(let j=0; j<7; j++){
314 //present_time-3-j가 음수인 경우 방지 484 //present_time-3-j가 음수인 경우 방지
...@@ -322,7 +492,7 @@ ...@@ -322,7 +492,7 @@
322 date2 = YYYYMMDD 492 date2 = YYYYMMDD
323 } 493 }
324 494
325 - name = document.getElementById('name').value 495 + name = rest_name
326 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){
327 //testing 497 //testing
328 // 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){
...@@ -338,12 +508,15 @@ ...@@ -338,12 +508,15 @@
338 508
339 //ReststopName (휴게소 이름) 509 //ReststopName (휴게소 이름)
340 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 +
341 index3=nndata[i].indexOf('"unitName":"') 514 index3=nndata[i].indexOf('"unitName":"')
342 index4=nndata[i].indexOf('"unitCode":"') 515 index4=nndata[i].indexOf('"unitCode":"')
343 ReststopName=nndata[i].substr(index3+12, index4-index3-14) 516 ReststopName=nndata[i].substr(index3+12, index4-index3-14)
344 517
345 518
346 - if(ReststopName == name){ 519 + if(serviceCode == unitCode){
347 //Weather 520 //Weather
348 index5=nndata[i].indexOf('"weatherContents":"') 521 index5=nndata[i].indexOf('"weatherContents":"')
349 index6=nndata[i].indexOf('"statusNo":"') 522 index6=nndata[i].indexOf('"statusNo":"')
......