김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
지창언
8cb03028 1 parent 2323b931

menupage dropdown button added

Inline Side-by-side
Showing 1 changed file with 157 additions and 3 deletions
...@@ -55,7 +55,22 @@ ...@@ -55,7 +55,22 @@
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> 57 <p><h3>검색할 휴게소의 이름을 입력하세요</h3></p>
58 + <div class="dropdown">
58 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>
59 <input type="text" placeholder="내용을 입력하세요" id="menuname"><input type="button" onclick="Showmenu()" value="확인"> 74 <input type="text" placeholder="내용을 입력하세요" id="menuname"><input type="button" onclick="Showmenu()" value="확인">
60 </a> 75 </a>
61 </div> 76 </div>
...@@ -258,13 +273,152 @@ ...@@ -258,13 +273,152 @@
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>
263 279
264 - function Showmenu() { 280 + // 모든 자식요소들을 삭제하는 함수
265 - menuname = document.getElementById('menuname').value 281 + function removeAllchild(div) {
282 + while (div.hasChildNodes()) {
283 + div.removeChild(div.firstChild);
284 + }
285 + }
286 +
287 +
288 + var serviceAreaCode= "";
289 +
290 +
291 + // 각 고속도로에 존재하는 휴게소 리스트를 작성하여 드랍다운 메뉴에 추가합니다.
292 + function addReststop(lineNumber){
293 +
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 + })*/
266 415
267 - fetch('http://data.ex.co.kr/openapi/restinfo/restBestfoodList?key=6806352377&type=json&numOfRows=1000' + '&stdRestNm='+menuname).then(function(response){ 416 + }
417 +
418 + function Showmenu(rest_name) {
419 + menuname = document.getElementById('menuname').value
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){
......