권주희

display the result of current air information

- display the result of current air information
- add icon
......@@ -6,6 +6,12 @@ import "./home.css";
import { Map, Marker, MarkerClusterer, Polyline } from "react-kakao-maps";
import "bootstrap/dist/css/bootstrap.min.css";
import API from "./API";
import veryGood from "./gradeIcon/cool.png";
import good from "./gradeIcon/smile.png";
import bad from "./gradeIcon/angry.png";
import veryBad from "./gradeIcon/devil.png";
import next from "./gradeIcon/next.png";
/* global kakao */
export default class Home extends Component {
......@@ -21,6 +27,7 @@ export default class Home extends Component {
placeSearch: new kakao.maps.services.Places(),
infoWindow: new kakao.maps.CustomOverlay({}),
region: "은평구청",
curAirCondition: null,
// curAirCondition: null,
// routeInformation: null,
......@@ -328,6 +335,52 @@ export default class Home extends Component {
render() {
let currentAirCondition = null;
if (this.state.curAirCondition != null) {
let pm10Image = null;
let pm25Image = null;
switch (this.state.curAirCondition.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.curAirCondition.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;
}
currentAirCondition = (
<h5>
<br />
<br />
<br /> 미세먼지 등급 <br /> {pm10Image} <br />
미세먼지 지수 : {this.state.curAirCondition.pm10Value} <br />
초미세먼지 등급 <br /> {pm25Image} <br />
초미세먼지 지수 : {this.state.curAirCondition.pm25Value} <br />{" "}
</h5>
);
}
let routeAirCondition = null;
return (
......