kimjh(김장현)
2 years ago
15 changed files with 810 additions and 445 deletions
@ -0,0 +1,203 @@ |
|||||||
|
import { useRef } from 'react'; |
||||||
|
import { GridDatabase } from '@src/components/crud/grid/GridDatatable'; |
||||||
|
import { Row, Col, Card } from 'reactstrap'; |
||||||
|
import FlightScheduleRealTime from './FlightScheduleRealTime'; |
||||||
|
import { useSelector } from 'react-redux'; |
||||||
|
import moment from 'moment'; |
||||||
|
import DataTable from 'react-data-table-component'; |
||||||
|
|
||||||
|
const KR_TIME_DIFF = 9 * 60 * 60 * 1000; |
||||||
|
|
||||||
|
/** |
||||||
|
* 비행 전 : B |
||||||
|
* 비행 중 : F |
||||||
|
* 비행 완료 : S |
||||||
|
*/ |
||||||
|
function FlightScheduleGrid() { |
||||||
|
const timeRef = useRef(null); |
||||||
|
|
||||||
|
const { scheduleList } = useSelector(state => state.flightState); |
||||||
|
// const [list, setList] = useState(
|
||||||
|
// new Array(10).fill({ groupNm: 'test', groupNm: 'test' })
|
||||||
|
// );
|
||||||
|
|
||||||
|
const fillZero = (width, str) => { |
||||||
|
return str.length >= width |
||||||
|
? str |
||||||
|
: new Array(width - str.length + 1).join('0') + str; //남는 길이만큼 0으로 채움
|
||||||
|
}; |
||||||
|
|
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
name: '그룹 명', |
||||||
|
selector: 'groupNm', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.groupNm; |
||||||
|
} |
||||||
|
// conditionalCellStyles: [
|
||||||
|
// {
|
||||||
|
// when: row => {
|
||||||
|
// return true;
|
||||||
|
// },
|
||||||
|
// style: row => {
|
||||||
|
// let color;
|
||||||
|
// if (row.statusCd === 's') {
|
||||||
|
// color = '#82868B';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// backgroundColor: '#82868B',
|
||||||
|
// color: 'white'
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// ]
|
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '기체 소유자', |
||||||
|
selector: 'ownerNm', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.ownerNm; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '기체 식별번호', |
||||||
|
selector: 'idntfNum', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.idntfNum; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '출발지', |
||||||
|
selector: 'startAddress', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.startAddress; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '비행 시작 시간', |
||||||
|
selector: 'schFltStDt ', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return moment(row.schFltStDt).format('HH:mm'); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '도착지', |
||||||
|
selector: 'endAddress', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return row.endAddress; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '비행 종료 시간', |
||||||
|
selector: 'schFltEndDt', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
return moment(row.schFltEndDt).format('HH:mm'); |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '총 예상 비행시간', |
||||||
|
selector: 'groupNm', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
const endDate = new Date(row.schFltEndDt); |
||||||
|
const startDate = new Date(row.schFltStDt); |
||||||
|
|
||||||
|
const a = endDate - startDate; |
||||||
|
let time = fillZero( |
||||||
|
2, |
||||||
|
String(Math.floor((a % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))) |
||||||
|
); |
||||||
|
let hore = fillZero( |
||||||
|
2, |
||||||
|
String(Math.floor((a % (1000 * 60 * 60)) / (1000 * 60))) |
||||||
|
); |
||||||
|
|
||||||
|
return `${time}:${hore}`; |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: '상태', |
||||||
|
selector: 'statusCd', |
||||||
|
minWidth: '150px', |
||||||
|
sortable: true, |
||||||
|
cell: row => { |
||||||
|
switch (row.statusCd) { |
||||||
|
case 'B': |
||||||
|
return '비행전'; |
||||||
|
case 'F': |
||||||
|
return '비행중'; |
||||||
|
default: |
||||||
|
return '비행완료'; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
const conditionalRowStyles = [ |
||||||
|
{ |
||||||
|
when: row => true, |
||||||
|
style: { |
||||||
|
backgroundColor: 'red' |
||||||
|
} |
||||||
|
} |
||||||
|
]; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className='pal-card-box'> |
||||||
|
<Row> |
||||||
|
<Col> |
||||||
|
<div className='cont-ti d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
display: 'flex', |
||||||
|
justifyContent: 'space-between', |
||||||
|
alignItems: 'center', |
||||||
|
width: '100%' |
||||||
|
}} |
||||||
|
> |
||||||
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
||||||
|
<h4>비행운항 스케줄 목록</h4> |
||||||
|
<span className='search-case'> |
||||||
|
검색결과 총 {scheduleList.length}건 |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<FlightScheduleRealTime ref={timeRef} /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div className='invoice-list-wrapper'> |
||||||
|
<Card> |
||||||
|
<div className='invoice-list-dataTable'> |
||||||
|
<GridDatabase |
||||||
|
title={'비행이력'} |
||||||
|
data={scheduleList} |
||||||
|
count={scheduleList.length} |
||||||
|
columns={columns} |
||||||
|
pagination={false} |
||||||
|
conditionalRowStyles={conditionalRowStyles} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</Card> |
||||||
|
</div> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default FlightScheduleGrid; |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import { useState, forwardRef } from 'react'; |
||||||
|
import moment from 'moment'; |
||||||
|
import useInterval from '@src/utility/hooks/useInterval'; |
||||||
|
|
||||||
|
const KR_TIME_DIFF = 9 * 60 * 60 * 1000; |
||||||
|
|
||||||
|
const FlightScheduleRealTime = forwardRef(({}, ref) => { |
||||||
|
const [currTime, setCurrTime] = useState(new Date()); |
||||||
|
const utc = currTime.getTime() + currTime.getTimezoneOffset() * 60 * 1000; |
||||||
|
const kr_curr = new Date(utc + KR_TIME_DIFF); |
||||||
|
|
||||||
|
useInterval(() => { |
||||||
|
setCurrTime(new Date()); |
||||||
|
setTime(moment(new Date()).format('HH:mm:ss')); |
||||||
|
}, [1000]); |
||||||
|
|
||||||
|
const [time, setTime] = useState(moment(kr_curr).format('HH:mm:ss')); |
||||||
|
|
||||||
|
return <div ref={ref}>현재시간 UTC : {time.toString()}</div>; |
||||||
|
}); |
||||||
|
|
||||||
|
export default FlightScheduleRealTime; |
||||||
@ -0,0 +1,21 @@ |
|||||||
|
import { useEffect, useRef } from 'react'; |
||||||
|
|
||||||
|
const useInterval = (callback, delay) => { |
||||||
|
const savedCallback = useRef(null); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
savedCallback.current = callback; |
||||||
|
}, [callback]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const executeCallback = () => { |
||||||
|
savedCallback.current(); |
||||||
|
}; |
||||||
|
|
||||||
|
const timerId = setInterval(executeCallback, delay); |
||||||
|
|
||||||
|
return () => clearInterval(timerId); |
||||||
|
}, []); |
||||||
|
}; |
||||||
|
|
||||||
|
export default useInterval; |
||||||
Loading…
Reference in new issue