|
|
|
@ -15,7 +15,7 @@ import {
|
|
|
|
|
import { Search } from 'react-feather'; |
|
|
|
|
import { FcAlarmClock, FcWorkflow, FcBarChart } from 'react-icons/fc'; |
|
|
|
|
import { Bar, Doughnut } from 'react-chartjs-2'; |
|
|
|
|
import { useState } from 'react'; |
|
|
|
|
import { useCallback, useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
export default function FlightContainer({ |
|
|
|
|
tooltipShadow, |
|
|
|
@ -23,22 +23,37 @@ export default function FlightContainer({
|
|
|
|
|
labelColor |
|
|
|
|
}) { |
|
|
|
|
const [searchType, setSearchType] = useState({ |
|
|
|
|
type: 'year', |
|
|
|
|
flightType: 'time', |
|
|
|
|
dateType: 'year', |
|
|
|
|
year: new Date().getFullYear(), |
|
|
|
|
month: new Date().getMonth() + 1, |
|
|
|
|
day: new Date().getDate() |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
console.log(searchType); |
|
|
|
|
const [dateLists, setDateLists] = useState({ |
|
|
|
|
month: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], |
|
|
|
|
day: [] |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const titleName = '비행 통계'; |
|
|
|
|
|
|
|
|
|
const handleChangeSearchType = (type, val) => { |
|
|
|
|
useEffect(() => { |
|
|
|
|
const { year, month } = searchType; |
|
|
|
|
const lastDay = new Date(year, month, 0).getDate(); |
|
|
|
|
const dayList = Array.from({ length: lastDay }, (_, index) => index + 1); |
|
|
|
|
|
|
|
|
|
setDateLists({ ...dateLists, day: dayList }); |
|
|
|
|
}, [searchType.month]); |
|
|
|
|
|
|
|
|
|
// 검색조건 handler
|
|
|
|
|
const handleChangeSearchType = useCallback( |
|
|
|
|
(type, val) => { |
|
|
|
|
setSearchType({ |
|
|
|
|
...searchType, |
|
|
|
|
[type]: type === 'type' ? val : Number(val) |
|
|
|
|
[type]: type === 'dateType' || type === 'flightType' ? val : Number(val) |
|
|
|
|
}); |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
[searchType] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
const options = { |
|
|
|
|
elements: { |
|
|
|
@ -308,10 +323,16 @@ export default function FlightContainer({
|
|
|
|
|
type='select' |
|
|
|
|
id='' |
|
|
|
|
bsSize='sm' |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType( |
|
|
|
|
'flightType', |
|
|
|
|
e.target.value |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option>비행시간</option> |
|
|
|
|
<option>비행거리</option> |
|
|
|
|
<option>비행횟수</option> |
|
|
|
|
<option value={'time'}>비행시간</option> |
|
|
|
|
<option value={'distance'}>비행거리</option> |
|
|
|
|
<option value={'count'}>비행횟수</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</Col> |
|
|
|
|
</Row> |
|
|
|
@ -342,7 +363,7 @@ export default function FlightContainer({
|
|
|
|
|
bsSize='sm' |
|
|
|
|
value={searchType.type} |
|
|
|
|
onChange={e => |
|
|
|
|
handleChangeSearchType('type', e.target.value) |
|
|
|
|
handleChangeSearchType('dateType', e.target.value) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option value='year'>년</option> |
|
|
|
@ -352,9 +373,9 @@ export default function FlightContainer({
|
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
{searchType.type === 'month' || |
|
|
|
|
searchType.type === 'day' || |
|
|
|
|
searchType.type === 'time' ? ( |
|
|
|
|
{searchType.dateType === 'month' || |
|
|
|
|
searchType.dateType === 'day' || |
|
|
|
|
searchType.dateType === 'time' ? ( |
|
|
|
|
<> |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput |
|
|
|
@ -370,8 +391,8 @@ export default function FlightContainer({
|
|
|
|
|
<option>2023</option> |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
{searchType.type === 'day' || |
|
|
|
|
searchType.type === 'time' ? ( |
|
|
|
|
{searchType.dateType === 'day' || |
|
|
|
|
searchType.dateType === 'time' ? ( |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
@ -386,13 +407,15 @@ export default function FlightContainer({
|
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option value={1}>1</option> |
|
|
|
|
<option value={2}>2</option> |
|
|
|
|
<option value={11}>11</option> |
|
|
|
|
{dateLists.month.map(i => ( |
|
|
|
|
<option value={i} key={i}> |
|
|
|
|
{i} |
|
|
|
|
</option> |
|
|
|
|
))} |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|
{searchType.type === 'time' ? ( |
|
|
|
|
{searchType.dateType === 'time' ? ( |
|
|
|
|
<div className='select-date'> |
|
|
|
|
<CustomInput |
|
|
|
|
inline |
|
|
|
@ -404,9 +427,11 @@ export default function FlightContainer({
|
|
|
|
|
handleChangeSearchType('day', e.target.value) |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
<option value={1}>1</option> |
|
|
|
|
<option value={2}>2</option> |
|
|
|
|
<option value={7}>7</option> |
|
|
|
|
{dateLists.day.map(i => ( |
|
|
|
|
<option value={i} key={i}> |
|
|
|
|
{i} |
|
|
|
|
</option> |
|
|
|
|
))} |
|
|
|
|
</CustomInput> |
|
|
|
|
</div> |
|
|
|
|
) : null} |
|
|
|
|