update for JP text
This commit is contained in:
@ -1,31 +1,31 @@
|
||||
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'
|
||||
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'
|
||||
|
||||
import DatePicker from "react-datepicker";
|
||||
@ -33,188 +33,231 @@ import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
function Index() {
|
||||
|
||||
const baseUrl = "https://natnats.mobilous.com/";
|
||||
const baseUrl = "https://natnats.mobilous.com/";
|
||||
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
const [report, setReport] = useState('');
|
||||
const [selectedcons, setSelectedCons] = useState('');
|
||||
const [graph, setGraph] = useState(false);
|
||||
const [data, setData] = useState([]);
|
||||
const [report, setReport] = useState('');
|
||||
const [selectedcons, setSelectedCons] = useState('');
|
||||
const [graph, setGraph] = useState(false);
|
||||
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
const [validDates, setValidDates] = useState([]);
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
const [validDates, setValidDates] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// You can await here
|
||||
const result = await axios('https://natnats.mobilous.com/getConstructionList');
|
||||
setData(result.data);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// You can await here
|
||||
const result = await axios('https://natnats.mobilous.com/getConstructionList');
|
||||
setData(result.data);
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// You can await here
|
||||
if(selectedcons !== "" && report !== "") {
|
||||
const result = await axios('https://natnats.mobilous.com/getDateToHaveData?construction_id=' + selectedcons + '&sheetname=' + report);
|
||||
setValidDates(result.data.record);
|
||||
}
|
||||
}
|
||||
fetchData();
|
||||
}, [report, selectedcons]);
|
||||
|
||||
function getDateWithFormat(date) {
|
||||
var thisDate = date;
|
||||
var dd = String(date.getDate()).padStart(2, '0');
|
||||
var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
var yyyy = date.getFullYear();
|
||||
|
||||
thisDate = yyyy + '-' + mm + '-' + dd
|
||||
return thisDate;
|
||||
}
|
||||
|
||||
function setingReport(e){
|
||||
setReport(e.target.value);
|
||||
setStartDate(null);
|
||||
}
|
||||
|
||||
function setingSelectedCons(e) {
|
||||
setSelectedCons(e.target.value);
|
||||
setStartDate(null);
|
||||
}
|
||||
|
||||
function setingGraph(e){
|
||||
setGraph(e.target.checked);
|
||||
}
|
||||
|
||||
function doGetReport(){
|
||||
if(report == "" || selectedcons == ""){
|
||||
alert("建設とレポートの両方を選択してください");
|
||||
return;
|
||||
}
|
||||
var url = "";
|
||||
if(graph){
|
||||
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate)+"&graph=true";
|
||||
}
|
||||
else{
|
||||
url = baseUrl + "/generate" + report + "?construction_id=" +selectedcons+ "&construction_date="+getDateWithFormat(startDate);
|
||||
}
|
||||
downloadReport(url);
|
||||
}
|
||||
|
||||
function downloadReport(url) {
|
||||
axios({
|
||||
url: url, //your url
|
||||
method: 'GET',
|
||||
responseType: 'blob', // important
|
||||
}).then((response) => {
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', 'file.xlsx'); //or any other extension
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const checkAvilable = (date) => {
|
||||
var thisDate = getDateWithFormat(date);
|
||||
if(validDates.includes(thisDate)){
|
||||
return true;
|
||||
}
|
||||
else{
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12" sm="12" md="12">
|
||||
<CCard>
|
||||
<CCardHeader>
|
||||
レポート
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
|
||||
<CSelect custom name="cons_select" id="cons_select" onChange={setingSelectedCons}>
|
||||
" <option value=''>-- 選択 --</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="select">レポート種類</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
<CSelect custom name="select" id="select" onChange={setingReport} value={report}>
|
||||
<option value="">-- 選択 --</option>
|
||||
<option value="BoxDisplacement">函体変位表</option>
|
||||
<option value="MachineControl">オープンシールドマシン管理日報</option>
|
||||
<option value="MachineSheet">オープンシールド機変位表</option>
|
||||
<option value="Measurement">函底高・偏位量測定一覧表</option>
|
||||
<option value="CheckSheet">工程内検査表</option>
|
||||
<option value="Injection">裏込注入材料受払い簿</option>
|
||||
</CSelect>
|
||||
</CCol>
|
||||
</CFormGroup>
|
||||
<CFormGroup row>
|
||||
<CCol md="3">
|
||||
<CLabel htmlFor="select">報告日</CLabel>
|
||||
</CCol>
|
||||
<CCol xs="12" md="9">
|
||||
<DatePicker
|
||||
dateFormat="yyyy/MM/dd"
|
||||
selected={startDate}
|
||||
onChange={(date) => setStartDate(date)}
|
||||
filterDate={checkAvilable}
|
||||
placeholderText='日付を選択'
|
||||
/>
|
||||
</CCol>
|
||||
</CFormGroup>
|
||||
|
||||
|
||||
{report == 'MachineControl' ?
|
||||
<CFormGroup variant="checkbox" className="checkbox">
|
||||
<CInputCheckbox
|
||||
id="checkbox1"
|
||||
name="checkbox1"
|
||||
checked = {graph}
|
||||
value='graph'
|
||||
onChange={setingGraph}
|
||||
/>
|
||||
<CLabel variant="checkbox" className="form-check-label" htmlFor="checkbox1">グラフの有無</CLabel>
|
||||
</CFormGroup>
|
||||
:
|
||||
("")}
|
||||
|
||||
</CForm>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
{startDate != null ?
|
||||
<CButton type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
|
||||
:
|
||||
<CButton disabled type="submit" size="sm" color="primary" onClick={doGetReport}><CIcon name="cil-scrubber" /> ダウンロード</CButton>
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
// You can await here
|
||||
if (selectedcons !== "" && report !== "") {
|
||||
const result = await axios('https://natnats.mobilous.com/getDateToHaveData?construction_id=' + selectedcons + '&sheetname=' + report);
|
||||
setValidDates(result.data.record);
|
||||
}
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs="1" sm="1" md="1">
|
||||
</CCol>
|
||||
</CRow>
|
||||
);
|
||||
}
|
||||
fetchData();
|
||||
}, [report, selectedcons]);
|
||||
|
||||
function getDateWithFormat(date) {
|
||||
var thisDate = date;
|
||||
var dd = String(date.getDate()).padStart(2, '0');
|
||||
var mm = String(date.getMonth() + 1).padStart(2, '0'); //January is 0!
|
||||
var yyyy = date.getFullYear();
|
||||
|
||||
thisDate = yyyy + '-' + mm + '-' + dd
|
||||
return thisDate;
|
||||
}
|
||||
|
||||
function setingReport(e) {
|
||||
setReport(e.target.value);
|
||||
setStartDate(null);
|
||||
}
|
||||
|
||||
function setingSelectedCons(e) {
|
||||
setSelectedCons(e.target.value);
|
||||
setStartDate(null);
|
||||
}
|
||||
|
||||
function setingGraph(e) {
|
||||
setGraph(e.target.checked);
|
||||
}
|
||||
|
||||
function doGetReport() {
|
||||
if (report == "" || selectedcons == "") {
|
||||
alert("建設とレポートの両方を選択してください");
|
||||
return;
|
||||
}
|
||||
var url = "";
|
||||
if (graph) {
|
||||
url = baseUrl + "/generate" + report + "?construction_id=" + selectedcons + "&construction_date=" + getDateWithFormat(startDate) + "&graph=true";
|
||||
} else {
|
||||
url = baseUrl + "/generate" + report + "?construction_id=" + selectedcons + "&construction_date=" + getDateWithFormat(startDate);
|
||||
}
|
||||
downloadReport(url);
|
||||
}
|
||||
|
||||
function downloadReport(url) {
|
||||
axios({
|
||||
url: url, //your url
|
||||
method: 'GET',
|
||||
responseType: 'blob', // important
|
||||
}).then((response) => {
|
||||
const url = window.URL.createObjectURL(new Blob([response.data]));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', 'file.xlsx'); //or any other extension
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
const checkAvilable = (date) => {
|
||||
var thisDate = getDateWithFormat(date);
|
||||
if (validDates.includes(thisDate)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
return ( <
|
||||
CRow >
|
||||
<
|
||||
CCol xs = "12"
|
||||
sm = "12"
|
||||
md = "12" >
|
||||
<
|
||||
CCard >
|
||||
<
|
||||
CCardHeader >
|
||||
レポート <
|
||||
/CCardHeader> <
|
||||
CCardBody >
|
||||
|
||||
<
|
||||
CSelect custom name = "cons_select"
|
||||
id = "cons_select"
|
||||
onChange = { setingSelectedCons } >
|
||||
" <option value=''>-- レポート種類 --</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 = "select" > レポート種類 < /CLabel> <
|
||||
/CCol> <
|
||||
CCol xs = "12"
|
||||
md = "9" >
|
||||
<
|
||||
CSelect custom name = "select"
|
||||
id = "select"
|
||||
onChange = { setingReport }
|
||||
value = { report } >
|
||||
<
|
||||
option value = "" > --レポート種類-- < /option> <
|
||||
option value = "BoxDisplacement" > 函体変位表 < /option> <
|
||||
option value = "MachineControl" > オープンシールドマシン管理日報 < /option> <
|
||||
option value = "MachineSheet" > オープンシールド機変位表 < /option> <
|
||||
option value = "Measurement" > 函底高・ 偏位量測定一覧表 < /option> <
|
||||
option value = "CheckSheet" > 工程内検査表 < /option> <
|
||||
option value = "Injection" > 裏込注入材料受払い簿 < /option> <
|
||||
/CSelect> <
|
||||
/CCol> <
|
||||
/CFormGroup> <
|
||||
CFormGroup row >
|
||||
<
|
||||
CCol md = "3" >
|
||||
<
|
||||
CLabel htmlFor = "select" > 報告日 < /CLabel> <
|
||||
/CCol> <
|
||||
CCol xs = "12"
|
||||
md = "9" >
|
||||
<
|
||||
DatePicker dateFormat = "yyyy/MM/dd"
|
||||
selected = { startDate }
|
||||
onChange = {
|
||||
(date) => setStartDate(date) }
|
||||
filterDate = { checkAvilable }
|
||||
placeholderText = '日付を選択' /
|
||||
>
|
||||
<
|
||||
/CCol> <
|
||||
/CFormGroup>
|
||||
|
||||
|
||||
{
|
||||
report == 'MachineControl' ?
|
||||
<
|
||||
CFormGroup variant = "checkbox"
|
||||
className = "checkbox" >
|
||||
<
|
||||
CInputCheckbox
|
||||
id = "checkbox1"
|
||||
name = "checkbox1"
|
||||
checked = { graph }
|
||||
value = 'graph'
|
||||
onChange = { setingGraph }
|
||||
/> <
|
||||
CLabel variant = "checkbox"
|
||||
className = "form-check-label"
|
||||
htmlFor = "checkbox1" > グラフの有無 < /CLabel> <
|
||||
/CFormGroup>:
|
||||
("")
|
||||
}
|
||||
|
||||
<
|
||||
/CForm> <
|
||||
/CCardBody> <
|
||||
CCardFooter > {
|
||||
startDate != null ?
|
||||
<
|
||||
CButton type = "submit"
|
||||
size = "sm"
|
||||
color = "primary"
|
||||
onClick = { doGetReport } > < CIcon name = "cil-scrubber" / > ダウンロード < /CButton> :
|
||||
<
|
||||
CButton disabled type = "submit"
|
||||
size = "sm"
|
||||
color = "primary"
|
||||
onClick = { doGetReport } > < CIcon name = "cil-scrubber" / > ダウンロード < /CButton>
|
||||
} <
|
||||
/CCardFooter> <
|
||||
/CCard> <
|
||||
/CCardBody> <
|
||||
/CCard> <
|
||||
/CCol> <
|
||||
CCol xs = "1"
|
||||
sm = "1"
|
||||
md = "1" >
|
||||
<
|
||||
/CCol> <
|
||||
/CRow>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index
|
||||
export default Index
|
||||
Reference in New Issue
Block a user