From 81976540875d48b5b7f4a1eeab949dace0ee530f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?sanguu516=28=EB=B0=95=EC=83=81=ED=98=84=29?=
 <sanguu516@naver.com>
Date: Mon, 18 Sep 2023 16:59:46 +0900
Subject: [PATCH] =?UTF-8?q?laanc=20=EC=8A=A4=ED=85=9D2=20Html=20=EC=9E=91?=
 =?UTF-8?q?=EC=97=85=EC=A4=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/control/setting/LAANC/Apply.js      | 330 ++++++++++++++++++
 src/views/control/setting/LAANC/FlightPlan.js |  36 +-
 2 files changed, 354 insertions(+), 12 deletions(-)
 create mode 100644 src/views/control/setting/LAANC/Apply.js

diff --git a/src/views/control/setting/LAANC/Apply.js b/src/views/control/setting/LAANC/Apply.js
new file mode 100644
index 00000000..2f41bc55
--- /dev/null
+++ b/src/views/control/setting/LAANC/Apply.js
@@ -0,0 +1,330 @@
+import React, { useEffect, useState } from 'react';
+import { Search } from 'react-feather';
+import { BiBuildings, BiGridAlt } from 'react-icons/bi';
+import { CgTrees } from 'react-icons/cg';
+import { VscRadioTower } from 'react-icons/vsc';
+import { useDispatch, useSelector } from 'react-redux';
+import Flatpickr from 'react-flatpickr';
+import '@styles/react/libs/flatpickr/flatpickr.scss';
+import moment from 'moment';
+import {
+  Button,
+  InputGroup,
+  ButtonGroup,
+  InputGroupAddon,
+  Input,
+  Row,
+  Col,
+  FormGroup,
+  Label,
+  Card,
+  CardBody,
+  CustomInput
+} from 'reactstrap';
+import {
+  initFlight,
+  initFlightBas
+} from '../../../../modules/basis/flight/models/basisFlightModel';
+import {
+  areaClickAction,
+  environmentClickAction,
+  mapTypeChangeAction,
+  sensorClickAction
+} from '../../../../modules/control/map/actions/controlMapActions';
+
+const Apply = props => {
+  const [detailData, setDetailData] = useState(initFlightBas.initDetail);
+  // 변경감지
+  const handleChange = ({ name, value, type, index, pIndex }) => {
+    setDetailData(prevState => ({
+      ...prevState,
+      [name]: value
+    }));
+  };
+
+  return (
+    <div className=''>
+      <div className='layer-content'>
+        <div className='layer-ti'>
+          <h4 className='ti'>LAANC 승인 요청</h4>
+          {/* <button className='btn-icon' outline color='primary'> */}
+          {/* <X size={20} /> */}
+          {/* </button> */}
+          <Button.Ripple
+            color='danger'
+            className='badge badge-danger'
+            onClick={() => props.handlerLaanc()}
+          >
+            취소
+          </Button.Ripple>
+        </div>
+      </div>
+      <Row>
+        <Col sm='12'>
+          <Row>
+            <Col>
+              <div className='search-cont search-info pd-0'>
+                <div className='cont-ti mb-1 d-flex justify-content-between align-items-sm-center align-items-start flex-sm-row'>
+                  <div className='final'></div>
+                </div>
+                <dl>
+                  <dt>
+                    <div className='layer-ti'>
+                      <h4>유효성 검사 정보</h4>
+                    </div>
+                    <CustomInput
+                      inline
+                      type='checkbox'
+                      id='pilotYn'
+                      label='조종사자격정보유무'
+                      name='pilotYn'
+                      value='A'
+                      // checked={true}
+                      //  checked={checkState.all}
+                      // onChange={handleChangeCheckbox}
+                    />
+                    <CustomInput
+                      inline
+                      type='checkbox'
+                      id='DronYn'
+                      label='기체보험가입여부'
+                      name='DronYn'
+                      value='B'
+                      // checked={true}
+                      //  checked={checkState.all}
+                      // onChange={handleChangeCheckbox}
+                    />
+                  </dt>
+
+                  <div className='search-info-ti d-flex justify-content-between'>
+                    <h4 className='ti'>LAANC 승인 사전 결과 확인</h4>
+                  </div>
+                  <CustomInput
+                    inline
+                    type='checkbox'
+                    id='exampleCustomCheckbox'
+                    label='승인 처리를 위해 다음 스텝을 진행해주세요.'
+                    name='aprvlYn'
+                    value='C'
+                    // checked={true}
+                    //  checked={checkState.all}
+                    // onChange={handleChangeCheckbox}
+                  />
+                  <div className='search-info-box'>
+                    <Row>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>
+                            비행시작일자
+                          </Label>
+                          <Flatpickr
+                            className='form-control form-control-sm'
+                            type='text'
+                            id='schFltStDt'
+                            name='schFltStDt'
+                            data-enable-time
+                            // defaultValue={data.schFltStDt}
+                            // value={data.schFltStDt}
+                            onChange={date => {
+                              const value =
+                                moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
+                                '';
+                              handleChange({
+                                name: 'schFltStDt',
+                                value
+                              });
+                            }}
+                            placeholder='비행 시작일자 선택(클릭)'
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>
+                            비행종료일자
+                          </Label>
+                          <Flatpickr
+                            className='form-control form-control-sm'
+                            type='text'
+                            id='schFltEndDt'
+                            name='schFltEndDt'
+                            data-enable-time
+                            // defaultValue={data.schFltEndDt}
+                            // value={data.schFltEndDt}
+                            onChange={date => {
+                              const value =
+                                moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
+                                '';
+                              handleChange({
+                                name: 'schFltEndDt',
+                                value
+                              });
+                            }}
+                            placeholder='비행 종료일자 선택(클릭)'
+                            // {...{options:{minDate: "today"}}}
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>비행 목적
+                          </Label>
+                          <Input
+                            type='select'
+                            id='fltPurpose'
+                            name='fltPurpose'
+                            //    value={data.fltPurpose}
+                            bsSize='sm'
+                            onChange={e => {
+                              const { name, value } = e.target;
+                              handleChange({
+                                type: 'plan',
+                                name,
+                                value
+                              });
+                            }}
+                            // innerRef={props.data}
+                            // className={classnames({
+                            // 'is-invalid': props.errors.arcrftTypeCd
+                            // })}
+                          >
+                            {/* TODO CDNOT 코드연동 필요 */}
+                            <option value=''>= 선택 =</option>
+                            <option value='시험비행'>= 시험비행 =</option>
+                            <option value='교육비행'>= 교육비행 =</option>
+                            <option value='사진/영상촬영'>
+                              = 사진/영상촬영 =
+                            </option>
+                            <option value='비행훈련'>= 비행훈련 =</option>
+                            <option value='비행교육'>= 비행교육 =</option>
+                            <option value='비행실기시험'>
+                              = 비행실기시험 =
+                            </option>
+                          </Input>
+                        </FormGroup>
+                      </Col>
+                    </Row>
+                  </div>
+                  <div className='search-info-box'>
+                    <Row>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>고도
+                          </Label>
+                          <Input
+                            type='text'
+                            id='email'
+                            name='email'
+                            // defaultValue={data.email || ''}
+                            // value={data.email}
+                            bsSize='sm'
+                            onChange={e => {
+                              const { name, value } = e.target;
+                              handleChange({
+                                type: 'plan',
+                                name,
+                                value
+                              });
+                            }}
+                            // innerRef={props.data}
+                            placeholder='100m'
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>반경
+                          </Label>
+                          <Input
+                            type='text'
+                            id='email'
+                            name='email'
+                            // defaultValue={data.email || ''}
+                            // value={data.email}
+                            bsSize='sm'
+                            onChange={e => {
+                              const { name, value } = e.target;
+                              handleChange({
+                                type: 'plan',
+                                name,
+                                value
+                              });
+                            }}
+                            // innerRef={props.data}
+                            placeholder='100m'
+                          />
+                        </FormGroup>
+                      </Col>
+                      <Col className='list-input' lg={4} md={4} sm={12}>
+                        <FormGroup>
+                          <Label for='test'>
+                            <span className='necessary'>*</span>비행방식
+                          </Label>
+                          <Input
+                            type='text'
+                            id='email'
+                            name='email'
+                            // defaultValue={data.email || ''}
+                            // value={data.email}
+                            bsSize='sm'
+                            onChange={e => {
+                              const { name, value } = e.target;
+                              handleChange({
+                                type: 'plan',
+                                name,
+                                value
+                              });
+                            }}
+                            // innerRef={props.data}
+                            placeholder=''
+                          />
+                        </FormGroup>
+                      </Col>
+                    </Row>
+                  </div>
+                  <div className='search-info-ti d-flex justify-content-between'>
+                    <h4 className='ti'>조종사 준수사항 처벌 동의 약관</h4>
+                  </div>
+                  <CustomInput
+                    inline
+                    type='checkbox'
+                    id='aprvlYn'
+                    label='조종자 준수사항 미 준수 시 처벌에 동의합니다.'
+                    name='aprvlYn'
+                    value='D'
+                    // checked={true}
+                    //  checked={checkState.all}
+                    // onChange={handleChangeCheckbox}
+                  />
+                  <div className='d-flex align-items-center'>
+                    <Button.Ripple
+                      color='danger'
+                      bsSize='sm'
+                      //   onClick={props.handlerStep(1)}
+                    >
+                      이전
+                    </Button.Ripple>
+                    <Button.Ripple
+                      className='mr-1'
+                      color='primary'
+                      beSize='sm'
+                      //   onClick={props.handlerStep(3)}
+                    >
+                      다음
+                    </Button.Ripple>
+                  </div>
+                </dl>
+              </div>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+export default Apply;
diff --git a/src/views/control/setting/LAANC/FlightPlan.js b/src/views/control/setting/LAANC/FlightPlan.js
index dcf4adb1..57b254c1 100644
--- a/src/views/control/setting/LAANC/FlightPlan.js
+++ b/src/views/control/setting/LAANC/FlightPlan.js
@@ -21,6 +21,10 @@ import {
   CardBody,
   CustomInput
 } from 'reactstrap';
+import {
+  initFlight,
+  initFlightBas
+} from '../../../../modules/basis/flight/models/basisFlightModel';
 import {
   areaClickAction,
   environmentClickAction,
@@ -29,6 +33,15 @@ import {
 } from '../../../../modules/control/map/actions/controlMapActions';
 
 const FlightPlan = props => {
+  const [detailData, setDetailData] = useState(initFlightBas.initDetail);
+
+  const handleChange = ({ name, value, type, index, pIndex }) => {
+    setDetailData(prevState => ({
+      ...prevState,
+      [name]: value
+    }));
+  };
+
   return (
     <div className=''>
       <div className='layer-content'>
@@ -213,7 +226,6 @@ const FlightPlan = props => {
                                 moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
                                 '';
                               handleChange({
-                                type: 'plan',
                                 name: 'schFltStDt',
                                 value
                               });
@@ -241,7 +253,6 @@ const FlightPlan = props => {
                                 moment(date[0]).format('YYYY-MM-DD HH:mm:ss') ||
                                 '';
                               handleChange({
-                                type: 'plan',
                                 name: 'schFltEndDt',
                                 value
                               });
@@ -344,7 +355,7 @@ const FlightPlan = props => {
                               });
                             }}
                             // innerRef={props.data}
-                            placeholder=''
+                            placeholder='100m'
                           />
                         </FormGroup>
                       </Col>
@@ -369,7 +380,7 @@ const FlightPlan = props => {
                               });
                             }}
                             // innerRef={props.data}
-                            placeholder='100m'
+                            placeholder=''
                           />
                         </FormGroup>
                       </Col>
@@ -461,14 +472,7 @@ const FlightPlan = props => {
                     <h4 className='ti'>유의사항</h4>
                   </div>
                   {/* <div className='d-flex align-items-center'>
-                            <Button.Ripple
-                              className='mr-1'
-                              color='primary'
-                              size='sm'
-                              onClick={handleSave}
-                            >
-                              저장
-                            </Button.Ripple>
+                           
                             {data.planSno ? (
                               <Button.Ripple
                                 color='danger'
@@ -479,6 +483,14 @@ const FlightPlan = props => {
                               </Button.Ripple>
                             ) : null}
                           </div> */}
+                  <Button.Ripple
+                    className='mr-1'
+                    color='primary'
+                    bsSize='sm'
+                    // onClick={props.handlerStep(2)}
+                  >
+                    다음
+                  </Button.Ripple>
                 </dl>
               </div>
             </Col>