김민규 / rest_stop_list

Go to a project
Toggle navigation Toggle navigation pinning
leeseohyun(lee)
1b1cafb6 2 parents ba6e4b95 58112988

Merge remote-tracking branch 'origin/feature/lpg_api'

Inline Side-by-side
Showing 1 changed file with 111 additions and 64 deletions
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
13 <!-- Core theme CSS (includes Bootstrap)--> 13 <!-- Core theme CSS (includes Bootstrap)-->
14 <link href="css/styles.css" rel="stylesheet" /> 14 <link href="css/styles.css" rel="stylesheet" />
15 </head> 15 </head>
16 +
16 <body class="d-flex flex-column"> 17 <body class="d-flex flex-column">
17 <main class="flex-shrink-0"> 18 <main class="flex-shrink-0">
18 <!-- Navigation--> 19 <!-- Navigation-->
...@@ -45,84 +46,130 @@ ...@@ -45,84 +46,130 @@
45 </div> 46 </div>
46 </div> 47 </div>
47 </nav> 48 </nav>
49 +
48 <!-- Header--> 50 <!-- Header-->
49 <header class="py-5"> 51 <header class="py-5">
50 <div class="container px-5"> 52 <div class="container px-5">
51 <div class="row justify-content-center"> 53 <div class="row justify-content-center">
52 <div class="col-lg-8 col-xxl-6"> 54 <div class="col-lg-8 col-xxl-6">
53 <div class="text-center my-5"> 55 <div class="text-center my-5">
54 - <h1 class="fw-bolder mb-3">Our mission is to make building websites easier for everyone.</h1> 56 + <h1 class="fw-bolder mb-3">LPG 충전소</h1>
55 - <p class="lead fw-normal text-muted mb-4">Start Bootstrap was built on the idea that quality, functional website templates and themes should be available to everyone. Use our open source, free products, or support us by purchasing one of our premium products or services.</p> 57 + <p class="lead fw-normal text-muted mb-4">Just search the name of the rest stop,<br>You'll find out the LPG filling station of the rest area.</p>
56 - <a class="btn btn-primary btn-lg" href="#scroll-target">Read our story</a> 58 +
59 + <!--검색 버튼으로 검색할 휴게소 이름 입력 받기-->
60 + <p><input type="text" placeholder="휴게소 이름" id="name"><input type="button" onclick="ShowLPG()" value="확인"></p>
61 +
57 </div> 62 </div>
58 </div> 63 </div>
59 </div> 64 </div>
60 </div> 65 </div>
61 </header> 66 </header>
62 - <!-- About section one--> 67 +
63 - <section class="py-5 bg-light" id="scroll-target"> 68 +
64 - <div class="container px-5 my-5"> 69 + <!--bar-->
65 - <div class="row gx-5 align-items-center"> 70 + <section class="py-3 bg-light" id="scroll-target">
66 - <div class="col-lg-6"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div> 71 + <div class="container px-1 my-1">
67 - <div class="col-lg-6">
68 - <h2 class="fw-bolder">Our founding</h2>
69 - <p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
70 - </div>
71 - </div>
72 - </div>
73 - </section>
74 - <!-- About section two-->
75 - <section class="py-5">
76 - <div class="container px-5 my-5">
77 - <div class="row gx-5 align-items-center">
78 - <div class="col-lg-6 order-first order-lg-last"><img class="img-fluid rounded mb-5 mb-lg-0" src="https://dummyimage.com/600x400/343a40/6c757d" alt="..." /></div>
79 - <div class="col-lg-6">
80 - <h2 class="fw-bolder">Growth &amp; beyond</h2>
81 - <p class="lead fw-normal text-muted mb-0">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto est, ut esse a labore aliquam beatae expedita. Blanditiis impedit numquam libero molestiae et fugit cupiditate, quibusdam expedita, maiores eaque quisquam.</p>
82 - </div>
83 - </div>
84 - </div>
85 - </section>
86 - <!-- Team members section-->
87 - <section class="py-5 bg-light">
88 - <div class="container px-5 my-5">
89 <div class="text-center"> 72 <div class="text-center">
90 - <h2 class="fw-bolder">Our team</h2> 73 + <center><p><h3 class="fw-bolder"><reststop_name></reststop_name></h3></p></center>
91 - <p class="lead fw-normal text-muted mb-5">Dedicated to quality and your success</p> 74 + <center><hr style ="height:2px; width: 55%"></hr></center>
75 + <center><p><h5 class="fw-bolder"><bar1></bar1></h5></p></center>
76 + <div class="container px-1 my-1"><h6 class="lead fw-normal text-muted mb-4"><bar_1></bar_1></h6><div>
77 + <center><hr style ="height:2px; width: 15%"></hr></center>
78 + <center><p><h5 class="fw-bolder"><bar2></bar2></h5></p></center>
79 + <div class="container px-1 my-1"><h6 class="lead fw-normal text-muted mb-4"><bar_2></bar_2></h6><div>
92 </div> 80 </div>
93 - <div class="row gx-5 row-cols-1 row-cols-sm-2 row-cols-xl-4 justify-content-center">
94 - <div class="col mb-5 mb-5 mb-xl-0">
95 - <div class="text-center">
96 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
97 - <h5 class="fw-bolder">Ibbie Eckart</h5>
98 - <div class="fst-italic text-muted">Founder &amp; CEO</div>
99 - </div>
100 - </div>
101 - <div class="col mb-5 mb-5 mb-xl-0">
102 - <div class="text-center">
103 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
104 - <h5 class="fw-bolder">Arden Vasek</h5>
105 - <div class="fst-italic text-muted">CFO</div>
106 - </div>
107 - </div>
108 - <div class="col mb-5 mb-5 mb-sm-0">
109 - <div class="text-center">
110 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
111 - <h5 class="fw-bolder">Toribio Nerthus</h5>
112 - <div class="fst-italic text-muted">Operations Manager</div>
113 - </div>
114 - </div>
115 - <div class="col mb-5">
116 - <div class="text-center">
117 - <img class="img-fluid rounded-circle mb-4 px-4" src="https://dummyimage.com/150x150/ced4da/6c757d" alt="..." />
118 - <h5 class="fw-bolder">Malvina Cilla</h5>
119 - <div class="fst-italic text-muted">CTO</div>
120 - </div>
121 - </div>
122 </div> 81 </div>
123 - </div> 82 + </section>
124 - </section> 83 +
125 - </main> 84 +
85 +
86 + <script>
87 +
88 + //LPG 휴게소 open api는 LPG휴게소가 존재하는 데이터 리스트만 가지고 있음
89 + //따라서 fetch를 총 두 번 진행하여 첫번째에서는 LPG 휴게소 리스트를 받아와 그 중 휴게소 이름만 추출하여 리스트로 만들고
90 + //웹 페이지에서 검색하고자 하는 휴게소 이름을 입력받아 만약 이름이 LPG휴게소 리스트에 있다면
91 + //'LPG 충전소가 있습니다'를, 없다면 'LPG 충전소가 없습니다'를 출력하도록 함
92 +
93 +
94 + //fetch로 전체 데이터 리스트를 text형태로 끌어오기
95 + function ShowLPG() {
96 +
97 + //사용자가 입력한 휴게소 이름의 값을 name 변수에 할당
98 + name = document.getElementById('name').value
99 +
100 + //bar부분에 휴게소 이름 출력
101 + document.querySelector('reststop_name').innerHTML = name;
102 +
103 + document.querySelector('bar1').innerHTML = 'LPG 충전소 여부';
104 + document.querySelector('bar2').innerHTML = '브랜드';
105 +
106 + var LPG_Reststop_List = [];
107 + fetch('http://data.ex.co.kr/openapi/business/lpgServiceAreaInfo?key=6806352377&type=json&numOfRows=1000').then(function (response) {
108 + method: 'GET';
109 + body: JSON.stringify(this.obj)
110 + response.text().then(function (text) {
111 +
112 + //쓸데없는 데이터를 제거하여 필요한 데이터만 정리하기
113 + index_1 = text.indexOf('[')
114 + index_2 = text.indexOf(']')
115 + mdata = text.substr(index_1 + 1, index_2 - index_1 - 1)
116 +
117 + //text data -> array data
118 + // },를 기준으로 하여 split으로 각 데이터셋 {}이 array의 원소가 되도록 array를 생성하기
119 + mmdata = mdata.split('},');
120 +
121 + //휴게소 이름들만 데이터리스트에서 추출해 LPG_Reststop_List 어레이에 넣기
122 +
123 + //mmdata의 길이만큼 반복
124 + for(let i=0; i<mmdata.length; i++){
125 +
126 + //휴게소 이름만 데이터리스트에서 추출하기
127 + index_3 = mmdata[i].indexOf('"serviceAreaName":"')
128 + index_4 = mmdata[i].indexOf(',"routeCode":"')
129 + ReststopName = mmdata[i].substr(index_3+19, index_4-index_3-20)
130 +
131 + //휴게소 이름을 어레이에 추가
132 + LPG_Reststop_List.push(ReststopName)}
133 +
134 + Exist='LPG 충전소가 없습니다'
135 + for(let j=0; j<LPG_Reststop_List.length; j++){
136 + if(name==LPG_Reststop_List[j]){
137 + Exist = 'LPG 충전소가 있습니다'
138 + }}
139 + document.querySelector('bar_1').innerHTML =String(Exist)
140 +
141 + })
142 + })
143 +
144 + //두번째 fetch에서는 name에 해당하는 주유소 브랜드 이름만 끌어오기
145 + fetch('http://data.ex.co.kr/openapi/business/lpgServiceAreaInfo?key=6806352377&type=json&serviceAreaName=' + name + '&numOfRows=1000').then(function (response) {
146 + method: 'GET';
147 + body: JSON.stringify(this.obj)
148 + response.text().then(function (text) {
149 +
150 + //text data->array data로 변환
151 + //데이터를 깔끔하게 정리
152 + index1 = text.indexOf('[')
153 + index2 = text.indexOf(']')
154 + ndata = text.substr(index1 + 1, index2 - index1 - 1)
155 + nndata = ndata.split('},');
156 +
157 + //Lpg 충전소 브랜드 이름
158 + for (let k = 0; k < nndata.length; k++) {
159 + index3 = nndata[k].indexOf('"oilCompany":"')
160 + nnndata = nndata[k].substr(index3)
161 + index4 = nnndata.indexOf(',')
162 + Lpgname = nnndata.substr(14, index4-15)
163 +
164 + //HTML화면에 띄우기
165 + document.querySelector('bar_2').innerHTML = String(Lpgname)
166 + }
167 + })
168 + })
169 + }
170 + </script>
171 +
172 +
126 <!-- Footer--> 173 <!-- Footer-->
127 <footer class="bg-dark py-4 mt-auto"> 174 <footer class="bg-dark py-4 mt-auto">
128 <div class="container px-5"> 175 <div class="container px-5">
......