The_Bois/MigratorProject-frontend
Archived
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cam did stuff

Browse Source
This commit is contained in:
pepper 2021-01-19 01:24:51 -05:00
parent 54eb79c738
commit 7aea3080b6
2 changed files with 31 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/root/common/Forms/CPanelBooking.js
View File

@ -7,8 +7,7 @@ import * as Yup from "yup";
import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API";
import Msgbox from "../../../actions/Msgbox";
import { buildErrorStringFromArray } from "../../../actions/Error";
// import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker";
import { builfArrayFromObject } from "../../../actions/Error";
// Main form and POST Request to add migrations
// found at /book under the web hosting migration tab
@ -25,39 +24,39 @@ const timezoneList = {
};
const timezone = timezoneList.melbourne;
const InputValidation = Yup.object().shape({
domain: Yup.string()
.matches(
/^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/,
/^((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/i,
"Enter correct url!"
)
.required("Please enter a domain"),
username: Yup.string().min(2, "Too Short!").required("Required"),
original_server: Yup.string()
.matches(
/^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)$/,
/^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)|([a-z0-9]{0,4}-[a-z0-9]{0,2}-[a-z0-9]{0,3})$/i,
"Please enter a valid IPv4 Address or domain"
)
.required("Please enter a valid IPv4 or domain"),
new_server: Yup.string()
.matches(
/^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)$/,
/^((([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d)\.){3}([1-9]?\d|1\d\d|2[0-5][0-5]|2[0-4]\d))|(((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?)|([a-z0-9]{0,4}-[a-z0-9]{0,2}-[a-z0-9]{0,3})$/i,
"Please enter a valid IPv4 Address or domain"
)
.required("Please enter a valid IPv4 or domain"),
agent_booked: Yup.string().min(2, "Too short!").required("Requried"),
booked_time: Yup.string().required("Requried"),
ticket_id: Yup.string().required("Requried"),
brand: Yup.string().required("Requried"),
migration_type: Yup.string().required("Requried"),
booked_date: Yup.date().required("Required")
agent_booked: Yup.string()
.min(2, "Too short!")
.required("Please enter your name!"),
booked_time: Yup.string().required("Time is needed!"),
ticket_id: Yup.string().required("Please add a ticket ID!"),
brand: Yup.string().required("Bush Did 911"),
migration_type: Yup.string().required("Type is required!"),
booked_date: Yup.date().required("Please enter a date!"),
});
export const CPanelBooking = () => {
const [respID, setRespID] = useState(0)
const [error, setError] = useState(0)
const [respID, setRespID] = useState(0);
const [error, setError] = useState(0);
const initialValues = {
submit_time: moment().format("YYYY-MM-DD"),
@ -70,15 +69,15 @@ export const CPanelBooking = () => {
.then(function (response) {
// console.log(response);
// add function here
setRespID(response.data.id)
setError(0)
setRespID(response.data.id);
setError(0);
resetForm({ values: "" });
})
.catch(function (error) {
setError(buildErrorStringFromArray(error.response.data))
setRespID(0)
setError(builfArrayFromObject(error.response.data));
setRespID(0);
});
setSubmitting(false);
resetForm({ values: "" });
};
return (
<Formik
@ -92,7 +91,7 @@ export const CPanelBooking = () => {
<Row>
<Col>
<FormGroup>
<Label for="bookedDate">Date</Label>
<Label for="bookedDate">Date *</Label>
<Input
type="date"
name="booked_date"
@ -102,21 +101,9 @@ export const CPanelBooking = () => {
/>
</FormGroup>
</Col>
{/* <Col>
<Field
name="dateTime"
component={FormikFieldDateTimePicker}
inputVariant="outlined"
label="Zoned Date and Time"
timezone={timezone}
helperText="Timezone specified"
clearable
margin="dense"
/>
</Col> */}
<Col>
<FormGroup>
<Label for="bookedTime">Timeslot</Label>
<Label for="bookedTime">Timeslot *</Label>
<Input type="select" name="booked_time" id="bookedTime">
<option>Select</option>
<option>00:00-03:00</option>
@ -130,7 +117,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedDomain">Domain</Label>
<Label for="bookedDomain">Domain *</Label>
<Input
type="text"
name="domain"
@ -141,7 +128,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedUsername">cPanel username</Label>
<Label for="bookedUsername">cPanel username *</Label>
<Input
type="text"
name="username"
@ -154,7 +141,7 @@ export const CPanelBooking = () => {
<Row>
<Col>
<FormGroup>
<Label for="bookedSource">Original server</Label>
<Label for="bookedSource">Original server *</Label>
<Input
type="text"
name="original_server"
@ -165,7 +152,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedDestination">New server</Label>
<Label for="bookedDestination">New server *</Label>
<Input
type="text"
name="new_server"
@ -178,7 +165,7 @@ export const CPanelBooking = () => {
<Row>
<Col>
<FormGroup>
<Label for="bookedBrand">Brand</Label>
<Label for="bookedBrand">Brand *</Label>
<Input type="select" name="brand" id="bookedBrand">
<option>Select</option>
<option>VentraIP</option>
@ -189,7 +176,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedTicket">Ticket ID</Label>
<Label for="bookedTicket">Ticket ID *</Label>
<Input
type="text"
name="ticket_id"
@ -200,7 +187,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedType">Migration type</Label>
<Label for="bookedType">Migration type *</Label>
<Input type="select" name="migration_type" id="bookedType">
<option>Select</option>
<option>cPanel</option>
@ -211,7 +198,7 @@ export const CPanelBooking = () => {
</Col>
<Col>
<FormGroup>
<Label for="bookedAgent">Agent Initials</Label>
<Label for="bookedAgent">Agent Initials *</Label>
<Input
type="text"
name="agent_booked"
@ -243,8 +230,8 @@ export const CPanelBooking = () => {
</FormGroup>
<Submit withSpinner>Submit</Submit>
</Container>
{ respID ? <Msgbox linkid={respID}></Msgbox> : null }
{ error ? <Msgbox error={error}></Msgbox> : null }
{respID ? <Msgbox linkid={respID}></Msgbox> : null}
{error ? <Msgbox error={error}></Msgbox> : null}
</Form>
)}
</Formik>

113
src/components/root/common/Forms/FormikFieldDateTimePicker.js
View File

@ -1,113 +0,0 @@
import React from "react";
import PropTypes from "prop-types";
import { zonedTimeToUtc, utcToZonedTime, toDate } from "date-fns-tz";
import { DateTimePicker, DatePicker, TimePicker } from "@material-ui/pickers";
const componentTypes = {
datetime: DateTimePicker,
date: DatePicker,
time: TimePicker,
};
const isoDateRegExp = /^(\d{1,})-?(\d{2})?-?(\d{2})T?(\d{2})?:?(\d{2})?:?(\d{2})?\.?(\d{3})?(Z|[+-]\d{2}:\d{2})?/;
const timeRegExp = /^(\d{2}):(\d{2}):?(\d{2})?\.?(\d{3})?/;
const getDateForPicker = (str, timezone) => {
if (isoDateRegExp.test(str)) {
return timezone ? utcToZonedTime(new Date(str), timezone) : toDate(str);
} else if (timeRegExp.test(str)) {
const date = new Date();
const utcDateISOString = new Date(
Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
).toISOString();
return toDate(
utcDateISOString.substring(0, utcDateISOString.indexOf("T") + 1) + str
);
}
return null;
};
const FormikFieldDateTimePicker = ({
field,
form,
type,
timezone,
returnDateOnly,
...restProps
}) => {
const CustomTag = componentTypes[type];
const currentError = form.errors[field.name];
const pickerValue = getDateForPicker(field.value, timezone);
const handleChange = (date) => {
if (date === null) {
form.setFieldValue(field.name, null, true);
return;
}
let storedValue;
if (timezone) {
storedValue = zonedTimeToUtc(date, timezone).toISOString();
storedValue = returnDateOnly
? storedValue.substring(0, storedValue.indexOf("T"))
: storedValue;
} else {
const utcDateIsoString = new Date(
Date.UTC(
date.getFullYear(),
date.getMonth(),
date.getDate(),
date.getHours(),
date.getMinutes(),
date.getSeconds(),
date.getMilliseconds()
)
).toISOString();
if (isoDateRegExp.test(field.value)) {
storedValue = !returnDateOnly
? utcDateIsoString.substring(0, utcDateIsoString.indexOf("Z"))
: utcDateIsoString.substring(0, utcDateIsoString.indexOf("T"));
} else {
storedValue = utcDateIsoString.substring(
utcDateIsoString.indexOf("T") + 1,
utcDateIsoString.indexOf("Z")
);
}
}
form.setFieldValue(field.name, storedValue, true);
};
const handleBlur = (e) => {
field.onBlur(e);
};
return (
<CustomTag
name={field.name}
value={pickerValue}
helperText={currentError}
error={Boolean(currentError)}
onError={(_, error) => form.setFieldError(field.name, error)}
onChange={handleChange}
onBlur={handleBlur}
{...restProps}
/>
);
};
FormikFieldDateTimePicker.propTypes = {
field: PropTypes.shape().isRequired,
form: PropTypes.shape().isRequired,
type: PropTypes.oneOf(["datetime", "date", "time"]),
timezone: PropTypes.string,
returnDateOnly: PropTypes.bool,
};
FormikFieldDateTimePicker.defaultProps = {
type: "datetime",
returnDateOnly: false,
};
export default FormikFieldDateTimePicker;