Updated book and form logic
This commit is contained in:
parent
d738049742
commit
646e3cc9d8
@ -15,6 +15,7 @@ import IDSingle from "./root/Pages/IDSingle";
|
||||
// Components
|
||||
import Home from "./root/Home";
|
||||
import Navigation from "./root/Navigation";
|
||||
import Autobook from "./root/Pages/Autobook";
|
||||
|
||||
// Main app component, react-router comes from here,
|
||||
// and links to all of the sub pages
|
||||
@ -73,6 +74,7 @@ class App extends Component {
|
||||
path="/booked"
|
||||
render={(props) => <GenericList {...props} APILINK="/booked/" />}
|
||||
/>
|
||||
<Route exact path="/check" component={Autobook} />
|
||||
</Switch>
|
||||
</div>
|
||||
</Router>
|
||||
|
||||
75
src/components/root/Pages/Autobook.js
Normal file
75
src/components/root/Pages/Autobook.js
Normal file
@ -0,0 +1,75 @@
|
||||
import React, { Component } from "react";
|
||||
import { CredChecker } from "../common/Forms/CredChecker";
|
||||
import FormPage from "../common/Forms/FormPage";
|
||||
import { callAPI } from "../../actions/API";
|
||||
import { GenericForm } from "../common/Forms/GenericForm";
|
||||
import moment from "moment";
|
||||
|
||||
export default class Book extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: null,
|
||||
timeslots: [],
|
||||
};
|
||||
}
|
||||
preBookedData = {
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
dateTime: "2019-03-11T12:00:00.000Z",
|
||||
migration_status: "Booked",
|
||||
domain: null,
|
||||
username: "",
|
||||
original_server: null,
|
||||
new_server: "",
|
||||
agent_booked: "",
|
||||
booked_time: "",
|
||||
ticket_id: "",
|
||||
brand: "",
|
||||
migration_type: "cPanel",
|
||||
booked_date: "",
|
||||
term_date: "",
|
||||
additional_domains: null,
|
||||
notes: "",
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
callAPI.get("/gettimeslots/").then((response) => {
|
||||
this.setState({
|
||||
timeslots: response.data,
|
||||
});
|
||||
// console.log(response.data);
|
||||
});
|
||||
}
|
||||
|
||||
credCallback = (credData) => {
|
||||
console.log(credData);
|
||||
this.setState({
|
||||
data: credData,
|
||||
});
|
||||
console.log(this.state.data);
|
||||
this.preBookedData.domain = this.state.data[0].data.main_domain;
|
||||
this.preBookedData.additional_domains = this.state.data[0].data.other_domains;
|
||||
this.preBookedData.username = this.state.data[1].username;
|
||||
this.preBookedData.original_server = this.state.data[1].hostname;
|
||||
console.log(this.preBookedData);
|
||||
};
|
||||
render() {
|
||||
if (this.state.data) {
|
||||
return (
|
||||
<div>
|
||||
{console.log(this.preBookedData)}
|
||||
{this.state.data[0].data.main_domain ? (
|
||||
<GenericForm
|
||||
data={this.preBookedData}
|
||||
timeslots={this.state.timeslots}
|
||||
/>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return <CredChecker credCallback={this.credCallback} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import React, { Component } from "react";
|
||||
|
||||
import { callAPI } from "../../actions/API";
|
||||
import { CredChecker } from "../common/Forms/CredChecker";
|
||||
import FormPage from "../common/Forms/FormPage";
|
||||
|
||||
// Parent page for the Book component,
|
||||
@ -22,6 +23,7 @@ export default class Book extends Component {
|
||||
this.setState({
|
||||
timeslots: response.data
|
||||
})
|
||||
console.log(response.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
31
src/components/root/common/Forms/CredChecker.js
Normal file
31
src/components/root/common/Forms/CredChecker.js
Normal file
@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import { callAPI } from "../../../actions/API";
|
||||
|
||||
export const CredChecker = (props) => {
|
||||
|
||||
const sendit = () => {
|
||||
let values = {
|
||||
hostname: document.getElementById("Host").value,
|
||||
username: document.getElementById("User").value,
|
||||
password: document.getElementById("Pass").value,
|
||||
}
|
||||
callAPI
|
||||
.post('/checkcpanel/', values)
|
||||
.then( (resp) => {
|
||||
props.credCallback([resp, values])
|
||||
})
|
||||
console.log()
|
||||
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<div className="row">
|
||||
<div className="col s3"><label htmlFor="Host">Hostname</label><input id="Host" ></input></div>
|
||||
<div className="col s3"><label htmlFor="User">Username</label><input id="User" ></input></div>
|
||||
<div className="col s3"><label htmlFor="Pass">Password</label><input id="Pass" ></input></div>
|
||||
</div>
|
||||
<div className="row"><button className="" onClick={sendit}>Check Deets homie</button></div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Formik, Form, ErrorMessage } from "formik";
|
||||
import * as Yup from "yup";
|
||||
import moment from "moment";
|
||||
@ -10,462 +10,484 @@ import { builfArrayFromObject } from "../../../actions/Error";
|
||||
export const GenericForm = (props) => {
|
||||
const [respID, setRespID] = useState(0);
|
||||
const [error, setError] = useState(0);
|
||||
const [initial, setInitial] = useState({});
|
||||
const [set, setSet] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// console.log(initial);
|
||||
// console.log(initial.domain);
|
||||
|
||||
if (!set) {
|
||||
console.log(typeof initial.domain);
|
||||
if (props.data) {
|
||||
setInitial(props.data);
|
||||
setSet(true);
|
||||
} else {
|
||||
setInitial({
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
dateTime: "2019-03-11T12:00:00.000Z",
|
||||
migration_status: "Booked",
|
||||
domain: "",
|
||||
username: "",
|
||||
original_server: "",
|
||||
new_server: "",
|
||||
agent_booked: "",
|
||||
booked_time: "",
|
||||
ticket_id: "",
|
||||
brand: "",
|
||||
migration_type: "",
|
||||
booked_date: "",
|
||||
term_date: "",
|
||||
additional_domains: "",
|
||||
notes: "",
|
||||
});
|
||||
setSet(true);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const getInitial = () => {
|
||||
let initial = {};
|
||||
// console.log(migData);
|
||||
if (props.data) {
|
||||
initial = props.data;
|
||||
} else {
|
||||
initial = {
|
||||
submit_time: moment().format("YYYY-MM-DD"),
|
||||
dateTime: "2019-03-11T12:00:00.000Z",
|
||||
migration_status: "Booked",
|
||||
domain: "",
|
||||
username: "",
|
||||
original_server: "",
|
||||
new_server: "",
|
||||
agent_booked: "",
|
||||
booked_time: "",
|
||||
ticket_id: "",
|
||||
brand: "",
|
||||
migration_type: "",
|
||||
booked_date: "",
|
||||
term_date: "",
|
||||
additional_domains: "",
|
||||
notes: "",
|
||||
};
|
||||
}
|
||||
return initial;
|
||||
// return initial;
|
||||
};
|
||||
|
||||
return (
|
||||
<Formik
|
||||
initialValues={getInitial()}
|
||||
validationSchema={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-%]+&?)?$/i,
|
||||
"Required field"
|
||||
)
|
||||
.required("Required field"),
|
||||
username: Yup.string().min(2, "Too Short!").required("Required field"),
|
||||
original_server: Yup.string().required("Required field"),
|
||||
new_server: Yup.string().required("Required field"),
|
||||
agent_booked: Yup.string()
|
||||
.min(2, "Too short!")
|
||||
.required("Required field"),
|
||||
booked_time: Yup.string().required("Required field"),
|
||||
ticket_id: Yup.string().required("Required field"),
|
||||
brand: Yup.string().required("Required field"),
|
||||
migration_type: Yup.string().required("Required field"),
|
||||
booked_date: Yup.string().required("Required field"),
|
||||
})}
|
||||
onSubmit={(values, { resetForm }) => {
|
||||
console.log(values);
|
||||
if (values.term_date === "") {
|
||||
values.term_date = null; // Complains on dev but not on live #whocares
|
||||
}
|
||||
if (props.type === "update") {
|
||||
callAPI
|
||||
.put(`/${props.data.id}/`, values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.ticket_id);
|
||||
setError(0);
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
} else {
|
||||
callAPI
|
||||
.post("/book/", values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.id);
|
||||
resetForm({ values: "" });
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
}
|
||||
}}
|
||||
render={({
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
values,
|
||||
handleBlur,
|
||||
handleReset,
|
||||
}) => (
|
||||
<div className="container">
|
||||
<Form>
|
||||
<div className="row">
|
||||
{/* Only show this on update */}
|
||||
{props.type === "update" ? (
|
||||
console.log(initial);
|
||||
if (set) {
|
||||
return (
|
||||
<Formik
|
||||
initialValues={initial}
|
||||
validationSchema={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-%]+&?)?$/i,
|
||||
"Required field"
|
||||
)
|
||||
.required("Required field"),
|
||||
username: Yup.string()
|
||||
.min(2, "Too Short!")
|
||||
.required("Required field"),
|
||||
original_server: Yup.string().required("Required field"),
|
||||
new_server: Yup.string().required("Required field"),
|
||||
agent_booked: Yup.string()
|
||||
.min(2, "Too short!")
|
||||
.required("Required field"),
|
||||
booked_time: Yup.string().required("Required field"),
|
||||
ticket_id: Yup.string().required("Required field"),
|
||||
brand: Yup.string().required("Required field"),
|
||||
migration_type: Yup.string().required("Required field"),
|
||||
booked_date: Yup.string().required("Required field"),
|
||||
})}
|
||||
onSubmit={(values, { resetForm }) => {
|
||||
console.log(values);
|
||||
if (values.term_date === "") {
|
||||
values.term_date = null; // Complains on dev but not on live #whocares
|
||||
}
|
||||
if (props.type === "update") {
|
||||
callAPI
|
||||
.put(`/${props.data.id}/`, values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.ticket_id);
|
||||
setError(0);
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
} else {
|
||||
callAPI
|
||||
.post("/book/", values)
|
||||
.then(function (response) {
|
||||
setRespID(response.data.id);
|
||||
resetForm({ values: "" });
|
||||
})
|
||||
.catch(function (error) {
|
||||
setError(builfArrayFromObject(error.response.data));
|
||||
setRespID(0);
|
||||
});
|
||||
}
|
||||
}}
|
||||
render={({
|
||||
errors,
|
||||
touched,
|
||||
handleChange,
|
||||
values,
|
||||
handleBlur,
|
||||
handleReset,
|
||||
}) => (
|
||||
<div className="container">
|
||||
<Form>
|
||||
<div className="row">
|
||||
{/* Only show this on update */}
|
||||
{props.type === "update" ? (
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="migrationStatus">Status *</label>
|
||||
<select
|
||||
name="migration_status"
|
||||
type="select"
|
||||
id="migrationStatus"
|
||||
placeholder="status placeholder"
|
||||
value={values.migration_status}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_status && touched.migration_status
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>Booked</option>
|
||||
<option>Waiting Termination</option>
|
||||
<option>Completed</option>
|
||||
<option>Cancelled</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_status"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="migrationStatus">Status *</label>
|
||||
<select
|
||||
name="migration_status"
|
||||
type="select"
|
||||
id="migrationStatus"
|
||||
placeholder="status placeholder"
|
||||
value={values.migration_status}
|
||||
<label htmlFor="bookedDate">Date *</label>
|
||||
<input
|
||||
name="booked_date"
|
||||
type="date"
|
||||
id="bookedDate"
|
||||
placeholder="date placeholder"
|
||||
value={values.booked_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_status && touched.migration_status
|
||||
(errors.booked_date && touched.booked_date
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="booked_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDomain">Domain *</label>
|
||||
<input
|
||||
name="domain"
|
||||
type="text"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
value={values.domain}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.domain && touched.domain ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="domain"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedSource">Original server *</label>
|
||||
<input
|
||||
name="original_server"
|
||||
type="text"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4 / example.com"
|
||||
value={values.original_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.original_server && touched.original_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="original_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTicket">Ticket ID *</label>
|
||||
<input
|
||||
name="ticket_id"
|
||||
type="text"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
value={values.ticket_id}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.ticket_id && touched.ticket_id
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="ticket_id"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTime">Timeslot *</label>
|
||||
<select
|
||||
name="booked_time"
|
||||
id="bookedTime"
|
||||
type="select"
|
||||
value={values.booked_time}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.booked_time && touched.booked_time
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>Booked</option>
|
||||
<option>Waiting Termination</option>
|
||||
<option>Completed</option>
|
||||
<option>Cancelled</option>
|
||||
{props["timeslots"].map((slot) => (
|
||||
<option key={`${slot}`}>{slot}</option>
|
||||
))}
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_status"
|
||||
name="booked_time"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3 ">
|
||||
<label htmlFor="bookedUsername">cPanel username *</label>
|
||||
<input
|
||||
name="username"
|
||||
type="text"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
value={values.username}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.username && touched.username ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="username"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDestination">New server *</label>
|
||||
<input
|
||||
name="new_server"
|
||||
type="text"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4 / S111.SYD1"
|
||||
value={values.new_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.new_server && touched.new_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="new_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedBrand">Brand *</label>
|
||||
<select
|
||||
name="brand"
|
||||
type="select"
|
||||
id="bookedBrand"
|
||||
value={values.brand}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.brand && touched.brand ? " is-invalid" : "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="brand"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDate">Date *</label>
|
||||
<input
|
||||
name="booked_date"
|
||||
type="date"
|
||||
id="bookedDate"
|
||||
placeholder="date placeholder"
|
||||
value={values.booked_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.booked_date && touched.booked_date
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="booked_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDomain">Domain *</label>
|
||||
<input
|
||||
name="domain"
|
||||
type="text"
|
||||
id="bookedDomain"
|
||||
placeholder="example.com.au"
|
||||
value={values.domain}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.domain && touched.domain ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="domain"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedAdditionalDomains">Addon Domains</label>
|
||||
<input
|
||||
name="additional_domains"
|
||||
type="text"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
value={values.additional_domains}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.additional_domains && touched.additional_domains
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="additional_domains"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedAgent">Agent Initials *</label>
|
||||
<input
|
||||
name="agent_booked"
|
||||
type="text"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
value={values.agent_booked}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.agent_booked && touched.agent_booked
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="agent_booked"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedType">Migration type *</label>
|
||||
<select
|
||||
name="migration_type"
|
||||
type="select"
|
||||
id="bookedType"
|
||||
value={values.migration_type}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_type && touched.migration_type
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_type"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedSource">Original server *</label>
|
||||
<input
|
||||
name="original_server"
|
||||
type="text"
|
||||
id="bookedSource"
|
||||
placeholder="1.2.3.4 / example.com"
|
||||
value={values.original_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.original_server && touched.original_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="original_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</label>
|
||||
<input
|
||||
name="term_date"
|
||||
id="bookedTermDate"
|
||||
type="date"
|
||||
value={values.term_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.term_date && touched.term_date
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="term_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedNotes">Notes</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
id="notes"
|
||||
rows={4}
|
||||
value={values.notes}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.notes && touched.notes ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="notes"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTicket">Ticket ID *</label>
|
||||
<input
|
||||
name="ticket_id"
|
||||
type="text"
|
||||
id="bookedTicket"
|
||||
placeholder="VIP-A1234567"
|
||||
value={values.ticket_id}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.ticket_id && touched.ticket_id ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="ticket_id"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedTime">Timeslot *</label>
|
||||
<select
|
||||
name="booked_time"
|
||||
id="bookedTime"
|
||||
type="select"
|
||||
value={values.booked_time}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.booked_time && touched.booked_time
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-primary mr-2">
|
||||
SEND IT
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleReset}
|
||||
>
|
||||
<option>Select</option>
|
||||
{props["timeslots"].map((slot) => (
|
||||
<option key={`${slot}`}>{slot}</option>
|
||||
))}
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="booked_time"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3 ">
|
||||
<label htmlFor="bookedUsername">cPanel username *</label>
|
||||
<input
|
||||
name="username"
|
||||
type="text"
|
||||
id="bookedUsername"
|
||||
placeholder="example"
|
||||
value={values.username}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.username && touched.username ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="username"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedDestination">New server *</label>
|
||||
<input
|
||||
name="new_server"
|
||||
type="text"
|
||||
id="bookedDestination"
|
||||
placeholder="1.2.3.4 / S111.SYD1"
|
||||
value={values.new_server}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.new_server && touched.new_server
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="new_server"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedBrand">Brand *</label>
|
||||
<select
|
||||
name="brand"
|
||||
type="select"
|
||||
id="bookedBrand"
|
||||
value={values.brand}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.brand && touched.brand ? " is-invalid" : "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>VentraIP</option>
|
||||
<option>Zuver</option>
|
||||
<option>Synergy</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="brand"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedAdditionalDomains">Addon Domains</label>
|
||||
<input
|
||||
name="additional_domains"
|
||||
type="text"
|
||||
id="bookedAdditionalDomains"
|
||||
placeholder="example.com.au,example.net.au"
|
||||
value={values.additional_domains}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.additional_domains && touched.additional_domains
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="additional_domains"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedAgent">Agent Initials *</label>
|
||||
<input
|
||||
name="agent_booked"
|
||||
type="text"
|
||||
id="bookedAgent"
|
||||
placeholder="SZ"
|
||||
value={values.agent_booked}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.agent_booked && touched.agent_booked
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="agent_booked"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-group col s3">
|
||||
<label htmlFor="bookedType">Migration type *</label>
|
||||
<select
|
||||
name="migration_type"
|
||||
type="select"
|
||||
id="bookedType"
|
||||
value={values.migration_type}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.migration_type && touched.migration_type
|
||||
? " is-invalid"
|
||||
: "")
|
||||
}
|
||||
>
|
||||
<option>Select</option>
|
||||
<option>cPanel</option>
|
||||
<option>Plesk</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
<ErrorMessage
|
||||
name="migration_type"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedTermDate">
|
||||
Estimated termination date (internal migrations only)
|
||||
</label>
|
||||
<input
|
||||
name="term_date"
|
||||
id="bookedTermDate"
|
||||
type="date"
|
||||
value={values.term_date}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.term_date && touched.term_date ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="term_date"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="form-group col s4">
|
||||
<label htmlFor="bookedNotes">Notes</label>
|
||||
<textarea
|
||||
name="notes"
|
||||
id="notes"
|
||||
rows={4}
|
||||
value={values.notes}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className={
|
||||
"form-control" +
|
||||
(errors.notes && touched.notes ? " is-invalid" : "")
|
||||
}
|
||||
/>
|
||||
<ErrorMessage
|
||||
name="notes"
|
||||
component="div"
|
||||
className="invalid-feedback"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<button type="submit" className="btn btn-primary mr-2">
|
||||
SEND IT
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
className="btn btn-secondary"
|
||||
onClick={handleReset}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</Form>
|
||||
{respID ? (
|
||||
props.type === "update" ? (
|
||||
<Msgbox msg={respID}></Msgbox>
|
||||
) : (
|
||||
<Msgbox linkid={respID}></Msgbox>
|
||||
)
|
||||
) : null}
|
||||
{error ? <Msgbox error={error}></Msgbox> : null}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
</Form>
|
||||
{respID ? (
|
||||
props.type === "update" ? (
|
||||
<Msgbox msg={respID}></Msgbox>
|
||||
) : (
|
||||
<Msgbox linkid={respID}></Msgbox>
|
||||
)
|
||||
) : null}
|
||||
{error ? <Msgbox error={error}></Msgbox> : null}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <div>Loading</div>;
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user