Commit bcab544f authored by KangMin An's avatar KangMin An
Browse files

Update : Chart 시간 표시 수정. 예측 온도 전달.

parent ea3ce4bf
...@@ -56,14 +56,13 @@ function ChartTabs() { ...@@ -56,14 +56,13 @@ function ChartTabs() {
let date = new Date( let date = new Date(
new Date(userWeather[i].collected_at).getTime() new Date(userWeather[i].collected_at).getTime()
); );
let hour = date.getHours();
let minute = date.getMinutes();
let f_date = `${hour < 10 ? `0${hour}` : hour}:${
minute < 10 ? `0${minute}` : minute
}`;
tempLabelArray.push( tempLabelArray.push(f_date);
`${date.getHours()}:${
date.getMinutes() < 10
? `0${date.getMinutes()}`
: date.getMinutes()
}`
);
labelArray.push(`${date.getHours()}:${date.getMinutes()}`); labelArray.push(`${date.getHours()}:${date.getMinutes()}`);
} }
for (let j = 0; j < userWeatherPredict.length; j++) { for (let j = 0; j < userWeatherPredict.length; j++) {
...@@ -71,15 +70,18 @@ function ChartTabs() { ...@@ -71,15 +70,18 @@ function ChartTabs() {
let date = new Date( let date = new Date(
new Date(userWeatherPredict[j].collected_at).getTime() new Date(userWeatherPredict[j].collected_at).getTime()
); );
tempLabelArray.push( let hour = date.getHours();
`${date.getHours()}:${ let minute = date.getMinutes();
date.getMinutes() < 10 let f_date = `${hour < 10 ? `0${hour}` : hour}:${
? `0${date.getMinutes()}` minute < 10 ? `0${minute}` : minute
: date.getMinutes() }`;
}` tempLabelArray.push(f_date);
);
} }
console.log(tempLabelArray);
console.log(userWeather);
console.log(userWeatherPredict);
setTemp(tempArray); setTemp(tempArray);
setHumi(humiArray); setHumi(humiArray);
setPress(pressArray); setPress(pressArray);
...@@ -107,23 +109,18 @@ function ChartTabs() { ...@@ -107,23 +109,18 @@ function ChartTabs() {
windspeedArray.push(outWeather[i].wind_speed); windspeedArray.push(outWeather[i].wind_speed);
let date = new Date(new Date(outWeather[i].collected_at).getTime()); let date = new Date(new Date(outWeather[i].collected_at).getTime());
let hour = date.getHours();
tempLabelArray.push( let minute = date.getMinutes();
`${date.getHours()}:${ let f_date = `${hour < 10 ? `0${hour}` : hour}:${
date.getMinutes() < 10 minute < 10 ? `0${minute}` : minute
? `0${date.getMinutes()}` }`;
: date.getMinutes()
}` tempLabelArray.push(f_date);
); labelArray.push(f_date);
labelArray.push(
`${date.getHours()}:${
date.getMinutes() < 10
? `0${date.getMinutes()}`
: date.getMinutes()
}`
);
} }
console.log(tempLabelArray);
setTemp(tempArray); setTemp(tempArray);
setHumi(humiArray); setHumi(humiArray);
setPress(pressArray); setPress(pressArray);
......
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from "react";
import '../App.css' import "../App.css";
import { Form, Button, Row, Col, Card } from 'react-bootstrap'; import { Form, Button, Row, Col, Card } from "react-bootstrap";
import axios from 'axios'; import axios from "axios";
import Swal from 'sweetalert2' import Swal from "sweetalert2";
import { callUserInfo } from '../utils/CheckDB'; import { callUserInfo } from "../utils/CheckDB";
import { routesClient } from '../routesClient'; import { routesClient } from "../routesClient";
function LocCodeChange() { function LocCodeChange() {
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 inboxstyled = { const inboxstyled = {
display: 'flex', display: "flex",
flexDirection: 'column', flexDirection: "column",
maxWidth: '90%', maxWidth: "90%",
justifyContent: 'center', justifyContent: "center",
margin: 'auto', margin: "auto",
padding: '0.5em', padding: "0.5em",
color: 'black' color: "black",
} };
const btnstyled2 = { const btnstyled2 = {
background: 'white', background: "white",
width: '50%', width: "50%",
borderWidth: '2px', borderWidth: "2px",
color: 'rgb(110, 189, 142)', color: "rgb(110, 189, 142)",
borderColor: 'rgba(195, 195, 195, 0.753)', borderColor: "rgba(195, 195, 195, 0.753)",
} };
const [does, setDoes] = useState([]) // DOE const [does, setDoes] = useState([]); // DOE
const [sggs, setSggs] = useState([]) // SGG const [sggs, setSggs] = useState([]); // SGG
const [emds, setEmds] = useState([]) // EMD const [emds, setEmds] = useState([]); // EMD
const [sggsArray, setSggsArray] = useState([]) // DOE 와 SGG 내의 code_doe 같을 때 => sgg 값 const [sggsArray, setSggsArray] = useState([]); // DOE 와 SGG 내의 code_doe 같을 때 => sgg 값
const [emdsArray, setEmdsArray] = useState([]) // SGG 과 EMD 내의 code_sgg && DOE 와 EMD 내의 code_doe => emd 값 const [emdsArray, setEmdsArray] = useState([]); // SGG 과 EMD 내의 code_sgg && DOE 와 EMD 내의 code_doe => emd 값
const doeSelect = document.getElementById('select-doe') const doeSelect = document.getElementById("select-doe");
const sggSelect = document.getElementById('select-sgg') const sggSelect = document.getElementById("select-sgg");
const emdSelect = document.getElementById('select-emd') const emdSelect = document.getElementById("select-emd");
// Local code 받아오기 // Local code 받아오기
useEffect(() => { useEffect(() => {
async function getLocCode() { async function getLocCode() {
const res = await axios.get(routesClient.localdata) const res = await axios.get(routesClient.localdata);
const local_codes = res.data.contents.loc_code const local_codes = res.data.contents.loc_code;
setDoes(local_codes.DOE) setDoes(local_codes.DOE);
setSggs(local_codes.SGG) setSggs(local_codes.SGG);
setEmds(local_codes.EMD) setEmds(local_codes.EMD);
} }
getLocCode() getLocCode();
}, []) }, []);
function selectLocal() { function selectLocal() {
sggs.map(function (sggvalue) { sggs.map(function (sggvalue) {
if (Number(doeSelect.value) === sggvalue['code_doe']) { if (Number(doeSelect.value) === sggvalue["code_doe"]) {
setSggsArray(sggvalue['sgg']) setSggsArray(sggvalue["sgg"]);
} }
}) });
emds.map(function (emdvalue) { emds.map(function (emdvalue) {
if ((Number(sggSelect.value) === emdvalue['code_sgg']) if (
&& (Number(doeSelect.value) === emdvalue['code_doe'])) { Number(sggSelect.value) === emdvalue["code_sgg"] &&
setEmdsArray(emdvalue['emd']) Number(doeSelect.value) === emdvalue["code_doe"]
) {
setEmdsArray(emdvalue["emd"]);
} }
}) });
} }
async function handleSubmit(event) { async function handleSubmit(event) {
event.preventDefault() event.preventDefault();
if (doeSelect.options[doeSelect.selectedIndex].text !== '' if (
&& sggSelect.options[sggSelect.selectedIndex].text !== '시군구' doeSelect.options[doeSelect.selectedIndex].text !== "" &&
&& emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') { sggSelect.options[sggSelect.selectedIndex].text !== "시군구" &&
emdSelect.options[emdSelect.selectedIndex].text !== "읍면동"
const saveCodeEmd = emdSelect.value ) {
const saveCodeEmd = emdSelect.value;
await axios.post(routesClient.edit, { loc_code: saveCodeEmd }) // loccal code 수정 await axios.post(routesClient.edit, { loc_code: saveCodeEmd }); // loccal code 수정
callUserInfo().then((res) => { callUserInfo().then((res) => {
console.log('loc_code', res[0].loc_code) console.log("loc_code", res[0].loc_code);
if (res[0].loc_code) { if (res[0].loc_code) {
Swal.fire({ Swal.fire({
title: '변경되었습니다.', title: "변경되었습니다.",
text: '축하드립니다!👏', text: "축하드립니다!👏",
icon: 'success', icon: "success",
customClass: 'swal-wide', customClass: "swal-wide",
confirmButtonText: '확인', confirmButtonText: "확인",
}).then((res) => { }).then((res) => {
if (res.isConfirmed) { if (res.isConfirmed) {
window.location.replace('/') window.location.reload();
} else {
window.location.reload();
} }
else { });
window.location.replace('/')
}
})
}
})
} }
else { });
} else {
Swal.fire({ Swal.fire({
title: '실패', title: "실패",
text: '전부 선택해주세요', text: "전부 선택해주세요",
icon: 'error', icon: "error",
customClass: 'swal-wide', customClass: "swal-wide",
confirmButtonText: '확인' confirmButtonText: "확인",
}) });
} }
} }
return ( return (
<Row className='text-center w-100 my-2'> <Row className="text-center w-100 my-2">
<Card style={cardstyled}> <Card style={cardstyled}>
<Card.Title id='impactTitle'> <Card.Title id="impactTitle">지역 코드</Card.Title>
지역 코드 <Card.Subtitle style={{ fontWeight: "lighter" }}>
</Card.Title>
<Card.Subtitle style={{ fontWeight: 'lighter' }}>
본인의 지역을 선택해주세요 본인의 지역을 선택해주세요
</Card.Subtitle> </Card.Subtitle>
<hr /> <hr />
<Card.Text className='m-0'> <Card.Text className="m-0">
<Form style={inboxstyled} onSubmit={handleSubmit}> <Form style={inboxstyled} onSubmit={handleSubmit}>
<Row md={12} xs={12} className='m-auto w-100 d-flex justify-content-center' style={{ padding: '0', display: 'flex', justifyContent: 'center', width: '100%' }}> <Row
<Form.Group className='m-auto w-100' style={btnstyled2} onChange={selectLocal}> md={12}
<Row className='m-auto pb-3'> xs={12}
<Col md={4} xs={4} style={{ padding: '2px' }}> className="m-auto w-100 d-flex justify-content-center"
style={{
<Form.Control as='select' size="sm" id='select-doe' required> padding: "0",
<option selected disabled></option> display: "flex",
{ justifyContent: "center",
does.map((doevalue) => ( width: "100%",
}}
>
<Form.Group
className="m-auto w-100"
style={btnstyled2}
onChange={selectLocal}
>
<Row className="m-auto pb-3">
<Col md={4} xs={4} style={{ padding: "2px" }}>
<Form.Control
as="select"
size="sm"
id="select-doe"
required
>
<option selected disabled>
</option>
{does.map((doevalue) => (
<option value={`${doevalue["code_doe"]}`}> <option value={`${doevalue["code_doe"]}`}>
{`${doevalue["name_doe"]}`} {`${doevalue["name_doe"]}`}
</option> </option>
)) ))}
}
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={4} xs={4} style={{ padding: '2px' }}> <Col md={4} xs={4} style={{ padding: "2px" }}>
<Form.Control as='select' size="sm" id='select-sgg' required> <Form.Control
<option selected disabled>시군구</option> as="select"
{ size="sm"
sggsArray.map((sggvalue) => ( id="select-sgg"
required
>
<option selected disabled>
시군구
</option>
{sggsArray.map((sggvalue) => (
<option value={`${sggvalue["code_sgg"]}`}> <option value={`${sggvalue["code_sgg"]}`}>
{`${sggvalue["name_sgg"]}`} {`${sggvalue["name_sgg"]}`}
</option> </option>
)) ))}
}
</Form.Control> </Form.Control>
</Col> </Col>
<Col md={4} xs={4} style={{ padding: '2px' }}> <Col md={4} xs={4} style={{ padding: "2px" }}>
<Form.Control as='select' size="sm" id='select-emd' required> <Form.Control
<option selected disabled>읍면동</option> as="select"
{ size="sm"
emdsArray.map((emdvalue) => ( id="select-emd"
required
>
<option selected disabled>
읍면동
</option>
{emdsArray.map((emdvalue) => (
<option value={`${emdvalue["code_emd"]}`}> <option value={`${emdvalue["code_emd"]}`}>
{`${emdvalue["name_emd"]}`} {`${emdvalue["name_emd"]}`}
</option> </option>
)) ))}
}
</Form.Control> </Form.Control>
</Col> </Col>
</Row> </Row>
</Form.Group> </Form.Group>
<Button <Button variant="light" style={btnstyled2} type="submit">
variant='light' style={btnstyled2} type='submit'>
확인 확인
</Button> </Button>
</Row> </Row>
...@@ -191,7 +207,7 @@ function LocCodeChange() { ...@@ -191,7 +207,7 @@ function LocCodeChange() {
</Card.Text> </Card.Text>
</Card> </Card>
</Row> </Row>
) );
} }
export default LocCodeChange; export default LocCodeChange;
...@@ -156,13 +156,15 @@ export const getUserWeatherData = async (req, res) => { ...@@ -156,13 +156,15 @@ export const getUserWeatherData = async (req, res) => {
pyprocess.stdout.on("data", (data) => { pyprocess.stdout.on("data", (data) => {
let weather_predict = []; let weather_predict = [];
const str_result = data.toString();
let temp_predict = str_result.trim(); let temp_predict = data.toString();
temp_predict = temp_predict.replace("]]", ""); temp_predict = temp_predict.replace("]]", "");
temp_predict = temp_predict.replace("[[", ""); temp_predict = temp_predict.replace("[[", "");
temp_predict = temp_predict.trim();
temp_predict = temp_predict.split(" "); temp_predict = temp_predict.split(" ");
temp_predict = temp_predict.filter((val) => val.length > 0);
let date_10m = new Date(weather[weather.length - 1]["collected_at"]); let date_10m = new Date(weather[weather.length - 1]["collected_at"]);
date_10m.setMinutes(date_10m.getMinutes() + 10); date_10m.setMinutes(date_10m.getMinutes() + 10);
......
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