diff --git a/package.json b/package.json index 6db9e9b6bb72e014dc126412827c92b081148f20..928aefa348e02d9c32939c740eb36ecb64dba129 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "react": "^15.3.2", "react-dom": "^15.3.2", "react-highcharts": "^11.5.0", + "react-json-tree": "^0.10.9", "react-redux": "^4.4.5", "react-router": "^3.0.0", "react-router-redux": "^4.0.7", diff --git a/src/components/AuditDataTable/index.js b/src/components/AuditDataTable/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4a818ba238cae83d34c072703606b17e7287d458 --- /dev/null +++ b/src/components/AuditDataTable/index.js @@ -0,0 +1,138 @@ +import React, { Component } from 'react'; +import 'whatwg-fetch'; +import JSONTree from 'react-json-tree'; +import './styles.css'; + +class AuditDataTable extends Component { + constructor(props) { + super(props); + this.state = { + auditData: [], + error: false, + errorMessage: '', + }; + } + + componentDidMount() { + this.getAuditData(); + } + + getAuditData = () => { + const url = process.env.REACT_APP_COUCH_DB_URL; + fetch(`${url}_all_docs?include_docs=true`, { + method: 'GET', + }).then((res) => { + res.json().then((jsonData) => { + const parsedData = this.parseAuditData(jsonData.rows, null); + this.setState({ + auditData: parsedData, + }); + }); + }).catch((err) => { + this.setState({ + error: true, + errorMessage: err, + }); + }); + } + + parseAuditData = (auditData, parentId) => { + if (auditData.length === 0) { + return []; + } + const childrenList = []; + const grandChildrenList = auditData.filter((val) => { + if (val.doc.parent_id === undefined || val.doc.parent_id === parentId) { + childrenList.push(val); + return false; + } + return true; + }); + return childrenList.map(val => ( + { + ...val.doc, + array: this.parseAuditData(grandChildrenList, val.id), + } + )); + } + + render() { + const { auditData, error } = this.state; + + if (error) { + return ( +
+ {this.state.errorMessage} +
+ ); + } + + if (!auditData || auditData.length === 0) { + return
None
; + } + + const theme = { + scheme: 'grayscale', + author: 'alexandre gavioli (https://github.com/alexx2/)', + base00: '#101010', + base01: '#252525', + base02: '#464646', + base03: '#525252', + base04: '#ababab', + base05: '#b9b9b9', + base06: '#e3e3e3', + base07: '#f7f7f7', + base08: '#7c7c7c', + base09: '#999999', + base0A: '#a0a0a0', + base0B: '#8e8e8e', + base0C: '#868686', + base0D: '#686868', + base0E: '#747474', + base0F: '#5e5e5e', + }; + /* eslint-disable jsx-a11y/no-static-element-interactions */ + const auditDataItems = auditData.map(building => + ( + + {building.address1} + {building.city} + {building.state} + {building.postalCode} + {building.projectENG} + {building.description} + {building.projectId} + + + ), + ); + + return ( +
+ + + + + + + + + + + + + + + {auditDataItems} + +
AddressCityStatePostal CodeProject EngineerDescriptionProject IDData
+
+ ); + } +} + +export default AuditDataTable; diff --git a/src/components/AuditDataTable/styles.css b/src/components/AuditDataTable/styles.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js index 874bc241c2c7c179b25fdc0ec2282c1b3e792b1c..57f40553118ac044e0e2ec9def907762dd0a04e3 100644 --- a/src/components/NavBar/index.js +++ b/src/components/NavBar/index.js @@ -37,6 +37,18 @@ export default function NavBar({ SearchBar }) { {SearchBar ? :
} + + + diff --git a/src/routes.js b/src/routes.js index 6313f7d4f00e4ab3448f762c5c1bbf8334260f68..24100b344b7368b5c84da04f94bc4b058e37dba0 100644 --- a/src/routes.js +++ b/src/routes.js @@ -6,6 +6,7 @@ import { requireAuth, redirectIfLoggedIn } from './utils/auth'; import Login from './screens/Login'; import NotFound from './screens/NotFound'; import HomePage from './screens/HomePage'; +import AuditPage from './screens/AuditPage'; import DetailPage from './screens/DetailPage'; import BuildingOverview from './components/BuildingOverview'; import Project from './components/Project'; @@ -16,6 +17,9 @@ export default ( + + + diff --git a/src/screens/AuditPage/index.js b/src/screens/AuditPage/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2edb1dc40def214da7c68adb9a8c2902e673712 --- /dev/null +++ b/src/screens/AuditPage/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import NavBar from '../../components/NavBar'; +import AuditDataTable from '../../components/AuditDataTable'; + +function AuditPage() { + return ( +
+ + +
+ ); +} + +AuditPage.propTypes = {}; + +function mapStateToProps() { + return {}; +} + +export default connect(mapStateToProps)(AuditPage); diff --git a/src/screens/AuditPage/styles.css b/src/screens/AuditPage/styles.css new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391