권주희

display the route air condition result

......@@ -58,7 +58,7 @@ const getPosition = (lat, lon) => {
console.log(error.response);
});
};
/* GET airCondition listing. */
/* GET route airCondition listing. */
router.get("/route", async function (req, res, next) {
console.log("출발지:", req.query.departure);
console.log("도착지:", req.query.arrival);
......
......@@ -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 {
......@@ -403,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">
......