implement route air condition api

- implement route air condition api - connect the api with client

implement route air condition api
- implement route air condition api - connect the api with client
권주희
Commit dfdd01d4cb5eb3af516bf1874930f72a2c6c44e4 dfdd01d4 1 parent 851a1902
Showing 2 changed files with 134 additions and 23 deletions
backend/routes/airCondition.js
frontend/src/home.js
--- a/backend/routes/airCondition.js
View file @dfdd01d
+++ b/backend/routes/airCondition.js
View file @dfdd01d
@@ -58,6 +58,30 @@ const getPosition = (lat, lon) => {
       console.log(error.response);
     });
 };
+/* GET airCondition listing. */
+router.get("/route", async function (req, res, next) {
+  console.log("출발지:", req.query.departure);
+  console.log("도착지:", req.query.arrival);
+
+  let dep = JSON.parse(req.query.departure);
+  let depLat = dep["Ha"];
+  let depLon = dep["Ga"];
+
+  let arr = JSON.parse(req.query.arrival);
+  let arrLat = arr["Ha"];
+  let arrLon = arr["Ga"];
+  let airCondition = "";
+
+  let response = await getRoute(depLat, depLon, arrLat, arrLon)
+    .then((routeInformation) =>
+      routeAirCondition(depLat, depLon, routeInformation)
+    )
+    .then((routeInformation) => {
+      airCondition = routeInformation;
+    });
+
+  res.send(airCondition);
+});
 const getCondition = (encodedStation) => {
   return axios
@@ -78,4 +102,70 @@ const getCondition = (encodedStation) => {
     });
 };
+const getRoute = (depLat, depLon, arrLat, arrLon) => {
+  return axios
+    .get(
+      "https://maps.googleapis.com/maps/api/directions/json?origin=" +
+        depLat +
+        "," +
+        depLon +
+        "&destination=" +
+        arrLat +
+        "," +
+        arrLon +
+        "&mode=transit&departure_time=now&key=" +
+        googleMapKey +
+        "&language=ko"
+    )
+    .then(function (response) {
+      console.log(response["data"]);
+      let routeInformation = [];
+      for (
+        let i = 0;
+        i < response["data"].routes[0]["legs"][0]["steps"].length;
+        i++
+      ) {
+        let info = {};
+        info["instruction"] =
+          response["data"].routes[0]["legs"][0]["steps"][i][
+            "html_instructions"
+          ];
+        info["location"] =
+          response["data"].routes[0]["legs"][0]["steps"][i]["end_location"];
+        info["duration"] =
+          response["data"].routes[0]["legs"][0]["steps"][i]["duration"]["text"];
+        info["travel_mode"] =
+          response["data"].routes[0]["legs"][0]["steps"][i]["travel_mode"];
+        routeInformation.push(info);
+      }
+      // console.log(routeInformation);
+      return routeInformation;
+    })
+    .catch(function (error) {
+      console.log(error.response);
+    });
+};
+
+const routeAirCondition = async (depLat, depLon, routeInformation) => {
+  await getPosition(depLat, depLon)
+    .then((encodedStation) => getCondition(encodedStation))
+    .then((result) => {
+      let info = {};
+      info["airCondition"] = result;
+      routeInformation.push(info);
+    });
+  for (let i = 0; i < routeInformation.length - 1; i++) {
+    await getPosition(
+      routeInformation[i]["location"]["lat"],
+      routeInformation[i]["location"]["lng"]
+    )
+      .then((encodedStation) => getCondition(encodedStation))
+      .then((result) => {
+        routeInformation[i]["airCondition"] = result;
+      });
+  }
+  console.log(routeInformation);
+  return routeInformation;
+};
+
 module.exports = router;
--- a/frontend/src/home.js
View file @dfdd01d
+++ b/frontend/src/home.js
View file @dfdd01d
@@ -28,30 +28,27 @@ export default class Home extends Component {
       infoWindow: new kakao.maps.CustomOverlay({}),
       region: "은평구청",
       curAirCondition: null,
-
+      routeInformation: null,
-      // curAirCondition: null,
-      // routeInformation: null,
     };
-    this.removeAllChildNods = this.removeAllChildNods.bind(this);
-    this.displayInfowindow = this.displayInfowindow.bind(this);
   }
