jjvijgen/Demo-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished demo app

Browse Source
This commit is contained in:
Jeroen Vijgen
2020-02-28 16:21:56 +01:00
parent 71c77975f8
commit bead38bb21
12 changed files with 141 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Components/DashboardComponent/Dashboard.tsx
+23 -2
View File
@@ -57,6 +57,7 @@ export default class Dashboard extends React.Component<{
this.getResponseDTO = this.getResponseDTO.bind(this);
this.getGraphEnabled = this.getGraphEnabled.bind(this);
this.setGraph = this.setGraph.bind(this);
this.logOut = this.logOut.bind(this);
this.getItemsFromApi();
}
@@ -69,7 +70,6 @@ export default class Dashboard extends React.Component<{
}
getItemsFromApi() {
// TODO: Connect to ReportingRepository.
this.state.ReportingRepository.Read(this.state.dto).then((res) => {
const response = new RESPONSE_DTO();
response.room_id = res.room_id;
@@ -86,11 +86,27 @@ export default class Dashboard extends React.Component<{
response.total_user_message_count = res.total_user_message_count;
response.total_visitor_message_count = res.total_visitor_message_count;
response.total_missed_chat_count = res.total_missed_chat_count;
response.by_date = res.by_date;
response.by_date = this.sortData(res.by_date);
this.setState({response: response});
});
}
sortData(arr: Array<Object>): Object[] {
// Sort data to coherently display in the Graph & Table.
// eslint-disable-next-line
arr.sort((a: any, b: any) => {
let dateA = new Date(a.date);
let dateB = new Date(b.date);
// Date A is greater than Date B.
if (dateA > dateB) return 1;
// Date A is lesser than Date B.
if (dateA < dateB) return -1;
// Date is eql, for stable sorting.
return 0;
});
return arr;
}
getResponseDTO() {
return this.state.response;
}
@@ -103,6 +119,10 @@ export default class Dashboard extends React.Component<{
this.setState({ showGraph: !this.state.showGraph });
}
logOut() {
this.props.history.push('/');
}
render () {
return (<DashboardView
checkFirstDate={this.checkFirstDate}
@@ -111,6 +131,7 @@ export default class Dashboard extends React.Component<{
getResponseDTO={this.getResponseDTO}
getGraphEnabled={this.getGraphEnabled}
setGraph={this.setGraph}
logOut={this.logOut}
/>)
}
}
src/Components/LoginComponent/Login.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import React from 'react';
import LoginView from '../../Views/LoginView';
import API_DTO from '../../DTOs/api.dto';
import moment from 'moment';
export default class Login extends React.Component<{
history: any
@@ -25,7 +26,7 @@ export default class Login extends React.Component<{
}
verifyLogin() {
localStorage.setItem("lastLoggedIn", new Date().toUTCString());
localStorage.setItem("lastLoggedIn", moment().format('LLLL'));
// eslint-disable-next-line
this.props.history.push({
pathname: '/dashboard',
src/Repositories/ReportingRepository.ts
+1
View File
@@ -10,6 +10,7 @@ export default class ReportingRepository {
headers: {
'Authorization': 'Token ' + t.getApiToken(),
'Access-Control-Allow-Origin': '*',
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
'Accept': 'application/json'
}
});
src/Views/CardView.tsx
+23
View File
@@ -0,0 +1,23 @@
import React from 'react';
import { Card } from 'react-bootstrap';
export default class CardView extends React.Component<{
title: any,
content: any,
cssClassName?: any
}> {
render() {
return (
<div>
<Card>
<Card.Header className={this.props.cssClassName} as="h6">{this.props.title}</Card.Header>
<Card.Body>
<Card.Text>
{ this.props.content }
</Card.Text>
</Card.Body>
</Card>
</div>
);
}
}
src/Views/DashboardView.tsx
+24 -21
View File
@@ -1,9 +1,11 @@
import React from 'react';
import { Container, Row, Col, FormControl, Button, InputGroup, Card } from 'react-bootstrap';
import { Container, Row, Col, FormControl, Button, InputGroup } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSync, faChartLine } from '@fortawesome/free-solid-svg-icons';
import TableView from "./TableView";
import GraphView from "./GraphView";
import CardView from "./CardView";
import UserView from "./UserView";
export default class DashboardView extends React.Component<{
checkFirstDate: any,
@@ -12,6 +14,7 @@ export default class DashboardView extends React.Component<{
getResponseDTO: any,
getGraphEnabled: any,
setGraph: any
logOut: any
}> {
render () {
return (
@@ -20,7 +23,10 @@ export default class DashboardView extends React.Component<{
<Row>
<Col>
<br />
<h3>DASHBOARD</h3>
<h3 className="center">DASHBOARD</h3>
<UserView
logOut={this.props.logOut}
/>
<hr />
</Col>
</Row>
@@ -63,28 +69,25 @@ export default class DashboardView extends React.Component<{
</Row>
<Row>
<Col>
<Card>
<Card.Header as="h6">Total Conversation Count</Card.Header>
<Card.Body>
<Card.Text>{ this.props.getResponseDTO().total_conversation_count }</Card.Text>
</Card.Body>
</Card>
<CardView
title="Total Conversation Count"
content={ this.props.getResponseDTO().total_conversation_count }
cssClassName="bg-card-1"
/>
</Col>
<Col>
<Card>
<Card.Header as="h6">Total User Message Count</Card.Header>
<Card.Body>
<Card.Text>{ this.props.getResponseDTO().total_user_message_count }</Card.Text>
</Card.Body>
</Card>
<CardView
title="Total User Message Count"
content={ this.props.getResponseDTO().total_user_message_count }
cssClassName="bg-card-2"
/>
</Col>
<Col>
<Card>
<Card.Header as="h6">Total Visitor Message Count</Card.Header>
<Card.Body>
<Card.Text>{ this.props.getResponseDTO().total_visitor_message_count }</Card.Text>
</Card.Body>
</Card>
<CardView
title="Total Visitor Message Count"
content={ this.props.getResponseDTO().total_visitor_message_count }
cssClassName="bg-card-3"
/>
</Col>
</Row>
<Row>
@@ -123,7 +126,7 @@ export default class DashboardView extends React.Component<{
<Col>
<br />
<hr />
<h6>Made with ❤ by Jeroen Vijgen </h6>
<h6 className="center">Made with ❤ by Jeroen Vijgen </h6>
</Col>
</Row>
</Container>
src/Views/GraphView.tsx
-14
View File
@@ -18,20 +18,6 @@ export default class GraphView extends React.Component<{
}
parseData(): Array<IData>{
// Sort data to coherently display in the Graph.
// eslint-disable-next-line
this.props.data.sort((a: any, b: any) => {
let dateA = new Date(a.date);
let dateB = new Date(b.date);
let same = dateA.getTime() === dateB.getTime();
// Date is eql, ignore sorting to stablize sorting.
if (same) return 0;
// Date A is greater than Date B.
if (dateA > dateB) return 1;
// Date A is lesser than Date B.
if (dateA < dateB) return -1;
});
// Object needing to be returned:
// { id: "missed_chat_count", data: [{x: int (DATE), y: int (Count)}] }
// { id: "conversation_count", data: [{x: int (DATE), y: int (Count)}] }
src/Views/LoginView.tsx
+3 -1
View File
@@ -1,5 +1,7 @@
import React from 'react';
import { Card, Button, FormControl } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSignInAlt } from '@fortawesome/free-solid-svg-icons';
export default class LoginView extends React.Component<{
persistApiLink: any,
@@ -31,7 +33,7 @@ export default class LoginView extends React.Component<{
onChange={(e: any) => this.props.persistAccessToken(e)}
/>
</Card.Text>
<Button variant="primary" onClick={this.props.verifyLogin}>Login </Button>
<Button variant="primary" onClick={this.props.verifyLogin}>Login <FontAwesomeIcon icon={faSignInAlt} /></Button>
</Card.Body>
{ localStorage.getItem("lastLoggedIn") !== null &&
<Card.Footer className="text-muted">Your last login was { localStorage.getItem("lastLoggedIn") }</Card.Footer>
src/Views/TableView.tsx
+3
View File
@@ -16,6 +16,9 @@ export default class TableView extends React.Component<{
keyField='date'
columns={ this.props.columns }
data={ this.props.data }
striped
hover
condensed
pagination={ paginationFactory({
pageStartIndex: 0,
showTotal: true,
src/Views/UserView.tsx
+16
View File
@@ -0,0 +1,16 @@
import React from 'react';
import { Button } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
export default class UserView extends React.Component<{
logOut: any
}> {
render () {
return (
<span className="center-span">
<b> Hi user123 </b> | Your last login was on: { localStorage.getItem("lastLoggedIn") || "" } | <Button variant="danger" onClick={this.props.logOut}> Log out <FontAwesomeIcon icon={faSignOutAlt} /> </Button>
</span>
);
}
}
src/index.css
+22 -1
View File
@@ -17,7 +17,7 @@ body {
.LoginComponent,
.DashboardComponent {
background-color: white;
background-color: whitesmoke;
border-style: solid;
border-color: #FD4114;
border-radius: 7px;
@@ -29,4 +29,25 @@ body {
.GraphView {
height: 300px;
}
.bg-card-1 {
background-color: #ffc1074d;
}
.bg-card-2 {
background-color: #dc35455c;
}
.bg-card-3 {
background-color: #28a74559;
}
.center {
text-align: center;
}
.center-span {
display: table;
margin: 0 auto;
}