Merge branch 'feature/getCurAirInfo' into 'develop'

Feature/get cur air info - implement route air condition api - connect the api with client - display the route air condition result See merge request !5

Merge branch 'feature/getCurAirInfo' into 'develop'
Feature/get cur air info - implement route air condition api - connect the api with client - display the route air condition result See merge request !5
권주희
Commit 09fd3cc64c4670ad209176e516c7bf456e098d68 09fd3cc6 2 parents daea4984 0d6b8629
Showing 2 changed files with 259 additions and 24 deletions
backend/routes/airCondition.js
frontend/src/home.js
--- a/backend/routes/airCondition.js
View file @09fd3cc
+++ b/backend/routes/airCondition.js
View file @09fd3cc
@@ -58,6 +58,30 @@ const getPosition = (lat, lon) => {
       console.log(error.response);
     });
 };
+/* GET route 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 @09fd3cc
+++ b/frontend/src/home.js
View file @09fd3cc
@@ -11,7 +11,9 @@ import good from "./gradeIcon/smile.png";
 import bad from "./gradeIcon/angry.png";
 import veryBad from "./gradeIcon/devil.png";
 import next from "./gradeIcon/next.png";
-
+import start from "./gradeIcon/start.png";
+import finish from "./gradeIcon/finish.png";
+import loading from "./gradeIcon/loading.gif";
 /* global kakao */
 export default class Home extends Component {
@@ -28,30 +30,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 +65,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 +117,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 +152,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 +198,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 +239,7 @@ export default class Home extends Component {
       fragment.appendChild(el);
     }
     paginationEl.appendChild(fragment);
-  }
+  };
   removeAllChildNods(el) {
     while (el.hasChildNodes()) {
@@ -226,7 +249,7 @@ export default class Home extends Component {
   // 검색결과 목록 또는 마커를 클릭했을 때 호출되는 함수입니다
   // 인포윈도우에 장소명을 표시합니다
-  displayInfowindow(marker, title) {
+  displayInfowindow = (marker, title) => {
     console.log(marker);
     let content = document.createElement("div");
@@ -316,7 +339,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 함수가 호출된 이후에 호출되는 메소
@@ -382,6 +405,128 @@ export default class Home extends Component {
       );
     }
     let routeAirCondition = null;
+    let tempRouteAirCondition = [];
+    if (this.state.buttonClicked != null) {
+      routeAirCondition = <img src={loading} width="300px" heigth="300px" />;
+    }
+    if (this.state.routeInformation != null) {
+      for (let i = 0; i < this.state.routeInformation.length - 1; i++) {
+        tempRouteAirCondition.push(this.state.routeInformation[i]);
+      }
+      let pm10ImageArray = new Array();
+      let pm25ImageArray = new Array();
+      for (let i = 0; i < this.state.routeInformation.length; i++) {
+        let pm10Image = null;
+        let pm25Image = null;
+        switch (this.state.routeInformation[i]["airCondition"].pm10Grade) {
+          case "1":
+            pm10Image = <img src={veryGood} width="50px" heigth="100px" />;
+            break;
+          case "2":
+            pm10Image = <img src={good} width="50px" heigth="100px" />;
+            break;
+          case "3":
+            pm10Image = <img src={bad} width="50px" heigth="100px" />;
+            break;
+          case "4":
+            pm10Image = <img src={veryBad} width="50px" heigth="100px" />;
+            break;
+          default:
+            pm10Image = null;
+        }
+        switch (this.state.routeInformation[i]["airCondition"].pm25Grade) {
+          case "1":
+            pm25Image = <img src={veryGood} width="50px" heigth="100px" />;
+            break;
+          case "2":
+            pm25Image = <img src={good} width="50px" heigth="100px" />;
+            break;
+          case "3":
+            pm25Image = <img src={bad} width="50px" heigth="100px" />;
+            break;
+          case "4":
+            pm25Image = <img src={veryBad} width="50px" heigth="100px" />;
+            break;
+          default:
+            pm25Image = null;
+        }
+        pm10ImageArray[i] = pm10Image;
+        pm25ImageArray[i] = pm25Image;
+      }
+      routeAirCondition = (
+        <table>
+          <thead>
+            <tr>
+              <th>
+                <br />
+                경로별 미세먼지 정보
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <img src={start} width="50px" heigth="30px" /> <br />
+                <h6>
+                  {this.state.departureTitle} <br /> 미세먼지 등급
+                  <br />
+                  {pm10ImageArray[this.state.routeInformation.length - 1]}
+                  <br />
+                  미세먼지 지수 :{" "}
+                  {
+                    this.state.routeInformation[
+                      this.state.routeInformation.length - 1
+                    ]["airCondition"].pm10Value
+                  }
+                  <br />
+                </h6>
+              </td>
+              {tempRouteAirCondition.map((listValue, index) => {
+                if (index != tempRouteAirCondition.length - 1) {
+                  return (
+                    <td key={index}>
+                      <img src={next} width="40px" heigth="25px" />
+                      <h6>
+                        {listValue.instruction}
+                        <br />
+                        소요시간 : {listValue.duration}
+                        <br />
+                        미세먼지 등급
+                        <br />
+                        {pm10ImageArray[index]}
+                        <br />
+                        미세먼지 지수 : <br />
+                        {listValue.airCondition.pm10Value}
+                        <br />
+                      </h6>
+                    </td>
+                  );
+                } else {
+                  return (
+                    <td key={index}>
+                      <img src={finish} width="50px" heigth="30px" />
+                      <br />
+                      <h6>
+                        {listValue.instruction}
+                        <br />
+                        소요시간 : {listValue.duration}
+                        <br />
+                        미세먼지 등급
+                        <br />
+                        {pm10ImageArray[index]}
+                        <br />
+                        미세먼지 지수 : {listValue.airCondition.pm10Value}
+                        <br />
+                      </h6>
+                    </td>
+                  );
+                }
+              })}
+            </tr>
+          </tbody>
+        </table>
+      );
+    }
     return (
       <section id="home">