Performed changes on document layout, and added /book

src/components/App.js

@@ -1,18 +1,16 @@
-import React, { Component } from 'react';
-import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
-
+import React, { Component } from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 
 // Routes
-import Upcoming from './root/Upcoming';
-import Reports from './root/Reports';
-import Historical from './root/Historical';
-
+import Upcoming from "./root/Pages/Upcoming";
+import Reports from "./root/Pages/Reports";
+import Historical from "./root/Pages/Historical";
+import Book from "./root/Pages/Book";
 // Components
-import Home from './root/Home'
-import Navigation from './root/Navigation';
+import Home from "./root/Home";
+import Navigation from "./root/Navigation";
 
 class App extends Component {
-
   render() {
     return (
       <Router>
@@ -20,12 +18,11 @@ class App extends Component {
           <Navigation />
           <Switch>
             <Route exact path="/" component={Home} />
+            <Route exact path="/book" component={Book} />
             <Route exact path="/upcoming-migrations" component={Upcoming} />
             <Route exact path="/reports" component={Reports} />
             <Route exact path="/historical-migrations" component={Historical} />
           </Switch>
-          
-
         </div>
       </Router>
     );

src/components/Migrations/SideMigrations.js

@@ -1,52 +0,0 @@
-import React, { Component } from "react";
-import axios from "axios";
-import ReactTable from "react-table";
-
-import { callAPI } from "../../services/API";
-import SingleSide from "./SingleSide";
-import Error from "../actions/Error";
-//import Table from "./Table";
-
-class SideMigrations extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      sidemigs: [],
-      e: false,
-    };
-  }
-  componentDidMount() {
-    callAPI
-      .get()
-      .then((request) => {
-        this.setState({
-          sidemigs: request.data,
-        });
-      })
-      .catch((error) => {
-        this.setState({
-          error: true,
-        });
-      });
-  }
-
-  render() {
-    const columns = [
-      {
-        Header: "Domain",
-        accessor: "domain",
-      },
-      {
-        Header: "Booked Time",
-        accessor: "booked_time",
-      },
-      {
-        Header: "Status",
-        accessor: "migration_status",
-      },
-    ];
-    return <ReactTable data={this.state.sidemigs} columns={columns} />;
-  }
-}
-
-export default SideMigrations;

src/components/Migrations/SingleSide.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-const SingleSide = ({ item }) => (
-  <div>
-    <div className="divider"></div>
-    <a href={item.url} target="_blank" rel="noreferrer">
-      <div className="section">
-        <table className="centered striped">
-          <tbody>
-            <td>#</td>
-            <td>{item.domain}</td>
-            <td>{item.booked_time}</td>
-            <td>{item.migration_status}</td>
-          </tbody>
-        </table>
-      </div>
-    </a>
-  </div>
-);
-
-export default SingleSide;

src/components/actions/API.js

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export const callAPI = axios.create({
+    baseURL: 'https://devapi.benjamyn.love/migrations/'
+})

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/Migrations.js

@@ -1,9 +1,7 @@
 import React, { Component } from "react";
-import axios from "axios";
 
-import MigrationSingle from "./MigrationSingle";
-import { getMigrations } from "../actions/requests";
-import Error from "../actions/Error";
+import MigrationSingle from "./Migrations/MigrationSingle";
+import Error from "../../actions/Error";
 
 class Migrations extends Component {
   //  constructor(props) {
@@ -66,23 +64,23 @@ class Migrations extends Component {
         <div className="col s6 m4">
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
-              <span className="card-title">Booked Migrations</span>
+              <span className="card-title"></span>
               {this.bookedMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">View all...</a>
+              <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">Waiting Termination</span>
+              <span className="card-title"></span>
               <p></p>
               {this.waitingMig()}
             </div>
             <div className="card-action">
-              <a href="/upcoming-migrations">View all...</a>
+              <a href="/upcoming-migrations">Waiting Termination</a>
             </div>
           </div>
         </div>
@@ -90,11 +88,11 @@ class Migrations extends Component {
         <div className="col s6 m4">
           <div className="card blue-grey darken-1">
             <div className="card-content white-text">
-              <span className="card-title">Completed</span>
+              <span className="card-title"></span>
               {this.completedMig()}
             </div>
             <div className="card-action">
-              <a href="/historical-migrations">View all...</a>
+              <a href="/historical-migrations">Completed</a>
             </div>
           </div>
         </div>

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;