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 = {
margin: "auto",
padding: "1em",
display: "flex",
justifyContent: "center",
width: "100%",
borderWidth: "3px",
borderRadius: "20px",
borderColor: "rgb(110, 189, 142)",
color: "#04AB70",
};
const [temp, setTemp] = useState([]);
const [press, setPress] = useState([]);
const [humi, setHumi] = useState([]);
const [windSpd, setWindSpd] = useState([]);
const [newLabel, setNewLabel] = useState([]);
const [tempNewLabel, setTempNewLabel] = useState([]);
useEffect(() => {
if (isLogined()) {
axios
.get(routesClient.userWeather, { withCredentials: true })
.then((res) => {
console.log(res.data.contents.weather_in);
const userWeather = res.data.contents.weather_in;
const userWeatherPredict = res.data.contents.weather_predict;
const tempArray = [];
const humiArray = [];
const pressArray = [];
const windspeedArray = [];
const tempLabelArray = [];
const labelArray = [];
for (let i = 0; i < userWeather.length; i++) {
tempArray.push(userWeather[i].temp);
humiArray.push(userWeather[i].humi);
pressArray.push(userWeather[i].press);
windspeedArray.push(userWeather[i].wind_speed);
let date = new Date(
new Date(userWeather[i].collected_at).getTime()
);
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
}
for (let j = 0; j < userWeatherPredict.length; j++) {
tempArray.push(userWeatherPredict[j].temp);
let date = new Date(
new Date(userWeatherPredict[j].collected_at).getTime()
);
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
}
setTemp(tempArray);
setHumi(humiArray);
setPress(pressArray);
setWindSpd(windspeedArray);
setTempNewLabel(tempLabelArray);
setNewLabel(labelArray);
});
} else {
axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
const outWeather = res.data.contents.weather_out;
const tempArray = [];
const humiArray = [];
const pressArray = [];
const windspeedArray = [];
const tempLabelArray = [];
const labelArray = [];
for (let i = 0; i < outWeather.length; i++) {
tempArray.push(outWeather[i].temp);
humiArray.push(outWeather[i].humi);
pressArray.push(outWeather[i].press);
windspeedArray.push(outWeather[i].wind_speed);
let date = new Date(new Date(outWeather[i].collected_at).getTime());
tempLabelArray.push(`${date.getHours()}:${date.getMinutes()}`);
labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
}
const cardstyled = { setTemp(tempArray);
margin: 'auto', setHumi(humiArray);
padding: '1em', setPress(pressArray);
display: 'flex', setWindSpd(windspeedArray);
justifyContent: 'center',
width: '100%',
borderWidth: '3px',
borderRadius: '20px',
borderColor: 'rgb(110, 189, 142)',
color: '#04AB70'
}
const [temp, setTemp] = useState([]); setTempNewLabel(tempLabelArray);
const [press, setPress] = useState([]); setNewLabel(labelArray);
const [humi, setHumi] = useState([]) });
const [windSpd, setWindSpd] = useState([]) }
}, []);
const [newLabel, setNewLabel] = useState([]); //3743011 default
const [tempNewLabel, setTempNewLabel] = useState([]);
const [key, setKey] = useState("temp");
useEffect(() => {
if (isLogined()) { return (
axios.get(routesClient.userWeather, { withCredentials: true }) <Row className="text-center w-100 my-2">
.then((res) => { <Card style={cardstyled}>
console.log(res.data.contents.weather_in) <Tabs activeKey={key} onSelect={(k) => setKey(k)} className="mb-3">
const userWeather = res.data.contents.weather_in <Tab eventKey="temp" title="온도">
const userWeatherPredict = res.data.contents.weather_predict <ChartTemp temp={temp} newLabel={tempNewLabel} />
</Tab>
const tempArray = [] <Tab eventKey="humidity" title="습도">
const humiArray = [] <ChartHumidity humi={humi} newLabel={newLabel} />
const pressArray = [] </Tab>
const windspeedArray = [] <Tab eventKey="windspeed" title="풍속">
<ChartWindSpeed windSpd={windSpd} newLabel={newLabel} />
const tempLabelArray = [] </Tab>
const labelArray = [] <Tab eventKey="pressure" title="기압">
<ChartPressure press={press} newLabel={newLabel} />
for (let i = 3; i < 9; i++) { </Tab>
tempArray.push(userWeather[i].temp) </Tabs>
humiArray.push(userWeather[i].humi) </Card>
pressArray.push(userWeather[i].press) </Row>
windspeedArray.push(userWeather[i].wind_speed) );
tempLabelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
labelArray.push(userWeather[i].collected_at.split('T')[1].split('.')[0])
}
for (let j = 0; j < 3; j++) {
tempArray.push(userWeatherPredict[j].temp)
tempLabelArray.push(userWeatherPredict[j].collected_at.split('T')[1].split('.')[0])
}
setTemp(tempArray)
setHumi(humiArray)
setPress(pressArray)
setWindSpd(windspeedArray)
setTempNewLabel(tempLabelArray)
setNewLabel(labelArray)
})
}
else {
axios.get(routesClient.outsideLoc + `3743011`).then((res) => {
const outWeather = res.data.contents.weather_out;
const tempArray = []
const humiArray = []
const pressArray = []
const windspeedArray = []
const tempLabelArray = []
const labelArray = []
let i = outWeather.length - 9;
for (i; i < outWeather.length; i++) {
tempArray.push(outWeather[i].temp)
humiArray.push(outWeather[i].humi)
pressArray.push(outWeather[i].press)
windspeedArray.push(outWeather[i].wind_speed)
tempLabelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
labelArray.push(outWeather[i].collected_at.split("T")[1].split(".")[0]);
}
setTemp(tempArray)
setHumi(humiArray)
setPress(pressArray)
setWindSpd(windspeedArray)
setTempNewLabel(tempLabelArray);
setNewLabel(labelArray);
});
}
}, []);
//3743011 default
const [key, setKey] = useState('temp');
return (
<Row className='text-center w-100 my-2'>
<Card style={cardstyled}>
<Tabs
activeKey={key}
onSelect={(k) => setKey(k)}
className="mb-3" >
<Tab eventKey="temp" title="온도">
<ChartTemp temp={temp} newLabel={tempNewLabel} />
</Tab>
<Tab eventKey="humidity" title="습도">
<ChartHumidity humi={humi} newLabel={newLabel} />
</Tab>
<Tab eventKey="windspeed" title="풍속">
<ChartWindSpeed windSpd={windSpd} newLabel={newLabel} />
</Tab>
<Tab eventKey="pressure" title="기압">
<ChartPressure press={press} newLabel={newLabel} />
</Tab>
</Tabs>
</Card>
</Row>
)
} }
export default ChartTabs; export default ChartTabs;
\ No newline at end of file
...@@ -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