junh_eee(이준희) 9 months ago
parent
commit
1a3f559af5
  1. 5
      src/components/account/mypage/AccountMypageForm.js
  2. 15
      src/components/account/mypage/AccountMypagePwForm.js
  3. 6
      src/components/laanc/map/FlightArea.js
  4. 15
      src/components/statistics/StatisticsSearch.js
  5. 2
      src/components/statistics/StatisticsTotal.js
  6. 31
      src/containers/account/mypage/AccountMypageContainer.js
  7. 11
      src/containers/statistics/AbnormalSituationContainer.js
  8. 12
      src/containers/statistics/FlightContainer.js
  9. 10
      src/containers/statistics/FlightResultContainer.js

5
src/components/account/mypage/AccountMypageForm.js

@ -43,9 +43,10 @@ const AccountMypageForm = ({
}) => { }) => {
const history = useHistory(); const history = useHistory();
function handleUseHitory() { // 취소 헨들러
const handleUseHitory = () => {
history.push('/'); history.push('/');
} };
return ( return (
<Row className='app-user-edit'> <Row className='app-user-edit'>

15
src/components/account/mypage/AccountMypagePwForm.js

@ -76,11 +76,13 @@ const AccountMypagePwForm = ({ activeTab }) => {
}); });
}; };
function handleUseHitory() { // 취소 헨들러
const handleUseHitory = () => {
history.push('/'); history.push('/');
} };
function pwSubmit() { // 비밀번호 변경
const pwSubmit = () => {
const reg_pw = const reg_pw =
/^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/; /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[@$!%*#?&])[A-Za-z0-9@$!%*#?&]{8,20}$/;
if (!reg_pw.test(inputs.newPswd && inputs.newPswdConfirm)) { if (!reg_pw.test(inputs.newPswd && inputs.newPswdConfirm)) {
@ -98,11 +100,12 @@ const AccountMypagePwForm = ({ activeTab }) => {
} else { } else {
dispatch(pwUpdateAction.request(inputs)); dispatch(pwUpdateAction.request(inputs));
} }
} };
function pwok() { // 비밀번호 확인
const pwok = () => {
dispatch(pwCheckAction.request(userPswd)); dispatch(pwCheckAction.request(userPswd));
} };
return ( return (
<Card> <Card>

6
src/components/laanc/map/FlightArea.js

@ -538,7 +538,7 @@ export default function FlightArea({
handlerDrawType('LINE'); handlerDrawType('LINE');
}} }}
> >
WayPoint
</Button> </Button>
<Button <Button
color='primary' color='primary'
@ -547,7 +547,7 @@ export default function FlightArea({
handlerDrawType('CIRCLE'); handlerDrawType('CIRCLE');
}} }}
> >
Circle
</Button> </Button>
<Button <Button
color='primary' color='primary'
@ -558,7 +558,7 @@ export default function FlightArea({
handlerDrawType('POLYGON'); handlerDrawType('POLYGON');
}} }}
> >
Polygon 다각형
</Button> </Button>
<Button <Button
color='primary' color='primary'

15
src/components/statistics/StatisticsSearch.js

