initial FBS admin

src/views/BoxDisplacemen/index.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import {
+  CCard,
+  CCardBody,
+  CCardHeader,
+  CCol,
+  CRow,
+  CDropdown,
+  CDropdownDivider,
+  CDropdownItem,
+  CDropdownMenu,
+  CDropdownToggle,
+  /////
+  CButton,
+  CCardFooter,
+  CForm,
+  CFormGroup,
+  CFormText,
+  CTextarea,
+  CInput,
+  CInputFile,
+  CInputCheckbox,
+  CInputRadio,
+  CLabel,
+  CSelect,
+  CSwitch
+} from  '@coreui/react'
+import CIcon from '@coreui/icons-react'
+const FileDownload = require('js-file-download');
+
+function Index() {
+
+  const baseUrl = "https://natnats.mobilous.com/";
+
+  var today = new Date();
+
+  var cdate = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
+
+  const [data, setData] = useState([]);
+  const [sdate, setSdate] = useState(cdate);
+  const [report, setReport] = useState('');
+  const [selectedcons, setSelectedCons] = useState('');
+
+  useEffect(() => {
+    async function fetchData() {
+      // You can await here
+      const result = await axios('https://natnats.mobilous.com/getConstructionList');
+      setData(result.data);
+    }
+    fetchData();
+  }, []);
+
+  function setingSDate(e){
+    setSdate(e.target.value);
+  }
+  function setingReport(e){
+    setReport(e.target.value);
+  }
+
+  function setingSelectedCons(e) {
+    setSelectedCons(e.target.value);
+  }
+
+  function doGetReport(){
+    if(report == "" || selectedcons == ""){
+      alert("Please select both Construction and Report");
+      return;
+    }
+    var url = baseUrl + "/" + report + "?construction_id=" +selectedcons+ "&construction_date="+sdate;
+    console.log(selectedcons);
+    console.log(sdate);
+    console.log(report);
+    downloadReport(url);
+  }
+
+  function downloadReport(url) {
+    const response = axios(url).then((res) => {
+      FileDownload(res.data, 'report.xls');
+    })
+    console.log(response);
+  }
+
+  return (
+    <CRow>
+      <CCol xs="12" sm="12" md="12">
+        <CCard>
+          <CCardHeader>
+            Reports
+          </CCardHeader>
+          <CCardBody>
+
+    <CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
+      " <option value=''>-- Select --</option>"+
+      {
+        data.map((cc, index) => {
+          return(
+            <option key={cc.construction_id} value={cc.construction_id}>{cc.construction_name}</option>
+          )
+        })
+      }
+    </CSelect>
+
+
+  <CCard>
+            <CCardBody>
+              <CForm action="" method="post" encType="multipart/form-data" className="form-horizontal">
+                <CFormGroup row>
+                  <CCol md="3">
+                    <CLabel htmlFor="date-input">Date ({sdate})</CLabel>
+                  </CCol>
+                  <CCol xs="12" md="9">
+                    <CInput type="date" id="date-input" name="date-input" placeholder="date" value={sdate} onChange={setingSDate}/>
+                  </CCol>
+                </CFormGroup>
+                <CFormGroup row>
+                  <CCol md="3">
+                    <CLabel htmlFor="select">Select</CLabel>
+                  </CCol>
+                  <CCol xs="12" md="9">
+                    <CSelect custom name="select" id="select" onChange={setingReport} value={report}>
+                      <option value="">-- Select --</option>
+                      <option value="generateBoxDisplacement">Box Displacement</option>
+                      <option value="generateMachineControl">Machine Control</option>
+                      <option value="generateMachineSheet">Machine Sheet</option>
+                      <option value="generateMeasurement">Measurement</option>
+                      <option value="generateCheckSheet">Check Sheet</option>
+                      <option value="generateInjection">Injection</option>
+                    </CSelect>
+                  </CCol>
+                </CFormGroup>
+
+
+              </CForm>
+            </CCardBody>
+            <CCardFooter>
+              <CButton type="submit" size="sm" color="primary"  onClick={doGetReport}><CIcon name="cil-scrubber" /> Submit</CButton>
+            </CCardFooter>
+          </CCard>
+          </CCardBody>
+        </CCard>
+      </CCol>
+      <CCol xs="1" sm="1" md="1">
+      </CCol>
+    </CRow>
+  );
+}
+
+export default Index