22 changed files with 1023 additions and 491 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