@ -11,6 +11,7 @@ import { Search } from 'react-feather';
import { Bar, Doughnut } from 'react-chartjs-2'; import { Bar, Doughnut } from 'react-chartjs-2';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
// 그룹명 리스트
const competentAgency = [ const competentAgency = [
{ {
text: '서울지방항공청(항공운항과)', text: '서울지방항공청(항공운항과)',
@ -69,13 +70,17 @@ export default function StatisticsSearch({
user user
// entireGroupList // entireGroupList
}) { }) {
// 전체 데이터
const [total, setTotal] = useState([]); const [total, setTotal] = useState([]);
// TOP5 데이터
const [top, setTop] = useState([]); const [top, setTop] = useState([]);
// 검색조건 변경시 데이터 초기화
useEffect(() => { useEffect(() => {
chartInit(); chartInit();
}, [searchData]); }, [searchData]);
// 초를 시간으로 변환
const parseTimeToSeconds = timeArr => { const parseTimeToSeconds = timeArr => {
return timeArr.map(time => { return timeArr.map(time => {
const [hours, minutes, seconds] = String(time).split(':').map(Number); const [hours, minutes, seconds] = String(time).split(':').map(Number);
@ -83,14 +88,19 @@ export default function StatisticsSearch({
}); });
}; };
// 데이터 초기화
const chartInit = () => { const chartInit = () => {
// 검색조건이 변경되면 데이터 초기화
const { topData, graphData } = searchData; const { topData, graphData } = searchData;
// 데이터가 없는 경우 'NoData'로 표시되기 때문에 필터링
const filteredData = data => data.filter(i => i && i !== 'NoData'); const filteredData = data => data.filter(i => i && i !== 'NoData');
// 데이터 변환
const graph = filteredData(graphData.map(i => i.value)); const graph = filteredData(graphData.map(i => i.value));
// TOP5 데이터 변환
const top = filteredData(topData.map(i => i.value)); const top = filteredData(topData.map(i => i.value));
// 시간 데이터인 경우 초 단위로 변경
if (searchType.category === 'TIME') { if (searchType.category === 'TIME') {
// ['00:00:00', '12:34:56'] -> [0,45296] 초 단위로 변경 // ['00:00:00', '12:34:56'] -> [0,45296] 초 단위로 변경
const totalValue = parseTimeToSeconds(graph); const totalValue = parseTimeToSeconds(graph);
@ -111,6 +121,7 @@ export default function StatisticsSearch({
} }
}; };
// bar 그래프 옵션
const barOptions = { const barOptions = {
elements: { elements: {
rectangle: { rectangle: {
@ -204,6 +215,7 @@ export default function StatisticsSearch({
] ]
}; };
// 도넛 그래프 옵션
const doughnutOptions = { const doughnutOptions = {
responsive: true, responsive: true,
maintainAspectRatio: true, maintainAspectRatio: true,
@ -275,6 +287,7 @@ export default function StatisticsSearch({
] ]
}; };
// 그래프에 데이터가 없을 경우 표시할 텍스트
const plugins = chartData => { const plugins = chartData => {
return [ return [
{ {

2
src/components/statistics/StatisticsTotal.js

@ -10,12 +10,14 @@ export default function StatisticsTotal({
formatNumber, formatNumber,
formatDistance formatDistance
}) { }) {
// 비행 통계 아이콘 3개 (알람, 워크플로우, 바차트)
const renderIcon = idx => { const renderIcon = idx => {
if (idx === 0) return <FcAlarmClock />; if (idx === 0) return <FcAlarmClock />;
if (idx === 1) return <FcWorkflow />; if (idx === 1) return <FcWorkflow />;
return <FcBarChart />; return <FcBarChart />;
}; };
// 비행 통계 데이터 건수
const renderData = (data, titleName, idx) => { const renderData = (data, titleName, idx) => {
if (titleName) { if (titleName) {
if (idx === 0) return formatTimeString(data); if (idx === 0) return formatTimeString(data);

31
src/containers/account/mypage/AccountMypageContainer.js

@ -30,32 +30,48 @@ import { ConfirmModal } from '../../../components/modal/ConfirmModal';
// ** Function to toggle tabs // ** Function to toggle tabs
const AccountMypageContainer = () => { const AccountMypageContainer = () => {
// tab 관리
const [activeTab, setActiveTab] = useState('1'); const [activeTab, setActiveTab] = useState('1');
const dispatch = useDispatch(); const dispatch = useDispatch();
// { id } = useParams(); // { id } = useParams();
// tab 관리
const toggle = tab => { const toggle = tab => {
return setActiveTab(tab); return setActiveTab(tab);
}; };
// 모달 관리
const [formModal, setFormModal] = useState(false); const [formModal, setFormModal] = useState(false);
// 회원 정보 조회
const { userPage } = useSelector(state => state.UserPageState); const { userPage } = useSelector(state => state.UserPageState);
// 로그인 정보 조회
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
// 회원 정보
const [userInfo, setUserInfo] = useState(); const [userInfo, setUserInfo] = useState();
// 휴대폰 번호 변경
const [inputHpno, setInputHpno] = useState(''); const [inputHpno, setInputHpno] = useState('');
// 인증번호
const [inputCrtfy, setInputCrtfy] = useState(''); const [inputCrtfy, setInputCrtfy] = useState('');
// 타이머 분
const [minutes_Counter, setMinutes_Counter] = useState('03'); const [minutes_Counter, setMinutes_Counter] = useState('03');
// 타이머 초
const [seconds_Counter, setSeconds_Counter] = useState('00'); const [seconds_Counter, setSeconds_Counter] = useState('00');
// 타이머
const [timer, setTimer] = useState(null); const [timer, setTimer] = useState(null);
// 타이머 실행 여부
const [isRunning, setIsRunning] = useState(false); const [isRunning, setIsRunning] = useState(false);
// 인증번호 발송 횟수
const [sendCount, setSendCount] = useState(0); const [sendCount, setSendCount] = useState(0);
// 인증번호 발송 여부
const [isCrtfy, setIsCrtfy] = useState(false); const [isCrtfy, setIsCrtfy] = useState(false);
// 전화번호 변경 여부
const [okinput, setOkinput] = useState(false); const [okinput, setOkinput] = useState(false);
// 전화번호 업데이트 여부
const [okcheck, setOkcheck] = useState(''); const [okcheck, setOkcheck] = useState('');
// 모달 관리
const [modal, setModal] = useState({ const [modal, setModal] = useState({
isOpen: false, isOpen: false,
title: '', title: '',
@ -68,6 +84,7 @@ const AccountMypageContainer = () => {
desc: '', desc: '',
color: '' color: ''
}); });
// 타이머
const timerStart = count => { const timerStart = count => {
let minutes, seconds; let minutes, seconds;
@ -101,6 +118,7 @@ const AccountMypageContainer = () => {
clearInterval(timer); clearInterval(timer);
}; };
}; };
//
useEffect(() => { useEffect(() => {
if (userInfo) { if (userInfo) {
setOkcheck(!okinput ? userInfo.hpno : inputHpno); setOkcheck(!okinput ? userInfo.hpno : inputHpno);
@ -179,6 +197,7 @@ const AccountMypageContainer = () => {
// handlerSmsSend(); // handlerSmsSend();
}; };
// 타이머 언마운트시 종료
useEffect(() => { useEffect(() => {
// setIsRunning(true); // setIsRunning(true);
if (isRunning) { if (isRunning) {
@ -243,10 +262,12 @@ const AccountMypageContainer = () => {
setIsCrtfy(true); setIsCrtfy(true);
}; };
// userInfo에 회원 정보 값 넣기
useEffect(() => { useEffect(() => {
if (userPage) setUserInfo(userPage[0]); if (userPage) setUserInfo(userPage[0]);
}, [userPage]); }, [userPage]);
// input 헨들러
const handlerInput = e => { const handlerInput = e => {
const { name, value } = e.target; const { name, value } = e.target;
setUserInfo({ setUserInfo({
@ -254,19 +275,22 @@ const AccountMypageContainer = () => {
[name]: value [name]: value
}); });
}; };
// 회원 정보 조회
useEffect(() => { useEffect(() => {
if (user) { if (user) {
dispatch(userPageAction.request(user.cstmrSno)); dispatch(userPageAction.request(user.cstmrSno));
} }
}, []); }, []);
// 휴대폰 번호 변경 모달 헨들러
const handler = () => { const handler = () => {
setFormModal(!formModal); setFormModal(!formModal);
}; };
let hpno = ''; let hpno = '';
let crtfyhp = ''; let crtfyhp = '';
// 휴대폰 번호 변경 input 헨들러
const handlerChange = e => { const handlerChange = e => {
const { name, value } = e.target; const { name, value } = e.target;
@ -284,6 +308,7 @@ const AccountMypageContainer = () => {
} }
} }
}; };
//업데이트 //업데이트
const handlerUpdate = () => { const handlerUpdate = () => {
const reg_email = const reg_email =
@ -306,6 +331,7 @@ const AccountMypageContainer = () => {
} }
}; };
// 탈퇴 모달
const handlerTest = () => { const handlerTest = () => {
setQuite({ setQuite({
isOpen: true, isOpen: true,
@ -314,6 +340,7 @@ const AccountMypageContainer = () => {
}); });
}; };
// 탈퇴
const waitwait = () => { const waitwait = () => {
dispatch(userDeleteAction.request(user.cstmrSno)); dispatch(userDeleteAction.request(user.cstmrSno));
}; };

11
src/containers/statistics/AbnormalSituationContainer.js

@ -9,12 +9,14 @@ import StatisticsTotal from '../../components/statistics/StatisticsTotal';
export default function AbnormalSituationContainer() { export default function AbnormalSituationContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
// 비정상상황 통계 (비행경로이탈, 비정상고도, 충돌위험), 비정상상황 통계 카테고리별 검색
const { abnormal, abnormalSearch } = useSelector( const { abnormal, abnormalSearch } = useSelector(
state => state.statisticsState state => state.statisticsState
); );
// 회원 정보 조회
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
// const { entireGroupList } = useSelector(state => state.groupState);
// 검색 타입
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'PLAN', category: 'PLAN',
dateType: 'year', dateType: 'year',
@ -23,13 +25,18 @@ export default function AbnormalSituationContainer() {
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
}); });
// 해당 월에 맞는 요일
const [dateLists, setDateLists] = useState({ const [dateLists, setDateLists] = useState({
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
day: [] day: []
}); });
// 타이틀
const titleName = '비정상상황 통계'; const titleName = '비정상상황 통계';
// 전체 타이틀
const totalTitle = ['비행경로이탈', '비정상고도', '충돌위험']; const totalTitle = ['비행경로이탈', '비정상고도', '충돌위험'];
// 카테고리 타입
const categoryTypeOptions = { const categoryTypeOptions = {
PLAN: '비행경로이탈', PLAN: '비행경로이탈',
ALTITUDE: '비정상고도', ALTITUDE: '비정상고도',
@ -101,11 +108,13 @@ export default function AbnormalSituationContainer() {
return { max, stepSize }; return { max, stepSize };
}; };
// 최대값 계산
const calculateMax = data => { const calculateMax = data => {
const max = Math.max(...data); const max = Math.max(...data);
return Math.ceil(max / 5) * 5; return Math.ceil(max / 5) * 5;
}; };
// 막대 그래프의 y축 간격(step size)를 계산
const handlerStepSize = max => { const handlerStepSize = max => {
const step = Math.ceil(max / 5); const step = Math.ceil(max / 5);

12
src/containers/statistics/FlightContainer.js

@ -9,10 +9,13 @@ import StatisticsSearch from '../../components/statistics/StatisticsSearch';
export default function FlightContainer() { export default function FlightContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
// 비행 통계 (비행시간, 비행거리, 비행횟수), 비행 통계 카테고리별 검색
const { flight, flightSearch } = useSelector(state => state.statisticsState); const { flight, flightSearch } = useSelector(state => state.statisticsState);
// 회원 정보 조회
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
// const { entireGroupList } = useSelector(state => state.groupState); // const { entireGroupList } = useSelector(state => state.groupState);
// 검색 타입
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'TIME', category: 'TIME',
dateType: 'year', dateType: 'year',
@ -21,13 +24,17 @@ export default function FlightContainer() {
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
}); });
// 해당 월에 맞는 요일
const [dateLists, setDateLists] = useState({ const [dateLists, setDateLists] = useState({
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
day: [] day: []
}); });
// 타이틀
const titleName = '비행 통계'; const titleName = '비행 통계';
// 전체 타이틀
const totalTitle = ['총 비행시간', '총 비행거리', '총 비행횟수']; const totalTitle = ['총 비행시간', '총 비행거리', '총 비행횟수'];
// 카테고리 타입
const categoryTypeOptions = { const categoryTypeOptions = {
TIME: '비행 시간', TIME: '비행 시간',
DISTANCE: '비행 거리', DISTANCE: '비행 거리',
@ -99,11 +106,12 @@ export default function FlightContainer() {
return { max, stepSize }; return { max, stepSize };
}; };
// 최대값 계산
const calculateMax = data => { const calculateMax = data => {
const max = Math.max(...data); const max = Math.max(...data);
return Math.ceil(max / 5) * 5; return Math.ceil(max / 5) * 5;
}; };
// 막대 그래프의 y축 간격(step size)를 계산
const handlerStepSize = max => { const handlerStepSize = max => {
const step = Math.ceil(max / 5); const step = Math.ceil(max / 5);
@ -148,6 +156,7 @@ export default function FlightContainer() {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}; };
// 함수 단위 포멧팅
const formatPart = (value, unit, isLastIndex) => { const formatPart = (value, unit, isLastIndex) => {
return value > 0 || isLastIndex ? `${value}${unit}` : ''; return value > 0 || isLastIndex ? `${value}${unit}` : '';
}; };
@ -182,6 +191,7 @@ export default function FlightContainer() {
return parts.join(' '); return parts.join(' ');
}; };
// 975 -> { days: 0, hours: 0, minutes: 16, seconds: 15 }
const secondsToDHMS = time => { const secondsToDHMS = time => {
const days = Math.floor(time / (24 * 3600)); const days = Math.floor(time / (24 * 3600));
const hours = Math.floor((time % (24 * 3600)) / 3600); const hours = Math.floor((time % (24 * 3600)) / 3600);

10
src/containers/statistics/FlightResultContainer.js

@ -9,10 +9,13 @@ import StatisticsSearch from '../../components/statistics/StatisticsSearch';
export default function ResultContainer() { export default function ResultContainer() {
const dispatch = useDispatch(); const dispatch = useDispatch();
// 비행 실적 통계 (비행실적, 비행계획, 비행승인), 비행 실적 통계 카테고리별 검색
const { result, resultSearch } = useSelector(state => state.statisticsState); const { result, resultSearch } = useSelector(state => state.statisticsState);
// 회원 정보 조회
const { user } = useSelector(state => state.authState); const { user } = useSelector(state => state.authState);
// const { entireGroupList } = useSelector(state => state.groupState); // const { entireGroupList } = useSelector(state => state.groupState);
// 검색 타입
const [searchType, setSearchType] = useState({ const [searchType, setSearchType] = useState({
category: 'FLT_RESULT', category: 'FLT_RESULT',
dateType: 'year', dateType: 'year',
@ -21,13 +24,16 @@ export default function ResultContainer() {
month: new Date().getMonth() + 1, month: new Date().getMonth() + 1,
day: new Date().getDate() day: new Date().getDate()
}); });
// 해당 월에 맞는 요일
const [dateLists, setDateLists] = useState({ const [dateLists, setDateLists] = useState({
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
day: [] day: []
}); });
// 타이틀
const titleName = '비행 실적 통계'; const titleName = '비행 실적 통계';
// 전체 타이틀
const totalTitle = ['비행 실적', '비행 계획', '비행 승인']; const totalTitle = ['비행 실적', '비행 계획', '비행 승인'];
// 카테고리 타입
const categoryTypeOptions = { const categoryTypeOptions = {
FLT_RESULT: '비행 실적', FLT_RESULT: '비행 실적',
FLT_PLAN: '비행 계획', FLT_PLAN: '비행 계획',
@ -99,11 +105,13 @@ export default function ResultContainer() {
return { max, stepSize }; return { max, stepSize };
}; };
// 최대값 계산
const calculateMax = data => { const calculateMax = data => {
const max = Math.max(...data); const max = Math.max(...data);
return Math.ceil(max / 5) * 5; return Math.ceil(max / 5) * 5;
}; };
// 막대 그래프의 y축 간격(step size)를 계산
const handlerStepSize = max => { const handlerStepSize = max => {
const step = Math.ceil(max / 5); const step = Math.ceil(max / 5);

Loading…
Cancel
Save