diff --git a/src/components/root/Navigation.js b/src/components/root/Navigation.js
index 3a5121a..0694766 100644
--- a/src/components/root/Navigation.js
+++ b/src/components/root/Navigation.js
@@ -19,9 +19,9 @@ export class Navigation extends Component {
Upcoming Migrations
-
+ {/*
Migrations
-
+ */}
Reports
diff --git a/src/components/root/Pages/Cards.js b/src/components/root/Pages/Cards.js
index a6998ad..c131cb4 100644
--- a/src/components/root/Pages/Cards.js
+++ b/src/components/root/Pages/Cards.js
@@ -6,20 +6,20 @@ import React, { Component } from "react";
class Cards extends Component {
bookedMig() {
- return this.props.migs[0]["booked_count"];
+ return this.props.migs["booked_count"];
}
waitingMig() {
- return this.props.migs[0]["awaitterm_count"];
+ return this.props.migs["awaitterm_count"];
}
completedMig() {
- return this.props.migs[0]["complete_count"];
+ return this.props.migs["complete_count"];
}
missedMig() {
- return this.props.migs[0]["missed_count"];
+ return this.props.migs["missed_count"];
}
render() {
- if (!this.props.migs[0]) {
+ if (!this.props.migs) {
return
;
}
diff --git a/src/components/root/common/Forms/CPanelBooking.js b/src/components/root/common/Forms/CPanelBooking.js
index df7a623..2d345e6 100644
--- a/src/components/root/common/Forms/CPanelBooking.js
+++ b/src/components/root/common/Forms/CPanelBooking.js
@@ -2,23 +2,53 @@ import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import moment from "moment";
import { Col, FormGroup, Row, Container, Label } from "reactstrap";
-import { Formik, Form } from "formik";
+import { Formik, Form, Field } from "formik";
import * as Yup from "yup";
import { Input, Submit } from "formstrap";
import { callAPI } from "../../../actions/API";
+// import FormikFieldDateTimePicker from "./FormikFieldDateTimePicker";
// Main form and POST Request to add migrations
// found at /book under the web hosting migration tab
// Things to add:
// better date time picking.
+
+const timezoneList = {
+ losAngeles: "America/Los_Angeles", // -8:00 (-7)
+ berlin: "Europe/Berlin", // +2:00 (-1)
+ newYork: "America/New_York", // -5:00 (-4)
+ melbourne: "Australia/Melbourne", // +8:00
+ tongatapu: "Pacific/Tongatapu", // +13:00 (+14)
+ djibouti: "Africa/Djibouti", // +3:00
+};
+const timezone = timezoneList.melbourne;
+
const InputValidation = Yup.object().shape({
- domain: Yup.string().min(2, "Too Short!").required("Required"),
+ 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-%]+&?)?$/,
+ "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)$/,
+ "Please enter a valid IPv4 Address"
+ )
+ .required("Please enter a valid IP"),
+ 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)$/,
+ "Please enter a valid IPv4 Address"
+ )
+ .required("Please enter a valid IP"),
});
export const CPanelBooking = () => {
const initialValues = {
submit_time: moment().format("YYYY-MM-DD"),
+ dateTime: "2019-03-11T12:00:00.000Z",
};
const onSubmit = async (values, { setSubmitting, resetForm }) => {
@@ -56,6 +86,18 @@ export const CPanelBooking = () => {
/>
+ {/*
+
+ */}
diff --git a/src/components/root/common/Forms/FormikFieldDateTimePicker.js b/src/components/root/common/Forms/FormikFieldDateTimePicker.js
new file mode 100644
index 0000000..af2919b
--- /dev/null
+++ b/src/components/root/common/Forms/FormikFieldDateTimePicker.js
@@ -0,0 +1,113 @@
+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 (
+ 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;
diff --git a/src/components/root/common/Forms/ReportSingleMigration.js b/src/components/root/common/Forms/ReportSingleMigration.js
index 62509d6..f7c64fd 100644
--- a/src/components/root/common/Forms/ReportSingleMigration.js
+++ b/src/components/root/common/Forms/ReportSingleMigration.js
@@ -92,6 +92,18 @@ const ReportSingleMigration = ({ item }) => {
+
+
+
+
+
+
diff --git a/src/components/root/common/Tables/HistoricalSingle.js b/src/components/root/common/Tables/HistoricalSingle.js
index 68eb813..dc346e4 100644
--- a/src/components/root/common/Tables/HistoricalSingle.js
+++ b/src/components/root/common/Tables/HistoricalSingle.js
@@ -80,26 +80,41 @@ const HistoricalSingle = () => {
};
const columns = [
{ dataField: "id", text: "ID", hidden: true },
- { dataField: "submit_time", text: "Submit Time", sort: true },
+ { dataField: "brand", text: "Brand", sort: true },
+ { dataField: "migration_status", text: "Status", sort: true },
+ {
+ dataField: "ticket_id",
+ text: "TicketID",
+ sort: true,
+ formatter: (cell, row) => (
+
+ {" "}
+ {cell}{" "}
+
+ ),
+ },
+ { dataField: "booked_date", text: "Booked Date", sort: true },
+ { dataField: "booked_time", text: "Booked Time", sort: true },
+ { dataField: "agent_booked", text: "Agent initials", sort: true },
{
dataField: "domain",
text: "Domain",
sort: true,
formatter: (cell, row) => {cell} ,
},
- { dataField: "booked_date", text: "Booked Date", sort: true },
- { dataField: "booked_time", text: "Booked Time", sort: true },
+ { dataField: "additional_domains", text: "Additional Domains", sort: true },
+ { dataField: "username", text: "Username", sort: true },
+ { dataField: "migration_type", text: "Type", sort: true },
{ dataField: "original_server", text: "Original Server", sort: true },
{ dataField: "new_server", text: "New Server", sort: true },
- { dataField: "username", text: "Username", sort: true },
- { dataField: "brand", text: "Brand", sort: true },
- { dataField: "ticket_id", text: "TicketID", sort: true },
{ dataField: "migration_status", text: "Status", sort: true },
- { dataField: "agent_booked", text: "Agent initials", sort: true },
- { dataField: "additional_domains", text: "Additional Domains", sort: true },
- { dataField: "migration_type", text: "Type", sort: true },
{ dataField: "term_date", text: "Termination Date", sort: true },
{ dataField: "notes", text: "Notes", sort: true },
+ { dataField: "submit_time", text: "Submit Time", sort: true },
{
dataField: "report",
text: "Show Detailed Report",
diff --git a/src/components/root/common/Tables/UpcomingSingle.js b/src/components/root/common/Tables/UpcomingSingle.js
index c3b2236..c029462 100644
--- a/src/components/root/common/Tables/UpcomingSingle.js
+++ b/src/components/root/common/Tables/UpcomingSingle.js
@@ -81,33 +81,47 @@ const UpcomingSingle = () => {
};
const columns = [
{ dataField: "id", text: "ID", hidden: true },
- { dataField: "submit_time", text: "Submit Time", sort: true },
+ { dataField: "brand", text: "Brand", sort: true },
+ { dataField: "migration_status", text: "Status", sort: true },
+ {
+ dataField: "ticket_id",
+ text: "TicketID",
+ sort: true,
+ formatter: (cell, row) => (
+
+ {" "}
+ {cell}{" "}
+
+ ),
+ },
+ { dataField: "booked_date", text: "Booked Date", sort: true },
+ { dataField: "booked_time", text: "Booked Time", sort: true },
+ { dataField: "agent_booked", text: "Agent initials", sort: true },
{
dataField: "domain",
text: "Domain",
sort: true,
formatter: (cell, row) => {cell} ,
},
- { dataField: "booked_date", text: "Booked Date", sort: true },
- { dataField: "booked_time", text: "Booked Time", sort: true },
+ { dataField: "additional_domains", text: "Additional Domains", sort: true },
+ { dataField: "username", text: "Username", sort: true },
+ { dataField: "migration_type", text: "Type", sort: true },
{ dataField: "original_server", text: "Original Server", sort: true },
{ dataField: "new_server", text: "New Server", sort: true },
- { dataField: "username", text: "Username", sort: true },
- { dataField: "brand", text: "Brand", sort: true },
- { dataField: "ticket_id", text: "TicketID", sort: true },
{ dataField: "migration_status", text: "Status", sort: true },
- { dataField: "agent_booked", text: "Agent initials", sort: true },
- { dataField: "additional_domains", text: "Additional Domains", sort: true },
- { dataField: "migration_type", text: "Type", sort: true },
{ dataField: "term_date", text: "Termination Date", sort: true },
{ dataField: "notes", text: "Notes", sort: true },
+ { dataField: "submit_time", text: "Submit Time", sort: true },
{
dataField: "report",
text: "Show Detailed Report",
formatter: (cell, row) => {cell} ,
},
];
-
useEffect(() => {
getListData();
}, []);