first commit
This commit is contained in:
kicap1992
177
frontend/components/halaman/InputData.js
Normal file
177
frontend/components/halaman/InputData.js
Normal file
@ -0,0 +1,177 @@
|
||||
import { useRef, useState } from "react"; // use refs for reading value
|
||||
|
||||
import classess from "./InputData.module.css";
|
||||
import Card from "../ui/Card";
|
||||
|
||||
import { ToastContainer ,toast , Zoom , Bounce } from 'react-toastify'
|
||||
import 'react-toastify/dist/ReactToastify.css';
|
||||
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
|
||||
const MySwal = withReactContent(Swal)
|
||||
|
||||
function InputData(props) {
|
||||
let datanya = props.data;
|
||||
// console.log(datanya);
|
||||
|
||||
const usiaInputRef = useRef();
|
||||
const beratInputRef = useRef();
|
||||
const kelilingInputRef = useRef();
|
||||
const ukuranBatangInputRef = useRef();
|
||||
const jarakDuriInputRef = useRef();
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
async function submitHandler(event) {
|
||||
event.preventDefault(); // ini untuk prevent reload atau submit default
|
||||
|
||||
const usia = usiaInputRef.current.value;
|
||||
const berat = beratInputRef.current.value;
|
||||
const keliling = kelilingInputRef.current.value;
|
||||
const ukuran_batang = ukuranBatangInputRef.current.value;
|
||||
const jarak_duri = jarakDuriInputRef.current.value;
|
||||
|
||||
|
||||
if(usia < datanya.detail_attribute.usia.min || usia > datanya.detail_attribute.usia.max-1){
|
||||
toast.warning("Usia harus diantara "+datanya.detail_attribute.usia.min+" - "+`${datanya.detail_attribute.usia.max-1}`)
|
||||
//focus back to input id=usia
|
||||
usiaInputRef.current.focus();
|
||||
}else if(berat < datanya.detail_attribute.berat.min || berat > datanya.detail_attribute.berat.max-50){
|
||||
toast.warning("Berat harus diantara "+datanya.detail_attribute.berat.min+" - "+`${datanya.detail_attribute.berat.max-50}`)
|
||||
//focus back to input id=berat
|
||||
beratInputRef.current.focus();
|
||||
}else if(keliling < datanya.detail_attribute.keliling.min || keliling > datanya.detail_attribute.keliling.max-1){
|
||||
toast.warning("Keliling harus diantara "+datanya.detail_attribute.keliling.min+" - "+`${datanya.detail_attribute.keliling.max-1}`)
|
||||
//focus back to input id=keliling
|
||||
kelilingInputRef.current.focus();
|
||||
}else if(ukuran_batang < datanya.detail_attribute.ukuran_batang.min || ukuran_batang > datanya.detail_attribute.ukuran_batang.max-0.5){
|
||||
toast.warning("Ukuran batang harus diantara "+datanya.detail_attribute.ukuran_batang.min+" - "+`${datanya.detail_attribute.ukuran_batang.max-0.5}`)
|
||||
//focus back to input id=ukuran_batang
|
||||
ukuranBatangInputRef.current.focus();
|
||||
}else if(jarak_duri < datanya.detail_attribute.jarak_duri.min || jarak_duri > datanya.detail_attribute.jarak_duri.max-0.5){
|
||||
toast.warning("Jarak duri harus diantara "+datanya.detail_attribute.jarak_duri.min+" - "+`${datanya.detail_attribute.jarak_duri.max-0.5}`)
|
||||
//focus back to input id=jarak_duri
|
||||
jarakDuriInputRef.current.focus();
|
||||
}
|
||||
else{
|
||||
const datanya = {
|
||||
usia: usia,
|
||||
berat: berat,
|
||||
keliling: keliling,
|
||||
ukuran_batang: ukuran_batang,
|
||||
jarak_duri: jarak_duri,
|
||||
};
|
||||
|
||||
// console.log(datanya);
|
||||
let formdata = new FormData();
|
||||
formdata.append("data", JSON.stringify(datanya));
|
||||
setLoading(true);
|
||||
try {
|
||||
//fetch api post
|
||||
const response = await fetch("http://127.0.0.1:5000/", {
|
||||
method: "POST",
|
||||
body: formdata,
|
||||
})
|
||||
const responseData = await response.json();
|
||||
|
||||
if(response.status === 200){
|
||||
console.log(responseData);
|
||||
await MySwal.fire({
|
||||
title: `<strong>${responseData.ket}</strong>`,
|
||||
html: <i>Hasil yang diinput adalah <b>{responseData.ket}</b> </i>,
|
||||
icon: 'success',
|
||||
showConfirmButton: false,
|
||||
})
|
||||
|
||||
}else{
|
||||
// create swal with 2 button ok and load , if ok is click then console.log("ok") else if load is click then console.log("load")
|
||||
await MySwal.fire({
|
||||
title: <strong>Gagal</strong>,
|
||||
html: <i>Server Bermasalah </i>,
|
||||
icon: 'error',
|
||||
showConfirmButton: true,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: 'Reload Page',
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setLoading(false);
|
||||
await MySwal.fire({
|
||||
title: <strong>Gagal</strong>,
|
||||
html: <i>Server Bermasalah </i>,
|
||||
icon: 'error',
|
||||
showConfirmButton: true,
|
||||
showDenyButton: true,
|
||||
confirmButtonText: 'Reload Page',
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
window.location.reload();
|
||||
}
|
||||
})
|
||||
}
|
||||
// props.onAddMeetup(meetupData)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// create function oninput only accept number and .
|
||||
function onInput(event) {
|
||||
const value = event.target.value;
|
||||
const regex = /^[0-9.]+$/;
|
||||
if (!regex.test(value)) {
|
||||
event.target.value = value.slice(0, -1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<Card>
|
||||
<ToastContainer draggable={false} transition={Zoom} autoClose={2000} />
|
||||
<Backdrop open={loading}><CircularProgress color="inherit" /></Backdrop>
|
||||
<form className={classess.form} onSubmit={submitHandler}>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="title">Usia <i>(Minggu)</i> </label>
|
||||
<input type="text" required id="usia" ref={usiaInputRef} placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.usia.min} - ${datanya.detail_attribute.usia.max-1} max` } onInput={onInput} minLength="1" maxLength="4" />
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="image">Berat <i>(Gram)</i> </label>
|
||||
<input type="text" required id="berat" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.berat.min} - ${datanya.detail_attribute.berat.max-50} max` } ref={beratInputRef} onInput={onInput} minLength="3" maxLength="5" />
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="address">Keliling Buah <i>(cm)</i> </label>
|
||||
<input type="text" required id="keliling" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.keliling.min} - ${datanya.detail_attribute.keliling.max-1} max` } ref={kelilingInputRef} onInput={onInput} minLength="2" maxLength="4"/>
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="description">Ukuran Batang <i>(cm)</i></label>
|
||||
<input type="text" required id="ukuran_batang" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.ukuran_batang.min} - ${datanya.detail_attribute.ukuran_batang.max-0.5} max` } ref={ukuranBatangInputRef} onInput={onInput} minLength="1" maxLength="3"/>
|
||||
</div>
|
||||
<div className={classess.control}>
|
||||
<label htmlFor="description">Jarak Duri <i>(mm)</i></label>
|
||||
<input type="text" required id="jarak_duri" placeholder={(datanya.status == 'error') ? 'Gagal Loading Server...' : `min ${datanya.detail_attribute.jarak_duri.min} - ${datanya.detail_attribute.jarak_duri.max-0.5} max` } ref={jarakDuriInputRef} onInput={onInput} minLength="1" maxLength="4"/>
|
||||
</div>
|
||||
<div className={classess.actions} >
|
||||
<button>Cek Kematangan</button>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default InputData;
|
||||
Reference in New Issue
Block a user