Commit 408fa3ba authored by KangMin An's avatar KangMin An
Browse files

Update: 시간 표시 갱신.

parent 7f1a92da
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Card, Row, Tab, Tabs } from "react-bootstrap"; import { Card, Row, Tab, Tabs } from "react-bootstrap";
import ChartTemp from './ChartTemp'; import ChartTemp from "./ChartTemp";
import ChartHumidity from './ChartHumidity'; import ChartHumidity from "./ChartHumidity";
import ChartWindSpeed from './ChartWindSpeed'; import ChartWindSpeed from "./ChartWindSpeed";
import ChartPressure from './ChartPressure'; import ChartPressure from "./ChartPressure";
import '../App.css' import "../App.css";
import { isLogined } from './../utils/Auth'; import { isLogined } from "./../utils/Auth";
import axios from "axios"; import axios from "axios";
import { routesClient } from './../routesClient'; import { routesClient } from "./../routesClient";
function ChartTabs() { function ChartTabs() {
const cardstyled = { const cardstyled = {
margin: 'auto', margin: "auto",
padding: '1em', padding: "1em",
display: 'flex', display: "flex",
justifyContent: 'center', justifyContent: "center",
width: '100%', width: "100%",
borderWidth: '3px', borderWidth: "3px",
borderRadius: '20px', borderRadius: "20px",
borderColor: 'rgb(110, 189, 142)', borderColor: "rgb(110, 189, 142)",
color: '#04AB70' color: "#04AB70",
} };
const [temp, setTemp] = useState([]); const [temp, setTemp] = useState([]);
const [press, setPress] = useState([]); const [press, setPress] = useState([]);
const [humi, setHumi] = useState([]) const [humi, setHumi] = useState([]);
const [windSpd, setWindSpd] = useState([]) const [windSpd, setWindSpd] = useState([]);
const [newLabel, setNewLabel] = useState([]); const [newLabel, setNewLabel] = useState([]);
const [tempNewLabel, setTempNewLabel] = useState([]); const [tempNewLabel, setTempNewLabel] = useState([]);
useEffect(() => { useEffect(() => {
if (isLogined()) { if (isLogined()) {
axios.get(routesClient.userWeather, { withCredentials: true }) axios
.get(routesClient.userWeather, { withCredentials: true })
.then((res) => { .then((res) => {
console.log(res.data.contents.weather_in) console.log(res.data.contents.weather_in);
const userWeather = res.data.contents.weather_in const userWeather = res.data.contents.weather_in;
const userWeatherPredict = res.data.contents.weather_predict const userWeatherPredict = res.data.contents.weather_predict;
const tempArray = [] const tempArray = [];
const humiArray = [] const humiArray = [];
const pressArray = [] const pressArray = [];
const windspeedArray = [] const windspeedArray = [];
const tempLabelArray = [] const tempLabelArray = [];
const labelArray = [] const labelArray = [];
for (let i = 3; i < 9; i++) { for (let i = 0; i < userWeather.length; i++) {
tempArray.push(userWeather[i].temp) tempArray.push(userWeather[i].temp);
humiArray.push(userWeather[i].humi) humiArray.push(userWeather[i].humi);
pressArray.push(userWeather[i].press) pressArray.push(userWeather[i].press);
windspeedArray.push(userWeather[i].wind_speed) windspeedArray.push(userWeather[i].wind_speed);
tempLabelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0]) let date = new Date(
labelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0]) new Date(userWeather[i].collected_at).getTime()
);
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
} }
for (let j = 0; j < 3; j++) { for (let j = 0; j < userWeatherPredict.length; j++) {
tempArray.push(userWeatherPredict[j].temp) tempArray.push(userWeatherPredict[j].temp);
let date = new Date(
tempLabelArray.push(userWeatherPredict[j].collected_at.split('T')[1].split('.')[0]) new Date(userWeatherPredict[j].collected_at).getTime()
);
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
} }
setTemp(tempArray) setTemp(tempArray);
setHumi(humiArray) setHumi(humiArray);
setPress(pressArray) setPress(pressArray);
setWindSpd(windspeedArray) setWindSpd(windspeedArray);
setTempNewLabel(tempLabelArray) setTempNewLabel(tempLabelArray);
setNewLabel(labelArray) setNewLabel(labelArray);
}) });
} } else {
else {
axios.get(routesClient.outsideLoc + `3743011`).then((res) => { axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
const outWeather = res.data.contents.weather_out; const outWeather = res.data.contents.weather_out;
const tempArray = [] const tempArray = [];
const humiArray = [] const humiArray = [];
const pressArray = [] const pressArray = [];
const windspeedArray = [] const windspeedArray = [];
const tempLabelArray = [] const tempLabelArray = [];
const labelArray = [] const labelArray = [];
let i = outWeather.length - 9; for (let i = 0; i < outWeather.length; i++) {
for (i; i < outWeather.length; i++) { tempArray.push(outWeather[i].temp);
tempArray.push(outWeather[i].temp) humiArray.push(outWeather[i].humi);
humiArray.push(outWeather[i].humi) pressArray.push(outWeather[i].press);
pressArray.push(outWeather[i].press) windspeedArray.push(outWeather[i].wind_speed);
windspeedArray.push(outWeather[i].wind_speed)
tempLabelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]); let date = new Date(new Date(outWeather[i].collected_at).getTime());
labelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
} }
setTemp(tempArray) setTemp(tempArray);
setHumi(humiArray) setHumi(humiArray);
setPress(pressArray) setPress(pressArray);
setWindSpd(windspeedArray) setWindSpd(windspeedArray);
setTempNewLabel(tempLabelArray); setTempNewLabel(tempLabelArray);
setNewLabel(labelArray); setNewLabel(labelArray);
...@@ -107,16 +112,12 @@ function ChartTabs() { ...@@ -107,16 +112,12 @@ function ChartTabs() {
}, []); }, []);
//3743011 default //3743011 default
const [key, setKey] = useState("temp");
const [key, setKey] = useState('temp');
return ( return (
<Row className='text-center w-100 my-2'> <Row className="text-center w-100 my-2">
<Card style={cardstyled}> <Card style={cardstyled}>
<Tabs <Tabs activeKey={key} onSelect={(k) => setKey(k)} className="mb-3">
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3" >
<Tab eventKey="temp" title="온도"> <Tab eventKey="temp" title="온도">
<ChartTemp temp={temp} newLabel={tempNewLabel} /> <ChartTemp temp={temp} newLabel={tempNewLabel} />
</Tab> </Tab>
...@@ -132,7 +133,7 @@ function ChartTabs() { ...@@ -132,7 +133,7 @@ function ChartTabs() {
</Tabs> </Tabs>
</Card> </Card>
</Row> </Row>
) );
} }
export default ChartTabs; export default ChartTabs;
...@@ -141,9 +141,7 @@ export const getUserWeatherData = async (req, res) => { ...@@ -141,9 +141,7 @@ export const getUserWeatherData = async (req, res) => {
temp_weather.map((data) => { temp_weather.map((data) => {
weather.push({ weather.push({
loc_code: data["loc_code"], loc_code: data["loc_code"],
collected_at: new Date( collected_at: new Date(new Date(data["collected_at"]).getTime()),
new Date(data["collected_at"]).getTime() + 9 * 60 * 60 * 1000
),
temp: data["temp"], temp: data["temp"],
humi: data["humi"], humi: data["humi"],
press: data["press"], press: data["press"],
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment