98 lines
3.6 KiB
JavaScript
98 lines
3.6 KiB
JavaScript
import React, {useContext, useState} from 'react';
|
|
import {toast} from "react-toastify";
|
|
import {AuthContext} from "../App";
|
|
import {useForm} from "react-hook-form";
|
|
import {query} from "../auth";
|
|
import {Input} from "../custom";
|
|
|
|
function FileManualForm() {
|
|
const {authState} = useContext(AuthContext)
|
|
const [manualError, setManualError] = useState("")
|
|
const {register, handleSubmit, errors, setError, reset} = useForm();
|
|
|
|
const manualUpload = async (data) => {
|
|
const {status, json} = await query("/data/add", data).catch(() => {
|
|
return {status: 500, json: {reason: "The upload server is offline!"}}
|
|
})
|
|
console.debug("Manual Upload Response:", json)
|
|
return {status, json}
|
|
}
|
|
|
|
function submitManual(data) {
|
|
let req = data
|
|
|
|
let split = data.date.split(/[/-]/);
|
|
// noinspection JSCheckFunctionSignatures
|
|
let date = new Date(split[2], Number(split[0]) - 1, split[1])
|
|
req.date = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
|
|
if (date > new Date()) return setError("date", "time", "Your date must be in the past.")
|
|
if (date < new Date(1900, 0, 0)) return setError("date", "time", "Your date must be after 1900.")
|
|
if (date.getDay() === 0) return setError("date", "format", "Invalid Date format (MM-DD-YYYY)")
|
|
|
|
if (isNaN(parseFloat(data["precipitation"]))) {
|
|
setError("precipitation", "format", "Invalid format. Precipitation must be a number. E.g 0.24")
|
|
}
|
|
req.precipitation = parseFloat(data["precipitation"])
|
|
req.token = authState.token;
|
|
|
|
(async () => {
|
|
let {json, status} = await manualUpload(data)
|
|
if (status !== 200) return setManualError(json.reason)
|
|
reset()
|
|
toast.success("Entry successfully uploaded")
|
|
})();
|
|
}
|
|
|
|
|
|
return (
|
|
<form className="bg-white shadow p-4 overflow-hidden rounded-lg
|
|
my-6 px-6 w-11/12 lg:mx-2 lg:my-5 lg:px-5 lg:w-5/12" onSubmit={handleSubmit(submitManual)}>
|
|
|
|
<div className="text-lg font-medium mb-4">Upload Individual Entry</div>
|
|
{manualError && <div
|
|
className="px-2 py-2 mb-8 bg-red-300 text-red-900 text-xs font-semibold border border-red-600 rounded">
|
|
{manualError}
|
|
</div>
|
|
}
|
|
|
|
<Input name="date" type="text" placeholder="Date (MM-DD-YYYY)" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "You must provide a date."},
|
|
pattern: {
|
|
value: /^\d\d?[/-]\d\d?[/-]\d\d\d?\d?$/,
|
|
message: "Invalid Date format (MM-DD-YYYY)"
|
|
},
|
|
})}/>
|
|
|
|
<Input name="precipitation" placeholder="Precipitation (Inches)" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "You must provide the precipitation."},
|
|
pattern: {
|
|
value: /^\d*\.?\d*$/,
|
|
message: "Invalid format. Precipitation must be a number. E.g 0.24"
|
|
}
|
|
})}/>
|
|
|
|
<Input name="latitude" type="text" placeholder="Latitude" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "Latitude and Longitude are both required."}
|
|
})}/>
|
|
|
|
<Input name="longitude" type="text" placeholder="Longitude" errors={errors}
|
|
register={register({
|
|
required: {value: true, message: "Latitude and Longitude are both required."}
|
|
})}/>
|
|
|
|
<Input name="remarks" type="text" placeholder="Remarks (Optional)" errors={errors}
|
|
register={register}/>
|
|
|
|
<div className="flex flex-1 justify-center">
|
|
<input className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 text-center rounded"
|
|
type="submit" value="Submit"/>
|
|
</div>
|
|
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export default FileManualForm; |