Performed changes on document layout, and added /book

src/components/root/Dashboard.js

@@ -1,12 +0,0 @@
-import React, { Component } from 'react'
-
-
-export default class Dashboard extends Component {
-    render() {
-        return (
-            <div>
-                
-            </div>
-        )
-    }
-}

src/components/root/Home.js

@@ -1,10 +1,9 @@
 import React, { Component } from "react";
 
-import { getMigrations } from "../actions/requests";
-import { callAPI } from "../../services/API";
-import Migrations from "../Migrations/Migrations";
+import { callAPI } from "../actions/API";
+import Migrations from "./Pages/Migrations";
 import Error from "../actions/Error";
-import SideMigrations from "../Migrations/SideMigrations";
+import SideMigrations from "./Pages/Migrations/SideMigrations";
 
 export class Home extends Component {
   constructor(props) {
@@ -31,15 +30,33 @@ export class Home extends Component {
   }
   render() {
     return (
-      <div className="row">
-        <div className="col s8">
-          <Migrations migs={this.state.migs} />
-        </div>
-        <div className="col s4">
-          <h3>
-            Side Migrations goes here
-            <SideMigrations migs={this.state.migs} />
-          </h3>
+      <div className="container">
+        <div className="row">
+          <div className="divider"></div>
+
+          <div className="section">
+            <div className="col s6">
+              <Migrations migs={this.state.migs} />
+            </div>
+            <div className="col s6">
+              <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+                quis est vitae sapien venenatis viverra. Suspendisse bibendum
+                tristique est, et gravida neque porta ut. Pellentesque egestas
+                vehicula nulla eu aliquet. Morbi id lacus eget lorem aliquam
+                ornare. Vivamus pulvinar ligula sapien, ut pulvinar eros
+                sollicitudin sodales. Donec sed ipsum sit amet mauris posuere
+                maximus. Aenean finibus turpis eu urna suscipit venenatis.
+              </p>
+            </div>
+            <div className="divider"></div>
+            <div className="section">
+              <div className="col s12">
+                <SideMigrations />
+              </div>
+            </div>
+            <div className="divider"></div>
+          </div>
         </div>
       </div>
     );

src/components/root/Navigation.js

@@ -1,23 +1,36 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom';
+import React, { Component } from "react";
+import { Link } from "react-router-dom";
 
 export class Navigation extends Component {
-    render() {
-        return (
-            <nav>
-                <div className="navbar-fixed">
-                    <div className="nav-wrapper">
-                        <ul className="left hide-on-med-and-down">
-                            <li><Link className="active" to="/">Dashboard</Link></li>
-                            <li><Link to="/upcoming-migrations">Upcoming Migrations</Link></li>
-                            <li><Link to="/reports">Reports</Link></li>
-                            <li><Link to="/historical-migrations">Historical Migrations</Link></li>
-                        </ul>
-                    </div>
-                </div>
-            </nav>
-        )
-    }
+  render() {
+    return (
+      <nav>
+        <div className="navbar-fixed">
+          <div className="nav-wrapper">
+            <ul className="left hide-on-med-and-down">
+              <li>
+                <Link className="active" to="/">
+                  Dashboard
+                </Link>
+              </li>
+              <li class="active">
+                <Link to="/book">Book</Link>
+              </li>
+              <li>
+                <Link to="/upcoming-migrations">Upcoming Migrations</Link>
+              </li>
+              <li>
+                <Link to="/reports">Reports</Link>
+              </li>
+              <li>
+                <Link to="/historical-migrations">Historical Migrations</Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+    );
+  }
 }
 
-export default Navigation
+export default Navigation;

src/components/root/Pages/Book.js

@@ -0,0 +1,13 @@
+import React, { Component } from "react";
+
+import FormPage from "./Forms/FormPage";
+
+export default class Book extends Component {
+  render() {
+    return (
+      <div>
+        <FormPage />
+      </div>
+    );
+  }
+}

src/components/root/Pages/Forms/FormPage.js

@@ -0,0 +1,158 @@
+import React, { Component } from "react";
+import {
+  Container,
+  Col,
+  Form,
+  FormGroup,
+  Label,
+  Input,
+  FormText,
+  Button,
+  Row,
+} from "reactstrap";
+import PropTypes from "prop-types";
+import "bootstrap/dist/css/bootstrap.min.css";
+
+const FormPage = () => {
+  return (
+    <Form>
+      <Container>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDate">Date</Label>
+              <Input type="date" name="date" id="bookedDate" />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedTime">Timeslot</Label>
+              <Input type="select" name="select" id="bookedTime">
+                <option>00:00-09:00</option>
+                <option>09:00-12:00</option>
+                <option>12:00-18:00</option>
+                <option>18:00-00:00</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDomain">Domain</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedDomain"
+                placeholder="example.com.au"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedUsername">cPanel username</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedUsername"
+                placeholder="example"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedSource">Original server</Label>
+              <Input
+                type="number"
+                name="number"
+                id="bookedSource"
+                placeholder="1.2.3.4"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedDestination">New server</Label>
+              <Input
+                type="number"
+                name="number"
+                id="bookedDestination"
+                placeholder="1.2.3.4"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label for="bookedBrand">Brand</Label>
+              <Input type="select" name="select" id="bookedBrand">
+                <option>VentraIP</option>
+                <option>Zuver</option>
+                <option>Synergy</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedTicket">Ticket ID</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedTicket"
+                placeholder="VIP-A1234567"
+              />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedType">Migration type</Label>
+              <Input type="select" name="select" id="bookedType">
+                <option>cPanel</option>
+                <option>Plesk</option>
+                <option>Other</option>
+              </Input>
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label for="bookedAgent">Agent Initials</Label>
+              <Input
+                type="text"
+                name="text"
+                id="bookedAgent"
+                placeholder="SZ"
+              />
+            </FormGroup>
+          </Col>
+        </Row>
+        <FormGroup>
+          <Label for="bookedAdditionalDomains">Addon Domains</Label>
+          <Input
+            type="text"
+            name="text"
+            id="bookedAdditionalDomains"
+            placeholder="example.com.au,example.net.au"
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <Label for="bookedTermDate">
+            Estimated termination date (internal migrations only)
+          </Label>
+          <Input type="date" name="date" id="bookedTermDate" />
+        </FormGroup>
+        <FormGroup>
+          <Label for="bookedNotes">Notes</Label>
+          <Input type="textarea" name="text" id="notes" />
+        </FormGroup>
+        <Button>Submit</Button>
+      </Container>
+    </Form>
+  );
+};
+export default FormPage;
+
+{
+  /* <Button>Submit</Button> */
+}

src/components/root/Pages/Functionality/Table.js

@@ -0,0 +1,44 @@
+import DataGrid from 'react-data-grid';
+import 'react-data-grid/dist/react-data-grid.css';
+
+const columns = [
+  { key: 'id', name: 'ID' },
+  { key: 'title', name: 'Title' }
+];
+
+const rows = [
+  { id: 0, title: 'Example' },
+  { id: 1, title: 'Demo' },
+  { id: 3, title: 'Example' },
+  { id: 4, title: 'Demo' },
+  { id: 5, title: 'Example' },
+  { id: 6, title: 'Demo' },
+  { id: 7, title: 'Example' },
+  { id: 8, title: 'Demo' },
+  { id: 9, title: 'Demo' },
+  { id: 10, title: 'Example' },
+  { id: 11, title: 'Demo' },
+  { id: 12, title: 'Example' },
+  { id: 13, title: 'Demo' },
+  { id: 14, title: 'Example' },
+  { id: 15, title: 'Demo' },
+  { id: 16, title: 'Demo' },
+  { id: 17, title: 'Example' },
+  { id: 18, title: 'Demo' },
+  { id: 19, title: 'Example' },
+  { id: 20, title: 'Demo' },
+  { id: 21, title: 'Example' },
+  { id: 22, title: 'Demo' }
+];
+
+function Table() {
+  return (
+    <DataGrid
+      columns={columns}
+      rows={rows}
+      rowsGetter={this.state.sidemigs.domain}
+      rowsCount={20}
+    />
+  );
+}
+export default Table;

src/components/root/Pages/Migrations.js

@@ -0,0 +1,104 @@
+import React, { Component } from "react";
+
+import MigrationSingle from "./Migrations/MigrationSingle";
+import Error from "../../actions/Error";
+
+class Migrations extends Component {
+  //  constructor(props) {
+  //    super(props);
+  //    this.state = {
+  //      migs: [],
+  //      migs1: [],
+  //      error: false,
+  //    };
+  //  }
+  //
+  //  componentDidMount() {
+  //    const url = `https://devapi.benjamyn.love/migrations/`;
+  //
+  //    axios
+  //      .get(url)
+  //      .then((response) => {
+  //        this.setState({
+  //          migs: response.data,
+  //          migs1: response.data.migration_status,
+  //        });
+  //      })
+  //
+  //      .catch((error) => {
+  //        this.setState({
+  //          error: true,
+  //        });
+  //      });
+  //  }
+
+  renderItems() {
+    if (!this.props.error) {
+      return this.props.migs.map((item) => (
+        <MigrationSingle key={item.id} item={item} />
+      ));
+    } else {
+      return <Error />;
+    }
+  }
+
+  bookedMig() {
+    return this.props.migs.filter(
+      (booked) => booked.migration_status === "Booked"
+    ).length;
+  }
+  waitingMig() {
+    return this.props.migs.filter(
+      (waiting) => waiting.migration_status === "Waiting Termination"
+    ).length;
+  }
+  completedMig() {
+    return this.props.migs.filter(
+      (complete) => complete.migration_status === "Completed"
+    ).length;
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="col s6 m4">
+          <div className="card blue-grey darken-1">
+            <div className="card-content white-text">
+              <span className="card-title"></span>
+              {this.bookedMig()}
+            </div>
+            <div className="card-action">
+              <a href="/upcoming-migrations">Booked Migrations</a>
+            </div>
+          </div>
+        </div>
+        <div className="col s6 m4">
+          <div className="card blue-grey darken-1">
+            <div className="card-content white-text">
+              <span className="card-title"></span>
+              <p></p>
+              {this.waitingMig()}
+            </div>
+            <div className="card-action">
+              <a href="/upcoming-migrations">Waiting Termination</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="col s6 m4">
+          <div className="card blue-grey darken-1">
+            <div className="card-content white-text">
+              <span className="card-title"></span>
+              {this.completedMig()}
+            </div>
+            <div className="card-action">
+              <a href="/historical-migrations">Completed</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Migrations;

src/components/root/Pages/Migrations/MigrationSingle.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const MigrationSingle = ({ item }) => (
+  <div className="col s4 m4">
+    <div className="card-panel">
+      <div className="card-content black-text">
+        <ul className="collection with-header">
+          <li className="collection-header">
+            <a href={item.id}>
+              <p>{item.migration_status}</p>
+            </a>
+          </li>
+          <li className="collection-item">{item.domain}</li>
+          <li className="collection-item">{item.booked_time}</li>
+          <li className="collection-item">{item.migration_status}</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+);
+
+export default MigrationSingle;

src/components/root/Pages/Migrations/SideMigrations.js

@@ -0,0 +1,48 @@
+import React, { Component } from "react";
+
+import { callAPI } from "../../../actions/API";
+import { SingleSide } from "./SingleSide";
+import Error from "../../../actions/Error";
+
+class SideMigrations extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      e: false,
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("booked/")
+      .then((request) => {
+        this.setState({
+          sidemigs: request.data,
+        });
+      })
+      .catch((e) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+
+  renderItems() {
+    if (!this.state.e) {
+      return this.state.sidemigs.map((data) => (
+        <SingleSide key={data.id} data={data} />
+      ));
+    } else {
+      return <Error />;
+    }
+  }
+
+  render() {
+    return <SingleSide data={this.state.sidemigs} />;
+  }
+}
+
+export default SideMigrations;
+
+//return <div className="row">{this.renderItems()}</div>;
+//

src/components/root/Pages/Migrations/SingleSide.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
+import "../../../../react-bootstrap-table.css";
+
+export const SingleSide = ({ data }) => {
+  return (
+    <div>
+      <BootstrapTable data={data} height="100%" striped hover condensed>
+        <TableHeaderColumn isKey dataField="domain" width="45%">
+          Domain
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="booked_time" width="35%">
+          Booked Time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_status" width="20%">
+          Status
+        </TableHeaderColumn>
+      </BootstrapTable>
+    </div>
+  );
+  //
+};
+{
+}

src/components/root/Pages/Migrations/UpcomingSingle.js

@@ -0,0 +1,89 @@
+import React from "react";
+import { BootstrapTable, TableHeaderColumn } from "react-bootstrap-table";
+import "../../../../../node_modules/react-bootstrap-table/dist/react-bootstrap-table-all.min.css";
+
+export const UpcomingSingle = ({ data }) => {
+  return (
+    <div>
+      <BootstrapTable
+        data={data}
+        height="100%"
+        striped
+        hover
+        condensed
+        pagination
+        version="4"
+      >
+        <TableHeaderColumn isKey dataField="submit_time" width="45%">
+          Submit time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="domain" width="35%">
+          Domain
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="booked_time" width="20%">
+          Booked time
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="original_server" width="20%">
+          Original server
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="new_server" width="20%">
+          New server
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="username" width="20%">
+          Username
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="notes" width="35%">
+          Notes
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="brand" width="20%">
+          Brand
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="ticket_id" width="20%">
+          Ticket ID
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_status" width="20%">
+          Status
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="agent_booked" width="20%">
+          Agent
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="additional_domains" width="35%">
+          Additional Domains
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_type" width="20%">
+          Migration type
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="term_date" width="20%">
+          est. Terminaton Date
+        </TableHeaderColumn>
+        <TableHeaderColumn dataField="migration_cmd" width="20%">
+          Migration CMD
+        </TableHeaderColumn>
+      </BootstrapTable>
+    </div>
+  );
+  //
+};
+{
+}
+
+{
+  /* <BootstrapTable data={data} pagination striped hover condensed>
+<TableHeaderColumn isKey dataField="domain">
+  Domain
+</TableHeaderColumn>
+
+<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
+
+<TableHeaderColumn dataField="domain">Domain</TableHeaderColumn>
+<TableHeaderColumn dataField="booked_time">
+  Booked Time
+</TableHeaderColumn>
+<TableHeaderColumn
+  dataField="migration_status"
+  filter={{ type: "TextFilter", delay: 1000 }}
+>
+  Status
+</TableHeaderColumn>
+</BootstrapTable> */
+}

src/components/root/Pages/Upcoming.js

@@ -0,0 +1,62 @@
+import React, { Component } from "react";
+
+import { callAPI } from "../../actions/API";
+import { UpcomingSingle } from "./Migrations/UpcomingSingle";
+import Error from "../../actions/Error";
+
+class Upcoming extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      sidemigs: [],
+      e: false,
+    };
+  }
+  componentDidMount() {
+    callAPI
+      .get("all/")
+      .then((request) => {
+        this.setState({
+          sidemigs: request.data,
+        });
+      })
+      .catch((e) => {
+        this.setState({
+          error: true,
+        });
+      });
+  }
+
+  renderItems() {
+    if (!this.state.e) {
+      return this.state.sidemigs.map((data) => (
+        <UpcomingSingle key={data.id} data={this.state.sidemigs} />
+      ));
+    } else {
+      return <Error />;
+    }
+  }
+
+  render() {
+    return (
+      <div className="row">
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12"></div>
+        </div>
+        <div className="divider"></div>
+        <div className="section">
+          <div className="col s12">
+            <UpcomingSingle data={this.state.sidemigs} />
+          </div>
+        </div>
+        <div className="divider"></div>
+      </div>
+    );
+  }
+}
+
+export default Upcoming;
+{
+  /* <UpcomingSingle data={this.state.sidemigs} /> */
+}

src/components/root/Upcoming.js

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Upcoming = () => {
-    return (
-        <h1>Upcoming</h1>
-    );
-}
-
-export default Upcoming;