-  searchPlaces() {
+  searchPlaces = () => {
     var keyword = document.getElementById("keyword").value;
     if (!keyword.replace(/^\s+|\s+$/g, "")) {
       alert("키워드를 입력해주세요!");
       return false;
     }
+
     // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
     this.state.placeSearch.keywordSearch(
       keyword,
       this.placesSearchCB.bind(this)
     );
-  }
+  };
   // 장소검색이 완료됐을 때 호출되는 콜백함수 입니다
-  placesSearchCB(data, status, pagination) {
+  placesSearchCB = (data, status, pagination) => {
     if (status === kakao.maps.services.Status.OK) {
       // 정상적으로 검색이 완료됐으면
       // 검색 목록과 마커를 표출합니다
@@ -66,9 +63,9 @@ export default class Home extends Component {
       alert("검색 결과 중 오류가 발생했습니다.");
       return;
     }
-  }
+  };
-  displayPlaces(places) {
+  displayPlaces = (places) => {
     var listEl = document.getElementById("placesList"),
       menuEl = document.getElementById("menu_wrap"),
       fragment = document.createDocumentFragment(),
@@ -118,13 +115,13 @@ export default class Home extends Component {
     // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
     this.state.map.setBounds(bounds);
-  }
+  };
   // 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
-  closeOverlay() {
+  closeOverlay = () => {
     this.state.infoWindow.setMap(null);
-  }
+  };
-  getListItem(index, places) {
+  getListItem = (index, places) => {
     var el = document.createElement("li"),
       itemStr =
         '<span class="markerbg marker_' +
@@ -153,9 +150,33 @@ export default class Home extends Component {
     el.className = "item";
     return el;
-  }
+  };
-  addMarker(position, idx, title) {
+  getRouteAirCondition = () => {
+    this.setState({
+      buttonClicked: true,
+    });
+    API.get("/airCondition/route", {
+      params: {
+        departure: this.state.departure,
+        arrival: this.state.arrival,
+      },
+    })
+      .then((response) => {
+        this.setState({
+          routeInformation: response.data,
+        });
+        console.log(this.state.routeInformation);
+      })
+      .catch(function (error) {
+        console.log(error);
+      })
+      .finally(function () {
+        // always executed
+      });
+  };
+
+  addMarker = (position, idx, title) => {
     var imageSrc =
         "http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png", // 마커 이미지 url, 스프라이트 이미지를 씁니다
       imageSize = new kakao.maps.Size(36, 37), // 마커 이미지의 크기
@@ -175,20 +196,20 @@ export default class Home extends Component {
     this.state.markers.push(marker); // 배열에 생성된 마커를 추가합니다
     return marker;
-  }
+  };
   // 지도 위에 표시되고 있는 마커를 모두 제거합니다
-  removeMarker() {
+  removeMarker = () => {
     for (var i = 0; i < this.state.markers.length; i++) {
       this.state.markers[i].setMap(null);
     }
     this.setState({
       markers: [],
     });
-  }
+  };
   // 검색결과 목록 하단에 페이지번호를 표시는 함수입니다
-  displayPagination(pagination) {
+  displayPagination = (pagination) => {
     var paginationEl = document.getElementById("pagination"),
       fragment = document.createDocumentFragment(),
       i;
@@ -216,7 +237,7 @@ export default class Home extends Component {
       fragment.appendChild(el);
     }
     paginationEl.appendChild(fragment);
-  }
+  };
   removeAllChildNods(el) {
     while (el.hasChildNodes()) {
@@ -226,7 +247,7 @@ export default class Home extends Component {
   // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
   // 인포윈도우에 장소명을 표시합니다
-  displayInfowindow(marker, title) {
+  displayInfowindow = (marker, title) => {
     console.log(marker);
     let content = document.createElement("div");
@@ -316,7 +337,7 @@ export default class Home extends Component {
     this.state.infoWindow.setContent(content);
     this.state.infoWindow.setPosition(marker.getPosition());
     this.state.infoWindow.setMap(this.state.map);
-  }
+  };
   componentDidMount() {
     // 컴포넌트가 만들어지고, render 함수가 호출된 이후에 호출되는 메소